Apifox工作基本使用教程

337 阅读25分钟

前言

    总所周知,在项目开发中,有效地编写、管理、测试和文档化 API 是一个具有挑战性的任务,所以选择一个合适的API 管理工具,是提高一个团队的生产力和协作效率的关键。

通过学习本文,我们可以了解到

  • Apifox的定位与优势
  • Apifox中如何快速创建、共享和管理 API等基本使用
  • Apifox如何帮助我们在团队协作和沟通中搭建高效的桥梁。

为什么使用Apifox

行业痛点

以往大多数研发团队通常会使用以下多种工具管理 API 接口:

  • 使用 Swagger 管理 API 文档
  • 使用 Postman 调试 API
  • 使用 Mockjs 等工具 Mock API 数据
  • 使用 JMeter 做 API 自动化测试

这样子的工作模式使得维护不同工具之间数据一致性非常困难、低效。并且这里不仅仅是工作量的问题,更大的问题是多个系统之间数据不一致,导致协作低效、频繁出问题,开发与测试人员痛苦不堪。许多研发团队正在经历以下庞杂的协作场景:

  • 后端工程师在 Swagger 定义好 API 文档后,调试接口时还需要再去 Postman 定义一遍。
  • 由于业务发展迅猛,API接口模块以及数量繁多,Swagger不善于管理API接口,前端工程师查找目标API麻烦,费时费力。
  • 前端工程师在开发 Mock 数据时需要在 Mockjs 进行定义,还需要手动设置 Mock 规则。
  • 前端工程师根据 Mockjs Mock 返回的数据完成开发,后端工程师根据 Swagger 定义的接口文档进行开发,并且各自都通过了测试流程。结果在进入前后端对接流程时又发现各项不一致问题,例如     开发过程中API接口变更了,后端工程师修改了 Swagger里的API文档,但是没有告知前端工程师API文档的变更,导致前端工程师没有及时同步修改对接细节以及 Mockjs,导致前端工程师排查问题费时费力。
  • 测试工程师在 JMeter 运行已编写的测试用例时,发现接口有更新,导致又要需要重复回到 JMeter 重新定义接口参数。

随着开发周期的推移,因为团队中存在过于复杂的工具链路,使得每个环节中的不一致性趋于混乱;开发人员的心智负担越来越重,最终变成了整个团队积重难返的技术债务。而 Apifox 能够有效的解决上述问题,下面就开始叙说Apifox如何有效地帮我们解决上述的问题。

Apifox 解决方案

Apifox定位

    Apifox 是 一个API 文档、调试、Mock、测试一体化协作平台,定位 “Postman” + “Swagger” + “Mock” + “JMeter” 四合一。

    简单概括,就是通过一套系统、一份数据,解决多个系统之间的数据同步问题。只要定义好 API 文档,API 调试、API 数据 Mock、API 自动化测试,就可以直接使用,无需再次定义;API 文档和 API 开发调试使用同一个工具,API 调试完成后即可保证和 API 文档定义完全一致。高效、及时且准确!且Apifox 公网在线版(Saas 版):免费,无限制,满足我们工作中的日常使用。

Apifox 功能

  1. 团队概念:Apifox的团队功能可以帮助我们管理多人在线协作不同的项目。每个团队可包含多个项目和成员,不同团队和项目之间的的数据相互独立,互不可见。
  2. 接口文档定义:Apifox 遵循 OpenApi3.0 (原Swagger)、JSON Schema 规范的同时,提供了非常好用的可视化文档管理功能,零学习成本,非常高效。
  3. 接口调试:Postman 有的功能,比如环境变量、预执行脚本、后执行脚本、Cookie/Session 全局共享 等功能,Apifox 都有,并且和 Postman 一样高效好用。
  4. 数据 Mock:内置 Mock.js规则引擎,非常方便 mock 出各种数据,并且可以在定义数据结构的同时写好 mock 规则。支持添加“期望”,根据请求参数返回不同 mock 数据。最重要的是 Apifox 零配置 即可 Mock 出非常人性化的数据。
  5. 接口自动化测试:提供接口集合测试,可以通过选择接口(或接口用例)快速创建测试集,目标是: JMeter 有的功能基本都会有,并且要更好用。

