乐趣区

关于前端:一键智能Mock你值得拥有

jiezi

大家好呀，我是一名苦逼的前端开发工程师，为啥苦逼呢，这不，我的项目下周就要上线了，然而后端还没给我接口，没有接口我就无奈调试，工作停滞不前，我也只能坐着干着急。

我报告给了我的老板山哥: 老板，这后端不靠谱啊，都快上线了，接口还没进去。

山哥回道，别着急呀，这不有 Mock 吗？

Mock，什么是 Mock 啊？我一脸疑心，问向山哥。

山哥从容不迫说，就是 前端本人启动一个 HTTP 服务，模仿后端接口的数据，这样就无需期待后端接口开发实现了，不会因为后端开发延误而阻塞你的工作过程了。

嗯，真是个不错的留神，我好像发现了新大陆！当前再也不必受后端连累了，心里暗暗开心，但转念一想不对啊，工夫不够啊！

我又丧气了下来，转头向山哥说道: Mock 好是好，然而工夫不够了啊，我重新启动一个 Mock HTTP Server，也要花不少工夫呀。

山哥见我开了窍，又忙不迭地说: 咱们团队不是用的 Apifox 治理 API 吗，只须要点下按钮，就能够主动 Mock！

一键 Mock 数据，这么简略，那应该怎么应用 Apifox 主动 Mock 呢？

山哥接下来，缓缓道来。

应用 Apifox 智能 Mock

Apifox，API 文档、API 调试、API Mock、API 自动化测试集成于一体的弱小工具，能够在 Apifox 官网 间接下载，在 Windows、Linux、Mac 下都能够应用。

下载胜利后，可关上其中的 示例我的项目，是一个对于宠物店的我的项目。关上宠物店的我的项目，能够在每个标签页看到四个标签: 文档、批改文档、运行、高级 Mock。

咱们先看下这个 查问宠物详情 的接口，其申请接口为 /pet/{petId}，而响应数据为 code 与 data，data 是一个 Pet 的一个自定义数据类型。

在数据模型选项卡中，能够看到 Pet 这个自定义数据类型，其中有两个字段为 id、name 和 photoUrls。

在咱们的本地是必定没有宠物店的这个我的项目和接口的，那咱们当初就能够应用一键 Mock 服务，申请 Mock 进去的宠物店数据，十分不便！

切换环境为Mock 服务，此时地址栏前缀为 http://127.0.0.1:4523/mock/533840，点击运行按钮发送申请，见证奇观的时刻到了，数据正确返回！

在我的项目中进行 Mock 时，应用 http://127.0.0.1:4523/mock/533840 代替后端的 API 前缀即可，特地好用是不是！

但这仅仅是 Apifox 弱小的只能 Mock 下的冰山一角！

假如，咱们有一个用户接口，它有一个字段 email 期待返回邮箱格局的数据，一个字段 phone 期待返回手机格局的数据，一个字段 avatar 期待返回一个头像，而这在 Apifox 下都能够零配置实现！

这就是，Apifox 弱小的智能 Mock 规定: 你须要做的仅仅是定义 API 接口文档中的响应数据，接下来一键 Mock 服务，全副只能工作都交给 Apifox 的智能 Mock 来实现。

在 Apifox 外部，当接口响应的数据字段未配置 mock 规定时，零碎会主动应用智能 Mock 规定来生成数据，以实现应用时零配置即可 mock 出十分人性化的数据。依据我的项目设置、性能设置、智能 Mock 设置即可关上默认配置。

除此之外，Apifox 还能够依据高级设置，对字段进一步的限度，如

  1. 字符串长度限定，及正则限定
  2. 数字最大最小的限定
  3. 枚举类型

举一个示例，宠物售卖状态总共有三种：在售、待上架、已售。咱们能够通过高级设置的枚举类型来实现，如下图所示：

应用 Apifox 自定义 Mock

在 Apifox 主动 Mock 十分不便，但咱们须要自定义 Mock 性能，在上个接口中，宠物有一个字段是 name，示意宠物的名字，咱们可不可以将宠物的名字仅仅定位为两个字符。

咱们在 Apifox 数据模型设置中找到该宠物的数据模型，并配置其 name 字段。

@cword(3) 是 Apifox 的 Mock 语法，齐全兼容 Mock.js（数据占位符形式），并扩大了一些 Mock.js 没有的语法（如国内手机号 @phone）。

如现有 Mock 语法无奈满足需要，倡议应用 正则表达式 @regexp 来实现灵便的定制。正则表达式根本能满足各种非凡场景的需要。

而咱们将宠物的名字限度为两个字符，即可应用: @cword(2) 代替。

Apifox 的高级 Mock

Apifox 的智能 Mock 与自定义 Mock 曾经足够弱小，然而他的性能远不止于此。咱们只管能够应用自定义 Mock 对数据进行每个字段更为精密的模仿，但远远无奈满足简单业务的多样性。

以以上 查问宠物详情 的接口为例，不免有记录不存在的示例，此时接口响应为齐全不同的数据类型。此时，咱们能够应用 Apifox 的高级 Mock 用以模仿数据。

当咱们查问宠物的 ID 为 3 时，返回不存在数据的相应格局，同时设置状态码为 404。

为了满足业务的多样性，咱们还能够应用基于模板的高级 Mock 性能与 Apifox 的 Mock 语法相结合。这里应用了 Javascript 的 nunjucks 模板语法，能够生成你想生成的任意数据。

小结

明天对于 Apifox 弱小的 Mock 性能就介绍到了这里，除了这些性能外，它还有以下更弱小的性能:

  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 天生就是为团队合作而生的，接口云端实时同步更新，成熟的 团队 / 我的项目 / 成员权限治理，满足各类企业的需要。

你是不蠢蠢欲动也想下载尝试一下呢？

  • 客户端下载地址：www.apifox.cn
  • API Hub 网页版地址：https://www.apifox.cn/apihub/
退出移动版