測試開發【提測平臺】分享2-基礎之項目先後端聯調互通

上一篇除了環境須要本身搭建須要點時間外，先後端服務的初始化例子應該在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 先後端聯調成功

 

** 前篇閱讀推薦 **

【提測平臺】分享1-基礎之技術棧和開源框架選型