Flask-Vue前后端分離的全過(guò)程講解
最近學(xué)習(xí)了一下前后端分離技術(shù)，前端用的是Vue，后段用的是Flask。
vue官網(wǎng)：開(kāi)源的 Javascript 框架，vue是一套構(gòu)建用戶(hù)界面的漸進(jìn)式框架，Vue采用自底向上的增量開(kāi)發(fā)設(shè)計(jì)。vue是輕量級(jí)的，有很多獨(dú)立的功能和庫(kù)。
vue.js滿(mǎn)足當(dāng)前webapp項(xiàng)目的開(kāi)發(fā)需求，MVVM框架誕生，而Vue.js便是這樣一種js框架。兩大核心：數(shù)據(jù)驅(qū)動(dòng)和組件化。
Flask：用Python實(shí)現(xiàn)，是一個(gè)web框架，屬于微框架。
1、主要依賴(lài)版本
- 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不兼容）
以下項(xiàng)目的創(chuàng)建都是在Python虛擬環(huán)境和npm局部安裝的，只有Vue-CLI是全局安裝的。
npm ls -g --depth 0 查找npm全局安裝的包
2、構(gòu)建Python虛擬環(huán)境
防止依賴(lài)的混亂，首先創(chuàng)建虛擬環(huán)境。
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
第一行創(chuàng)建flask-vue-crud文件夾，第三行創(chuàng)建python虛擬環(huán)境python3.3版本可以通過(guò)venv模塊，python2版本可以使用virtualenv模塊。
第四行激活虛擬環(huán)境。
- Windows：source venv/Scripts/activate.bat
- Linux：source venv/bin/activate
3、創(chuàng)建Flask項(xiàng)目
首先安裝Flask和Flask-CORS擴(kuò)展。
Flask—CORS：
如果使用不同的協(xié)議，或者請(qǐng)求來(lái)自于其他的 IP 地址或域名或端口，就需要用到 Cross Origin Resource Sharing （CORS），這正是 Flask-CORS 擴(kuò)展幫我們做到的。實(shí)際環(huán)境中只配置來(lái)自前端應(yīng)用所在的域的請(qǐng)求。
(venv) Mac:flask-vue-crud hubo$ pip install Flask Flask-Cors
然后在根目錄下創(chuàng)建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返回一個(gè)json格式的數(shù)據(jù)）
if __name__ == '__main__':
app.run()然后執(zhí)行：
(venv) Mac:flask-vue-crud hubo$ python app.py
打開(kāi)瀏覽器，輸入http://localhost:5000/ping，會(huì)看到輸出
Hello World！
目前Flask環(huán)境已經(jīng)配置好，并且已經(jīng)創(chuàng)建了一個(gè)Flask小Demo。
4、Vue Setup
Vue CLI：官方發(fā)布 vue.js 項(xiàng)目腳手架，使用 vue-cli 可以快速創(chuàng)建 vue 項(xiàng)目。
首先全局安裝vue Cli：npm install -g(全局安裝)，npm下載的國(guó)外的依賴(lài)，可以使用淘寶的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
接下來(lái)通過(guò)webpack初始化一個(gè)新的Vue項(xiàng)目client：
Mac:flask-vue-crud hubo$ vue init webpack client ? Project name client ? Project description A Vue.js project ? Author hubo <1290259791@qq.com> ? 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
主要寫(xiě)代碼的位置：/flask-vue-crud/client/src/，目錄結(jié)構(gòu)如下所示：
.
├── App.vue
├── assets
│ └── logo.png
├── components
│ ├── HelloWorld.vue
│ └── Ping.vue
├── main.js
└── router
└── index.js各個(gè)目錄的意思：
| 名字 | 作用 |
|---|---|
| main.js | app 的入口，它會(huì)加載和初始化 Vue 和根組件 |
| App.vue | 根組件 - 其他組件的入口 |
| assets | 靜態(tài)文件如圖片和字體等都放在這里 |
| components | UI 組件放在這里 |
| router | URL 同組件的映射關(guān)系在這里定義 |
client/src/components/HelloWord.vue是自動(dòng)生成的單文件組件，有三部分組成：
template: 組件的 HTML 內(nèi)容script: 組件的邏輯代碼（Javascript）style: 組件的樣式（CSS）
運(yùn)行該程序：
(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 啟動(dòng)dev
訪問(wèn)http://localhost:8080 能看到前端頁(yè)面
5、添加一個(gè)新組件
創(chuàng)建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的形式。如果，不加該設(shè)置，默認(rèn)的 URL 為http://localhost:8080/#/ping的形式。
訪問(wèn)http://localhost:8080/ping 能看到Hello!
6、連接前后段
通過(guò)axios發(fā)送AJAX請(qǐng)求，安裝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>啟動(dòng)后端 Flask 應(yīng)用，訪問(wèn)http://localhost:8080/ping，會(huì)看到頁(yè)面會(huì)呈現(xiàn)后端返回的數(shù)據(jù)。
將后段的數(shù)據(jù)改為：{1:‘a’,2:‘b’,3:‘c’}
啟動(dòng)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
啟動(dòng)dec：
(venv) Mac:client hubo$ npm run dev
7、引入CSS框架bootstrap
引入 CSS 框架 bootstrap，通過(guò)如下命令安裝bootstrap：使用的是cnpm
下面的cnpm都是局部安裝。
(venv) Mac:client hubo$ cnpm install bootstrap@4.0.0 --save ? Installed 1 packages ? Linked 0 latest versions ? Run 0 scripts peerDependencies WARNING bootstrap@4.0.0 requires a peer of jquery@1.9.1 - 3 but none was installed peerDependencies WARNING bootstrap@4.0.0 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)
我這里缺少兩個(gè)依賴(lài)，繼續(xù)下載依賴(lài)
(venv) Mac:client hubo$ cnpm install jquery@1.9.1 --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 bootstrap@4.0.0 --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中導(dǎo)入 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>再次訪問(wèn)http://localhost:8080/ping查看效果。
8、遇到的問(wèn)題
Newline required at end of file but not found
這種錯(cuò)誤處理方法：
我的錯(cuò)誤是在33行后面添加一個(gè)空白行就可以了。
bootstrap最新版的好像和vue不兼容，使用的是4.0.0版本。
有遇到其他的問(wèn)題，可以留言板討論，目前除了bootstrap是4.0版本其他的應(yīng)該都是最新的版本。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Google開(kāi)源的一個(gè)序列化框架，類(lèi)似于xml ， json。最大的特點(diǎn)是基于 二進(jìn)制，比傳統(tǒng)的xml表示同樣的內(nèi)容要短小很多。亦可定義一些可選字段，用于服務(wù)端與客戶(hù)端通信2021-08-08
基于keras中訓(xùn)練數(shù)據(jù)的幾種方式對(duì)比(fit和fit_generator)
這篇文章主要介紹了keras中訓(xùn)練數(shù)據(jù)的幾種方式對(duì)比(fit和fit_generator)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-05-05
Python學(xué)習(xí)筆記（二）基礎(chǔ)語(yǔ)法
對(duì)于任何一門(mén)語(yǔ)言的學(xué)習(xí)，學(xué)語(yǔ)法是最枯燥無(wú)味的，但又不得不學(xué)，基礎(chǔ)概念較繁瑣，本文將不多涉及概念解釋?zhuān)美舆M(jìn)行相關(guān)解析，適當(dāng)與C語(yǔ)言對(duì)比，避免陷入語(yǔ)法的苦海。我認(rèn)為初學(xué)者學(xué)習(xí)語(yǔ)法的目標(biāo)是學(xué)會(huì)使用即可，關(guān)于對(duì)概念的深入理解，剖析，沒(méi)有一定的知識(shí)積累是很難做到的。2014-06-06
Python3爬蟲(chóng)之自動(dòng)查詢(xún)天氣并實(shí)現(xiàn)語(yǔ)音播報(bào)
這篇文章主要介紹了Python3爬蟲(chóng)之自動(dòng)查詢(xún)天氣并實(shí)現(xiàn)語(yǔ)音播報(bào)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
Python爬蟲(chóng)定時(shí)計(jì)劃任務(wù)的幾種常見(jiàn)方法(推薦)
這篇文章主要介紹了Python爬蟲(chóng)定時(shí)計(jì)劃任務(wù)的幾種常見(jiàn)方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
python的繪圖工具matplotlib使用實(shí)例
這篇文章主要介紹了python的繪圖工具matplotlib使用實(shí)例,需要的朋友可以參考下2014-07-07
python opencv3實(shí)現(xiàn)人臉識(shí)別(windows)
這篇文章主要為大家詳細(xì)介紹了python opencv3實(shí)現(xiàn)人臉識(shí)別程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要為大家詳細(xì)介紹了python中命令行參數(shù)的解析,并做一個(gè)命令行程序,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2024-11-11
這篇文章主要介紹了Python sublime安裝及配置過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
Windows平臺(tái)Python編程必會(huì)模塊之pywin32介紹
在Windows平臺(tái)上，從原來(lái)使用C/C++編寫(xiě)原生EXE程序，到使用Python編寫(xiě)一些常用腳本程序，成熟的模塊的使用使得編程效率大大提高了2019-10-10