Flask-Vue前後端分離的全過程講解
最近學習瞭一下前後端分離技術,前端用的是Vue,後段用的是Flask。
vue官網:開源的 Javascript 框架,vue是一套構建用戶界面的漸進式框架,Vue采用自底向上的增量開發設計。vue是輕量級的,有很多獨立的功能和庫。
vue.js滿足當前webapp項目的開發需求,MVVM框架誕生,而Vue.js便是這樣一種js框架。兩大核心:數據驅動和組件化。
Flask:用Python實現,是一個web框架,屬於微框架。
1、主要依賴版本
- Python : V3.6.4
- Vue: V2.9.6
- Vue-CLI: V2.9.6
- node: v10.6.0
- npm: V6.1.0
- Flask: V1.0.2
- Flask-Cors: V3.0.6
- bootstrap: V4.0.0(最新版4.1.2不兼容)
以下項目的創建都是在Python虛擬環境和npm局部安裝的,隻有Vue-CLI是全局安裝的。
npm ls -g --depth 0 查找npm全局安裝的包
2、構建Python虛擬環境
防止依賴的混亂,首先創建虛擬環境。
Mac:code hubo$ mkdir flask-vue-crud Mac:code hubo$ cd flask-vue-crud/ Mac:flask-vue-crud$ python -m venv venv Mac:flask-vue-crud$ source venv/bin/activate (venv) Mac:flask-vue-crud hubo$ ls venv
第一行創建flask-vue-crud文件夾,第三行創建python虛擬環境python3.3版本可以通過venv模塊,python2版本可以使用virtualenv模塊。
第四行激活虛擬環境。
- Windows:source venv/Scripts/activate.bat
- Linux:source venv/bin/activate
3、創建Flask項目
首先安裝Flask和Flask-CORS擴展。
Flask—CORS:
如果使用不同的協議,或者請求來自於其他的 IP 地址或域名或端口,就需要用到 Cross Origin Resource Sharing (CORS),這正是 Flask-CORS 擴展幫我們做到的。實際環境中隻配置來自前端應用所在的域的請求。
(venv) Mac:flask-vue-crud hubo$ pip install Flask Flask-Cors
然後在根目錄下創建app.py文件:
from flask import Flask, jsonify from flask_cors import CORS app = Flask(__name__) CORS(app) @app.route('/', methods=['GET']) def ping_pong(): return jsonify('Hello World!') #(jsonify返回一個json格式的數據) if __name__ == '__main__': app.run()
然後執行:
(venv) Mac:flask-vue-crud hubo$ python app.py
打開瀏覽器,輸入http://localhost:5000/ping,會看到輸出
Hello World!
目前Flask環境已經配置好,並且已經創建瞭一個Flask小Demo。
4、Vue Setup
Vue CLI:官方發佈 vue.js 項目腳手架,使用 vue-cli 可以快速創建 vue 項目。
首先全局安裝vue Cli:npm install -g(全局安裝),npm下載的國外的依賴,可以使用淘寶的cnpm。
下載淘寶的cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用npm或cnom下載vue cli
(venv) Mac:flask-vue-crud hubo$ npm insatll -g vue-cli
查看安裝成功
Mac:~ hubo$ vue -V 2.9.6
接下來通過webpack初始化一個新的Vue項目client:
Mac:flask-vue-crud hubo$ vue init webpack client ? Project name client ? Project description A Vue.js project ? Author hubo <[email protected]> ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Airbnb ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been created? (recom mended) npm
主要寫代碼的位置:/flask-vue-crud/client/src/,目錄結構如下所示:
. ├── App.vue ├── assets │ └── logo.png ├── components │ ├── HelloWorld.vue │ └── Ping.vue ├── main.js └── router └── index.js
各個目錄的意思:
名字 | 作用 |
---|---|
main.js | app 的入口,它會加載和初始化 Vue 和根組件 |
App.vue | 根組件 – 其他組件的入口 |
assets | 靜態文件如圖片和字體等都放在這裡 |
components | UI 組件放在這裡 |
router | URL 同組件的映射關系在這裡定義 |
client/src/components/HelloWord.vue是自動生成的單文件組件,有三部分組成:
template
: 組件的 HTML 內容script
: 組件的邏輯代碼(Javascript)style
: 組件的樣式(CSS)
運行該程序:
(venv) Mac:flask-vue-crud hubo$ cd client/ (venv) Mac:client hubo$ ls README.md index.html package.json build node_modules src config package-lock.json static (venv) Mac:client hubo$ npm run dev 啟動dev
訪問http://localhost:8080 能看到前端頁面
5、添加一個新組件
創建client/src/components/Ping.vue:
<template> <div> <p>{{ msg }}</p> </div> </template> <script> export default { name: 'Ping', data() { return { msg: 'Hello!', }; }, }; </script>
更新client/src/router/index.js,映射/ping到Ping組件:
import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld from '@/components/HelloWorld'; import Ping from '@/components/Ping'; Vue.use(Router); export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld, }, { path: '/ping', name: 'Ping', component: Ping, }, ], mode: 'history', });
上面的mode: 'history’是為瞭讓 URL 變成http://localhost:8080/ping的形式。如果,不加該設置,默認的 URL 為http://localhost:8080/#/ping的形式。
訪問http://localhost:8080/ping 能看到Hello!
6、連接前後段
通過axios發送AJAX請求,安裝axios:
(venv) Mac:client hubo$ cnpm install axios --save ✔ Installed 1 packages ✔ Linked 4 latest versions ✔ Run 0 scripts ✔ All packages installed (5 packages installed from npm registry, used 1s, speed 12.01kB/s, json 5(12.96kB), tarball 0B)
更新Ping.vue組件,代碼如下。
<template> <div class="container"> <button type="button" class="btn btn-primary">{{ msg }}</button> </div> </template> <script> import axios from 'axios'; export default { name: 'Ping', data() { return { msg: 'Hello World!', }; }, methods: { getMessage() { const path = 'http://localhost:5000/ping'; axios.get(path) .then((res) => { this.msg = res.data; }) .catch((error) => { // eslint-disable-next-line console.error(error); }); }, }, created() { this.getMessage(); }, }; </script>
啟動後端 Flask 應用,訪問http://localhost:8080/ping,會看到頁面會呈現後端返回的數據。
將後段的數據改為:{1:‘a’,2:‘b’,3:‘c’}
啟動Flask:
(venv) Mac:flask-vue-crud hubo$ python app.py * Serving Flask app "app" (lazy loading) * Environment: production WARNING: Do not use the development server in a production environment. Use a production WSGI server instead. * Debug mode: on * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) * Restarting with stat * Debugger is active! * Debugger PIN: 239-628-485
啟動dec:
(venv) Mac:client hubo$ npm run dev
7、引入CSS框架bootstrap
引入 CSS 框架 bootstrap,通過如下命令安裝bootstrap:使用的是cnpm
下面的cnpm都是局部安裝。
(venv) Mac:client hubo$ cnpm install [email protected] --save ✔ Installed 1 packages ✔ Linked 0 latest versions ✔ Run 0 scripts peerDependencies WARNING [email protected] requires a peer of [email protected] - 3 but none was installed peerDependencies WARNING [email protected] requires a peer of popper.js@^1.12.9 but none was installed ✔ All packages installed (1 packages installed from npm registry, used 770ms, speed 6.85kB/s, json 1(5.27kB), tarball 0B)
我這裡缺少兩個依賴,繼續下載依賴
(venv) Mac:client hubo$ cnpm install [email protected] --save ✔ Installed 1 packages ✔ Linked 0 latest versions ✔ Run 0 scripts ✔ All packages installed (1 packages installed from npm registry, used 1s, speed 335.44kB/s, json 1(5.19kB), tarball 482.88kB) (venv) Mac:client hubo$ cnpm install popper.js --save ✔ Installed 1 packages ✔ Linked 0 latest versions ✔ Run 0 scripts ✔ All packages installed (1 packages installed from npm registry, used 543ms, speed 16.56kB/s, json 1(8.99kB), tarball 0B)
再次下載bootstrap:
(venv) Mac:client hubo$ cnpm install [email protected] --save ✔ Installed 1 packages ✔ Linked 0 latest versions ✔ Run 0 scripts ✔ All packages installed (used 647ms, speed 41.65kB/s, json 1(26.95kB), tarball 0B)
在 app 的入口文件client/src/main.js中導入 bootstrap:
import 'bootstrap/dist/css/bootstrap.css'; import Vue from 'vue'; import App from './App'; import router from './router'; Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>', });
去掉根組件client/src/App.vue中多餘的樣式:
<style> #app { margin-top: 60px; } </style>
在Ping.vue組件中增加樣式:
<template> <div class="container"> <button type="button" class="btn btn-primary">{{ msg }}</button> </div> </template>
再次訪問http://localhost:8080/ping查看效果。
8、遇到的問題
Newline required at end of file but not found
這種錯誤處理方法:
我的錯誤是在33行後面添加一個空白行就可以瞭。
bootstrap最新版的好像和vue不兼容,使用的是4.0.0版本。
有遇到其他的問題,可以留言板討論,目前除瞭bootstrap是4.0版本其他的應該都是最新的版本。
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- Pyhon Flask框架:第一個Flask程序
- python的簡單web框架flask快速實現詳解
- 解決pip install 卡住不動的問題
- Flask搭建一個API服務器的步驟
- Flask 入門Web 微框架Hello Flask