**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)楣ぷ髁看螅荒芗皶r(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)我們以`用戶管理`模塊為例，制作一個(gè)`用戶列表`的mock數(shù)據(jù)模型。

步驟1：在`數(shù)據(jù)模型`選項(xiàng)卡下，新建`用戶管理`分組，用來(lái)與`用戶管理`接口對(duì)應(yīng)

步驟2：新建`用戶列表`數(shù)據(jù)模型

> 數(shù)據(jù)模型：描述接口返回?cái)?shù)據(jù)格式的一種方式，在與后端對(duì)接完接口設(shè)計(jì)規(guī)范后即可產(chǎn)出。

例如，我們與后端對(duì)接要求`用戶列表`接口需要返回以下基本信息：

```json
{
    "desc": "操作成功",
    "code": 200,
    "data": [
        {
            "id": "1",
            "name": "1號(hào)用戶",
            "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)經(jīng)驗(yàn)，課程大綱更科學(xué)更專(zhuān)業(yè)，有針對(duì)零基礎(chǔ)的就業(yè)班，有針對(duì)想提升技術(shù)的提升班，高品質(zhì)課程助理你實(shí)現(xiàn)夢(mèng)想。