測試開發【提測平臺】分享2-專案前後端聯調互通

大奇的分享發表於2021-08-03
後端

上一篇除了環境需要自己搭建需要點時間外，前後端服務的初始化例子應該在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-cors

2. 頭部引用

flask_cors *

3. 允許程式碼

app = Flask(__name__)
CORS(app, supports_credentials=True)

 

最終聯調

重新執行後端服務 python run.py

重新執行前端服務 npm run dev

輸入 amdin / 123456 進行登入

OK 前後端聯調成功

 

相關文章