基本使用

1、团队管理

      在 Apifox 中,“团队”是协作和组织的核心单元。每个团队都可以包含多个项目和成员,团队之间的数据相互独立且互不可见,确保数据的隔离性

  团队的功能主要包括成员管理、权限控制和协作。你可以邀请团队成员加入团队,并为他们分配不同的角色和权限,以确保项目和数据的安全性。团队成员可以共享资源、协同编辑和交流讨论,提高团队的协作效率和项目的完成质量。

现在我们通过「我的团队」->「新建团队」创建一个名为'测试'的团队;

image.png   创建完团队,就可以邀请项目组里的开发团队成员了,要注意开发成员在项目开发里承担的角色,在Apifox中,权限层级分为了团队角色跟项目权限; 团队层级权限按角色可以分为:团队所有者、团队管理者、团队成员、游客。对应的角色权限如下:

权限名称团队所有者团队管理员团队成员游客
修改团队资料
移交团队
解散团队
查看成员权限列表
修改成员权限
邀请/移出成员

然后项目层级权限又可以分为管理员、编辑者、只读成员、禁止访问四种权限类型,对应的权限如下:

权限名称管理员编辑者只读成员禁止访问
项目增删改
项目信息修改
访问接口文档
接口增删改
接口查看调试
用例增删改
用例查看和运行
测试套件增删改
测试套件运行
数据模型增删改
数据模型查看
环境增删改
Mock 规则增删改
公共 Response 增删改
公共脚本增删改
数据库连接增删改
自定义函数增删改
变量增删改
变量本地值设置
导入数据
导出数据

  例如我们想要邀请一个项目后端开发,我们就需要给他指定团队角色~团队成员,项目权限~管理员,因为后端开发需要创建、管理API文档等功能,同时需要借助导入功能,导入外部接口,方便快速维护项目接口,所以项目层级权限需要更高级一点。

image.png 要注意的是,发起邀请成员链接,这里没得选择邀请对象的团队权限角色,默认都是团队成员,同时分配项目权限是针对所有项目的,所以当我们邀请完团队成员,要根据实际的项目情况,给不同成员分配不同的团队权限以及项目权限。

image.png

2、项目管理

    在 Apifox 中,你可以创建和管理多个项目,根据自己的实际情况,更好地组织和管理不同项目组的API文档。

下面我们通过「团队项目」->「新建项目」->「新建」,创建一个名为‘测试’的项目,要注意的是创建者只能是团队所有者 / 管理员,同时务必谨慎,删除项目无法找回,所以要务必重视团队成员的权限分配。 image.png

image.png

3、通知管理

    前面我们说到,API文档发生了变更,需要后端工程师口头上或者通过其它人工的方式去告知前端工程师,口口相传难免会有所遗漏,在此场景,Apifox推荐我们使用**“通知设置”**的功能。

Apifox 支持 第三方集成 功能,支持将通知集成到第三方应用平台。可以根据通知需求,配置不同通知渠道的通知事件,通知渠道目前支持企业微信、钉钉、飞书、Webhook、Jenkins等;

通过将通知集成到第三方应用平台,当项目成员触发对应的通知事件时,将通知实时发送到第三方应用平台,如企业微信机器人。

我们通过「项目设置」->「通知通知」-> 「外部通知」-> 「新建」新建一个外部通知。

image.png

image.png 根据我们的推送需求,去勾选触发事件的类型,例如需要接口发送变更就推送相关的变更细节,那就需要把对应的事件类型勾选上,要注意的是,触发事件的粒度要根据当前项目所处的开发阶段设计好;

image.png 例如项目开发前期,后端工程师处于接口定义阶段,可以不开启外部通知,因为这个时候处于接口设计阶段,会频繁改动接口细节,会导致频繁推送消息; 而项目前后端对接阶段,可以开启接口变更、数据模型变更等类型的事件类型,后端工程师开发中,变更了接口实现细节,可以即时通知到相关的人员,相关人员可以根据接口变更做出对应的调整;

