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

相學長發表於2019-03-03
APIMock

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

架構圖如下：

Server

架構圖如下：

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

系統未來展望

更加強大的介面約定

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

更完善的周邊功能

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

其他完善的點

  • 完善mock的體驗
  • 更多維度的資料統計
  • 完善使用文件
  • 國際化

致謝

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

Github地址     API Mocker使用文件

相關文章