上一篇除了環境需要自己搭建需要點時間外，前后端服務的初始化例子應該在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 = https://www.cnblogs.com/mrzcode/p/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 前后端聯調成功
** 前篇閱讀推薦 **
【提測平臺】分享1-基礎之技術堆疊和開源框架選型
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/291988.html
標籤：其他