再見丑陋的 Swagger,這個API神器界面更炫酷,逼格更高,體驗更好!
代碼未動,文檔先行
其實大家都知道 API 文檔先行的重要性,但是在實踐過程中往往會遇到很多困難。
程序員最討厭的兩件事:1. 寫文檔,2. 別人不寫文檔。
大多數(shù)開發(fā)人員不愿意寫 API 文檔的原因是寫文檔短期收益遠低于付出的成本,然而并不是所有人都能夠堅持做有長期收益的事情的。
作為一個前后端分離模式開發(fā)的團隊,我們經(jīng)常會看到這樣的場景:前端開發(fā)和后端開發(fā)在一起熱烈的討論“你這接口參數(shù)怎么又變了?”,“接口怎么又不通了?”,“稍等,我調(diào)試下”,“你再試試…"。
那能不能寫好 API 文檔,大家都按文檔來開發(fā)?很難,因為寫文檔、維護文檔比較麻煩,而且費時,還會經(jīng)常出現(xiàn) API 更新了,但文檔還是舊的,各種同步不一致的情況,從而耽擱彼此的時間。
之前我們團隊也遇到了同樣的問題,那么作為研發(fā)團隊的負責人,我是如何帶領(lǐng)團隊解決這個問題的呢?
如何做?
方法其實很簡單,如果能做到讓寫文檔/維護文檔這件事情的短期收益就能遠高于付出的成本,那么所有問題都能迎刃而解,開發(fā)人員就會非常樂意去寫接口文檔。
團隊原來的工作模式
API 設(shè)計人員使用?Swagger?寫 API 文檔
前端開發(fā)?使用 mock.js mock 假的 API 數(shù)據(jù)
后端開發(fā)?使用 Postman 調(diào)試 API
測試人員?使用 JMeter 測試 API
我們遇到的問題
我們團隊是前后端同步進入開發(fā)的,不能等后端開發(fā)完了才出接口文檔,前端再進入開發(fā),所以使用后端代碼注釋自動生成 Swagger 不適合我們。
寫 Swagger 文檔效率很低,并且有學習門檻,讓團隊所有人都熟練手寫 Swagger 文檔是不現(xiàn)實的,更何況團隊不停有新人進來。
開發(fā)人員在 Swagger 定義好文檔后,接口調(diào)試的時候還需要去 Postman 再定義一遍。
前端開發(fā) Mock 數(shù)據(jù)的時候又要去 mock 工具里定義一遍,手動設(shè)置好 Mock 規(guī)則。
測試人員需要去 JMeter 定義一遍。
前端根據(jù) mock 工具出來的數(shù)據(jù)開發(fā)完,后端根據(jù) Swagger 定義的接口文檔開發(fā)完,各自測試測試通過了,本以為可以馬上上線,結(jié)果一對接發(fā)現(xiàn)各種問題:原來開發(fā)過程中接口變更,只修改了 Swagger,但是沒有及時同步修改 mock。
同樣,測試在 JMeter 寫好的測試用例,真正運行的時候也會發(fā)現(xiàn)各種不一致。
開發(fā)過程,經(jīng)常會有發(fā)現(xiàn)開始定義的接口文檔有不合理的地方,需要臨時調(diào)整,經(jīng)常出現(xiàn)接口改了,但是文檔沒有更新。
時間久了,各種不一致會越來越嚴重。
如何解決
要做到寫文檔和及時維護文檔的短期收益就能遠高于付出的成本,無非兩個方向:
降低寫文檔的成本
增加寫文檔后的收益
鑒于此,我們設(shè)想如果有一款工具做到以下這些是不是就非常爽了?
以
完全可視化的界面來編寫文檔,并且是零學習成本,新人?一來就能上手。可以通過接口文檔定義的數(shù)據(jù)結(jié)構(gòu)
自動 mock出數(shù)據(jù),而無需?前端開發(fā)?再寫mock規(guī)則,直接開工。后端開發(fā)?在接口文檔基礎(chǔ)上調(diào)試接口,而無需在去
Postman上調(diào)試;接口如有變化,調(diào)試的時候就自動更新了文檔,零成本的保障了接口維護的及時性;自動根據(jù)文檔校驗數(shù)據(jù)結(jié)構(gòu),無需肉眼校驗,無需手動寫斷言。后端開發(fā)?每次調(diào)試完一個功能就保存為一個
接口用例。測試人員?直接使用
接口用例測試接口。測試人員?更加接口文檔自動生成測試用例,然后像
JMeter一樣在直接在上面測試。根據(jù)接口文檔定義的數(shù)據(jù)結(jié)構(gòu),自動生成前后端的
數(shù)據(jù)模型代碼。
總結(jié)下來,我們需要的就是這么一款工具:
通過一套系統(tǒng)、一份數(shù)據(jù),解決多個系統(tǒng)之間的數(shù)據(jù)同步問題。只要定義好接口文檔,接口調(diào)試、數(shù)據(jù) Mock、接口測試就可以直接使用,無需再次定義;接口文檔和接口開發(fā)調(diào)試使用同一個工具,接口調(diào)試完成后即可保證和接口文檔定義完全一致。高效、及時、準確!
為此,我們幾乎嘗遍了市面上所有相關(guān)的工具,但是很遺憾,沒有找到合適的。
怎么辦?自己干!
于是,我們自己實現(xiàn)了一個Postman + Swagger + Mock + JMeter
這個工具就是?Apifox,經(jīng)常很長一段時間不斷更新迭代后,我們基本上完全實現(xiàn)了最初的設(shè)想,幾乎完美解決了最開始遇到的所有問題,在公司內(nèi)部大受歡迎。并且也形成了我們自己的最佳實踐。
最佳實踐
前端(或后端)在?Apifox?上定好
接口文檔初稿。前后端?一起評審、完善
接口文檔,定好接口用例。前端?使用?Apifox?自動生成的?
Mock 數(shù)據(jù)進入開發(fā),而無需手寫mock規(guī)則,直接開工。后端?使用
接口用例?調(diào)試開發(fā)中接口,系統(tǒng)根據(jù)接口文檔的定義自動校驗返回的數(shù)據(jù)是否正確,只要所有接口用例調(diào)試通過,接口就開發(fā)完成了。后端?開發(fā)完成后,測試人員(也可以是后端)使用
集合測試功能進行多接口集成測試,完整測試整個接口調(diào)用流程。前后端?都開發(fā)完,前端從
Mock 數(shù)據(jù)切換到正式數(shù)據(jù),聯(lián)調(diào)通常都會非常順利,因為前后端雙方都完全遵守了接口定義的規(guī)范。

