測試開發實戰[提測平臺]16-狀態流轉和提測詳情展示

MrZ大奇發表於2021-11-28

微信搜尋【大奇測試開】，關注這個堅持分享測試開發乾貨的傢伙。

本篇講解概要，快速瞭解內容關鍵點，也可先參照脈絡點先實現再對照。這樣的印象會更深刻。

TPMServer

狀態流轉介面

在提測功這個大功能涉及到狀態直接流轉的有兩處，一個是提測成功後，對應測試在計劃時間內需要點選 “開始測試” 將狀態標記為下個階段，即資料庫表中status=2（測試進行中），另一個就在測試報告提交的時候如果狀態為廢棄後，可以將將其資料刪除不展示（即軟刪除表欄位isDel=1），從這兩個動作來看都是同一個表的更新操作，所以可以合併一個介面實現，減少介面的冗餘。

@test_manager.route("/api/test/change", methods=['POST'])
def changeStatus():
    # 初始化返回物件
    resp_success = format.resp_format_success
    resp_failed = format.resp_format_failed
    # 獲取請求引數Body
    reqbody = json.loads(request.get_data())
    if 'id' not in reqbody:
        resp_failed['message'] = '提測ID不能為空'
        return resp_failed
    elif 'status' not in reqbody:
        resp_failed['message'] = '更改的狀態不能為空'
        return resp_failed
    # 重新連結資料庫
    connection = pool.connection()
    with connection.cursor() as cursor:
        # 判斷狀態流轉的操作，如果status==start為開始測試，status==delete 軟刪除
        if reqbody['status'] == 'start':
            sql = "UPDATE `request` SET `status`=2 WHERE id=%s"
            resp_success['message'] = '狀態流轉成功，進入測試階段。'
        elif reqbody['status'] == 'delete':
            sql = "UPDATE `request` SET `isDel`=1 WHERE id=%s"
            resp_success['message'] = '提測已被刪除!'
        else:
            resp_failed.message = '狀態標記錯誤'
            return resp_failed
        cursor.execute(sql, reqbody['id'])
        connection.commit()
    return resp_success

介面實現很簡單，通過一個額外的欄位標記做哪個欄位更新，參考程式碼如上。

依然不要忘了對後端介面的測試：

Case1：請求不給定id或者status引數驗證是否有引數錯誤提示返回

Case2：狀態操作status=start驗證是否將提測狀態改為2

Case3：狀態操作status=delete驗證是否對資料進行軟刪除標記isDel=1

其實還有一種嚴格情況就是如果更改的id不存在該怎麼處理，示例程式碼沒有給出，看看是你的話如何進行優化呢？也當作個小練習吧。

 

TPMWeb

狀態流轉功能實現

前端分別對之前操作欄中的“開始測試”和“刪除測試”新增 @click 方法，對後端狀態改變介面進行呼叫，步驟套用不變

1.test.js 定義介面請求

export function changeStatus(body) {
  return request({
    url: '/api/test/change',
    method: 'post',
    data: body
  })
}

2. /src/views/test/index.vue的<template>新增觸發方法

3.同頁面vue的method中進行方法邏輯處理，此次對於請求的返回注意加了個$message 提示，在有正確的結果返回的時候給出服務端的訊息提示，另外不要忘記程式碼中在更新成功後要進行一次查詢請求，列表重新整理最新的資料。

startTest(row) {
  const reqBody = {
    id: row.id,
    status: 'start'
  }
  changeStatus(reqBody).then(resp => {
    this.$message({
      message: resp.message,
      type: 'success'
    })
    this.searchClick()
  })
},
deleteTest(row) {
  const reqBody = {
    id: row.id,
    status: 'delete'
  }
  changeStatus(reqBody).then(resp => {
    this.$message({
      message: resp.message,
      type: 'success'
    })
    this.searchClick()
  })
},

為了提升使用者感知度，這裡還對table增加了延遲loading的，參考圖的標記位置，即定義是否顯示載入動畫的動態變數，然後搜尋前操作開啟，有結果後關閉。

由於本地查詢可能比較快，特別設定300毫秒作為延遲，如果你在測試的過程中還是不是很明顯，可以加大時間到1000毫秒體驗一下。請注意圖中還有兩個變數宣告 requestInfoVisible 和 requestInfo 是要在接下來的實現提測詳情展示用到的。

提測詳情展示

在實際使用中，提測內容很多，是需要有在平臺檢視詳細的功能，這裡通過彈出對話方塊，並內嵌 "描述列表" 來進行展示，元件的使用方法參考官方 [ https://element.eleme.io/2.15/#/zh-CN/component/descriptions ]，這裡就不再貼上了，點選操作”提測詳情“彈窗的實現Demo樣式相關片段程式碼如下：

1. template 部分，核心元件 dialog 和 descriptions

<el-link type="primary" @click="showRequestInfo(scope.row)">提測詳情</el-link>

 

<div>
  <el-dialog :title="requestInfo.title" :visible.sync="requestInfoVisible">
    <el-descriptions title="提測資訊">
    <el-descriptions-item label="使用者名稱">kooriookami</el-descriptions-item>
    <el-descriptions-item label="手機號">18100000000</el-descriptions-item>
    <el-descriptions-item label="居住地">蘇州市</el-descriptions-item>
    <el-descriptions-item label="備註">
    <el-tag size="small">學校</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="聯絡地址">江蘇省蘇州市吳中區吳中大道 1188 號</el-descriptions-item>
    </el-descriptions>
 </el-dialog>
</div>

2. js部分，行資料賦值，顯示無底角標按對話方塊

showRequestInfo(row) {
  this.requestInfo = row
  this.requestInfoVisible = true
},

執行檢視效果卻發現沒有按照預期展示正常樣式

這是由於專案引用的element-ui是2.13.0版本，並沒有這個元件，需要升級到 "element-ui": "2.15.17"才可以，記得在package.json更改版本後要進行npm install 安裝最新依賴包。

然後一併修改下<el-descriptions-item>展示內容為專案的內容，最終實現的效果如下。

樣式還有點奇怪，注意到有一些欄位是會很長的，進行下處理，利用官方自定義分欄和合並列屬性進一步優化，最終效果如圖。

這部分的優化後的完整程式碼參考

到此為止，本篇要實現的兩個功能已經全部完成。

缺陷修復

在更新本次內容中，實際上發現兩個隱藏的問題，如果之前大家在認真實踐操作中應該早被發現了，我這裡也Mark下

問題1: 錯誤訊息體(字典/Json)變數賦值引用錯誤，正確應該是下角標的方式。

 

問題2: 列表查詢翻頁報錯，是因為統計總數不應該帶有limit條件，需要獨立處理語句。

 兩個缺陷前後優化了什麼程式碼，可以通過git工具得到完整的詮釋。

最後說一下，如果你在跟著本系列分享教程中有任何的問題和想法建議，歡迎私信或者加我個人微信、群等進行交流，微信可以通過公眾號留言和選單兩種方法是獲取。真心希望公眾號部落格更新的原創實戰內容，能在茫茫氾濫網路文章帶來幫助和切實幹貨價值。

【程式碼更新】

  • 地址：https://github.com/mrzcode/TestProjectManagement

  • TAG：TPMShare16

堅持原創，堅持實踐，堅持乾貨，如果你覺得有用，請點選推薦，也歡迎關注我部落格園和微信公眾號。

 

相關文章