丁香園開源介面管理系統 - API Mocker

API Mocker

先貼上項目地址：DXY-F2E/api-mocker

隨著web發展，前後端分離的演進，網頁的交互變的越來越複雜。在項目開發過程中，前後端並行開發時，在涉及到介面的部分，總是遇到各類問題。諸如介面假數據、介面參數的約定、代理調試等等，極大的影響了開發效率。

API Mocker致力於解決前後端開發協作過程中出現的各類問題，提高開發效率，對介面做統一管理，同時也能為後續的迭代維護提供更便捷的方式。

系統功能

介面約定

API Mocker提供操作簡單但功能豐富的介面編輯，介面約定者能方便的設置介面的各類信息，其中：

• 結構化的介面參數輸入與輸出
• 支持不同維度的請求參數約定（query，body，path, header）
• 支持參數的類型約定（string，number，boolean，object，array）
• 參數備註、示例
• 支持Json數據逆向生成參數結構
• 保留一定介面歷史記錄

Mock數據

API Mocker認為，mock不僅僅體現在返回數據中，mock請求本身也應該符合介面約定。因此，我們提供更加符合業務場景的mock服務。

• Mock請求會根據介面約定，自動生成假數據。
• Mock請求會根據介面約定，對請求參數做校驗。（校驗是否選填、參數類型是否正確）。
• 根據介面約定與用戶設置，能模擬不同的網路響應狀態，如：200，404，500。
• 支持介面代理，代理mock請求到線上or測試地址，避免開發環境跨域，省下Charles代理過程。
• 支持Mock.js語法。

介面文檔

API Mocker會根據介面約定自動生成簡潔優美、結構清晰的介面文檔。同時，可以訂閱介面，當介面發生變化時，及時收到郵件通知。

介面許可權

API Mocker提供簡單易用的許可權控制。

• 組級別、API級別控制
• 可見性、可寫性許可權控制

其他功能點

• 介面測試。開發人員可以在系統上直接測試介面，避免在postman等請求工具上又填寫眾多參數
• 便捷的介面搜索。（可以按介面地址、管理員等維度搜索介面）
• 數據呈現
• 支持rap的導入

技術棧與第三方庫

• ES6
• ESLint (Standard)
• Ramda
• ...

Client

• Vue全家桶（vue + vuex + vue-router + webpack）
• ElementUI, Mock.js, etc...
• Less

架構圖如下：

Server

• Egg, Koa
• MongoDB
• Mongoose

架構圖如下：

其他部署相關內容可看項目github地址的介紹。

系統未來展望

更加強大的介面約定

• 更多校驗屬性的添加（日期、範圍、正則）
• 更便捷的編輯
• 模板選擇
• 組內介面欄位智能提示
• 完善restful api的支持
• 介面狀態管理、版本管理

更完善的周邊功能

• swagger導入
• markdown格式文檔導出
• Model文件導出（TypeScript等）
• 自動化測試
• 隨機數據
• 多次請求
• 生成報表

其他完善的點

• 完善mock的體驗
• 更多維度的數據統計
• 完善使用文檔
• 國際化

致謝

項目本身也引用了眾多開源項目，在此再次感謝這些項目對社會與技術圈作出的傑出貢獻。丁香園也將努力、持續的做技術輸出、產品輸出，為開源社區做出自己的一份力量。

Github地址 API Mocker使用文檔

推薦閱讀：