測試開發實戰[提測平臺]15-實現提測單修改和郵件標記

MrZ大奇發表於2021-11-23

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

繼續測試開發實戰系列的分享，本篇是對提測平臺的提測功能的編輯功能進行實現，主要重點是服務端更新介面中郵件內容標註邏輯實現，和對前端上篇新增需求的基礎進行適配改造。

TPMServer

提測詳細查詢介面

根據提測ID，對資料表 request 和 apps 做聯合表查詢，返回需要詳細資訊，此介面用於前端跳轉編輯提測頁面的資料回填。

# testmanager.py

@test_manager.route("/api/test/info", methods=['GET'])
def getTestInfo():
    test_id = request.args.get('id')
    resp_success = format.resp_format_success
    resp_failed = format.resp_format_failed

    if not test_id:
        resp_failed.message = '提測ID不能為空'
        return resp_failed
    connection = pool.connection()
    with connection.cursor() as cursor:
        # 查詢產品資訊表-按更新時間新舊排序
        sql = "SELECT A.id as appId, A.appId as appName, R.id,R.title,R.developer,R.tester,R.CcMail,R.version,R.type,R.scope,R.gitCode,R.wiki,R.more FROM request as R , apps as A where R.appId = A.id AND R.isDel=0 AND R.id={}".format(test_id)
        cursor.execute(sql)
        data = cursor.fetchall()
        if len(data) == 1:
            resp_success['data'] = data[0]
    return resp_success

提測修改介面

提測更新介面，這裡沒有像之前一樣放在一個方法裡進行處理，主要原因有個特殊邏輯處理，將介面程式碼分開使得結構能夠更清晰，這個特殊處理邏輯就需要對比下哪些是更改的內容，然後如果在勾選了傳送的的選項下，能夠將其標明下，這樣才使得修改通知郵件有意義。這裡邏輯上大致為：

1. 更改資料前先查詢暫存一個變數中A

2. 進行資料庫更新，同時有變數B

3. 如果勾選了發郵件，傳送內容欄位值進行AB對比，不同則進行背景高亮或者前後標註處理，程式碼中採用的是標記 A.某內容變更為：B.某內容

@test_manager.route("/api/test/update", methods=['POST'])
def updateReqeust():

    # 獲取傳遞的資料，並轉換成JSON
    body = request.get_data()
    body = json.loads(body)

    # 定義預設返回體
    resp_success = format.resp_format_success
    resp_failed = format.resp_format_failed

    if 'appId' not in body:
        resp_failed['message'] = 'appId 提測應用不能為空'
        return resp_failed
    elif 'tester' not in body:
        resp_failed['message'] = 'tester 測試人員不能為空'
        return resp_failed
    elif 'developer' not in body:
        resp_failed['message'] = 'developer 提測人不能為空'
        return resp_failed
    elif 'title' not in body:
        resp_failed['message'] = 'title提測標題不能為空'
        return resp_failed

    # 使用連線池連結資料庫
    connection = pool.connection()

    with connection:
        with connection.cursor() as cursor:
            sql = "SELECT A.appId as appId, A.note as appName, R.id,R.title,R.developer,R.tester,R.CcMail,R.version,R.type,R.scope,R.gitCode,R.wiki,R.more FROM request as R , apps as A where R.appId = A.id AND R.isDel=0 AND R.id={}".format(
                body['id'])

            cursor.execute(sql)
            data = cursor.fetchall()
            if len(data) == 1:
                old_test_info = data[0]
            else:
                print('原有資料請求查詢異常！')

        # 如果傳的值有ID，那麼進行修改操作，否則為新增資料
        with connection.cursor() as cursor:
            # 拼接修改語句，由於應用名不可修改，不需要做重複校驗appId
            sqlUpdate = "UPDATE request SET title=%s,appId=%s,developer=%s,tester=%s,CcMail=%s,version=%s,`type`=%s," \
                        "scope=%s,gitCode=%s,wiki=%s,`more`=%s,updateUser=%s,`updateDate`= NOW() WHERE id=%s"
            cursor.execute(sqlUpdate, (
                body["title"], body["appId"], body["developer"], body['tester'], body["CcMail"], body["version"],
                body["type"], body["scope"], body["gitCode"], body["wiki"], body["more"], body["updateUser"],
                body["id"]))
            # 提交執行儲存更新資料
            connection.commit()

            if 'isEmail' in body and body['isEmail'] == 'true':
                # 新建成功傳送Email
                if body['type'] == 1:
                    rquest_type = '功能測試'
                elif body['type'] == 2:
                    rquest_type = '效能測試'
                elif body['type'] == 3:
                    rquest_type = '安全測試'

                receivers = body["tester"].split(',') + body["developer"].split(',')
                if not body["CcMail"] is None:
                    receivers = receivers + body["CcMail"].split(',')

                subject = '【提測】' + body['title']
                contents = []
                contents.append('<strong>[提測應用]</strong>')

                if old_test_info and old_test_info['appName'] != body['appName']:
                    contents.append(old_test_info['appName'] + '變更為:' + body['appName'])
                else:
                    contents.append(body['appName'])

                contents.append('<strong>[提測人]</strong>')
                if old_test_info and old_test_info['developer'] != body['developer']:
                    contents.append(old_test_info['developer'] + '變更為:' + body['developer'])
                else:
                    contents.append(body['developer'])

                contents.append('<strong>[提測版本]</strong>')
                if old_test_info and old_test_info['version'] != body['version']:
                    contents.append(old_test_info['version'] + '變更為:' + body['version'])
                else:
                    contents.append(body['developer'])

                contents.append('<strong>[測試內容]</strong>')
                if old_test_info and old_test_info['scope'] != body['scope']:
                    contents.append(old_test_info['scope'] + '變更為:' + body['scope'])
                else:
                    contents.append(body['scope'])

                contents.append('<strong>[相關文件]</strong>')
                if old_test_info and old_test_info['wiki'] != body['wiki']:
                    contents.append(old_test_info['wiki'] + '變更為:' + body['wiki'])
                else:
                    contents.append(body['wiki'])

                contents.append('<strong>[補充資訊]</strong>')
                if old_test_info and old_test_info['more'] != body['more']:
                    contents.append(old_test_info['more'] + '變更為:' + body['more'])
                else:
                    contents.append(body['more'])

                reuslt = sendEmail(receivers, subject,contents)

                if reuslt:
                    sendOk = 1
                else:
                    sendOk = 2

                with connection.cursor() as cursor:
                    # 更新Emai是否傳送成功1-成功 2-失敗
                    updateEmail = "UPDATE request SET sendEmail=%s, updateUser=%s,`updateDate`= NOW() WHERE id=%s"
                    cursor.execute(updateEmail, (sendOk, body["updateUser"], body['id']))
                    # 提交修改郵件是否傳送成功
                    connection.commit()
            else:
                print('不傳送郵件！')

    return resp_success

