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使用文件