大家好~我是
米洛！
我正在從0到1打造一個開源的接口測試平台, 也在編寫一套與之對應的完整教程，希望大家多多支持。
歡迎關注我的公眾號米洛的測開日記，獲取最新文章教程!
回顧
上一節我們粗略介紹了下怎么設計前端頁面。時隔一日，博主已經把代碼碼好了。
不得不說，前端代碼還是非常非常難寫的，感覺同樣是crud，卻比后端復雜許多。這一節我們繼續補充這塊內容。
恭喜EDG獲取S11冠軍，EDG牛皮！蹭個熱度~
細節
細節部分大家可以參看具體的代碼邏輯，我這邊稍微介紹下頁面的調整。
數據構造器（前置條件）
這塊采用了Antd pro Components，也就是專業級的Card組件。看起來確實比我自己寫的好上100個檔次:
前后對比:
- 改造前
配色也不知道怎么配，我一直覺得前端很難，css是門學問。
- 改造后
來看看ProCard的代碼:
- 安裝ProCard
npm install --save @ant-design/pro-card
- 使用
可以看到api比較簡單，avatar就是卡片的圖標，title是標題，description是描述。很習慣的antd風格。
用例列表部分
我們都知道測試計划就是為了組裝測試用例的，所以我們這邊給出了一組數據，可以通過項目獲取到該項目下的測試用例樹。
選中以后，下方會出現一個可拖拽的case列表，如果對於順序有嚴格要求的，可以拖動列表，改變case的執行順序。
與之對應的，需要通過項目獲取到case數據:
也可以通過目錄來選擇case。
后端改動如下:
因為我們是有通過項目獲取case目錄的方法的，現在缺的就是是否要繼續獲取目錄下的case。
所以定義了一個case_node的參數（參數是一個方法，獲取子節點的方法）。
如果有該方法，則調用之獲取對應的節點。
由於select數據比較奇怪，我們的數據庫存的case_list又是id，所以我們想知道case名字並不是很容易。
於是這里帶出項目樹的同事，帶出了case_id => case_name的映射關系: case_map。
這樣做肯定會有問題，特別是數據量多的情況下。但一個project下的case有這么大規模的時候，也可以重構了。
最后，編寫該接口:
前端通知部分
通知部分很簡單，也是常規表單，給它們加上圖標會更友好:
通知具體的邏輯還沒有做，這涉及到人員的手機號，郵箱等。肯定是需要一個用戶管理頁面，用戶也需要更新資料的頁面。
APScheduler的坑
不得不說，這個庫還真的是有一些問題。雖然看起來是比較美好，但現實給人當頭一棒。
-
踩坑
當編輯測試計划的時候，使用scheduler.modify_job，就算你改變了trigger，也不會使cron表達式更新。
最后來張穩定運行測試計划的圖:
最新的代碼，我已經部署了。
歡迎大家提各種建議和意見。