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

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

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

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

• 使用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-基礎之技術棧和開源框架選型