**1、介紹**

此前，接口管理采用的常用解決方案如：

- 使用 Swagger 管理 API 文檔
- 使用 Postman 調(diào)試 API
- 使用 mockjs 等工具 Mock API 數(shù)據(jù)
- 使用 JMeter 做 API 自動化測試

但是上述的管理方案存在很多問題，如：維護(hù)不同工具之間數(shù)據(jù)一致性非常困難、低效。并且這里不僅僅是工作量的問題，更大的問題是多個系統(tǒng)之間數(shù)據(jù)不一致，導(dǎo)致協(xié)作低效、頻繁出問題，讓開發(fā)測試人員痛苦不堪。

Apifox 是 API 文檔、API 調(diào)試、API Mock、API 自動化測試一體化協(xié)作平臺，**定位 Postman + Swagger + Mock + JMeter**。通過一套系統(tǒng)、一份數(shù)據(jù)，解決多個系統(tǒng)之間的數(shù)據(jù)同步問題。只要定義好 API 文檔，API 調(diào)試、API 數(shù)據(jù) Mock、API 自動化測試就可以直接使用，無需再次定義；API 文檔和 API 開發(fā)調(diào)試使用同一個工具，API 調(diào)試完成后即可保證和 API 文檔定義完全一致。高效、及時、準(zhǔn)確！

## **2.1、新建項目**

在`團(tuán)隊`欄目下，點(diǎn)擊`新建項目`，在彈出的對話框中填入合適的內(nèi)容后點(diǎn)擊`保存`按鈕：

隨后點(diǎn)擊剛才創(chuàng)建的項目名稱進(jìn)入項目：

進(jìn)入項目后可以根據(jù)實(shí)際的開發(fā)需要決定是否新建分組來做接口分類：

例如，按照功能模塊分類，則效果如下：

Apifox允許支持多級分組，如果需要繼續(xù)分組，可以在已有的分組后方點(diǎn)擊`...`繼續(xù)選擇`新建子分組`。

## **2.2、使用Apifox來mock數(shù)據(jù)**

在項目的開發(fā)過程中，后端因?yàn)楣ぷ髁看螅荒芗皶r的給到接口給前端做研發(fā)調(diào)試，前端經(jīng)常需要自己去mock數(shù)據(jù)來進(jìn)行本地的研發(fā)。雖然可以采用mockjs來制造假數(shù)據(jù)，但對于新手來講難度較大，上手比較困難，在Apifox下，mock數(shù)據(jù)的操作就比較簡單了。接下來我們以`用戶管理`模塊為例，制作一個`用戶列表`的mock數(shù)據(jù)模型。

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

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

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

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

```json
{
    "desc": "操作成功",
    "code": 200,
    "data": [
        {
            "id": "1",
            "name": "1號用戶",
            "mobile": "13312345678",
            "email": "airchina@website.com",
            "gender": 1,
            "status": 1,
            "head_img":""
        }
    ]
}
```

那么我可以根據(jù)上述的json在Apifox中按照如下方式進(jìn)行數(shù)據(jù)模型的創(chuàng)建：

> 小提示：這里我們可以通過軟件界面中`JSON/XML智能識別/快捷導(dǎo)入`功能來快速生成基本結(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)一個數(shù)據(jù)模型設(shè)計完畢后，記得點(diǎn)擊右上角的`保存`按鈕。

## **2.3、接口設(shè)計與調(diào)試**

在有數(shù)據(jù)模型后，我們還需要進(jìn)行本地接口設(shè)計，確保數(shù)據(jù)模型可以使用。

步驟1：進(jìn)入`接口管理`選項卡，在對應(yīng)的分組后面，點(diǎn)擊`+`來新建接口，并將環(huán)境切換為`Mock服務(wù)`，在本界面填入接口的基本信息，隨后點(diǎn)擊`保存`按鈕

步驟2：點(diǎn)擊`修改文檔`，將返回的`根節(jié)點(diǎn)`改為與之對應(yīng)的數(shù)據(jù)模型（根據(jù)實(shí)際情況，修改請求頭和參數(shù)信息）

步驟3：點(diǎn)擊`修改文檔`底部的`創(chuàng)建示例`按鈕，選擇成功示例，點(diǎn)擊`確定`，再點(diǎn)擊右上角`保存`來完善接口文檔

步驟4：接口調(diào)試

如果該步驟能夠成功返回數(shù)據(jù)，那么我們就可以在Vue或React等開發(fā)環(huán)境中先使用`實(shí)際請求`中的`請求URL`進(jìn)行AJAX請求來獲取模擬的業(yè)務(wù)數(shù)據(jù)，該地址支持跨域請求：

上述地址在瀏覽器中的請求效果：

## **2.4、接口分享**

Apifox還支持將寫好的接口分享給其他人，這樣就很方便將資源進(jìn)行共享了。

**3、寫在最后**

Apifox這款開發(fā)神器，功能遠(yuǎn)遠(yuǎn)不僅僅只是快速M(fèi)ock數(shù)據(jù)，其還支持很多開發(fā)中實(shí)用的功能，例如：前置操作、后置操作、持續(xù)集成、代碼生成等，它還有更多的功能等著你去發(fā)現(xiàn)！更多關(guān)于“web前端培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn)，課程大綱更科學(xué)更專業(yè)，有針對零基礎(chǔ)的就業(yè)班，有針對想提升技術(shù)的提升班，高品質(zhì)課程助理你實(shí)現(xiàn)夢想。