前后端分离
接触过以前老项目的开发都知道,以前的项目都是前后端一体化的,基本那个时候的后端就是现在的全栈,也就是全干,这样的开发效率是很慢的。
因为随着互联网的发展,前端的要求越来越高了,后端没有那么多精力和时间全干了,所以 前后端分离 出现了
也诞生了 前端 、 后端 这样的岗位。
接口文档
前后端分离之后,前后端要怎么沟通交流呢?
比如,后端写的接口,要怎么让前端知道呢?总不能后端每写一个接口就告知前端吧,这样沟通成本会很高,所以 API文档 出现了
市面上也出现了很多 API文档 的工具,方便了前后端的协同开发,比如:
- Swagger
- YApi
- Apifox
- Postman
Swagger
Swagger 早期用的人挺多的,但是后来发现缺点也很明显:
- 界面不够漂亮
- 数据不能格式化
- 参数定位问题麻烦
等等
YApi
于是 大家开始使用 YApi 来当做 API 文档
Swagger + YApi
特点
很多后端依然使用 Swagger + YApi 的方式,为啥不直接用 YApi 呢?因为 Swagger 与后端语言的连接性比较强,说到底就是结合两个东西
- Swagger 与后端语言的连接性强
- YApi 的展示性强
基本流程
分为以下几步:
- 第一步:后端写接口
- 第二步:语言插件同步到 Swagger
- 第三步:Swagger 同步到 YApi(导入)
Swagger 怎么同步到 YApi 呢?使用到两个功能
- Swagger 的导出
- YApi 的导入
手动同步
如果你想手动同步的话,需要导出 Swagger 到一个 JSON 文件中

JSON 文件长这样

然后到 YApi 中导入这个 JSON 文件


然后把刚刚的 JSON 文件拖拽进去即可,成功了会提示

自动同步
当然如果你觉得 手动导入 比较麻烦的话,也可以使用 自动导入
需要把你 Swagger 的服务 doc 地址赋值到 YApi 这边来,并且可以设置同步的时间间隔,间隔越小越精确

Apifox + Swagger
你也可以使用 Apifox + Swagger 进行 API 管理
操作
需要进入 项目设置,然后选择需要导入的格式,Apifox 支持 20 多种导入格式,是 YApi 的好几倍!

手动导入
把 JSON 文件拖进去后,Apifox 会进行解析,并弹出窗口,让你选择你所需要导入的接口!!!这点就做的比 YApi 好,因为 YApi 没有这个功能,它只能导入所有~

结果
点击 确认导入,等待导入成功后,会弹出结果弹窗~

并且在 接口列表 里看到导入的接口

自动导入
Apifox 同样支持自动导入

设置 数据源
、间隔
等参数,即可创建~

关于 Apifox

Apifox 是一体化 API 协作平台,可以实现 API 文档、API 调试、API Mock、 API 自动化测试,是更先进的 API 设计/开发/测试工具。Apifox 提供了一种全面的 API 管理解决方案。使用 Apifox ,你可以在统一的平台上设计、调试、测试以及协作你的 API,消除了在不同工具之间切换和数据不一致的问题。 简化了你的 API 工作流,并确保了前端、后端和测试人员之间的高效协作,点击免费使用。