Apifox 解決方案
一、如何解決這些問題
1、Apifox 定位
Apifox = Postman + Swagger + Mock + JMeter
Apifox 是 API 文檔、API 調(diào)試、API Mock、API 自動化測試一體化協(xié)作平臺。
通過一套系統(tǒng)、一份數(shù)據(jù),解決多個系統(tǒng)之間的數(shù)據(jù)同步問題。只要定義好接口文檔,接口調(diào)試、數(shù)據(jù) Mock、接口測試就可以直接使用,無需再次定義;接口文檔和接口開發(fā)調(diào)試使用同一個工具,接口調(diào)試完成后即可保證和接口文檔定義完全一致。高效、及時、準確!
2、Apifox 宗旨
節(jié)省研發(fā)團隊的每一分鐘!
3、Apifox 功能
接口設(shè)計:Apifox 接口文檔遵循 OpenApi 3.0 (原 Swagger)、JSON Schema 規(guī)范的同時,提供了非常好用的
可視化文檔管理功能,零學習成本,非常高效。并且支持在線分享接口文檔。數(shù)據(jù)模型:可復用的數(shù)據(jù)結(jié)構(gòu),定義接口
返回數(shù)據(jù)結(jié)構(gòu)及請求參數(shù)數(shù)據(jù)結(jié)構(gòu)(僅 JSON 和 XML 模式)時可直接引用。支持模型直接嵌套引用,直接 JSON/XML 智能導入,支持 oneOf、allOf 等高級組合模式。接口調(diào)試:Postman 有的功能,比如環(huán)境變量、前置/后置腳本、Cookie/Session 全局共享 等功能,Apifox 都有,并且比 Postman 更高效好用。接口運行完之后點擊
保存為用例按鈕,即可生成接口用例,后續(xù)可直接運行接口用例,無需再輸入?yún)?shù),非常方便。自定義腳本 100% 兼容 Postman 語法,并且支持運行javascript、java、python、php、js、BeanShell、go、shell、ruby、lua等各種語言代碼。接口用例:通常一個接口會有多種情況用例,比如
參數(shù)正確用例、參數(shù)錯誤用例、數(shù)據(jù)為空用例、不同數(shù)據(jù)狀態(tài)用例等等。運行接口用例時會自動校驗數(shù)據(jù)正確性,用接口用例來調(diào)試接口非常高效。接口數(shù)據(jù) Mock:內(nèi)置 Mock.js 規(guī)則引擎,非常方便 mock 出各種數(shù)據(jù),并且可以在定義數(shù)據(jù)結(jié)構(gòu)的同時寫好 mock 規(guī)則。支持添加“期望”,根據(jù)請求參數(shù)返回不同 mock 數(shù)據(jù)。最重要的是 Apifox
零配置?即可 Mock 出非常人性化的數(shù)據(jù),具體在本文后面介紹。數(shù)據(jù)庫操作:支持讀取數(shù)據(jù)庫數(shù)據(jù),作為接口請求參數(shù)使用。支持讀取數(shù)據(jù)庫數(shù)據(jù),用來校驗(斷言)接口請求是否成功。
接口自動化測試:提供接口集合測試,可以通過選擇接口(或接口用例)快速創(chuàng)建測試集。目前接口自動化測試更多功能還在開發(fā)中,敬請期待!目標是:JMeter 有的功能基本都會有,并且要更好用。
快捷調(diào)試:類似 Postman 的接口調(diào)試方式,主要用途為臨時調(diào)試一些
無需文檔化的接口,無需提前定義接口即可快速調(diào)試。代碼生成:根據(jù)接口及數(shù)據(jù)數(shù)據(jù)模型定義,系統(tǒng)自動生成
接口請求代碼、前端業(yè)務(wù)代碼及后端業(yè)務(wù)代碼。團隊協(xié)作:Apifox 天生就是為團隊協(xié)作而生的,接口云端實時同步更新,成熟的
團隊/項目/成員權(quán)限管理,滿足各類企業(yè)的需求。
二、Apifox 做的不僅僅是數(shù)據(jù)打通
如果你認為 Apifox 只做了數(shù)據(jù)打通,來提升研發(fā)團隊的效率,那就錯了。Apifox 還做了非常多的創(chuàng)新,來提升開發(fā)人員的效率。
1、接口支持“用例管理”
通常一個接口會有多種情況用例,比如?正確用例?參數(shù)錯誤用例?數(shù)據(jù)為空用例?不同數(shù)據(jù)狀態(tài)用例。定義接口的時候定義好這些不同狀態(tài)的用例,接口調(diào)試的時候直接運行,非常高效。
2、“數(shù)據(jù)模型”定義、引用
可以獨立定義數(shù)據(jù)模型,接口定義時可以直接引用數(shù)據(jù)模型,數(shù)據(jù)模型之間也可以相互引用。同樣的數(shù)據(jù)結(jié)構(gòu),只需要定義一次即可多處使用;修改的時候只需要修改一處,多處實時更新,避免不一致。
3、調(diào)試時“自動校驗”數(shù)據(jù)結(jié)構(gòu)
使用 Apifox 調(diào)試接口的時候,系統(tǒng)會根據(jù)接口文檔里的定義,自動校驗返回的數(shù)據(jù)結(jié)構(gòu)是否正確,無需通過肉眼識別,也無需手動寫斷言腳本檢測,非常高效!

