一、前言
在当前主流的前端和后端分离模式下，有一个接口文档和一个易于使用的接口文档是必要的。
PS：??以下观点是真实开发场景中遇到和实现的痛点。
在项目开发过程中，前端和后端工程师可以保持的数据信息概念是统一的。
例如：项目所需的接口字段，参数字段。只要所有要求的返回参数都记录在文档中，前端和后端工程师可以在编写代码的同时统一比较接口文档来编写自己的逻辑，所以在每个信息的命名是统一的，在各自的代码中不会发生前端的要求接口命名与后端返回接口的命名信息不一致。
这样可以大大避免排查问题时无法快速定位的问题。
好的接口文档它肯定是会比较直观，容易维护，利于保存等特点的。这些基本的特性。
但在今天的21世纪里仍然存在word文档或者excel等待笔记本记录工具记录其界面文档。
这样文档是有了，但是在项目不断的迭代中，接踵而来的就是文档不断的需要人为维护和更新，投入了不必要的成本。在项目交接的场景下，还要交付一大堆的接口文档。而文档的编写基于人力维护自然而然会有错删参数，复制错误等一些失误操作导致文档的正确性不能被很好的保证。
二、Apifox在线接口文档
如今，许多接口文档工具层出不穷，swagger、yapi、Knife4j等等。但他们或多或少都有一些缺点。例如，我们的后端学生经常使用它swagger-ui，但它有以下痛点：
提交参数为JSON不能格式化，参数错误，找麻烦，返回结果不能折叠，太长看不见
swagger-ui 当接口数量增加时，很难使用，甚至没有分类菜单
在最近的技术社区，我发现了Apifox这个api接口工具。相当于集成Postman Swagger Mock JMeter一个工具。Apifox接口文档是我遇到过的最亲密程序员的接口文档。他不仅解决了我遇到的开发痛点，而且这个接口文档非常强大。
2.1 如何生成在线接口文档？
2.1.1 第一步
先到Apifox官方网站根据相应的系统下载相应的系统Apifox客户端。当然，直接使用web版本也不妨碍我们后续的操作步骤。
下载后，我们打开客户端或打开客户端web登录终端。如果是第一次使用，可以先注册账号再登录。第一次使用的学生进入后会发现以下页面。
由于演示，我将直接使用当前的示例团队和示例项目，点击示例项目进入Apifox你可以看到宠物店的接口分组，用于演示。
2.1.2 第二步
为了让学生更合适地使用它Apifox代入自己的项目。我决定更多地模拟我们的真实使用环境。我在我的服务器上部署了一个名字jeetcg-Boot开源项目的前后端分离。这个项目有自己的定制接口文档，但他可以导出一些OpenApi、Markdown格式文档，然后我可以用导出的接口文档来演示如何慢慢对接Apifox提供在线文档。
如果现在的学生不相似swagger格式文档也没关系，因为Apifox它支持导入21种格式，将您的数据转换为Apifox上。但是，如果有例外的学生，比如我上面提到的目前的项目暂时没有任何文件，也可以通过当前项目的请求参数等信息Apifox添加新的接口，让你的项目从现在开始有自己的接口文档。在这里，我们主要关注如何创建一个新的在线文档来生成在线文档。，所以这里就不细说新界面了。这里不擅长操作的同学可以点击文档帮助的这部分参考。??快速上手
然后我把我的jeetcg-boot导出项目接口文档OpenApi.json文件，通过Apifox导入功能将我当前项目的接口转移到Apifox上面
6
这么简单的步骤，我的项目界面成功移植到了Apifox以上管理。
这里要表扬一下Apifox设计真的很好看，排版也很舒服。对于我的颜值控制。
2.1.3 第三步
这一步是我们目标的最后一步，以确保我们的界面已经存在于项目中，并且可以通过左侧 在线分享 点击我们的新建共享
7
此时，我们可以看到创建在线文档的信息表，需要填写。例如，我们的共享对象的名称可以随意填写，但如果我们只与前端团队或其他接管当前项目的合作伙伴共享，建议填写相应的匹配名称。密码访问可以是用于对于我们生成的在线文档进行一层加密保护，不会让意外泄露的接口地址给其他人访问之后看到我们的接口设计等信息，所以这里要填写的小伙伴可以按照真实情况填写哦。过期时间是我们当前生成的在线接口文档的失效时间。共享范围允许我们选择需要生成在线接口文档的接口。我们可能会遇到需要为复杂功能的开发团队提供一些接口的场景，但我们不想相互暴露所有接口，所以我们可以选择需要提供的接口。运行环境是决定生成的在线接口文档调用的环境接口。这里的环境设置，学生可以看到这部分的环境设置。在这里，我们选择使用云mock模拟接口调用的环境。更多的设置可以让我们在我们的在线文档中显示这三个信息。
8
填写所有信息后，我们可以点击保存并生成我们项目的在线接口文档url。此时，我们可以通过复制当前生成的在线接口文档链接来找到我们的项目接口文档。
9
10
2.2 Apifox在线接口文档有哪些魔法？
2.2.1 在文档中直接操作接口
细心的学生一定发现，在选择接口后，我们的文档右侧有一个操作按钮。单击此按钮显示执行操作界面。单击发送后，我们可以看到返回结果与我们接口的返回响应格式相同。我们选择生成接口时使用的云调用mock环境，所以现在显示的数据是由mock给我们生成的假数据。
然而，获取文档的开发并不太简单。您可以直接测试当前接口是否接口是否符合要求，以及当前环境的接口状态是否正常。
而mock调用环境的接口也方便前端程序员先开发后端，不会被后端学生卡住。
11
12
2.2.2 生成13种语言的请求示例代码
在文档的中间，我们可以看到一些非常明显的编程语言图标。他们都在做什么？
13
作为一名前端程序员，我自然会使用它javascript给同学们介绍一下。点开javascript我们发现下面有一行图标tab提供选择，相信前端程序员的学生在文章前并不陌生。这些都是js选择每种方法的常用请求方法tab以下编辑器将使用此方法调用当前接口的代码。当我第一次看到这个功能时，我很震惊。还有这样亲密的互动吗？？????????
??当然，出于程序员的职业病，我们需要测量生成的代码。他能跑吗？对吗？这里有一种借用一些在线方法的方法ide跑一些代码。比如现在比较火。 stackblitz
image.png
我们把axios复制代码ide在编辑器上，在线安装axios库在线运行。 结果很明显，右边的打印和我们刚运行时的返回完全一样。 这真的很棒。因此，这13种语言可以生成自己的请求代码来验证当前接口请求在实际代码中的性能。
如果我想在这里测试更多的编程语言，我将分享另一个在线语言，它可以运行30多种语言ide小闪电
2.2.3 生成模型代码
这个功能也是我认为生成模型代码的最喜欢的功能。它主要是由回复响应参数生成的模型代码。
例如，我选择了Typescript具有返回参数的代码将自动生成typescript类型的interface，这对于使用ts开发的前端学生简直是福音。不再需要一个一个复制请求返回的类型。现在可以直接生成直接复制粘贴到接口文档的代码中。
目前生成代码模型的操作栏对每种编程语言都有配置开关，如typescript 可以打开只生成类型定义，从而删除下面的转换代码。只保留类型定义。并且可以在运行过程中进行验证json.parse确保我们的返回结果参数符合条件。
因此，需要生成的模型代码类型取决于学生的需要进行配置。
三、Apifox在线共享接口文档的细节
在这里，我想我认为这个当前的接口文档真的是为了程序员的效率和使用方便。
3.1.1 点击复制接口连接：
3.1.2 文档的整体布局
文档的整体布局是左右结构，所以我们的程序员在阅读文档时需要进行测试操作，可以检查参数是否不一致的情况，就不同与swagger参数在上请求在下，需要上下移动，便利性就大大的降低了。
3.1.3 在运行的时候批量编辑参数
在运行操作界面里我们有时侯有大量的请求参数可能需要临时变动去厕所一下，测试如果一个个在表格去改也是比较痛苦的一件事情，而Apifox提供了一种批量编辑的交互让开发者们更便捷的达到他们的目的
四、结尾
使用过Apifox之后的同学们我相信你们多多少少都会被这个软件的细节之处以及功能强大之处给留下深刻的印象吧。因为一个软件工具的使命肯定是要为了使用者的便捷着想，处处的简化使用者的操作让工作更效率，这种才是一种好的工具的表现。
Apifox确实有一说一，是用心在为程序员谋福的良心工具。🦊🦊🦊🦊