选择完事件触发策略,就需要选择通知渠道跟webhook回调地址了,这里创建了一个了企业微信,通过在企业微信创建一个机器人,配置webhook地址,具体的创建流程大家可以自行去了解,就不加展开了,要注意的是,一个webhook地址,只能存在一个外部通知,无法用一个webhook地址创建不同策略的外部通知。

image.png 开启后,触发了我们设置的事件类型策略后的效果是这样的: image.png 有一个点不得不说一下,就是Apifox的消息通知,无法根据接口状态来做定制化处理,例如勾选接口变更~事件类型,无法细分到具体的接口状态,例如需要对已发布的接口进行变更,需要推送消息,而不是当前项目所有的接口变更后,都需要发送消息通知,这样子就更适用于工作场景了,现在的接口状态仅仅是作为了一个接口标识。

image.png

4、运行环境管理

    项目创建完了,需要维护好项目的运行环境配置,方便后续接口切换不同环境调试接口。

一个项目在不同的阶段会处于不同的运行环境,例如存在开发环境、测试环境、生产环境等,这些环境对应着不同的**“前置 URL”“接口参数值”**。显而易见的是,当项目随着进度推进而环境发生变动时,频繁地修改接口地址中的前缀 URL 及反复配置参数对于接口调试工作而言十分繁琐。

在Apifox中 默认提供正式环境、开发环境、测试环境、本地 Mock 与云端 Mock。每个环境中包含服务(前置 URL)、环境变量、参数三项可配置项,直接在上面基础上替换成自己的项目配置就行。

image.png

5、变量管理

    维护好项目的运行环境配置,我们就需要维护项目的一些基础信息配置了,例如 token、测试用户的账号密码等基础数据。这个时候就要用到Apifox的变量管理了。

和编程语言类似,Apifox变量是允许在多个环境中重复使用的值。不同的接口用例(请求参数、脚本等)与环境可以重复引用相同的变量。开发者只需要更改一次变量值,就能同步修改所有引用了该变量的相关值,大幅提升工作效率。

Apifox 中的变量存在三种变量类型:

  • 环境变量
  • 全局变量
  • 临时变量

####环境变量 环境变量是最常用的变量类型。同一个变量可以在不同的环境设置不同的值,变量值会跟随环境切换而改变,我们可以运用该类型的变量,去维护不同环境的测试用户信息

image.png

####全局变量 全局变量中的数值不会随着环境切换而改变,在环境管理页中的左上方进行设置,我们可以把一些全局通用的配置信息或者数据维护在这里,统一管理。

image.png ####临时变量 临时变量仅在单次运行接口用例或测试管理里的测试用例测试套件过程中有效,不会持久保存至系统,简单理解就是在需要的地方即定义,即用完就消散。

要注意的是本地值远程值的差异

环境变量存在本地值和远程值的差异。所有使用到变量的地方,实际运行的时候优先读写**“本地值”** ,而不会读取**“远程值”“本地值”** 仅存放在本地,不会同步到云端,团队成员之间也不会相互同步,适合存放 token、账号密码等敏感数据。

远程值中填写的数据将保存至远端服务器中,主要用于团队间共享数据值,由于远本地值远仅存放在本地,使用一些清理软件清理 Apifox 文件缓存会导致远本地值远被清空,请务必注意。

6、参数管理

常用参数

    在我们以往编写 API 文档的过程中,填写请求参数与返回响应时往往会输入许多相同的参数名称、说明等。如果每次都要重复输入这些信息,效率很低还容易出错。Apifox给我们提供了**“常用参数”** 功能来帮助我们快速填写。

![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2324726eabef4626a4a33e1901af828e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Zec552h5bm05Y2O:q75.awebp?rk3s=f64ab15b&x-expires=1748156541&x-signature=sDTdoUXgQtEy06072dZ3n1e7A4Y%3D)

我们可以将一些项目接口文档中常用到的字段参数维护在这里,例如Id、name以及status等通用字段,后续创建编辑接口时可以直接引用参数。

