flask 接口 让别人能访问_flask搭建一个前后端分离的系统
我們通常說三端，pc端，android端和ios端。如果前后端不分離，相當是要做三套系統。如果前后端分離的話，可以共用一個后端，前端各自做自己的，不用管后端。
前后端不分離
在前后端不分離的應用模式中，前端頁面看到的效果都是由后端控制，由后端渲染頁面或重定向，也就是后端需要控制前端的展示，前端與后端的耦合度很高。
這種應用模式比較適合純網頁應用，但是當后端對接App時，App可能并不需要后端返回一個HTML網頁，而僅僅是數據本身，所以后端原本返回網頁的接口不再適用于前端App應用，為了對接App后端還需再開發一套接口。
前后端分離
在前后端分離的應用模式中，后端僅返回前端所需的數據，不再渲染HTML頁面，不再控制前端的效果。至于前端用戶看到什么效果，從后端請求的數據如何加載到前端中，都由前端自己決定，網頁有網頁的處理方式，App有App的處理方式，但無論哪種前端，所需的數據基本相同，后端僅需開發一套邏輯對外提供數據即可。
在前后端分離的應用模式中 ，前端與后端的耦合度相對較低。
在前后端分離的應用模式中，我們通常將后端開發的每個視圖都稱為一個接口，或者API，前端通過訪問接口來對數據進行增刪改查。
OK， 我們來嘗試用vue做前端，flask做后端，來做一個前后端分離的系統。
首先用CLI來裝vue.
Vue- CLI是vue官方提供的腳手架工具,默認已經幫我們搭建好了一套利用webpack管理vue的項目結構。
我們網上看到的很多文檔，都是CLI2的，都會有各種配置文件。我們現在用CLI3，就不需要怎么配置。省心很多。
在Vue- CLI3以后生成的項目結構中已經沒有了build文件夾和config文件夾。
首先，我們要配置源：
或者：
npm install --registry=https://registry.npm.taobao.org
全局安裝：
檢查是否安裝成功：
vue -V創建項目：
vue create my-project項目就創建好了，打開看一下
src文件夾:代碼文件夾
|----assets文件夾: 存儲項目中自己的一些靜態文件(圖片/字體等)
|----components文件夾: 存儲項目中的自定義組件(小組件，公共組件)
|----views文件夾:存儲項目中的自定義組件(大組件，頁面級組件，路由級別組件)
|----router文件夾:存儲VueRouter相關文件
|----store文件夾:存儲Vuex相關文件
|----App.vue:根組件
|----main.js:入口js文件
運行：
npm run serve瀏覽器里面輸入地址，就可以看到頁面了。
CLI3里面還有一個可以用UI界面來控制的。
敲入：
就可以通過ui來創建項目，配置插件和打包了，很方便的。
好了，看完前端，來配置后端：
Python 不像 Node.js，通過 NPM 安裝包時，只需要一個參數就能區分全局和當前項目環境，安裝在當前項目環境的包永遠不會影響其它的項目環境。但是 Python 不行，所以為了各個項目之間的環境獨立，我們需要安裝 virtualenv，把每個項目都放在一個封閉的虛擬環境中，這樣項目彼此間就不會影響了。
安裝 virtualenv：
創建虛擬環境：
virtualenv venvvenv 是虛擬環境的名字，所以只要你喜歡，換成什么都可以。
進入虛擬環境：
退出虛擬環境：
venvScriptsdeactivate
安裝 Flask：
安裝 flask-cors，用來解決開發時的跨域問題：
pip install flask-cors安裝 pylint，用來檢查代碼：
pip install pylint安裝 yapf，用來格式化代碼：
pip install yapf先將前端的代碼寫好，現在對vue還不是太熟，就簡單寫一個index：
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><script src="https://unpkg.com/axios/dist/axios.min.js"></script><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --><input v-model="message"><button type="button" @click="get_password">submit</button><p>account is: {{ message }}</p><p>password is: {{ password }}</p><script>var v1 = new Vue({el: '#app1',data: {message: 'stest',password: '',},watch : {my(v) {this.password = this.get_password();}},methods: {get_password() {axios.get('/accounts', {headers: {'Access-Control-Allow-Origin': '*',},crossDomain: true,contentType: "application/json",params: {account: this.message,//接口配置參數（相當于url?id=xxxx）},}).then((res) => {console.log(res.data['password']);//處理成功的函數 相當于successthis.password = res.data['password']}).catch(error => console.log(error))}}})</script></body> </html>然后在項目里面建一個文件夾，叫backend，建一個app.py
from flask import Flask,render_template,request,jsonifyapp = Flask(__name__)# 通過 static_folder 指定靜態資源路徑，以便 index.html 能正確訪問 CSS 等靜態資源 # template_folder 指定模板路徑，以便 render_template 能正確渲染 index.html app = Flask(__name__, static_folder="../dist/static", template_folder="../dist")@app.route('/') def index():'''當在瀏覽器訪問網址時，通過 render_template 方法渲染 dist 文件夾中的 index.html。頁面之間的跳轉交給前端路由負責，后端不用再寫大量的路由'''return render_template("index.html")@app.route('/accounts', methods=['GET']) def get_accounts():if request.method == "GET":username = request.args.get("account")password = "aaa" #query_account(username)if password == "":return "no result"else:#return render_template("home.html",message=username,password=password)return jsonify({"password": password})if __name__ == '__main__':app.run()接著將前端build一下，生成一個dist目錄
然后運行：
flask run瀏覽器中輸入：127.0.0.1:5000
看起來通了。
這個關鍵點是：
美中不足是，vue還不熟練，還有些小問題要處理。
好了，前后端能通了，也能融合到一起了。
更多精彩，請關注微信公眾號：python粉絲團
總結
以上是生活随笔為你收集整理的flask 接口 让别人能访问_flask搭建一个前后端分离的系统的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： dosbox使用教程创建masm5
- 下一篇： java信息管理系统总结_java实现科