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 前端实现代码：

<template>
    <div>
      <span>{{ serverResponse }} </span>
      <button @click="getData">GET DATA</button>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
      name: "my-first-vue",
      data: function() {
          return {
            serverResponse: 'resp'
          }
      },
      methods: {
        getData() {
          var that = this;
          // 对应 Python 提供的接口，这里的地址填写下面服务器运行的地址，本地则为127.0.0.1，外网则为 your_ip_address
          const path = 'http://127.0.0.1:5000/getMsg';
          axios.get(path).then(function (response) {
            // 这里服务器返回的 response 为一个 json object，可通过如下方法需要转成 json 字符串
            // 可以直接通过 response.data 取key-value
            // 坑一：这里不能直接使用 this 指针，不然找不到对象
            var msg = response.data.msg;
            // 坑二：这里直接按类型解析，若再通过 JSON.stringify(msg) 转，会得到带双引号的字串
            that.serverResponse = msg;

            alert('Success ' + response.status + ', ' + response.data + ', ' + msg);
          }).catch(function (error) {
            alert('Error ' + error);
          })
        }
        }
      }
    }
</script>

1. 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 端口访问最终的页面）。

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