Apifox : 不仅是Api调试工具，更是开发团队的协作神器

àì夳堔傛蜴生んèń 2023-10-09 14:24 2阅读 0赞

### Apifox ###

发现了一个很好用的`Api调试工具`，比`PostMan`强大，安利一下。

**Apifox = Postman + Swagger + Mock + Jmeter**

不仅是`Api调试工具`，更是**开发团队的协作神器**

*  一套系统、一份数据，解决多个系统之间的数据同步问题
 *  只要定义好接口文档，接口调试、数据Mock、接口测试即可直接使用，无需再次定义
 *  接口文档和接口开发调试使用同一个工具，接口调试完成后即可保证和接口文档定义完全一致
 *  后端、前端、测试团队可以同步开始工作，而不需要互相等待

![在这里插入图片描述][d7469dc70c774321a9c416e8059c626c.png]

#### 一般的开发流程 ####

1.  需求评审
2.  前端和后端开个会定接口
3.  有一个开发工程师负责用`Swagger`定义`API`文档
4.  开发过程中，各个角色会做很多重复的工作
    
    1.  后端依照文档开发接口，调试的时候需要按照文档，到`Postman`里面**再重新写一遍**
    2.  在后端把接口做出来之前，前端如果需要先开发的话，就需要按照文档自己`Mock`数据，又要在`Mock.js`里**写一遍接口定义**，还要自己写`mock`规则
    3.  测试在接口做出来之前，需要按照文档到`Jmeter`里写测试用例，**又是一遍接口定义**
    4.  等前后端各自做完，开始联调的时候，新的问题又出现了
        
        1.  在开发过程中，接口变更是经常发生的事情，但是容易只修改`Swagger`，但是没有及时同步`PostMan`和`Mock`数据
        2.  接口数据类型和文档不一致，肉眼难以发现
        3.  测试在`JMeter`写好的测试用例，真正运行的时候也会发现各种不一致

#### Apifox流程 ####

*  设计阶段
    
     *  根据需求文档讨论确定接口设计思路
     *  接口设计者在`Apifox`上定好接口文档初稿
     *  接口评审环节，前后端一起评审，完善接口文档，定好接口用例
 *  开发阶段
    
     *  前端
        
         *  `Apifox`会根据接口文档自动生成`Mock`数据，直接可以进入开发，无需手写`mock`规则
     *  后端
        
         *  使用`Apifox`直接根据接口定义来调试接口，每次调试一个功能就保存一个接口用例，方便自己反复调试
         *  如果开发过程中接口有变化，调试的时候修改接口定义就自动更新了文档，零成本地保证了接口维护的及时性
     *  测试
        
         *  直接使用后端调试时保存的接口用例生成测试用例
 *  联调和测试阶段
    
     *  所有的接口开发完成后，测试人员使用集合测试功能进行多接口集成测试，完成测试整个接口调用流程。
     *  前后端都开发完，前端从`Mock`数据切换到正式数据，联调通常都会非常顺利，因为联调过程中最经常出现的问题就是前后端双方的数据定义不一致，而使用`Apifox`进行开发保障了所有人都完全遵循接口定义的规范，以前存在的很多令人头大的问题就不存在了。
     *  测试可以使用测试套件进行自动化回归测试和性能测试

#### 谁在使用Apifox ####

![在这里插入图片描述][01212a2c7151480ba41abc3a76eff6c7.png]

#### 演示 ####

我们先新建一个团队  
![在这里插入图片描述][80afc1a7eeff4dc888516670f42aef19.png]  
新建团队后，可以新建一个项目

![在这里插入图片描述][883b535d1680406bbc60307bb2d4803c.png]

可以邀请其他成员加入这个项目

![在这里插入图片描述][69dbb49889634df1a806b5f15f91f917.png]

再来新建接口

![在这里插入图片描述][ebe1b37f44b3427982e2ef2f65f9d42d.png]

接口名称`/user/{id}`，根据`{id}`，会自动生成对应的`Path`

![在这里插入图片描述][5a918cf5474f49d2847da886c7dbff9f.png]

返回相应，我们可以使用`JSON/XML 智能识别/快捷导入`

