译者:枫林
链接:http://www.zcfy.cc/article/4491
在本教程中,我将向大家展示如何使用前端的 vue.js 单页面应用和后端的 Flask 进行交互。
如果你只是想使用 vue.js 库和 Flask 模板基本上是没什么问题的。但...好吧,其实还是有一个比较显而易见的问题:跟 Vue.js 一样,Jinji(模板引擎)也是使用双大括号来渲染页面,但已经有一个很好的解决方案 在这里 了。
我想要一个跟上面方案有点不同的例子。如果我要一个用 Vue.js(使用单页面组件,在
开启 html5 history 模式,还有使用其他一些非常棒的特性)框架的单页面和 Flask 做后台服务的应用?应该能按下面的要求工作:
- vue-router
首页和 Vue.js 应用
- index.html
这看起来很有趣,不是吗?那就让我们开始吧。
你可以在github上查看所有的源代码:
https://github.com/oleg-agapov/flask-vue-spa
我用 vue-cli 命令行工具搭建起 Vue.js 的基础框架。如果你还没有安装,可以运行:
- $ npm install -g vue-cli
客户端和后端代码将会放到不同的文件夹下,初始化前端部分执行如下操作:
- $ mkdir flaskvue
- $ cd flaskvue
- $ vue init webpack frontend
以下是我通过安装向导的项目设置:
下一步:
- $ 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/${route.component}.vue`)
- }
- })
- Vue.use(Router)
- export default new Router({
- routes,
- mode: 'history'
- })
现在如果输入
和
- localhost:8080
你应该看到相应的页面。
- localhost:8080/about
在我们构建生成项目静态资源前还需要修改它们的输出路径。在
找到下面的两行
- frontend/config/index.js
- index: path.resolve(__dirname, '../dist/index.html'),
- assetsRoot: path.resolve(__dirname, '../dist'),
然后成改如下内容
- index: path.resolve(__dirname, '../../dist/index.html'),
- assetsRoot: path.resolve(__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')
- @app.route('/')
- def index():
- return render_template('index.html')
上面的代码和 Flask 入门教程 “Hello world” 上的代码稍有不同。最主要的不同点在于我们详细指明了前端的静态和模板文件夹输出到
文件夹。然后在根目录下运行 Flask 服务。
- /dist
- (venv) FLASK_APP=run.py FLASK_DEBUG=1 flask run
这将会在
开启一个后台服务。
- localhost:5000
指向服务启动文件,
- FLASK_APP
将会以调试模式运行。如果没有错误,你将会看到熟悉的首页,这样,服务器就成功运行 Vue 应用了。
- FLASK_DEBUG=1
与此同时如果你试图访问
页面将会出现一个错误。Flask 会抛出一个找不到请求地址的错误。实际上是因为在
- /about
用了 HTML5 的 history 模式, 所以我们需要配置我们的后台服务去重定向所有的路由都跳转到
- vue-router
上。这在 Flask 上可以很简单做到。做如下修改:
- index.html
- @app.route('/', defaults={'path': ''})
- @app.route('/')
- def catch_all(path):
- return render_template('index.html')
现在地址
将会重定向到
- localhost:5000/about
和
- index.html
将会在它自己内部处理。
- vue-router
因为在我们的后台服务里设置捕捉所有路由是非常困难的,所以我们用 Flask 捕捉 404 错误会重定向 所有 请求到
(连同不存在的页面)。在 Vue.js 应用里处理未定义的路由。当然,所有的工作均可在我们的路由文件设置。
- index.html
在
增加一行:
- frontend/src/router/index.js
- const routerOptions = [
- { path: '/', component: 'Home' },
- { path: '/about', component: 'About' },
- { path: '*', component: 'NotFound' }
- ]
通配符
在
- '*'
里的含义是以上路由定义之外的情况。现在我们需要在
- vue-router
文件夹新建
- /components
文件。我简单地创建它:
- NotFound.vue
- // NotFound.vue
- 404 - Not Foundp>
- div>
- template>
现在 通过
重新启动前台服务然后随意输入网址像
- npm run dev
。你应该看到 “Not Found” 两个单词。
- localhost:8080/gljhewrgoh
我的 Vue.js/Flask 教程的最后一个例子将在后端创建一个 API 接口然后通过前端来调用它。我将创建一个随机返回数字1到100的简单端口。
打开
新增如下代码:
- run.py
- from flask import Flask, render_template, jsonify
- from random import *
- app = Flask(__name__,
- static_folder = './dist/static',
- template_folder = './dist')
- @app.route('/api/random')
- def random_number():
- response = {
- 'randomNumber': randint(1, 100)
- }
- return jsonify(response)
- @app.route('/', defaults={'path': ''})
- @app.route('/')
- def catch_all(path):
- return render_template('index.html')
我首先从 Flask 资源库导入
库和
- random
函数。然后我增加一个返回 JSON 数据格式的新路由
- jsonify
, 如下:
- /api/random
- {
- 'randomNumber': 36
- }
你可以通过地址:
来测试这个路由。
- localhost:5000/api/random
到这里,服务端的工作已经完成了。该到客户端上场了。我将修改
组件来显示我的随机数字:
- Home.vue
- Home page
- Random number from backend: {{ randomNumber }}
- <> @click='getRandom'>New random number
在这一步,我将在客户端模拟随机数的生成。所以,组件的工作过程如下:
等于
- randomNumber
- 0
部分,我们用
- methods
函数从指定区间返回一个数字,
- getRandomInt(min, max)
函数将调用上一个函数生成一个值赋给
- getRandom
- randomNumber
方法给
- getRandom
赋个初始数值
- randomNumber
方法去得到一个数值
- getRandom
现在,在首页上你将看到由前端生成的随机数。让我们继续来连接后端。
我将用 axios 库来连接后端。它将允许我们创建能返回
对象的 HTTP 请求。我们先安装它:
- Promise
- (venv) cd frontend
- (venv) npm install --save axios
再次打开
,修改
- Home.uve
百度搜索“就爱阅读”,专业资料,生活学习,尽在就爱阅读网92to.com,您的在线图书馆!
来源: http://www.92to.com/bangong/2017/11-14/31079127.html