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

相學長發表於2019-03-03

API Mocker

先貼上專案地址:DXY-F2E/api-mocker

隨著web發展,前後端分離的演進,網頁的互動變的越來越複雜。在專案開發過程中,前後端並行開發時,在涉及到介面的部分,總是遇到各類問題。諸如介面假資料、介面引數的約定、代理除錯等等,極大的影響了開發效率。

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

系統功能

介面約定

API Mocker提供操作簡單但功能豐富的介面編輯,介面約定者能方便的設定介面的各類資訊,其中:

  • 結構化的介面引數輸入與輸出
    • 支援不同維度的請求引數約定(querybodypath, header
    • 支援引數的型別約定(stringnumberbooleanobjectarray
    • 引數備註、示例
  • 支援Json資料逆向生成引數結構
  • 保留一定介面歷史記錄

Mock資料

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

  • Mock請求會根據介面約定,自動生成假資料。
  • Mock請求會根據介面約定,對請求引數做校驗。(校驗是否選填、引數型別是否正確)。
  • 根據介面約定與使用者設定,能模擬不同的網路響應狀態,如:200404500
  • 支援介面代理,代理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使用文件

相關文章