比如，我们使用下面的这个`JSON`

{
        "code": "65",
        "data": {
            "id": "61",
            "username": "汤超"
        }
    }

可以看到，自动生成了相应的节点

![在这里插入图片描述][797103b6a27a4dfcb34a53b7dd296012.png]

而且，可以`预览`数据，会自动根据`key`，生成相对应的假数据

![在这里插入图片描述][589ab66c407e4864bca9279eb1f5f757.png]

我们切换到`运行`这个`TAB`，点击`发送`按钮，可以看到，就有一个用例生成了

![在这里插入图片描述][493b4d764ccf41d3b9d7dccfca025b6f.png]

我们可以点击保存用例。

当我们新建好接口后，复制这个`URL`到浏览器

![在这里插入图片描述][c761668c6b9e459c86c903d7e0b4616f.png]

可以看到，直接直接就在本地进行`Mock`了

![在这里插入图片描述][73eba21dd0b349e2b6d828b3fe1b3b76.png]

`Apifox`也可以很方便地生成文档

点击`在线分享->新建分享`，输入分享对象名称后，点击`保存`

![在这里插入图片描述][c7819768ff9b46bd8b3ccb866139e8e8.png]

然后复制连接到浏览器里

![在这里插入图片描述][307afaa12de845fda8d4a6dcc8c4ecdc.png]

可以看到，一个漂亮的接口文档就生成了

![在这里插入图片描述][fbd82a25d6574f9e85affee559cb8281.png]

#### 其他 ####

更多操作详见 [Apifox官方文档][Apifox]

[d7469dc70c774321a9c416e8059c626c.png]: https://img-blog.csdnimg.cn/d7469dc70c774321a9c416e8059c626c.png
[01212a2c7151480ba41abc3a76eff6c7.png]: https://img-blog.csdnimg.cn/01212a2c7151480ba41abc3a76eff6c7.png
[80afc1a7eeff4dc888516670f42aef19.png]: https://img-blog.csdnimg.cn/80afc1a7eeff4dc888516670f42aef19.png
[883b535d1680406bbc60307bb2d4803c.png]: https://img-blog.csdnimg.cn/883b535d1680406bbc60307bb2d4803c.png
[69dbb49889634df1a806b5f15f91f917.png]: https://img-blog.csdnimg.cn/69dbb49889634df1a806b5f15f91f917.png
[ebe1b37f44b3427982e2ef2f65f9d42d.png]: https://img-blog.csdnimg.cn/ebe1b37f44b3427982e2ef2f65f9d42d.png
[5a918cf5474f49d2847da886c7dbff9f.png]: https://img-blog.csdnimg.cn/5a918cf5474f49d2847da886c7dbff9f.png
[797103b6a27a4dfcb34a53b7dd296012.png]: https://img-blog.csdnimg.cn/797103b6a27a4dfcb34a53b7dd296012.png
[589ab66c407e4864bca9279eb1f5f757.png]: https://img-blog.csdnimg.cn/589ab66c407e4864bca9279eb1f5f757.png
[493b4d764ccf41d3b9d7dccfca025b6f.png]: https://img-blog.csdnimg.cn/493b4d764ccf41d3b9d7dccfca025b6f.png
[c761668c6b9e459c86c903d7e0b4616f.png]: https://img-blog.csdnimg.cn/c761668c6b9e459c86c903d7e0b4616f.png
[73eba21dd0b349e2b6d828b3fe1b3b76.png]: https://img-blog.csdnimg.cn/73eba21dd0b349e2b6d828b3fe1b3b76.png
[c7819768ff9b46bd8b3ccb866139e8e8.png]: https://img-blog.csdnimg.cn/c7819768ff9b46bd8b3ccb866139e8e8.png
[307afaa12de845fda8d4a6dcc8c4ecdc.png]: https://img-blog.csdnimg.cn/307afaa12de845fda8d4a6dcc8c4ecdc.png
[fbd82a25d6574f9e85affee559cb8281.png]: https://img-blog.csdnimg.cn/fbd82a25d6574f9e85affee559cb8281.png
[Apifox]: https://www.apifox.cn/help/