app页⾯配置与后端交互⽅式_使⽤Vue.js和Flask实现全栈单
页⾯应⽤
本⽂分享⾃众成翻译，介绍了⼀个将热门前端技术 Vue.js 与流⾏ Python 后端框架 Flask 结合的简单⽰例。推荐有兴趣采⽤类似技术栈的同学看看。
译者：枫林
preference的意思在本教程中，我将向⼤家展⽰如何使⽤前端的 Vue.js 单页⾯应⽤和后端的 Flask 进⾏交互。
如果你只是想使⽤ Vue.js 库和 Flask 模板基本上是没什么问题的。但...好吧，其实还是有⼀个⽐较显⽽易见的问题：跟 Vue.js ⼀
样，Jinji(模板引擎)也是使⽤双⼤括号来渲染页⾯，但已经有⼀个很好的解决⽅案 在这⾥ 了。
我想要⼀个跟上⾯⽅案有点不同的例⼦。如果我要⼀个⽤ Vue.js(使⽤单页⾯组件，在 vue-router 开启 HTML5 history 模式，还有使⽤其他⼀些⾮常棒的特性)框架的单页⾯和 Flask 做后台服务的应⽤？应该能按下⾯的要求⼯作：源代码云门
Flask运⾏的服务可以访问 index.html ⾸页和 Vue.js 应⽤
在前端开发环境，使⽤ Webpack 和它提供的很多⾮常棒的功能
可以从前端的单页⾯应⽤访问 Flask 的 API 接⼝
以 Node.js 服务运⾏的前端开发环境同样也可以访问 API 接⼝
这看起来很有趣，不是吗？那就让我们开始吧。
你可以在github上查看所有的源代码：
客户端
我⽤ vue-cli 命令⾏⼯具搭建起 Vue.js 的基础框架。如果你还没有安装，可以运⾏：
$ npm install -g vue-cli
客户端和后端代码将会放到不同的⽂件夹下，初始化前端部分执⾏如下操作：
$ mkdir flaskvuespringmvc的机制
$ cd flaskvue
$ vue init webpack frontend
以下是我通过安装向导的项⽬设置：
Vue build — Runtime only (Vue 构建的版本 - 运⾏时)
Install vue-router? — Yes (安装 vue-router？ - 是)
Use ESLint to lint your code? — Yes (使⽤ ESLint 校验你的代码？ - 是)
Pick an ESLint preset — Standard (选择 ESList 的预置版本 - 标准)
Setup unit tests with Karma + Mocha? — No (使⽤ Karma + Mocha 设置单元测试？ - 否)
Setup e2e tests with Nightwatch? — No (使⽤ Nightwatch 设置端到端测试？ - 否)
下⼀步：
$ cd frontend
$ npm install
# after installation
$ npm run dev
现在你可以开始设置 Vue.js 应⽤了。让我们先来添加些页⾯吧。
添加 Home.vue 和 About.vue 到 frontend/src/components ⽂件夹。像如下简单添加些内容：
// Home.vue
Home pagep>
div>
template>
和
// About.vue
Aboutp>
div>
template>
我们将在本地验证它们(通过地址栏访问)。现在我们要改变 frontend/src/router/index.js ⽂件去⼀个个渲染我们的新组件：
import Vue from 'vue'
import Router from 'vue-router'
const routerOptions = [
{ path: '/', component: 'Home' },
{ path: '/about', component: 'About' }
]
const routes = routerOptions.map(route => {
return {
...route,
component: () => import(`@/components/${routeponent}.vue`)
}
})
Vue.use(Router)
export default new Router({
routes,
mode: 'history'
})
现在如果输⼊ localhost:8080 和 localhost:8080/about 你应该看到相应的页⾯。
在我们构建⽣成项⽬静态资源前还需要修改它们的输出路径。在 frontend/config/index.js 到下⾯的两⾏西宁少儿编程培训机构
index: solve(__dirname, '../dist/index.html'),
assetsRoot: solve(__dirname, '../dist'),
然后成改如下内容
index: solve(__dirname, '../../dist/index.html'),
assetsRoot: solve(__dirname, '../../dist'),
所以，包含 html/css/js 静态资源包的 /dist ⽂件夹和 /frontend 在同⼀级⽬录下。现在你可以运⾏ $ npm run build 去构建项⽬了
后端
Flask 后端，我将使⽤ 3.6 版本的 python。在根⽬录 /flaskvue ⽂件夹下为后端代码和初始化虚拟环境创建新的⼦⽬录：
$ mkdir backend
$ cd backend
$ virtualenv -p python3 venv
开启虚拟环境执⾏(mac系统)：
$ source venv/bin/activate
在 Windows 上开启请看这⾥ docs。
在虚拟环境中安装 Flask 如下：
(venv) pip install Flask
现在让我们开始写 Flask 服务器端代码。在根⽬录下创建 run.py ⽂件：
(venv) cd ..
(venv) touch run.py
然后添加以下代码到这个⽂件：
from flask import Flask, render_template
app = Flask(__name__,
static_folder = "./dist/static",
template_folder = "./dist")
@ute('/')
def index():
return render_template("index.html")
上⾯的代码和 Flask ⼊门教程 “Hello world” 上的代码稍有不同。最主要的不同点在于我们详细指明了前端的静态和模板⽂件夹输出
python入门教程app
到 /dist ⽂件夹。然后在根⽬录下运⾏ Flask 服务。
(venv) FLASK_APP=run.py FLASK_DEBUG=1 flask run
这将会在 localhost:5000 开启⼀个后台服务。 FLASK_APP 指向服务启动⽂件， FLASK_DEBUG=1 将会以调试模式运⾏。如果没有错误，你将会看到熟悉的⾸页，这样，服务器就成功运⾏ Vue 应⽤了。
与此同时如果你试图访问 /about 页⾯将会出现⼀个错误。Flask 会抛出⼀个不到请求地址的错误。实际上是因为在 vue-router ⽤了HTML5 的 history 模式, 所以我们需要配置我们的后台服务去重定向所有的路由都跳转到 index.html 上。这在 Flask 上可以很简单做到。做如下修改：
@ute('/', defaults={'path': ''})
@ute('/')
def catch_all(path):
return render_template("index.html")
现在地址 localhost:5000/about 将会重定向到 index.html 和 vue-router 将会在它⾃⼰内部处理。
秋天的边框图片
添加 404 页⾯
因为在我们的后台服务⾥设置捕捉所有路由是⾮常困难的，所以我们⽤ Flask 捕捉 404 错误会重定向所有请求到 index.html(连同不存在的页⾯)。在 Vue.js 应⽤⾥处理未定义的路由。当然，所有的⼯作均可在我们的路由⽂件设置。
在 frontend/src/router/index.js 增加⼀⾏：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。