全局参数

    在项目编写接口文档中,我们是需要维护一些固定的接口请求参数的,例如常见的系统鉴权方式,接口请求头携带Authorization字段等等,这个时候我们就需要用到Apifox的全局参数功能了,当我们维护好参数字段,启用后,后续项目中每个接口都会带上此参数。

image.png (要注意的是,实际应用场景中,登录授权字段的值,是通过登录接口动态赋值的,不是固定值,涉及到接口传递值的问题,此处应该使用变量{{token}}标签的方式去动态入值,由于是基础教程,就不那么深入了,感兴趣的小伙伴可以自行研究)

7、数据模型管理

基础配置

    数据模型离不开数据结构,而数据结构离不开数据字段,数据字段离不开数据类型,维护接口的数据结构,就需要用到Apifox的数据模型功能了;

Apifox的数据模型,主要凸显一个**“复用性”** 的作用,实际项目开发中,一个功能模块的不同接口的数据结构,可能大同小异,维护了数据模型,在接口中引用数据模型,方便不同接口中同一个字段改变数据类型了,可以直接在对应的数据模型里更改,不用一个个接口去修改。

如果我们已有了要创建的数据结构的JSON报文或者XML格式的数据,我们也可以使用**“通过JSON等生成”** 的方式,快速生成一个数据模型(要注意的是,要根据实际使用,选择对应的覆盖模式,完全覆盖,会把该数据模型已创建的字段直接清空覆盖)。

image.png

![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8ae9de2d400a4fd5a4f69ebbcf264be1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Zec552h5bm05Y2O:q75.awebp?rk3s=f64ab15b&x-expires=1748156541&x-signature=S6RgFzuIBesWQR2BLMAwOLqJUb8%3D)

如果没有,那就老老实实去维护我们想要的数据模型了,一步一个字段。

image.png 新增或删除字段。

image.png 选择字段的数据类型,常见的数据类型。

image.png 拖拽移动并改变字段之间的排序。

image.png

或者通过之前维护的常用参数,快速创建字段。

image.png 引用已有的数据模型。值得说的是,若当前数据模型需要部分引用已有的“数据模型”,你可以直接进行修改,并且无需担心这会影响原“数据模型”,同时支持关联多个已有的数据模型。

image.png

  1. 当不需要某个字段时,可以直接点击“隐藏字段”按钮。

image.png 2. 当需要对某个字段进行特殊编辑时,可以点击“取消关联”按钮。

image.png

高级设置

    当我们创建字段,选择字段的数据类型时,会发现可供选择的数据类型,好像不大满足我们的需求,比如float、long等常见的数据类型都没得选择。

其实不然,Apifox的数据类型是进行归类了,每种类型里面再细分具体的数据格式。 假如我们需要维护一个字段名称为money,数据类型为Float,那么就需要配置如下

image.png

image.png 当我们选择数据类型为number,就可以看到有float、double这些供我们选择了。

如果实在是Apifox现有的数据格式不满足实际的接口数据类型,官方推荐可以直接编辑 JSON Schema 的方式定义数据结构,Apifox 的数据结构和数据模型完全遵守 JSON Schema 规范

image.png

8、组件库管理

响应组件

    通常情况下,一个规范的系统设计,是应该有统一的接口响应数据格式的,然后通过返回状态码来区分不同的返回结果,因此当我们想要维护统一的接口响应数据格式的时候,就需要用到Apifox的组件库功能了。

image.png 我们可以把项目中常用的响应结果数据格式维护在这里,例如404、500、200等等,编写接口文档的时候,根据实际接口返回情况引用不同的响应结果模板,可以让前端同学更清晰地知道,接口的不同异常返回数据结构,根据不同返回数据结构,做不同的异常处理。

默认响应模板

如果项目中接口返回的数据结构结果比较单一,可以维护Apifox的默认响应模板,维护后,创建的每一个接口都会默认引用此接口返回响应模板,方便快捷,有以下要注意的:

  • 创建新接口时,以本模板的内容作为初始的响应。
  • 修改默认响应模板不会影响已有的接口,只会影响将来新建的接口。
  • 默认响应模板只有一个,不能添加或删除。

image.png

9、接口创建

    万事具备,只欠创建接口,上面做的准备,可能有些因为实际项目情况,可能不会用到,但是流程差不多如此,下面就开始我们的接口创建了。

