丁香園開源接口管理系統 - 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使用文檔