**1、介紹**
此前,接口管理采用的常用解決方案如:
- 使用 Swagger 管理 API 文檔
- 使用 Postman 調(diào)試 API
- 使用 mockjs 等工具 Mock API 數(shù)據(jù)
- 使用 JMeter 做 API 自動(dòng)化測(cè)試
但是上述的管理方案存在很多問(wèn)題,如:維護(hù)不同工具之間數(shù)據(jù)一致性非常困難、低效。并且這里不僅僅是工作量的問(wèn)題,更大的問(wèn)題是多個(gè)系統(tǒng)之間數(shù)據(jù)不一致,導(dǎo)致協(xié)作低效、頻繁出問(wèn)題,讓開(kāi)發(fā)測(cè)試人員痛苦不堪。
Apifox 是 API 文檔、API 調(diào)試、API Mock、API 自動(dòng)化測(cè)試一體化協(xié)作平臺(tái),**定位 Postman + Swagger + Mock + JMeter**。通過(guò)一套系統(tǒng)、一份數(shù)據(jù),解決多個(gè)系統(tǒng)之間的數(shù)據(jù)同步問(wèn)題。只要定義好 API 文檔,API 調(diào)試、API 數(shù)據(jù) Mock、API 自動(dòng)化測(cè)試就可以直接使用,無(wú)需再次定義;API 文檔和 API 開(kāi)發(fā)調(diào)試使用同一個(gè)工具,API 調(diào)試完成后即可保證和 API 文檔定義完全一致。高效、及時(shí)、準(zhǔn)確!
## **2.1、新建項(xiàng)目**
在`團(tuán)隊(duì)`欄目下,點(diǎn)擊`新建項(xiàng)目`,在彈出的對(duì)話框中填入合適的內(nèi)容后點(diǎn)擊`保存`按鈕:
隨后點(diǎn)擊剛才創(chuàng)建的項(xiàng)目名稱(chēng)進(jìn)入項(xiàng)目:
進(jìn)入項(xiàng)目后可以根據(jù)實(shí)際的開(kāi)發(fā)需要決定是否新建分組來(lái)做接口分類(lèi):
例如,按照功能模塊分類(lèi),則效果如下:
Apifox允許支持多級(jí)分組,如果需要繼續(xù)分組,可以在已有的分組后方點(diǎn)擊`...`繼續(xù)選擇`新建子分組`。
## **2.2、使用Apifox來(lái)mock數(shù)據(jù)**
在項(xiàng)目的開(kāi)發(fā)過(guò)程中,后端因?yàn)楣ぷ髁看?,往往不能及時(shí)的給到接口給前端做研發(fā)調(diào)試,前端經(jīng)常需要自己去mock數(shù)據(jù)來(lái)進(jìn)行本地的研發(fā)。雖然可以采用mockjs來(lái)制造假數(shù)據(jù),但對(duì)于新手來(lái)講難度較大,上手比較困難,在Apifox下,mock數(shù)據(jù)的操作就比較簡(jiǎn)單了。接下來(lái)我們以`用戶(hù)管理`模塊為例,制作一個(gè)`用戶(hù)列表`的mock數(shù)據(jù)模型。
步驟1:在`數(shù)據(jù)模型`選項(xiàng)卡下,新建`用戶(hù)管理`分組,用來(lái)與`用戶(hù)管理`接口對(duì)應(yīng)
步驟2:新建`用戶(hù)列表`數(shù)據(jù)模型
> 數(shù)據(jù)模型:描述接口返回?cái)?shù)據(jù)格式的一種方式,在與后端對(duì)接完接口設(shè)計(jì)規(guī)范后即可產(chǎn)出。
例如,我們與后端對(duì)接要求`用戶(hù)列表`接口需要返回以下基本信息:
```json
{
"desc": "操作成功",
"code": 200,
"data": [
{
"id": "1",
"name": "1號(hào)用戶(hù)",
"mobile": "13312345678",
"email": "airchina@website.com",
"gender": 1,
"status": 1,
"head_img":""
}
]
}
```
那么我可以根據(jù)上述的json在Apifox中按照如下方式進(jìn)行數(shù)據(jù)模型的創(chuàng)建:
> 小提示:這里我們可以通過(guò)軟件界面中`JSON/XML智能識(shí)別/快捷導(dǎo)入`功能來(lái)快速生成基本結(jié)構(gòu),然后根據(jù)需要做出適當(dāng)?shù)恼{(diào)整得到以下效果。
由于列表中的記錄數(shù)往往比較多,這里我們還可以設(shè)置`data`中`items`的數(shù)量范圍,在`data`節(jié)點(diǎn)后面點(diǎn)擊小齒輪圖表,然后根據(jù)需要輸入數(shù)量范圍:
隨后點(diǎn)擊`預(yù)覽`檢查生成結(jié)果是否正確,如下則正常:
最后,當(dāng)一個(gè)數(shù)據(jù)模型設(shè)計(jì)完畢后,記得點(diǎn)擊右上角的`保存`按鈕。
## **2.3、接口設(shè)計(jì)與調(diào)試**
在有數(shù)據(jù)模型后,我們還需要進(jìn)行本地接口設(shè)計(jì),確保數(shù)據(jù)模型可以使用。
步驟1:進(jìn)入`接口管理`選項(xiàng)卡,在對(duì)應(yīng)的分組后面,點(diǎn)擊`+`來(lái)新建接口,并將環(huán)境切換為`Mock服務(wù)`,在本界面填入接口的基本信息,隨后點(diǎn)擊`保存`按鈕
步驟2:點(diǎn)擊`修改文檔`,將返回的`根節(jié)點(diǎn)`改為與之對(duì)應(yīng)的數(shù)據(jù)模型(根據(jù)實(shí)際情況,修改請(qǐng)求頭和參數(shù)信息)
步驟3:點(diǎn)擊`修改文檔`底部的`創(chuàng)建示例`按鈕,選擇成功示例,點(diǎn)擊`確定`,再點(diǎn)擊右上角`保存`來(lái)完善接口文檔
步驟4:接口調(diào)試
如果該步驟能夠成功返回?cái)?shù)據(jù),那么我們就可以在Vue或React等開(kāi)發(fā)環(huán)境中先使用`實(shí)際請(qǐng)求`中的`請(qǐng)求URL`進(jìn)行AJAX請(qǐng)求來(lái)獲取模擬的業(yè)務(wù)數(shù)據(jù),該地址支持跨域請(qǐng)求:
上述地址在瀏覽器中的請(qǐng)求效果:
## **2.4、接口分享**
Apifox還支持將寫(xiě)好的接口分享給其他人,這樣就很方便將資源進(jìn)行共享了。
**3、寫(xiě)在最后**
Apifox這款開(kāi)發(fā)神器,功能遠(yuǎn)遠(yuǎn)不僅僅只是快速M(fèi)ock數(shù)據(jù),其還支持很多開(kāi)發(fā)中實(shí)用的功能,例如:前置操作、后置操作、持續(xù)集成、代碼生成等,它還有更多的功能等著你去發(fā)現(xiàn)!更多關(guān)于“web前端培訓(xùn)”的問(wèn)題,歡迎咨詢(xún)千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn),課程大綱更科學(xué)更專(zhuān)業(yè),有針對(duì)零基礎(chǔ)的就業(yè)班,有針對(duì)想提升技術(shù)的提升班,高品質(zhì)課程助理你實(shí)現(xiàn)夢(mèng)想。