Flask + Vue 搭建简易系统步骤总结

之前一段时间一直在学习 python，后来在项目中用 weex 时接触到了 vue.js，本来 python 是自己想学的一门脚本技术，weex 是项目需要，必须了解些 vue.js 方面的语法，所以为了加深对这两门技术的了解，一直在想怎么在实际项目中使用这些技术。刚好，团队中有一个分析App性能分析的需求，被分配统计Android 页面启动时间，针对本地调试，可以通过跑 python 脚本实现，收集到的数据需要在页面上展示，于是便想着通过 python + vue 的方式搭建一个完整的后台和前端系统。总觉着 python + vue 实现后台和前端，有些不好理解，像是被硬搭配在一起的。大概是自己见识比较少，并不清楚现在的前端和后台开发技术趋势，在我的认知中，后台一直都是 Java 开发，前端基本是 html+一种JS框架。
哈哈，废话不多说，这两天搭建环境和跑完整的项目，遇到的问题还是比较多，以下便是总结。

一、前端搭建

IDEA 工具：WebStorm

主要好处：方法查看和定位很方便。

Tips：官网下载的是30天的使用版，过期后每次只能使用半小时，后来通过网上的方式破解了一把。

• MAC 版本可以直接在这个网站下载破解版，点击【这里】
• 如何破解？点击【这里】

Vue 环境搭建步骤

具体步骤可参考 如何运行一个Vue项目，这里只简单说明一下：
1）搭建需要的环境和工具

• 安装 node.js环境（npm包管理器）
• cnpm npm的淘宝镜像，命令：npm install -g cnpm --registry=http://registry.npm.taobao.org/
• vue-cli 脚手架构建工具，命令：cnpm install -g vue-cli

2）创建 & 运行项目

• cd 到项目目录并按步骤提示创建，命令：vue init webpack projectDir
• 安装项目依赖得到 node-modules 目录，命令：cnpm install
• 运行项目，会提示当前应用在哪个地址可访问，端口为8080，该命令会热加载项目，也就是修改后保存页面可自动刷新，命令：npm run dev
• 访问页面，在浏览器输入 http://localhost:8080 可以看到初始页面。

3）项目目录说明

• 这里只说一下需要修改进行开发的 src 目录，完整目录说明参考：Vue 项目结构说明
  |—— src/
  | |—— main.js # app entry file
  | |—— App.vue # main app component
  | |—— components/ # ui components
  | | |—— ...
  | |—— assets/ # module assets (processed by webpack)

遇到的问题

1）运行后的项目，其他终端能通过 http://localhost:8080 访问查看页面吗？
A：npm run dev 命令只用做本地调试，共开发者预览页面，同部署到服务器供其他终端访问是不同的，如果要提供给其他浏览器或终端使用，则需要部署到具体的服务器才行。

2）如何将 Vue 项目部署到服务器上呢？

• 执行命令 npm run build 生成 dist 文件夹，然后将该目录下的文件部署到服务器（服务器如python，tomcat，nginx）。
• cd 到 dist 目录下，这里使用最简单的 python 搭建服务器，运行命令：python -m http.server，将 dist 下的文件部署到 Python 自带的服务器中；
• 访问 http://YourIpAddress:8000/ 可以直接在其他终端打开对应的页面（python搭建的服务器再8000端口监听）。

3）如何通过 Vue 请求服务器接口并获取数据呢？

• 使用 axios 库来实现，安装命令：npm install axios。

相关技术文档

• Vue 官方文档：https://cn.vuejs.org/v2/guide/
• Vue 项目运行步骤：https://segmentfault.com/a/1190000009871504
• axios 前端接口请求Client：https://www.npmjs.com/package/axios

二、服务器搭建

IDEA 工具：PyCharm（免费版本）

Python 环境搭建就不仔细说明，直接进入到 Flask 使用和服务器搭建。

先说一下，为什么使用 Flask，有两点，一是几种框架中比较轻量级，二是不会封装得太厉害。具体 Flask 使用目前接触得也只是能将项目运行起来并未前端提供接口服务。

使用 Flask Web框架
1）安装步骤

• 安装 flask 库：pip3 install flask；
• 安装之后在项目中 import flask 后才能真正找到 flask module。

2）运行项目

• 在哪个文件中使用了 flask，运行对应的 xxx.py，会提示在 http://localhost:5000 监听;
• 打开浏览器，输入 http://localhost:5000，如果使用了 flask ，可以使用 Jinja 2 写前端模板文件（这里其实整个系统可以直接通过 flask 实现）。
  Tips：这种情况类似在本地使用 npm run dev 查看build后的 vue 页面一样，只能本终端访问，并没有部署到服务器中。

遇到的问题

1）如何为外部提供接口？（base_url = http://ip:5000）

• 最主要的一个库是 flask_cors，需要继续安装，命令：pip3 install -U flask-cors；
• 接口可以是：base_url, base_url + 'flask-route-method' , 对应方法中，return 便是返回给客户端的响应数据。
  Tips：这里有一个问题就是如果运行时直接是 app.run() 就是运行在本地，若是配置了 host 则可以运行在指定收信任的公网，具体可查看下面【flask 服务器实现代码】章节。

相关技术文档

• Python 教程：廖雪峰官方网站
• Flask web 框架使用文档：http://flask.pocoo.org
• Flask 快速入门&配置：http://docs.jinkan.org/docs/flask/quickstart.html#a-minimal-application
• Flask-CORS 跨域访问使用文档：http://flask_cors
• Javascript Json 库使用：http://www.runoob.com/js/js-json.html
• virtualenv库： 实现应用虚拟独立运行环境

三、前端和后台交互实现

1. Vue 前端实现代码：

2. flask 服务器实现代码（文件名：get_msg.py）：

from flask import Flask
from flask import jsonify
from flask_cors import CORS

app = Flask(__name__)
cors = CORS(app, resources={r"/getMsg": {"origins": "*"}})

@app.route('/')
def hello_world():
    return 'Hello World!'

@app.route('/getMsg', methods=['GET', 'POST'])
def home():
    response = {
        'msg': 'Hello, Python !'
    }
    return jsonify(response)

# 启动运行
if __name__ == '__main__':
    app.run()   # 这样子会直接运行在本地服务器，也即是 localhost:5000
   # app.run(host='your_ip_address') # 这里可通过 host 指定在公网IP上运行

其他项目实践：

• 使用 Vue.js 和 Flask 实现全栈单页面应用
• GitHub项目：这个项目直接将 vue build 后生成的 index.html 作为 flask 渲染的模板页面，目前不知道怎么实现的
• 使用vue+flask做全栈开发的全过程（实现前后端分离）

四、总结

使用 Flask + Vue 实现一个应用，简单来说主要是以下几个步骤：

• Vue.js 实现前端页面 & 通过 axios 库请求后台接口获取数据后重新渲染页面；
• Flask & Flask-CORS 提供接口 & 实现跨域服务。
• 打包 Vue.js 文件 & 部署到服务器，通过 index 页面进行访问。

如果需要最终可以在公网访问最终打包好的 Vue 前端界面，则执行以下操作：

• 在服务器实现文件 get_msg.py 文件中配置 app.run(host='your_ip_address')；
• 配置 Vue axios请求接口的 base_url 为 your_ip_address；
• 通过 npm run build 打包得到最终 dist 文件并部署到服务器中（部署可通过 python -m http.server 进行简单部署，然后通过 http://your_ip_address:8000 端口访问最终的页面）。

:) 每次写东西都花好长时间，终于写完了，给出文章开头漫画图的答案，每次看到都会觉得好开心，哈哈哈......