作为一个
Web前端开发者
,开发过程中除了写业务代码,剩余大多数时间都花在了API
的联调上。为了解决这个问题,大多数开发者会选择Mock
接口的方案,但是前端领域的几种常用 Mock 方案都需要一定的学习成本。那么有没更优雅便捷的方案可以提高开发者开发效率实现下班*呢。
一款对前端开发者优化的 API 管理工具
假设我们现在要开发一个获取用户信息的功能,常规流程是这样的:
-
接口设计。
-
后端开发接口(此时前端开发页面)。
-
后端接口开发测试完成,交付前端进行开发调试测试。
现在我们使用 Apifox 来参与开发会怎么样呢?
1. 接口设计
在接口设计的环节,我们使用 Apifox 进行,通过 Apifox 可以完全可视化的形式进行一个接口的设计,打开 Apifox,新建一个接口:
接口文档设计完成后,点击保存,Apifox 会保存此接口生成一个接口文档:
2. 接口测试
在接口设计完成后,Apifox 会保存接口文档,文档内有接口的请求与返回信息,此时可以使用 Apifox 内置的 Mock 服务进行调试:
可以看到接口返回数据中自动 Mock 返回了数据,并且 Apifox 会根据常用字段命名,智能的得出人性化的 Mock 数据,并且会根据接口设计时每个字段的数据类型,去校验接口返回数据对应字段的数据类型。
{
"data": {
"username": "廖磊", // 中文姓名
"avatar": "http://dummyimage.com/100x100" // 头像URL
},
"code": 100, // 接口状态码
"message": "occaecat aute proident non" // 接口返回额外信息
}
3. 前端调试
在 Apifox 运行时,我们可以在外部直接访问起内置的 Mock 服务,这意味者,前端开发者不需要单独写 Mock 代码,在接口文档设计完成的时候,便可以直接调试!
我们把刚刚调试的 URL 直接复制带浏览器中,可以直接返回数据!那么我们便可以直接在项目中使用。
Apifox 还提供了高级Mock
的功能(具体文档可看), 我们预期在传入id=1
的时候,接口能返回我们想要的数据,例如:
{
"data": {
"username": "zh",
"avatar": "http://dummyimage.com/100x100"
},
"code": 200,
"message": "success"
}
使用 Apifox 的高级Mock
功能添加一个:
再次发起请求,此时在参数id
赋值为1
:
可以看到得到了我们预期的返回!
那么我们在前端开发时,便可以直接使用 Apifox 的 Mock 服务进行接口联调,等到后端同学完成了接口开发后,便可以无缝切换为真实的接口,因为 Apifox 是以接口设计优先,前后端都严格依照接口文档定义来开发。这样对前端如此友好的工具,用了就回不去!
Apifox 是什么
Apifox 是 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台,定位
Postman + Swagger + Mock + JMeter
。通过一套系统、一份数据,解决多个系统之间的数据同步问题。只要定义好 API 文档,API 调试、API 数据 Mock、API 自动化测试就可以直接使用,无需再次定义;API 文档和 API 开发调试使用同一个工具,API 调试完成后即可保证和 API 文档定义完全一致。高效、及时、准确!
1、Apifox 定位
Apifox = Postman + Swagger + Mock + JMeter
Apifox 是 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台。
通过一套系统、一份数据,解决多个系统之间的数据同步问题。只要定义好接口文档,接口调试、数据 Mock、接口测试就可以直接使用,无需再次定义;接口文档和接口开发调试使用同一个工具,接口调试完成后即可保证和接口文档定义完全一致。高效、及时、准确!
2、Apifox 宗旨
节省研发团队的每一分钟!
3、Apifox 功能
-
接口设计:Apifox 接口文档遵循 OpenApi 3.0 (原 Swagger)、JSON Schema 规范的同时,提供了非常好用的
可视化
文档管理功能,零学习成本,非常高效。并且支持在线分享接口文档。 -
数据模型:可复用的数据结构,定义接口
返回数据结构
及请求参数数据结构
(仅 JSON 和 XML 模式)时可直接引用。支持模型直接嵌套引用,直接 JSON/XML 智能导入,支持 oneOf、allOf 等高级组合模式。 -
接口调试:Postman 有的功能,比如环境变量、前置/后置脚本、Cookie/Session 全局共享 等功能,Apifox 都有,并且比 Postman 更高效好用。接口运行完之后点击
保存为用例
按钮,即可生成接口用例
,后续可直接运行接口用例,无需再输入参数,非常方便。自定义脚本 100% 兼容 Postman 语法,并且支持运行 javascript、java、python、php、js、BeanShell、go、shell、ruby、lua 等各种语言代码。 -
接口用例:通常一个接口会有多种情况用例,比如
参数正确
用例、参数错误
用例、数据为空
用例、不同数据状态
用例等等。运行接口用例时会自动校验数据正确性,用接口用例来调试接口非常高效。 -
接口数据 Mock:内置 Mock.js 规则引擎,非常方便 mock 出各种数据,并且可以在定义数据结构的同时写好 mock 规则。支持添加“期望”,根据请求参数返回不同 mock 数据。最重要的是 Apifox
零配置
即可 Mock 出非常人性化的数据,具体在本文后面介绍。 -
数据库操作:支持读取数据库数据,作为接口请求参数使用。支持读取数据库数据,用来校验(断言)接口请求是否成功。
-
接口自动化测试:提供接口集合测试,可以通过选择接口(或接口用例)快速创建测试集。目前接口自动化测试更多功能还在开发中,敬请期待!目标是: JMeter 有的功能基本都会有,并且要更好用。
-
快捷调试:类似 Postman 的接口调试方式,主要用途为临时调试一些
无需文档化
的接口,无需提前定义接口即可快速调试。 -
代码生成:根据接口及数据数据模型定义,系统自动生成
接口请求代码
、前端业务代码
及后端业务代码
。 -
团队协作:Apifox 天生就是为团队协作而生的,接口云端实时同步更新,成熟的
团队/项目/成员权限
管理,满足各类企业的需求。
Apifox 做的不仅仅是数据打通
如果你认为 Apifox 只做了数据打通,来提升研发团队的效率,那就错了。Apifox 还做了非常多的创新,来提升开发人员的效率。
1、接口支持“用例管理”
通常一个接口会有多种情况用例,比如 正确用例
参数错误用例
数据为空用例
不同数据状态用例
。定义接口的时候定义好这些不同状态的用例,接口调试的时候直接运行,非常高效。
2、“数据模型”定义、引用
可以独立定义数据模型,接口定义时可以直接引用数据模型,数据模型之间也可以相互引用。同样的数据结构,只需要定义一次即可多处使用;修改的时候只需要修改一处,多处实时更新,避免不一致。
3、调试时“自动校验”数据结构
使用 Apifox 调试接口的时候,系统会根据接口文档里的定义,自动校验返回的数据结构是否正确,无需通过肉眼识别,也无需手动写断言脚本检测,非常高效!
Apifox 自动校验数据结构
4、“可视化”设置断言
设置断言:
Apifox 设置断言
运行后,查看断言结果:
5、“可视化”设置提取变量
6、支持数据库操作
7、“零配置”Mock 出非常人性化的数据
先放一张图对比下 Apifox 和其他同类工具 零配置
mock 出来的数据效果:
Apifox Mock 数据结果对比同类工具
可以看出 Apifox 零配置
Mock 出来的数据和真实情况是非常接近的,前端开发可以直接使用,而无需再手动写 mock 规则。
Apifox 如何做到高效率
、零配置
生成非常人性化的 mock 数据
-
Apifox 根据接口定义里的数据结构、数据类型,自动生成 mock 规则。
-
Apifox 内置智能 mock 规则库,根据字段名、字段数据类型,智能优化自动生成的 mock 规则。如:名称包含字符串
image
的string
类型字段,自动 mock 出一个图片地址 URL;包含字符串time
的string
类型字段,自动 mock 出一个时间字符串;包含字符串city
的string
类型字段,自动 mock 出一个城市名。 -
Apifox 根据内置规则,可自动识别出图片、头像、用户名、手机号、网址、日期、时间、时间戳、邮箱、省份、城市、地址、IP 等字段,从而 Mock 出非常人性化的数据。
-
除了内置 mock 规则,用户还可以自定义规则库,满足各种个性化需求。支持使用
正则表达式
、通配符
来匹配字段名自定义 mock 规则。
8、生成在线接口文档
Apifox 项目可“在线分享” API 文档,分享出去的 API 文档可设置为公开或需要密码访问,非常方便与外部团队协作。
体验地址:接口文档在线分享 - Apipark
9、代码自动生成
根据接口模型定义,自动生成各种语言/框架(如 TypeScript、Java、Go、Swift、ObjectiveC、Kotlin、Dart、C++、C#、Rust 等)的业务代码(如 Model、Controller、单元测试代码等)和接口请求代码。目前 Apifox 支持 130 种语言及框架的代码自动生成。
更重要的是:你可以通过自定义代码模板
来生成符合自己团队的架构规范的代码,满足各种个性化的需求。
10、导入、导出
-
支持导出
OpenApi (Swagger)
、Markdown
、Html
等数据格式,因为可以导出OpenApi
格式数据,所以你可以利用 OpenApi (Swagger) 丰富的生态工具完成各种接口相关的事情。 -
支持导入
OpenApi (Swagger)
、Postman
、HAR
、RAML
、RAP2
、YApi
、Eolinker
、NEI
、DOClever
、ApiPost
、Apizza
、ShowDoc
、API Blueprint
、I/O Docs
、WADL
、Google Discovery
等数据格式,方便旧项目迁