上一篇除了環境需要自己搭建需要點時間外，前后端服務的初始化例子應該在10分鍾就差不能搞定，下邊繼續，看下前后端聯動，實現用戶登錄。
前端框架結構
這里直接貼出作者給的結構目錄，其中我們這篇要重點關注api和views
├── build // 構建相關
├── mock // 項目mock 模擬數據
├── public // 公共資源
├── src // 源代碼
│ ├── api // 所有接口請求
│ ├── assets // 主題 字體等靜態資源
│ ├── components // 全局公用組件
│ ├── directive // 全局指令
│ ├── filtres // 全局 filter
│ ├── icons // 項目所有 svg icons
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── styles // 全局樣式
│ ├── utils // 全局公用方法
│ ├── vendor // 公用vendor
│ ├── views // view
│ ├── App.vue // 入口頁面
│ ├── main.js // 入口 加載組件 初始化等
│ └── permission.js // 權限管理api ：請求服務端接口的配置都在這里，這里邏輯實現是用到了utils里邊的封裝的request.js，其中在沒有正式服務接口的之前是可以直接調用上邊mock里的地址，得到模擬的數據請求。
views：頁面的布局，樣式，功能實現的地方，一般一個vue代表一個功能頁面，具體根據自身項目邏輯划分就可以。
獲取登錄接口
終端切換到vue-element-admin目錄，執行npm run dev 編譯並開發者模式運行。
用chrome打開，進入登錄頁面，並依次瀏覽器菜單-更多工具-開發者工具，進入調試模式，切換到查看網絡，來查看在登錄網絡請求
輸入admin，任意密碼，點擊Login，正常進入主頁后我們會分別看到兩個登錄相關接口login 和 info，請求Request URL分別為：
1. http://localhost:9527/dev-api/vue-element-admin/user/login 方法post
對應返回如圖
2.http://localhost:9527/dev-api/vue-element-admin/user/info?token=admin-token 方法get對應返回如圖
其實這個如果在/mock/user.js也能通過代碼看到，登錄接口的內容。
實現登錄接口
既然已經知道登錄接口的請求以及重要的返回值，那么我們就可以用flask實現這兩個接口，一個是登錄驗證用戶存在返回token，另一個是登錄成功后獲取用戶信息。
[POST] /user/login
1. 編寫代碼：vim run.py 或者你順手的編輯器
# -*- coding: utf-8 -*-
from flask import Flask
from flask import request
import json
app = Flask(__name__)
@app.route("/api/hello")
def hello():
return "Hello, World!"
@app.route("/api/user/login",methods=['POST'])
def login():
data = request.get_data() # 獲取post請求body數據
js_data = json.loads(data) # 將字符串轉成json
# 驗證如果是admin用戶名，即登錄成功，返回admin的token，否則驗證失敗
if 'username' in js_data and js_data['username'] == 'admin':
result_success = {"code":20000,"data":{"token":"admin-token"}}
return result_success
else:
result_error = {"code":60204,"message":"賬號密碼錯誤"}
return result_error
if __name__ == "__main__":
app.run(debug = True)
2. 測試：運行python run.py 通過后 curl 或者 postman進行請求測試
1）登錄成功
curl -X POST http://127.0.0.1:5000/api/user/login -d '{"username":"admin","password":"123456"}'
2) 非admin登錄錯誤
curl -X POST http://127.0.0.1:5000/api/user/login -d '{"username":"root","password":"654321"}'
[GET] /user/info
1. 繼續追加實現代碼
@app.route("/api/user/info",methods=['GET'])
def info():
# 獲取GET中請求token參數值
token = request.args.get('token')
if token == 'admin-token':
result_success = {
"code":20000,
"data":{
"roles":["admin"],
"introduction":"I am a super administrator",
"avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
"name":"Super Admin"}
}
return result_success
else:
result_error = {"code": 60204, "message": "用戶信息獲取錯誤"}
return result_error
2. 繼續測試
curl 'http://127.0.0.1:5000/api/user/info?token=admin-token'到此后端代碼用戶登錄邏輯接口實現完了，我們可以保持后端服務運行，然后讓我們將前端的請求從mock切換成我們自己的服務
請求正式服務接口
1. 修改接口請求地址
路徑 vue-element-admin/src/api/user.js ，進行打開編輯, 配置成自己寫的請求的api地址( 注釋掉的就是原來mock地址)
export function login(data) {
return request({
// url: '/vue-element-admin/user/login',
url: '/api/user/login',
method: 'post',
data
})
}
export function getInfo(token) {
return request({
// url: '/vue-element-admin/user/info',
url: '/api/user/info',
method: 'get',
params: { token }
})
}
2. 修改一個請求域名
另外還需要修改一下默認的域名地址，文件位於根目錄.env.development 里邊一項改成，這里只暫時dev配置環境的。
VUE_APP_BASE_API = 'http://127.0.0.1:5000/'
3. 運行測試
重新啟動運行前端，嘗試登錄，查看登錄狀態和chrome調試模式的請求返回，你會發現並沒有成功，看flask日志輸出顯示類似 "OPTIONS /api/user/login HTTP/1.1" 200 提示，這是由於跨域問題，簡單說就是瀏覽器一種安全機制，至於詳細的后續單獨再說，這里先一個通用解決辦法就是在python flask中允許跨域就好了。
跨域解決
1. 安裝python依賴包flask-cors
pip install flask-cors2. 頭部引用
flask_cors *3. 允許代碼
app = Flask(__name__)
CORS(app, supports_credentials=True)
最終聯調
重新運行后端服務 python run.py
重新運行前端服務 npm run dev
輸入 amdin / 123456 進行登錄
OK 前后端聯調成功
** 前篇閱讀推薦 **