之前一段时间一直在学习 python，后来在项目中用 weex 时接触到了 vue.js，本来 python 是自己想学的一门脚本技术，weex 是项目需要，必须了解些 vue.js 方面的语法，所以为了加深对这两门技术的了解，一直在想怎么在实际项目中使用这些技术。刚好，团队中有一个分析App性能分析的需求，被分配统计Android 页面启动时间，针对本地调试，可以通过跑 python 脚本实现，收集到的数据需要在页面上展示，于是便想着通过 python + vue 的方式搭建一个完整的后台和前端系统。总觉着 python + vue 实现后台和前端，有些不好理解，像是被硬搭配在一起的。大概是自己见识比较少，并不清楚现在的前端和后台开发技术趋势，在我的认知中，后台一直都是 Java 开发，前端基本是 html+一种JS框架。
哈哈，废话不多说，这两天搭建环境和跑完整的项目，遇到的问题还是比较多，以下便是总结。
一、前端搭建
IDEA 工具：WebStorm
主要好处：方法查看和定位很方便。
Tips：官网下载的是30天的使用版，过期后每次只能使用半小时，后来通过网上的方式破解了一把。
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库： 实现应用虚拟独立运行环境
三、前端和后台交互实现
- 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>
- 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 端口访问最终的页面）。
:) 每次写东西都花好长时间，终于写完了，给出文章开头漫画图的答案，每次看到都会觉得好开心，哈哈哈......
