阅读本文约需要7分钟
大家好，我是你们的导师，我每天都会在这里给大家分享一些干货内容(当然了，周末也要允许老师休息一下哈)。上次老师跟大家分享了JS 之浏览器Storage 接口的知识，今天跟大家分享下Vue 之Flask实现全栈单页面应用的知识。
1 Vue 之Flask实现全栈单页面应用在本教程中，我将向大家展示如何使用前端的 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上查看所有的源代码：
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以下是我通过安装向导的项目设置：
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<template> <div> <p>Home pagep> div>template>和
// About.vue<template> <div> <p>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_templateapp = Flask(__name__, static_folder = "./dist/static", template_folder = "./dist")@app.route('/')def index(): return render_template("index.html")上面的代码和 Flask 入门教程 “Hello world” 上的代码稍有不同。最主要的不同点在于我们详细指明了前端的静态和模板文件夹输出到 /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 上可以很简单做到。做如下修改：
@app.route('/', defaults={'path': ''})@app.route('/')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 增加一行：
const routerOptions = [ { path: '/', component: 'Home' }, { path: '/about', component: 'About' }, { path: '*', component: 'NotFound' }]通配符 '*' 在 vue-router 里的含义是以上路由定义之外的情况。现在我们需要在 /components 文件夹新建 NotFound.vue 文件。我简单地创建它：
// NotFound.vue<template> <div> <p>404 - Not Foundp> div>template>现在 通过 npm run dev 重新启动前台服务然后随意输入网址像 localhost:8080/gljhewrgoh。你应该看到 “Not Found” 两个单词。
添加后端 API 接口
我的 Vue.js/Flask 教程的最后一个例子将在后端创建一个 API 接口然后通过前端来调用它。我将创建一个随机返回数字1到100的简单端口。
打开 run.py 新增如下代码：
from flask import Flask, render_template, jsonifyfrom 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 库和 jsonify 函数。然后我增加一个返回 JSON 数据格式的新路由 /api/random, 如下：
{ "randomNumber": 36}你可以通过地址：localhost:5000/api/random 来测试这个路由。
到这里，服务端的工作已经完成了。该到客户端上场了。我将修改 Home.vue 组件来显示我的随机数字：
<template> <div> <p>Home pagep> <p>Random number from backend: {{ randomNumber }}p> <button @click="getRandom">New random numberbutton> div>template><script>export default { data () { return { randomNumber: 0 } }, methods: { getRandomInt (min, max) { min = Math.ceil(min) max = Math.floor(max) return Math.floor(Math.random() * (max - min + 1)) + min }, getRandom () { this.randomNumber = this.getRandomInt(1, 100) } }, created () { this.getRandom() }}script>在这一步，我将在客户端模拟随机数的生成。所以，组件的工作过程如下：
初始变量
randomNumber等于0在
methods部分，我们用getRandomInt(min, max)函数从指定区间返回一个数字，getRandom函数将调用上一个函数生成一个值赋给randomNumber之后在组件被创建时调用
getRandom方法给randomNumber赋个初始数值在按钮点击事件里，我们将触发
getRandom方法去得到一个数值
现在，在首页上你将看到由前端生成的随机数。让我们继续来连接后端。
我将用 axios 库来连接后端。它将允许我们创建能返回 Promise 对象的 HTTP 请求。我们先安装它：
(venv) cd frontend(venv) npm install --save axios再次打开 Home.uve，修改
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