在 Apifox 中,你可以通过手动新建或导入外部接口的方式创建 HTTP 类型的接口。

手动创建

提到手动创建,就不得不提到目录的问题了,维护项目接口时,有必要先创建好目录,方便接口的查找以及归类。

image.png 我们直接在所选目录下,创建接口,也可以直接复制已有的接口来快速创建新接口。

image.png 可以看见,新接口自动引用了全局参数以及默认响应模板

image.png

那么我们下面就可以开始设计这个接口,一份清晰完整的接口文档应具备以下要素:

  1. 设定接口路径

image.png

  1. 指定请求方式

image.png

  1. 接口请求参数详情 根据实际的接口情况,填写具体的参数,请求参数包含 Query 参数Path 参数两部分。 Query 参数     Query 参数是接口请求中的一种参数传递方式,它通常用于传递一些可选的参数,比如过滤条件、排序方式、分页参数等。不建议直接将Query 参数,即 URL 中 ?后的参数直接写入至接口路径中。 Path 参数     Path 参数也称为“路径参数”,是 API 请求中的一种参数传递方式。它能够使得请求的路径更加具体化,从而准确描述接口所操作的资源。

image.png Body 参数     当请求方发起 HTTP 请求时,通常需要带上一些参数以便服务器进行处理。这些参数可以通过 HTTP 请求头或者 HTTP 请求体传递给服务器。其中,通过 HTTP 请求体传递的参数被称为 Body 参数。Body 参数包含在请求的主体部分中,通常是一些表单数据、JSON 数据或者二进制数据。

可以看到当我们创建接口字段时,可以引用之前维护的常用参数或者引用已有的数据模型。

image.png

定义接口参数示例值的时候,也可以读取我们之前定义的变量值

image.png

  1. 提供返回示例 当我们把接口设计完之后,可以添加一下接口的返回示例,方便对接人员,更直观地查看返回结果的格式。

image.png

这里不得不说下,这个返回响应实体里面字段的Mock配置了,Apifox给我们定义了很多生成策略标签,让我们在Mock的时候,可以根据标签去生成对应的示例数据,例如我们要返回一个图片访问地址链接,我们可以在字段配置那里,Mock选择**@Image**标签。

![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/bcc66297305b448e8fe317bd21c09bd2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Zec552h5bm05Y2O:q75.awebp?rk3s=f64ab15b&x-expires=1748156541&x-signature=XEVadFeY4aKXSUuontU1WNLoquI%3D)

最后生成的效果是这样子的,是不是很nice!

image.png

  1. 生成在线文档 接口设计完成后点击保存,这样子就完成了一个在线接口的编写工作。

image.png

导入外部接口

    说完手动创建接口的方式,就不得不说下Apifox的导入外部接口的方式,特别适用于已经有现有接口,但是没维护到Apifox的场景,或者项目使用工具规划改变,不用swagger在线文档的方式进行前后端对接,全部接口全部迁移到Apifox进行维护管理,那这个时候就得使用到这个功能了。

image.png 这里举例下Swagger外部接口的导入流程(注意要有导入数据的权限,才可以进行外部接口的导入),事先准备要导入的Swagger接口文档

image.png

直接把文档拖拉Apifox导入区域,会得到以下的效果

image.png

image.png 我们可以手动地选择要导入的接口以及数据模型, 有两点要吐槽的 1、Swagger接口文档,不可以只分模块导出的,每次都是导出所有的接口,也有可能是自己没找到处理的方法。 2、手动勾选想要的接口时,无法做到接口跟导入的数据模型进行联动,就有可能出现导入了接口,但是没有对应删数据模型的情况。


可以看到导入的效果,还是挺不错的,导入的接口,自动引用了对应的数据模型,是不是很方便,nice!

image.png

10、运行

    设计好接口文档后,就可以直接运行接口来调试了,看看接口输入输出是否满足实际的期望。

运行环境

    填充好输入参数,我们可以开始运行调试接口了,可以看到我们可以切换我们定义好的不同运行环境进行运行,如果是接口是已经发布到了对应的环境,可以直接切换到对应的运行环境进行运行;