以上是本次功能用到的兩個介面，測試請自行使用postman等工具進行驗證。

TPMWeb

定義請求介面

首先先定義好後端的介面請求，只需接著上次分享中的test.js中新增兩個請求

編輯帶參跳轉與獲取

在提測列表頁面中增加點選事件並實現方法，方法中這次採用URL帶引數的方式，如果還不瞭解Vue $router 跳轉的幾種方式，請參考之前這篇測試開發【提測平臺】13遠端搜尋和路由$route使用實現新建提測需求，跳轉除了動作引數值賦予“UPDATE”，另外還需要而外給選擇編輯資料的ID，用於跳轉後的再查詢，當然也可以通過param隱式的將一行資料傳遞過去，但這裡不太建議。

對於commit頁面不使用從上一頁拿整行的資料，主要是考慮到這個頁面有可能會做重新整理瀏覽器操作，如果是隱式資料就會丟失，而URL中的引數不會，可以再次被取到，大家可以嘗試下區別。這裡需要對原有action和新引數id判斷獲取值，並對提測資訊進行查詢初始化。

提測詳細回填處理

getTestInfo的程式碼邏輯是實現查詢並將所需要的欄位值繫結 requestForm，另外這段程式碼還需要做兩個特殊的處理，需要特別注意下:

1. 應用的ID遠端搜尋下拉框繫結需要程式碼觸發下查詢，使用者Label - value的回填

2. 延遲200～300秒在繫結appId，要不在跳轉的頁面的時候會有個小問題，就是先顯示appId，再顯示appName的一個過程，具體現象大家可以將setTimeout這個註釋掉，直接this.requestForm.appId = data.appId 做個對比。

getTestInfo() {
  apiTestInfo(this.testId).then(response => {
    const data = response.data
    this.requestForm.id = data.id
    this.requestForm.title = data.title
    this.requestForm.developer = data.developer
    this.requestForm.tester = data.tester
    this.requestForm.CcMail = data.CcMail
    this.requestForm.version = data.version
    this.requestForm.type = data.type
    this.requestForm.scope = data.scope
    this.requestForm.gitCode = data.gitCode
    this.requestForm.wiki = data.wiki
    this.requestForm.more = data.more
    this.requestForm.appName = data.appName
    this.requestForm.isEmail = false
    this.remoteMethod(data.appName)
    // this.requestForm.appId = data.appId

    setTimeout(() => {
      this.requestForm.appId = data.appId
    }, 300)
  })
}

