如何使用 Apifox 设计出一份前后端都赞不绝口的接口文档
Posted Java知音_
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用 Apifox 设计出一份前后端都赞不绝口的接口文档相关的知识,希望对你有一定的参考价值。
API 文档现状
API 文档作为团队必备的工具,前后端两方沟通的桥梁。重要程度不言而喻。那当下又存在哪些阻碍因素?
API 文档管理凌乱
随着公司业务的复杂化,软件架构微服务化,API 数量高速增长。在 API 协议、规范繁多的环境下,复杂的交互、分类导致现有的文档易用性差。
缺乏主流文档工具
大部分团队使用Swagger
作为API文档工具,而 Swagger 的代码侵入性比较强。要让 Swagger 生成接口文档必须要给方法或字段添加对应的注解。大量注解会污染真正业务代码的简洁性,甚至会有性能损耗的缺陷。
缺乏团队协同机制
当前端对接完后端的接口后,后端对接口却进行变更了,接口文档并没有实时更新,导致没有及时通知到前端。再者,前端、后端、测试使用不同的工具解决 API Mock、API 设计、API 测试等需求,而多系统存在问题也导致协同效率低下。
如何改变
1. 好的文档管理方式
选择一款具备可视化 API 文档设计功能、而且能为用户提供灵活的分类能力的工具。能更好的帮助我们对接口文档的管理。
![](https://image.cha138.com/20230216/d5729e1f56a64ebfac06015c5167b7ef.jpg)
2. 选择好用的工具
举个例子:开发接口文档时可以通过注解来完成,虽然有利于维护代码和文档的一致性,但代价就是需要维护一堆注解。
如果有一款工具或插件,可以通过自动识别的方式来生成文档, 而无需通过代码维护大量注释。是不是更好?
3. 建立团队协同机制
采用什么方式可以让团队间接口文档共享更便捷?
在团队内部,接口文档支持权限控制、密码设置及分享范围。
再者,前端、后端、测试如果可以用同一个工具完成 API 相关的协作流程,丛原先的串行流程转变为并行的流程,后端、前端、测试团队都可以独立展开工作,效率是不是翻倍?
综上,我们需要借助一个一体化协作平台, 通过一套系统、一份数据,解决多个 API 工具之间的数据同步问题。那通过自研?在降本增效的背景下,是很难推动的。这也是越来越多开发者、开发团队选择了
Apifox
的原因。
Apifox = Postman + Swagger + Mock + JMeter
Apifox 的优势
强大的 API 文档导入功能
![](https://image.cha138.com/20230216/bc328744915f497786ffa4c8a7fb0b2a.jpg)
支持导入 Swagger(OpenAPI), Postman, Jmeter, apiDoc, RAP2, YApi, Eolink, Apipost
等数据格式,不再担心迁移成本,市面上大部分文档均已支持。
自动生成文档
Apifox 推出的 IDEA 插件( IDEA 插件市场内搜索 “Apifox Helper” 下载安装), 支持在项目中快速生成 API 文档,并同步到 Apifox,实现代码零入侵。
不再需要任何注解侵入到业务代码中,且可以在保持代码零侵入的情况下就能得到相当完整的 API 文档。
![](https://image.cha138.com/20230216/4c884cf0f8c6484cae1dc556459445dd.jpg)
API 文档&调试一体化
当你设计完(或导入)API 文档,即可一键调试,无需复制黏贴各种 URL 或参数。同时 Apifox 将查看文档和修改文档做了区分,方便我们管理接口文档。
![](https://image.cha138.com/20230216/9b2729d1aa0741d197aca2388ec9c117.jpg)
自动生成测试用例
通过设计好的 API 文档,即可自动生成自动化测试用例
,无需手动添加,从此解放双手。
![](https://image.cha138.com/20230216/b922a2be824e4eec88792dd85c3a2d1a.jpg)
超智能 Mock
只要定义好 API 文档,“零配置”即可自动 mock 出非常“人性化”的数据(根据数据结构及字段名智能 mock)。
![](https://image.cha138.com/20230216/efd46e20e0cc475783323fb450b72693.jpg)
一键分享 & 协同
设计完或导入的 API 文档,一键分享给合作伙伴,接口变更实时同步,支持公开或加密发布。
![](https://image.cha138.com/20230216/1833bef09eb04c0eb438114fa2949bcd.jpg)
如何在 Apifox 实操设计好看的文档?
实操环节,我们通过现有的 swagger 文档迁移至 Apifox 来进行演示。
在界面选择导入
![](https://image.cha138.com/20230216/98638db6880a47ba9a249e41d8953329.jpg)
数据模式选择
OpenAPI/Swagger
模式,并选择 URL 导入,最后输入 Swagger 地址,点击保存。
![](https://image.cha138.com/20230216/be34c7e84bcf48719e00573937f5196a.jpg)
完成导入之后,可以在导入预览面板中编辑你需要导入的
接口、数据模型、环境
等。
![](https://image.cha138.com/20230216/b9eec034576945208d69b58f10b818d3.jpg)
下图是导入成功后的效果,相比 Swagger 等工具,Apifox 提供的 API 文档信息更详细,展示包括:修改时间、修改人、责任人。支持目录分配、云端 Mock 等功能。
![](https://image.cha138.com/20230216/e0810ed18309401a9f3089f9f153b6b7.jpg)
Apifox 不仅可以通过创建团队,实现团队内部的 API 文档协同,还可以对外发布。只需在左侧 Tab 中选择
在线分享
,并点击新建分享
。支持设置密码、接口范围、运行环境
等等。
![](https://image.cha138.com/20230216/a4798fb2ae214cd1b221d4564b1aa30e.jpg)
分享成功之后,Apifox 会生成相应的链接。同时,还可以通过自定义文档页面的导航和样式。让文档看起来更能匹配用户的实际业务。
再者可以通过自定义域名,让用户更容易记住
![](https://image.cha138.com/20230216/08f86f7e05854ac9b12610773887adaf.jpg)
下图是分享成功的 CODING API 文档示例。
![](https://image.cha138.com/20230216/44384bd4212c4f008eb0190928e2d710.jpg)
自定义文档的导航,让接口文档导航看起来贴合官网业务,同时也可以增加官网的流量来源
![](https://image.cha138.com/20230216/d8f347031015445bb708cd9b501ee38b.jpg)
可视化展示参数和响应的示例结果
![](https://image.cha138.com/20230216/9e7e436ea87d4dd295c5398b30a2316d.jpg)
还可以直接在接口文档中生成代码,直接 copy 就可以用
示范链接:https://codingapi.apifox.cn/
思考&总结
通过 Apifox,我们只要定义好 API 文档,就可以开始调试、Mock、自动化测试,非常方便。真正做到 All In One。
对企业来说,它能通过提高整体的合作效率来为企业节约成本;
对研发人员来说,可以减少无意义的工作量和繁杂耗时的沟通成本,将时间花在能提升自身竞争力的地方。
下载链接:http://apifox.cn/b3zhiyin
点击阅读原文即可访问。
以上是关于如何使用 Apifox 设计出一份前后端都赞不绝口的接口文档的主要内容,如果未能解决你的问题,请参考以下文章
(前后端都开源)Activiti Flowable Camunda json转bpmn 仿钉钉流程设计器 vue2vue3 Ant Design Wflow-web smart-flow-design