測試開發【提測平臺】分享3-正式開發產品需求&專案初始化

大奇的分享發表於2021-08-05

上兩個分享主要是介紹和演示基本前後端所要使用的框架，接下來我們將正式進入到【提測平臺的開發】

提要先給出依賴和內容點：

  • 提測平臺定義和產品原型需求說明

  • 使用github建立程式碼倉庫進行專案管理

  • Flask中使用 Blueprint 進行模組開發

  • 前端 開發IDE工具為：WebStorm

  • 後端 開發IDE工具為：PyCharm

提測平臺需求說明

關於這個提測系統，N年前原始需求，是因為當初所在團隊，負責太多的專案，很多需求提測，測試報告都是通過郵件手工進行，久之就有了比如資訊不全、記錄不好找、領導不好統計工作量等等，所以藉著團隊有自己前端框架，類似vue這種比較簡易，就促使了這樣一個測試管理小平臺的誕生，其實平臺的功能不是很複雜，具體的主要功能羅列如下：

  • 專案(線)/產品管理 

  • 提測建立和管理

  • 測試報告和管理

  • 統計報表(Leader用)

  • CI API （整合部署條件判斷）

當然這其中其他還有整合公司的統一人員管理，許可權管理，以及特殊的管理，這些在這個專案中都將以一個通用的方式去實現，具體如果這個專案能應用在你們的團隊中，可以在對這部分進行二次的開發。

特別說明，由於發現原來畫的產品原型，在這次重新開發中並不適用了，所以這次就不給出來了，就留在下篇迭代開發中給出吧。

GitHub託管程式碼專案

官方 https://github.com  在自己的目錄下建立個專案，作為專案的全程程式碼託管，當然如果你只打算本地用，可以忽略github建立，直接建立本地的一個稍微正式一點的專案資料夾即可。

專案名稱定義為：TestProjectManagement - Public

SSH方式git clone程式碼

本地電腦開啟終端 ssh-keygen -p 命令生成金鑰，如果有忽略

ssh-keygen -p

複製金鑰, 根據生成路徑找到 id_rsa.pub 複製到剪貼簿，我這裡mac預設在：

cat .ssh/id_rsa.pub

貼上金鑰在到github上，位置在 個人頭像 -> Settings -> SSH and GPG keys -> New GPG Key

進入TestProjectManagement，切換成SSH模式，複製，本地自己開發位置直接克隆即可 

git clone git@github.com:mrzcode/TestProjectManagement.git

建立前後端服務

介面Flask服務  開啟PyCharm, 建立一個flask專案: Create New Project -> Flask -> 路徑可以選擇到剛才克隆的專案下，起名為Service服務，並建議建立Virtual env和勾選上 Inherit ，版本選擇python3.x 版本，這主要是為了使其環境獨立，以免跟你本地其他專案衝突，尤其是有2.x的專案。

頁面vue服務  在之前文章中演示用的是admin完整包，基本上我們不會用到裡邊的那麼多預設頁面，而我們正式專案會換成vue-admin-template, 這是一個極簡的管理後臺，我們在這基礎上一步一步的開發。

# 切換到專案目錄
cd /mrzcode/TestProjectManagement/ 
# https模式克隆到專案下
git clone https://github.com/PanJiaChen/vue-admin-template.git
# 重新命名一下，作為專案Web服務
mv vue-admin-template/ TPMWeb

這裡關於還有個技巧就是對其Fork，方便作者有修復Bug等情況及時更新我們的基礎程式碼，具體的後續可以找個小結專門講下。

最終我們就得到一個帶有前後端完整專案目錄結構如下：

TestProjectManagement
|-TPMService
|-TPMWeb

TPMService優化結構

之前我們例子中寫了登陸請求，這些資料其實都寫在了一個檔案裡，那麼隨著功能的增多，所有程式碼都在一起肯定是不合適的，而路由的實現又是顯示的，所以這裡我們用到python flak的中的 Blueprint 來進行模組化的管理和開發。

遷移登陸程式碼

在TPMService跟目錄下建立一個資料夾包 apis，並在此下邊建立一個user.py 檔案，編輯這個檔案，將之前章節的主檔案(run.py)中關於登陸的程式碼copy到此處，另外需要從flask中import blueprint，並註冊一個物件，重點實現給出標記

遷移後程式碼實現如下(/apis/user.py):

 #!/usr/bin/env python3
 # -*- coding:utf-8 -*-
 from flask import request
 import json
 
 from flask import Blueprint
 
 app_user = Blueprint("app_user", __name__)
 
@app_user.route("/api/user/login",methods=['POST'])
def login():
    data = request.get_data() # 獲取post請求body資料
    js_data = json.loads(data) # 將字串轉成json

    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

@app_user.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

在後端服務主程檔案(app.py) 引入分類模組即可

編寫產品線介面

按照上邊的思想，我們建立一個硬編碼的一個產品線模組[ /apis/product.py ] ，來配合實現一個vue頁面，產品管理顯示，直接給出核心程式碼：

product.py

# -*- coding:utf-8 -*-

from flask import Blueprint

app_product = Blueprint("app_product", __name__)

@app_product.route("/api/product/list",methods=['GET'])
def product_list():
    # 硬編碼返回list
    data = [
        {"id":1, "keyCode":"project1", "title":"專案一", "desc":"這是專案1描述", "operator":"admin","update":"2020-04-06"},
        {"id":2, "keyCode": "project2", "title": "專案而", "desc": "這是專案2描述", "operator": "user", "update": "2020-04-03"}
    ]
    # 按返回模版格式進行json結果返回
    resp_data = {
        "code": 20000,
        "data": data
    }
