https://xie.infoq.cn/article/551dd6cd606ef16fdc3ce448d
平臺背景
從業務特性上，不少測試的服務很多是依賴第三方的接口的，比如其中的支付場景，就需要很多狀態的返回進行驗證，但大部分服務提供商沒有很友好的測試環境或者沙箱環境，提供的測試賬號能做的場景也有限；從技術層面，服務不想在代碼裏做過多侵入 Mock，也想充分利用統一配置服務做快速切換；從測試團隊來講，可以爲業務特性適配簡單好用，也想找一種內部自動化和平臺配置的數據驅動方案，另外也是想找一個技術平臺推動全員的技術參與度。
基於以上的一些內容便有了這個 Mock 平臺，還是和上個系列一樣，這裏重新整理和開發，作爲一個測試平臺開發練手項目分享出來，希望對正在找乾貨，愛學習的同學提供一些微不足道的學習途徑，當然這個平臺其實具有實用價值，後續可以直接使用或者二次開發擴展使用。
Mock 流程
整個實現層面比較簡單，畫了一個示意圖做參考，一部分 web 頁面（服務 1 前端+後端）進行接口的錄入和配置，另一部分則是外部的依賴請求流程（服務 2 純後端獨立）核心是做 http 攔截和匹配返回，這裏還有一個待定實現的 proxy 代理功能，既手機可以通過局域網設置帶來走 mock，這種最大的好處就是連服務的統一配置都不需要做變更。
功能概述
這裏先羅列出大的包含的功能模塊，以便有個整體概念，然後在給出詳細的 prd 和需求說明，方便後續開發實現。
Web 前後端
-
項目管理
-
分類樹管理
-
接口錄入和編輯
-
規則簡單和高級配
-
返回支持標準 JSON 和 XML
-
數據圖表 Dashboard
獨立 Mock 服務
-
請求攔截功能
-
匹配接口和規則
-
按照 HTTP 規範組裝返回
-
高級設置邏輯處理工具
-
Proxy 代理 (TBD)
原型和需求說明
一、項目管理
平臺項目必不可少的基礎配置，更大的團隊可以加入空間的概念或者跟組織架構做關聯，能更好方便後統計和管理。
1.搜索功能
支持項目名稱關鍵字輸入，點擊後進行模糊搜索
2.展示列表
表格展示分頁接口項目列表，頁面初始化默認查詢空關鍵詞第一頁數據
-
按照更新時間倒序排序
-
支持分頁，默認每頁 10 條
-
分頁選項爲 5-10-20-30-50，支持快速轉跳
-
列表功能列包含編輯和進入項目菜單
3.操作項目
-
添加功能在搜索列最右側，點擊後彈窗形式
-
添加和編輯對話包含項目名稱（必填）和描述，確定提交成功後進列表刷新
二、接口分類管理
接口的數量可能很多，這裏增加一個分類 tree 功能，可以進行歸類和查詢，如原型圖將其放在項目同頁面的最左側區域，方便直接切換過濾。
添加分類：通過點擊添加按鈕彈出對對話框，字段分別爲名稱（必填）和描述
分類編輯：選中某個分類後出現編輯按鈕，點擊後操作與添加相同，另外爲了增加交互可以根據控件情況實現右側快捷菜單和不限層級的分類結構
三、接口配置
平臺核心功能，實現標準 HTTP 接口的錄入和管理，涉及的核心字段包括但不限於方法、路徑、返回值，提前說明一點的是，接口只做基本配置和默認返回，更多高級的配置玩法將在規則管理中實現。
詳細的需求交互拆解如下：
1. 列表展示
對於一個項目或者微服務一般接口數量不會太多，所以列表可以不分頁直接展示全部，另外接口還可以通過分類切換進行快速過濾，列信息參考原型圖，右側操作列功能按鈕包括“修改接口”和“規則配置”。
2. 新增和編輯
通過點擊對應按鈕彈出添加/編輯對話框字段包括：
-
對話框文案：標題和提交按鈕根據操作動作展示區分文案；
-
標題必填名字，且 1-20 個字符校驗；
-
方法：必選，支持 GET/POST，默認 GET 爲第一選項；
-
路徑：接口實際請求 path（不含 host）字符 500 以內；
-
分組：即左側分類歸屬，非必填不選擇則放在全部下；
-
返回類型：目前設計支持 JSON 和 XML 兩種，其他可根據業務需求自行定義；
-
默認返回：接口在沒有規則配置的情況的默認返回，非必填，如果沒有設置並且 Mock 邏輯拿了這個值則爲空；
-
備註：非必填自負，500 字符以內，僅作爲一些備註說明；
-
取消按鈕：關閉對話框，如果是添加並清空歷史緩存信息；
-
添加/修改：進行表單的提交，數據落庫。
3. 規則操作
點擊規則配置，在當前接口下展開子區域，然後進行規則管理，再次點擊關閉展開。擴展：快速開啓/關閉接口是否生效功能（TBD）。
四、規則配置
接口之下另一個核心功能續期，往往其他 mock 平臺太過於簡單，只有默認返回的時候，就不得不每次測個場景就要做些接口返回變更，這裏加入更高級一點規則配置，可以根據輸入的參數返回不同的數據，這樣方便各種類型的測試，也更能靈活的放在自動化的 Mock 需求場景上。
爲了交互上的便捷，通過接口錶行點擊擴展頁面來實現規則的增刪改操作，規則主要針對請求參數規則匹配然後返回不同的 Body，本系列上通過一種簡單的方式 正則表達式 來實現匹配邏輯，更好一點交互是做到 param/body 的 key-value 形式。
規則管理分兩種類型
1. 簡單配置
通用標題必填，類型選項選擇簡單配置也是默認的選項。
-
參數過濾選項：支持 param 和 body
-
參數過濾值：完全匹配或正則匹配
-
HTTP 返回體：json 或者 xml，這個根據接口配置的返回類型設定
2.高級配置
在簡單配置的基礎上增加的擴展配置，這些都是指返回內容的設置。
-
HTTP 返回碼：不配置或默認選項爲成功 200，也可以配置爲其他狀態碼，如 302，401 等根據業務常見狀態設定
-
HTTP 返回頭：特殊場景需求下 header 的返回場景需要，比如格式、協議等
-
延遲：模擬一些需要延遲返回的場景，默認爲 0，單位毫秒
五、數據報表
接口相關的數據統計，初步計劃展示一些概要彙總，以及調用的趨勢圖，這裏趨勢的統計需要依賴後段服務做個請求日誌存留，詳細界面和數據內容做到的時候在詳細說明，此處僅做個概要原型預覽。
六、功能擴展
除了上述是已經確定的需求會開發，還將根據實際進度進行決定是否做一些擴展的功能，包括但不限於如下內容：
-
接口分類樹管理支持多層配置
-
代理能力的實現（即實現移動端無縫使用 ock）
-
平臺支持忽略轉發（即接口禁用或沒有匹配時候直接原封轉發）
-
項目權限的管理
-
接入飛書/企業微信/釘釘至少一種統一登錄和通知能力
-
...更多希望大家也參與進來，將一些通用有價值的功能合作開發出來
技術選定
後端接口：已確定爲 JAVA 語言框架 springboot
前端框架：還未最終確定，還需要調研權衡下，主要是項目之前用的 element ui admin 以及上個系列提測平臺也是這個框架，本着突破自己舒適區以及儘可能提供廣大學習者的更多選擇，所以會定在 React 的 ant design pro xing ✩✩✩ 或者 antdvue ✩✩,後者推薦星數少的在於沒有比較好的 Vue3 開箱即用的項目。
Mock 服務：Spring boot HandlerInterceptor
數據庫：Mysql 5.7+
Mock 分享規劃
系列文章會從幾個方面做系列分享：
-
基礎篇：對於從未接觸前後端框架的基礎使用普及 2～5 篇
-
開發篇：對上述產品需求進行開發實戰講解分享 10 篇左右
-
總結篇：階段的總結 2～3 篇
-
深度篇：一些知識點的擴展深度學習 1～2 篇
-
擴展開發：根據系列分享的效果決定是否迭代開發擴展待定需求