这款开发者神器上限究竟有多高?

 

作为一个Web前端开发者,开发过程中除了写业务代码,剩余大多数时间都花在了API的联调上。为了解决这个问题,大多数开发者会选择Mock接口的方案,但是前端领域的几种常用 Mock 方案都需要一定的学习成本。那么有没更优雅便捷的方案可以提高开发者开发效率实现下班*呢。

一款对前端开发者优化的 API 管理工具

假设我们现在要开发一个获取用户信息的功能,常规流程是这样的:

  1. 接口设计。

  2. 后端开发接口(此时前端开发页面)。

  3. 后端接口开发测试完成,交付前端进行开发调试测试。

现在我们使用 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 功能

  1. 接口设计:Apifox 接口文档遵循 OpenApi 3.0 (原 Swagger)、JSON Schema 规范的同时,提供了非常好用的可视化文档管理功能,零学习成本,非常高效。并且支持在线分享接口文档。

  2. 数据模型:可复用的数据结构,定义接口返回数据结构请求参数数据结构(仅 JSON 和 XML 模式)时可直接引用。支持模型直接嵌套引用,直接 JSON/XML 智能导入,支持 oneOf、allOf 等高级组合模式。

  3. 接口调试:Postman 有的功能,比如环境变量、前置/后置脚本、Cookie/Session 全局共享 等功能,Apifox 都有,并且比 Postman 更高效好用。接口运行完之后点击保存为用例按钮,即可生成接口用例,后续可直接运行接口用例,无需再输入参数,非常方便。自定义脚本 100% 兼容 Postman 语法,并且支持运行 javascript、java、python、php、js、BeanShell、go、shell、ruby、lua 等各种语言代码。

  4. 接口用例:通常一个接口会有多种情况用例,比如参数正确用例、参数错误用例、数据为空用例、不同数据状态用例等等。运行接口用例时会自动校验数据正确性,用接口用例来调试接口非常高效。

  5. 接口数据 Mock:内置 Mock.js 规则引擎,非常方便 mock 出各种数据,并且可以在定义数据结构的同时写好 mock 规则。支持添加“期望”,根据请求参数返回不同 mock 数据。最重要的是 Apifox 零配置 即可 Mock 出非常人性化的数据,具体在本文后面介绍。

  6. 数据库操作:支持读取数据库数据,作为接口请求参数使用。支持读取数据库数据,用来校验(断言)接口请求是否成功。

  7. 接口自动化测试:提供接口集合测试,可以通过选择接口(或接口用例)快速创建测试集。目前接口自动化测试更多功能还在开发中,敬请期待!目标是: JMeter 有的功能基本都会有,并且要更好用。

  8. 快捷调试:类似 Postman 的接口调试方式,主要用途为临时调试一些无需文档化的接口,无需提前定义接口即可快速调试。

  9. 代码生成:根据接口及数据数据模型定义,系统自动生成接口请求代码前端业务代码后端业务代码

  10. 团队协作:Apifox 天生就是为团队协作而生的,接口云端实时同步更新,成熟的团队/项目/成员权限管理,满足各类企业的需求。

Apifox 做的不仅仅是数据打通

如果你认为 Apifox 只做了数据打通,来提升研发团队的效率,那就错了。Apifox 还做了非常多的创新,来提升开发人员的效率。

1、接口支持“用例管理”

通常一个接口会有多种情况用例,比如 正确用例 参数错误用例 数据为空用例 不同数据状态用例。定义接口的时候定义好这些不同状态的用例,接口调试的时候直接运行,非常高效。

2、“数据模型”定义、引用

可以独立定义数据模型,接口定义时可以直接引用数据模型,数据模型之间也可以相互引用。同样的数据结构,只需要定义一次即可多处使用;修改的时候只需要修改一处,多处实时更新,避免不一致。

3、调试时“自动校验”数据结构

使用 Apifox 调试接口的时候,系统会根据接口文档里的定义,自动校验返回的数据结构是否正确,无需通过肉眼识别,也无需手动写断言脚本检测,非常高效!

这款开发者神器上限究竟有多高?

这款开发者神器上限究竟有多高?

Apifox 自动校验数据结构

4、“可视化”设置断言

设置断言:

这款开发者神器上限究竟有多高?

这款开发者神器上限究竟有多高?

Apifox 设置断言

运行后,查看断言结果:

这款开发者神器上限究竟有多高?

这款开发者神器上限究竟有多高?

5、“可视化”设置提取变量

这款开发者神器上限究竟有多高?

这款开发者神器上限究竟有多高?

6、支持数据库操作

这款开发者神器上限究竟有多高?

这款开发者神器上限究竟有多高?

7、“零配置”Mock 出非常人性化的数据

先放一张图对比下 Apifox 和其他同类工具 零配置 mock 出来的数据效果:

这款开发者神器上限究竟有多高?

这款开发者神器上限究竟有多高?

Apifox Mock 数据结果对比同类工具

可以看出 Apifox 零配置 Mock 出来的数据和真实情况是非常接近的,前端开发可以直接使用,而无需再手动写 mock 规则。

Apifox 如何做到高效率零配置生成非常人性化的 mock 数据

  1. Apifox 根据接口定义里的数据结构、数据类型,自动生成 mock 规则。

  2. Apifox 内置智能 mock 规则库,根据字段名、字段数据类型,智能优化自动生成的 mock 规则。如:名称包含字符串imagestring类型字段,自动 mock 出一个图片地址 URL;包含字符串timestring类型字段,自动 mock 出一个时间字符串;包含字符串citystring类型字段,自动 mock 出一个城市名。

  3. Apifox 根据内置规则,可自动识别出图片、头像、用户名、手机号、网址、日期、时间、时间戳、邮箱、省份、城市、地址、IP 等字段,从而 Mock 出非常人性化的数据。

  4. 除了内置 mock 规则,用户还可以自定义规则库,满足各种个性化需求。支持使用 正则表达式通配符 来匹配字段名自定义 mock 规则。

8、生成在线接口文档

Apifox 项目可“在线分享” API 文档,分享出去的 API 文档可设置为公开或需要密码访问,非常方便与外部团队协作。

体验地址:接口文档在线分享 - Apipark

这款开发者神器上限究竟有多高?

这款开发者神器上限究竟有多高?

9、代码自动生成

根据接口模型定义,自动生成各种语言/框架(如 TypeScript、Java、Go、Swift、ObjectiveC、Kotlin、Dart、C++、C#、Rust 等)的业务代码(如 Model、Controller、单元测试代码等)和接口请求代码。目前 Apifox 支持 130 种语言及框架的代码自动生成。

更重要的是:你可以通过自定义代码模板来生成符合自己团队的架构规范的代码,满足各种个性化的需求。

10、导入、导出

  1. 支持导出 OpenApi (Swagger)MarkdownHtml 等数据格式,因为可以导出OpenApi格式数据,所以你可以利用 OpenApi (Swagger) 丰富的生态工具完成各种接口相关的事情。

  2. 支持导入 OpenApi (Swagger)PostmanHARRAMLRAP2YApiEolinkerNEIDOCleverApiPostApizzaShowDocAPI BlueprintI/O DocsWADLGoogle Discovery等数据格式,方便旧项目迁

上一篇:springboot整合阿里云oss实现单/多文件上传并插入到数据库


下一篇:esp_now_实例代码