return resp_data

app.py

# -*- coding:utf-8 -*-
from flask import Flask
from apis.user import app_user
from apis.product import app_product
from flask_cors import CORS

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

app.register_blueprint(app_user)
app.register_blueprint(app_product)

if __name__ == '__main__':
    app.run(debug=True)

其中不要忘記之前文章中提到的CORS配置

最終後端服務目前結構如下

 

TPMWeb優化實現

按照之前的文章，分別來遷移或者重新修改下請求域名和請求API，詳細可以翻看上一篇文章，此處需要開啟WebStorm 開啟並匯入我們上邊的TPMWeb專案，然後直接通過IDE進行編碼。

遷移登陸配置

開發環境的請求域名修改，並且因為是新的框架環境，需要重新安裝依賴即 npm install

 

配置請求登陸API，並嘗試執行，開是否正常編譯

 

實現產品或者部門頁面及列表顯示

1）建立product 前端頁面

在路徑TPMWeb/src/views/下建立個資料夾product, 接著右鍵 New Vue Compoent，命名為 product.vue，其中Script 中那麼命名頁面名字為大寫的Product, 再放置個<label>我是產品管理頁面</label>方便下邊定義路由後檢視。

 

2）配置選單產品線管理路由

編輯 TPMWeb/router/index.js ，在 dashboard下邊配置，一個新的選單資訊，重點compent引數的指向view的地址一定要正確，其他引數配置參考如下

如果vue未在執行，那麼在Terminal下邊執行 npm run dev ，看下效果

 

3）配置後端產品線 API

在src/api/product.js 建立一個介面配置檔案，配置上邊服務的get請求地址，其中定義方法名為apiProductList(), 具體程式碼如下：

import request from '@/utils/request'

export function apiProductList() {
  return request({
    url: '/api/product/list',
    method: 'get'
  })
}

 

3）實現產品table列表顯示

編輯views/product/product.vue ，這裡從 https://element.eleme.cn/#/zh-CN/component/table 直接參考它元件的例子來實現。

其中涉及到知識點有：

  • vue 是一套響應式框架，一般元件、方法和樣式在一個頁面中集中實現

  • 模組 <template></template> 元件UI實現區域

  • 模組 <script></script> 業務實現的區域

<script>內部定義的意義

  • data(){} 定義值，屬性等

  • methods:{} 方法，事件處理等

  • created():() 頁面首次載入處理

template程式碼實現

<template>
   <!--app-container 框架內嵌的一個樣式，可以嘗試去掉看看效果有什麼不同-->
   <div class="app-container">
     <!--樣式元件 參考 https://element.eleme.cn/#/zh-CN/component/table-->
     <el-table :data="tableData"><!--:data 繫結data()的陣列值,會動態根據其變化而變化-->
       <el-table-column prop="id" label="編號"/>
       <!--:data prop繫結{}中的key，label為自定義顯示的列表頭-->
       <el-table-column prop="title" label="名稱"/>
       <el-table-column prop="keyCode" label="代號"/>
       <!--<el-table-column prop="desc" label="描述"/>-->
       <el-table-column prop="operator" label="操作人"/>
       <el-table-column prop="update" label="操作時間"/>
    </el-table>
  </div>
</template>

 

script程式碼實現

 <script>
 // 引用src/api/proudct 配置的請求列表方法
 import { apiProductList } from '@/api/product'
 
 export default {
   name: 'Product', // 頁面名稱
   // data() 資料\屬性，固定return中配置
   data() {
     return {
      tableData: []
    }
  },
  // 頁面生命週期中的建立階段呼叫
  created() {
    // 呼叫methods的方法，即初次載入就請求資料
    this.getProductList()
  },
  methods: {
    // getProductList自定義方法名，提供其他地方呼叫this.getProductList
    getProductList() {
      // 固定格式呼叫api配置方法，並將返回結果回撥給response
      apiProductList().then(response => {
        // console.log（）是除錯列印，可以在chrome開發者工具中檢視
        console.log(response.data)
        // 將返回的結果賦值給變數 tableData
        this.tableData = response.data
      })
    }
  }
}
</script>

 

4）執行檢視效果

以上如果沒有錯誤的話，我們再重新執行後端服務，前端服務看下效果

python app.py #或PyCharm 配自run config直接執行
nmp run dev   #或WebStorm 配自run config直接執行

資料從伺服器端請求並自動按照屬性配置顯示了資料

 

番外一些內容

全域性一些配置

在src/settings.js 有一些全域性配置，比如title可以修改下系統的名字

 

去除vue框架一些示例程式碼

這次雖然使用的極簡模版，但是還有有一些例子是用不到的，我們可以將其刪除掉，大概涉及到如下一些

  • /src/table.js

  • /views/table

  • /views/tree

  • /views/form

  • /views/nested

  • /mock

以及/src/router/index.js 中的相關上述選單配置

當然也可以保留方便參考，我這裡最終去除後的結構如下


Vue中文官方文件

如果想全面或者快速瞭解更多vue知識可以參考官方 

https://cn.vuejs.org/v2/guide/ 

 

程式碼託管

原生程式碼除錯通過通過就可以提交程式碼github進行託管了, 我已經提交，可以下載參考或者直接使用

https://github.com/mrzcode/TestProjectManagement

下一期預告和必要準備：資料落庫和產品線頁面管理功能

所以可以提前準備下可用的mysql環境，我個人使用的資料IDE是Navicat

 

*可能需要前要閱讀*

【提測平臺】分享2-基礎之專案前後端聯調互通

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

相關文章