4、“可視化”設(shè)置斷言
設(shè)置斷言:

運行后,查看斷言結(jié)果:

5、“可視化”設(shè)置提取變量

6、支持數(shù)據(jù)庫操作

7、“零配置”Mock 出非常人性化的數(shù)據(jù)
先放一張圖對比下 Apifox 和其他同類工具?零配置?mock 出來的數(shù)據(jù)效果:

可以看出 Apifox?零配置?Mock 出來的數(shù)據(jù)和真實情況是非常接近的,前端開發(fā)可以直接使用,而無需再手動寫 mock 規(guī)則。
Apifox 如何做到高效率、零配置生成非常人性化的 mock 數(shù)據(jù)
Apifox 根據(jù)接口定義里的數(shù)據(jù)結(jié)構(gòu)、數(shù)據(jù)類型,自動生成 mock 規(guī)則。
Apifox 內(nèi)置智能 mock 規(guī)則庫,根據(jù)字段名、字段數(shù)據(jù)類型,智能優(yōu)化自動生成的 mock 規(guī)則。如:名稱包含字符串
image的string類型字段,自動 mock 出一個圖片地址 URL;包含字符串time的string類型字段,自動 mock 出一個時間字符串;包含字符串city的string類型字段,自動 mock 出一個城市名。Apifox 根據(jù)內(nèi)置規(guī)則,可自動識別出圖片、頭像、用戶名、手機號、網(wǎng)址、日期、時間、時間戳、郵箱、省份、城市、地址、IP 等字段,從而 Mock 出非常人性化的數(shù)據(jù)。
除了內(nèi)置 mock 規(guī)則,用戶還可以自定義規(guī)則庫,滿足各種個性化需求。支持使用?
正則表達式、通配符?來匹配字段名自定義 mock 規(guī)則。
8、生成在線接口文檔
Apifox 項目可“在線分享” API 文檔,分享出去的 API 文檔可設(shè)置為公開或需要密碼訪問,非常方便與外部團隊協(xié)作。
體驗地址:https://www.apipark.cn/s/ce387612-cfdb-478a-b604-b96d1dbc511b/http/5041285

