大家好~我是
米洛法严！
我正在從0到1打造一個開源的接口測試平臺, 也在編寫一套與之對應的完整教程村砂，希望大家多多支持烂斋。
歡迎關注我的龔仲耗測試開發(fā)坑貨，獲取最新文章教程!
回顧
上一節(jié)我們粗略介紹了下怎么設計前端頁面础废。時隔一日汛骂，博主已經(jīng)把代碼碼好了。
不得不說评腺，前端代碼還是非常非常難寫的帘瞭，感覺同樣是crud，卻比后端復雜許多蒿讥。這一節(jié)我們繼續(xù)補充這塊內容蝶念。
恭喜EDG獲取S11冠軍，EDG牛皮芋绸！蹭個熱度~
細節(jié)
細節(jié)部分大家可以參看具體的代碼邏輯媒殉，我這邊稍微介紹下頁面的調整。
數(shù)據(jù)構造器（前置條件）
這塊采用了Antd pro Components摔敛，也就是專業(yè)級的Card組件廷蓉。看起來確實比我自己寫的好上100個檔次:
前后對比:
- 改造前
配色也不知道怎么配桃犬，我一直覺得前端很難刹悴，css是門學問。
- 改造后
來看看ProCard的代碼:
- 安裝ProCard
npm install --save @ant-design/pro-card
- 使用
可以看到api比較簡單土匀，avatar就是卡片的圖標，title是標題扯饶，description是描述恒削。很習慣的antd風格池颈。
用例列表部分
我們都知道測試計劃就是為了組裝測試用例的尾序，所以我們這邊給出了一組數(shù)據(jù)，可以通過項目獲取到該項目下的測試用例樹躯砰。
選中以后每币，下方會出現(xiàn)一個可拖拽的case列表，如果對于順序有嚴格要求的琢歇，可以拖動列表兰怠，改變case的執(zhí)行順序。
與之對應的李茫，需要通過項目獲取到case數(shù)據(jù):
也可以通過目錄來選擇case揭保。
后端改動如下:
因為我們是有通過項目獲取case目錄的方法的，現(xiàn)在缺的就是是否要繼續(xù)獲取目錄下的case魄宏。
所以定義了一個case_node的參數(shù)（參數(shù)是一個方法秸侣，獲取子節(jié)點的方法）。
如果有該方法宠互，則調用之獲取對應的節(jié)點味榛。
由于select數(shù)據(jù)比較奇怪，我們的數(shù)據(jù)庫存的case_list又是id予跌，所以我們想知道case名字并不是很容易搏色。
于是這里帶出項目樹的同事，帶出了case_id => case_name的映射關系: case_map券册。
這樣做肯定會有問題频轿，特別是數(shù)據(jù)量多的情況下。但一個project下的case有這么大規(guī)模的時候烁焙，也可以重構了略吨。
最后，編寫該接口:
前端通知部分
通知部分很簡單考阱，也是常規(guī)表單翠忠，給它們加上圖標會更友好:
通知具體的邏輯還沒有做，這涉及到人員的手機號乞榨，郵箱等秽之〉庇椋肯定是需要一個用戶管理頁面，用戶也需要更新資料的頁面考榨。
APScheduler的坑
不得不說跨细，這個庫還真的是有一些問題。雖然看起來是比較美好河质，但現(xiàn)實給人當頭一棒冀惭。
-
踩坑
當編輯測試計劃的時候，使用scheduler.modify_job掀鹅，就算你改變了trigger散休，也不會使cron表達式更新。
最后來張穩(wěn)定運行測試計劃的圖:
最新的代碼限府，我已經(jīng)部署了。
歡迎大家提各種建議和意見痢缎。