頁面支援修改改造

template部分為了支援修改功能的實現，需要如圖三處的變更或者新增

1. 根據跳轉動作顯示對應的標題

2. 判斷是更改的操作，顯示ID資訊，狀態不可更改

3. 增加修改按鈕，用v-if判斷動作，也可直接使用一個button，對文字描述做判斷，例如

<el-button type="primary" @click="onSubmit">{{testAction=='ADD'?'立即新增':'修改提測'}}</el-button>

修改資料提交

提測編輯頁面最後一個改造就是對資料的提交部分，同ADD邏輯，僅改了下請求API。

聯調測試

程式碼編寫完成還是要做個系統的測試來進行功能的驗證

CASE-1: 新建一個提測，驗證新增功能是否受新的修改功能影響；

CASE-2: 修改剛剛建立的提測，檢查資料查詢回填，尤其是是服務應用顯示是否正常，修改部分欄位值，提交修改；

CASE-3: 檢查郵件是否都有正常收到，修改郵件是否按預期內容進行了標註。

文末留個優化小作業，對於郵件的傳送內容你能否用之前講解的HTML模版知識進行格式上的優化呢，讓內容更好看一些。

【程式碼更新】

地址：https://github.com/mrzcode/TestProjectManagement
TAG：TPMShare15

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

測試開發實戰[提測平臺]16-狀態流轉和提測詳情展示
2021-11-28
測試開發實戰[提測平臺]17-Flask&Vue檔案上傳實現
2021-12-19
FlaskVue
測試開發【提測平臺】分享5-實現產品線的新增
2021-08-11
測試開發【提測平臺】分享8 - 平臺規劃和需求分析
2021-09-01
測試平臺開發教程【提測平臺】階段總結(三)
2022-01-01
Python Flask API實現方法-測試開發【提測平臺】階段小結(一)
2021-08-19
PythonFlaskAPI
測試開發【提測平臺】分享12-掌握日期元件&列表狀態格式化最終實現提測管理多條件搜尋展示功能
2021-10-11
元件
【提測平臺】測試平臺開發練手專案原始碼和教程彙總
2022-03-11
原始碼
測試開發實戰[提測平臺]20-圖表G2Plot在專案的實踐實錄
2022-02-07
測試開發【提測平臺】分享7-實現產品搜尋和優化時間顯示
2021-08-16
優化
測試流程規範--提測規範（釘釘、郵件）
2020-11-11
測試開發【提測平臺】分享4-實現資料庫繫結和產品線顯示功能
2021-08-09
資料庫
測試開發【提測平臺】分享10-Element UI抽屜和表單校驗&增改介面合併實現應用管理
2021-09-21
UI
測試開發【提測平臺】分享2-專案前後端聯調互通
2021-08-03
後端
測試開發【提測平臺】分享3-正式開發產品需求&專案初始化
2021-08-05
Element Vue 開箱即用框架如何使用-測試開發【提測平臺】階段小結(二)
2021-08-22
Vue框架
貓眼測試開發實踐沉澱--Chaoyue測試管理平臺
2021-03-03
【Mock平臺】測試開發實戰01-開篇PRD和需求詳細
2022-02-20
Mock
研效優化實踐：WeTest提效測試
2022-01-19
優化
測試開發【提測平臺】分享14-Vue圖示Icon幾種用法並利用其一優化選單
2021-11-15
Vue優化
研效最佳化實踐：WeTest提效測試
2022-01-18
測試平臺系列(88) 完成郵件通知功能（附贈精美郵件模板）
2022-01-19
React單元測試實戰
2019-04-25
React
測試平臺系列(87) 搞個精美的郵件模板
2022-01-05
測試開發必備技能：安全測試漏洞靶場實戰
2021-03-11
Django+Vue+Docker搭建介面測試平臺實戰
2021-04-28
DjangoVueDocker
FastAPI專案實戰："非同步"介面測試"平臺"
2021-04-20
ASTAPI非同步
88 郵箱測試左移和測試右移的落地實踐
2020-11-10
JavaScript 實戰開發經驗！“智力”測試
2018-02-04
JavaScript
聊聊發版提測和釋出評審
2024-04-10
線上教育平臺開發中，課堂測試功能是如何實現的
2020-07-10
測試平臺系列(85) 把redis運用到實戰中
2021-11-30
Redis
測試平臺之介面測試
2020-08-21
用JS實現前端開發單元測試（翻譯）
2013-02-01
JS前端
springboot+Vue 實現介面測試平臺
2021-01-05
Spring BootVue
滲透測試——提權方式總結
2019-06-11
測試提效篇: 個人工具篇
2024-09-24
測試驅動開發(TDD)實戰心得 - DeniMoka
2020-11-17