9、代碼自動生成
根據(jù)接口模型定義,自動生成各種語言/框架(如 TypeScript、Java、Go、Swift、ObjectiveC、Kotlin、Dart、C++、C#、Rust 等)的業(yè)務(wù)代碼(如 Model、Controller、單元測試代碼等)和接口請求代碼。目前 Apifox 支持 130 種語言及框架的代碼自動生成。
更重要的是:你可以通過自定義代碼模板來生成符合自己團隊的架構(gòu)規(guī)范的代碼,滿足各種個性化的需求。
10、導入、導出
支持導出?
OpenApi (Swagger)、Markdown、Html?等數(shù)據(jù)格式,因為可以導出OpenApi格式數(shù)據(jù),所以你可以利用 OpenApi (Swagger) 豐富的生態(tài)工具完成各種接口相關(guān)的事情。支持導入?
OpenApi (Swagger)、Postman、HAR、RAML、RAP2、YApi、Eolinker、NEI、DOClever、ApiPost?、Apizza?、ShowDoc、API Blueprint、I/O Docs、WADL、Google Discovery等數(shù)據(jù)格式,方便舊項目遷移。
三、后續(xù)功能規(guī)劃
發(fā)布 Apifox WEB 版,支持在瀏覽器端使用 Apifox。
接口性能測試支持(類似 JMeter)。
支持插件市場,可以自己開發(fā)插件。
開放 Apifox API,允許開發(fā)者通過 API 調(diào)用 Apifox 的功能。
支持更多接口協(xié)議,如
GraphQL、gRPC、websocket等。支持離線使用,項目可選擇在線同步(團隊協(xié)作)還是僅本地存儲(單機離線使用)。
四、更多 Apifox 功能截圖








五、 Apifox 交流群
掃二維碼進微信群,各種使用過程中的疑問,官方工作人員貼心為你解答:
六、 Apifox 下載地址
軟件完全免費,復制下面的鏈接,粘貼到瀏覽器打開即可下載,或者點擊閱讀原文直達!
官網(wǎng)地址:
https://www.apifox.cn/?utm_source=xhxj
