Vue + Flask 实战开发系列（一）
我写东西喜欢写系列，系列输出可以让掌握的知识更加牢固和系统化。系统化、结构化的知识，可以让我们的大脑记忆的更好。这个系列主要使用Vue和Flask来完成一个前后端分离的图书管理应用。
在开始这次旅程之前，有些情况需要说明。这个系列内容的学习，需要有一定的前端(NodeJS,npm）和Python相关的开发知识。这个系列内容着重介绍如何使用Vue和Flask构建一个前后端分离的应用。有很多基础知识，不做介绍。
创建Vue项目
有很多种方法可以用 Vue 和 Flask 创建一个组合项目。我更喜欢从前端开始，因为项目结构比后端复杂得多。在这个系列中，我使用vue-cli命令行开发工具创建了一个简单的Vue项目:
$ vue create vue-flask-app$ cd vue-flask-app通过上面的的命令，我们的Vue前端项目就创建成功了。项目内容是下面这样：
|-- README.md|-- babel.config.js|-- node_modules|-- package-lock.json|-- package.json|-- public| |-- favicon.ico| `-- index.html`-- src |-- App.vue |-- assets | `-- logo.png |-- components | `-- HelloWorld.vue `-- main.js创建Flask API后端服务
创建Flask项目，因为我想把前端和后端整合到一个项目中。这里我们进到vue-flask-app目录下，创建Flask项目。
$ mkdir api$ cd api我们venv来创建一个Python开发的虚拟环境，大多数情况，都是采用这样的方式，进行Python项目开发的。
$ python3 -m venv venv $ source venv/bin/activate(venv) $ _激活Python虚拟开发环境后，我们就可以安装Flask了。
(venv) $ pip install flask (venv) $ pip install python-dotenv下面我们使用Flask编写一个简单的接口 。在api目录下，创建一个api.py文件，编写如下程序：
import timefrom flask import Flask
app = Flask(__name__)
@app.route('/time')def get_current_time(): return {'time': time.time()}调用接口/time，将会返回如类似下面这样的信息。
{"time": 1581527730.5866282}为了让Flask应用开发更加方便，我们需要配置它的环境变量。首先，在当前目录下创建一个.flaskenv 文件，然后输入如下内容：
FLASK_APP=api.pyFLASK_ENV=developmentFlask环境变量设置成后，为了验证我们的环境配置是否可靠，你可以启动一下试试。
(venv) $ flask run启动成功后，你会看到如下所示的内容。
* Serving Flask app "api.py" (lazy loading) * Environment: development * Debug mode: on * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) * Restarting with stat * Debugger is active! * Debugger PIN: 267-778-190要停止 Flask 服务，请按 Ctrl-C。现在项目的 Flask 部分已经完成，让我们离开 api 子目录，回到vue-flask-app目录。
在Vue项目中调用Flask API
首先，我们需要安装axios，用它来完成发送HTTP请求。
$ npm install axios --saveaxios安装成功后，需要把它引入Vue项目中。在src目录中的main.js文件中，新增如下内容:
import axios from 'axios'axios.defaults.baseURL = 'http://127.0.0.1:5000'; Vue.prototype.$ajax = axios;紧接着我们编辑src/App.vue文件。最终完成后如下所示：
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png" /> <h1>{{datetime}}</h1> </div></template>
<script>export default { name: "App", data() { return { datetime: "eeeeeee" }; }, methods: { initData() { this.$ajax.get("/time", {}).then(res => { this.datetime = res.data.time; }); } }, mounted() { this.initData(); }};</script>
<style>#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>为了解决前后端联调遇到的跨域问题，这里需要在Flask项目安装flask-cors包来解决。
(venv) $ pip install flask-cors接下来打开api.py文件，编写跨域相关配置程序，最终完成情况如下所示：
import timefrom flask import Flaskfrom flask_cors import CORS
app = Flask(__name__)CORS(app)
@app.route('/time')def get_current_time(): return {'time': time.time()}到这里基本上算大功告成了，我们分别启动Vue前端和Flask后端项目，来看结果吧。
(venv) $ npm run serve # 这是启动前端
(venv) $ flask run # 这是启动后端以上所有服务都启动成功后，就可以访问http://localhost:8080地址，查看最终结果。
腾讯云开发者
