之前一段時間一直在學(xué)習(xí) python者铜，后來在項目中用 weex 時接觸到了 vue.js腔丧，本來 python 是自己想學(xué)的一門腳本技術(shù)，weex 是項目需要作烟，必須了解些 vue.js 方面的語法愉粤，所以為了加深對這兩門技術(shù)的了解，一直在想怎么在實(shí)際項目中使用這些技術(shù)拿撩。剛好衣厘，團(tuán)隊中有一個分析App性能分析的需求，被分配統(tǒng)計Android 頁面啟動時間压恒，針對本地調(diào)試影暴，可以通過跑 python 腳本實(shí)現(xiàn)，收集到的數(shù)據(jù)需要在頁面上展示探赫，于是便想著通過 python + vue 的方式搭建一個完整的后臺和前端系統(tǒng)型宙。總覺著 python + vue 實(shí)現(xiàn)后臺和前端伦吠，有些不好理解妆兑，像是被硬搭配在一起的。大概是自己見識比較少毛仪，并不清楚現(xiàn)在的前端和后臺開發(fā)技術(shù)趨勢搁嗓，在我的認(rèn)知中，后臺一直都是 Java 開發(fā)箱靴，前端基本是 html+一種JS框架腺逛。
哈哈，廢話不多說衡怀，這兩天搭建環(huán)境和跑完整的項目屉来，遇到的問題還是比較多，以下便是總結(jié)狈癞。
一、前端搭建
IDEA 工具：WebStorm
主要好處：方法查看和定位很方便茂契。
Tips：官網(wǎng)下載的是30天的使用版蝶桶，過期后每次只能使用半小時，后來通過網(wǎng)上的方式破解了一把掉冶。
Vue 環(huán)境搭建步驟
具體步驟可參考 如何運(yùn)行一個Vue項目厌小，這里只簡單說明一下：
1）搭建需要的環(huán)境和工具
- 安裝 node.js環(huán)境（npm包管理器）
- cnpm npm的淘寶鏡像恢共，命令：npm install -g cnpm --registry=http://registry.npm.taobao.org/
- vue-cli 腳手架構(gòu)建工具，命令：cnpm install -g vue-cli
2）創(chuàng)建 & 運(yùn)行項目
- cd 到項目目錄并按步驟提示創(chuàng)建璧亚，命令：vue init webpack projectDir
- 安裝項目依賴得到 node-modules 目錄讨韭，命令：cnpm install
- 運(yùn)行項目，會提示當(dāng)前應(yīng)用在哪個地址可訪問，端口為8080透硝，該命令會熱加載項目狰闪，也就是修改后保存頁面可自動刷新，命令：npm run dev
- 訪問頁面濒生，在瀏覽器輸入 http://localhost:8080 可以看到初始頁面埋泵。
3）項目目錄說明
- 這里只說一下需要修改進(jìn)行開發(fā)的 src 目錄，完整目錄說明參考：Vue 項目結(jié)構(gòu)說明
|—— src/
| |—— main.js # app entry file
| |—— App.vue # main app component
| |—— components/ # ui components
| | |—— ...
| |—— assets/ # module assets (processed by webpack)
遇到的問題
1）運(yùn)行后的項目罪治，其他終端能通過 http://localhost:8080 訪問查看頁面嗎丽声？
A：npm run dev 命令只用做本地調(diào)試，共開發(fā)者預(yù)覽頁面觉义，同部署到服務(wù)器供其他終端訪問是不同的雁社，如果要提供給其他瀏覽器或終端使用，則需要部署到具體的服務(wù)器才行谁撼。
2）如何將 Vue 項目部署到服務(wù)器上呢歧胁？
- 執(zhí)行命令 npm run build 生成 dist 文件夾，然后將該目錄下的文件部署到服務(wù)器（服務(wù)器如python厉碟，tomcat喊巍，nginx）。
- cd 到 dist 目錄下箍鼓，這里使用最簡單的 python 搭建服務(wù)器崭参，運(yùn)行命令：python -m http.server，將 dist 下的文件部署到 Python 自帶的服務(wù)器中款咖；
- 訪問 http://YourIpAddress:8000/ 可以直接在其他終端打開對應(yīng)的頁面（python搭建的服務(wù)器再8000端口監(jiān)聽）何暮。
3）如何通過 Vue 請求服務(wù)器接口并獲取數(shù)據(jù)呢？
- 使用 axios 庫來實(shí)現(xiàn)铐殃，安裝命令：npm install axios海洼。
相關(guān)技術(shù)文檔
- Vue 官方文檔：https://cn.vuejs.org/v2/guide/
- Vue 項目運(yùn)行步驟：https://segmentfault.com/a/1190000009871504
- axios 前端接口請求Client：https://www.npmjs.com/package/axios
二、服務(wù)器搭建
IDEA 工具：PyCharm（免費(fèi)版本）
Python 環(huán)境搭建就不仔細(xì)說明富腊，直接進(jìn)入到 Flask 使用和服務(wù)器搭建坏逢。
先說一下，為什么使用 Flask赘被，有兩點(diǎn)是整，一是幾種框架中比較輕量級，二是不會封裝得太厲害民假。具體 Flask 使用目前接觸得也只是能將項目運(yùn)行起來并未前端提供接口服務(wù)浮入。
使用 Flask Web框架
1）安裝步驟
- 安裝 flask 庫：pip3 install flask；
- 安裝之后在項目中 import flask 后才能真正找到 flask module羊异。
2）運(yùn)行項目
- 在哪個文件中使用了 flask事秀，運(yùn)行對應(yīng)的 xxx.py彤断，會提示在 http://localhost:5000 監(jiān)聽;
- 打開瀏覽器，輸入 http://localhost:5000秽晚，如果使用了 flask 瓦糟，可以使用 Jinja 2 寫前端模板文件（這里其實(shí)整個系統(tǒng)可以直接通過 flask 實(shí)現(xiàn)）。
Tips：這種情況類似在本地使用 npm run dev 查看build后的 vue 頁面一樣赴蝇，只能本終端訪問菩浙，并沒有部署到服務(wù)器中。
遇到的問題
1）如何為外部提供接口句伶？（base_url = http://ip:5000）
- 最主要的一個庫是 flask_cors劲蜻，需要繼續(xù)安裝，命令：pip3 install -U flask-cors考余；
- 接口可以是：base_url, base_url + 'flask-route-method' , 對應(yīng)方法中先嬉，return 便是返回給客戶端的響應(yīng)數(shù)據(jù)。
Tips：這里有一個問題就是如果運(yùn)行時直接是 app.run() 就是運(yùn)行在本地楚堤，若是配置了 host 則可以運(yùn)行在指定收信任的公網(wǎng)疫蔓，具體可查看下面【flask 服務(wù)器實(shí)現(xiàn)代碼】章節(jié)。
相關(guān)技術(shù)文檔
- Python 教程：廖雪峰官方網(wǎng)站
- 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庫： 實(shí)現(xiàn)應(yīng)用虛擬獨(dú)立運(yùn)行環(huán)境
三身冬、前端和后臺交互實(shí)現(xiàn)
- Vue 前端實(shí)現(xiàn)代碼：
<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;
// 對應(yīng) Python 提供的接口衅胀，這里的地址填寫下面服務(wù)器運(yùn)行的地址，本地則為127.0.0.1酥筝，外網(wǎng)則為 your_ip_address
const path = 'http://127.0.0.1:5000/getMsg';
axios.get(path).then(function (response) {
// 這里服務(wù)器返回的 response 為一個 json object滚躯，可通過如下方法需要轉(zhuǎn)成 json 字符串
// 可以直接通過 response.data 取key-value
// 坑一：這里不能直接使用 this 指針，不然找不到對象
var msg = response.data.msg;
// 坑二：這里直接按類型解析嘿歌，若再通過 JSON.stringify(msg) 轉(zhuǎn)掸掏，會得到帶雙引號的字串
that.serverResponse = msg;
alert('Success ' + response.status + ', ' + response.data + ', ' + msg);
}).catch(function (error) {
alert('Error ' + error);
})
}
}
}
}
</script>
- flask 服務(wù)器實(shí)現(xiàn)代碼（文件名：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)
# 啟動運(yùn)行
if __name__ == '__main__':
app.run() # 這樣子會直接運(yùn)行在本地服務(wù)器，也即是 localhost:5000
# app.run(host='your_ip_address') # 這里可通過 host 指定在公網(wǎng)IP上運(yùn)行
其他項目實(shí)踐：
- 使用 Vue.js 和 Flask 實(shí)現(xiàn)全棧單頁面應(yīng)用
- GitHub項目：這個項目直接將 vue build 后生成的 index.html 作為 flask 渲染的模板頁面宙帝，目前不知道怎么實(shí)現(xiàn)的
- 使用vue+flask做全棧開發(fā)的全過程（實(shí)現(xiàn)前后端分離）
四丧凤、總結(jié)
使用 Flask + Vue 實(shí)現(xiàn)一個應(yīng)用，簡單來說主要是以下幾個步驟：
- Vue.js 實(shí)現(xiàn)前端頁面 & 通過 axios 庫請求后臺接口獲取數(shù)據(jù)后重新渲染頁面步脓；
- Flask & Flask-CORS 提供接口 & 實(shí)現(xiàn)跨域服務(wù)息裸。
- 打包 Vue.js 文件 & 部署到服務(wù)器，通過 index 頁面進(jìn)行訪問沪编。
如果需要最終可以在公網(wǎng)訪問最終打包好的 Vue 前端界面，則執(zhí)行以下操作：
- 在服務(wù)器實(shí)現(xiàn)文件 get_msg.py 文件中配置 app.run(host='your_ip_address')年扩；
- 配置 Vue axios請求接口的 base_url 為 your_ip_address蚁廓；
- 通過 npm run build 打包得到最終 dist 文件并部署到服務(wù)器中（部署可通過 python -m http.server 進(jìn)行簡單部署，然后通過 http://your_ip_address:8000 端口訪問最終的頁面）厨幻。
:) 每次寫東西都花好長時間相嵌，終于寫完了腿时，給出文章開頭漫畫圖的答案，每次看到都會覺得好開心饭宾，哈哈哈......