image.png 如果项目只开放了内网地址,要注意先要**“安装浏览器插件”** 或者使用**“Apifox桌面版”** ,才能运行对应的接口;

image.png

项目开发中,前后端开发往往是齐头并进的,但是前端开发往往依赖于后端数据接口,在后端接口就绪能够返回数据之前,前端通常很难开工。Apifox给我们推出了**“本地Mock” ** 和**“云端Mock”** 功能,帮助我们解决接口数据模拟问题,有了 Mock 工具模拟数据后,前后端可以同步进入开发,提升团队研发效率。

这里主要举例一下Apifox的云端Mock,因为工作中这个比较常用。

云端 Mock 功能适用于团队内的共同协作场景。相对于本地 Mock 地址而言,云端 Mock 地址是一个固定的地址,团队内的其他成员可以通过这个地址访问到云端 Mock Server。 这对于复杂项目而言十分有用。因为该项目很有可能要求模拟出一些复杂的数据结构,并且可能有很多字段或需要遵循复杂的模式。如果让每位成员自行在本地启动 Mock Server,并且维护各自的 Mock 数据,这不仅十分繁琐而且也不利于 Mock 数据的统一管理。

云端 Mock 功能具备以下优势:

  • 数据统一管理与共享
  • 一次配置,全团队可用

使用云端Mock时,首先要开启该功能,前往「项目设置」→「Mock 设置」→开启「云端 Mock」功能,然后切换运行环境,切到云端Mock,点击需要Mock的接口,点击运行tab,调用,可以发现,接口成功返回了响应数据,这里我们是没配置什么Mock数据生成策略的,实际使用时,要根据字段意义配置对应的Mock策略。

image.png

我们直接去Postman调用这个云端Mock访问地址,也是可以直接获取到响应数据,前端同学不用自己苦逼地Mock假数据了。

image.png

保存用例

    对接口运行调试完成,我们可以使用Apifox的保存用例功能,将当前的运行调试的相关参数跟响应结果保存起来,方便下次或者其他人用来调试接口,给人更直面的观感;

在工作中也可以作为接口自测的凭证,特别在工作交接中的场景用处挺大,交接的人员,直接跑接口用例,就可以对功能的设计有了大体的了解,不管三七二十一,先跑起来再说。

image.png

image.png 保存为用例后,接口用例会显示在左侧树状菜单里接口的下一级;

image.png 我们可以保存不同响应结果的接口用例,已保存的接口用例,还可以再进行编辑调试;

![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/911cc52e14f84f9a967828c6df01c285~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Zec552h5bm05Y2O:q75.awebp?rk3s=f64ab15b&x-expires=1748156541&x-signature=ulhpsShVWyCBINAPKS5CwHzaziE%3D)
请求历史

    不同于接口用例的手动保存,Apifox会自动记录我们每一次的接口请求记录;

image.png 记录我们每次的接口请求的请求参数以及响应结果等信息

image.png 要注意的是,如果我们要把某些请求历史分享给其它用户,我们可以把本地的请求历史创建分享,复制一份到共享栏目,这样子其它用户也可以查看你共享的接口请求历史记录了。

image.png

image.png

11、分享文档

    至此一个Apifox接口文档的维护工作已经接近尾声,后端同学完成了接口编写工作,那肯定是急不可待地要把接口文档发给前端同学,如果单纯分享给公司内的人员还好,把人都拉进团队,授予不同的项目权限,但是如果是要把接口文档分享给外部人员,那就得不偿失了,基于此场景,就不得不使用到Apifox的分享文档功能了。

image.png

可以基于分享接口文档的范围,安全性以及运行环境,进行定制化分享,wow,实在是太nice了!不同的角色的对接人员,或者不同平台的对接人员,分享不同的模块接口文档,很不错。

image.png


总结

    至此,Apifox的工作基本使用教程已经全部输出完毕,此文章是基于Apifox的使用帮助文档,再结合自己在工作中使用Apifox的经验,而输出的一篇文档,望对大家有帮助!!!(附上官网帮助文档地址