强大的mock数据生成工具--apipost

简介: 在APIPOST中使用Mock

APIPOST可以让你在没有后端程序的情况下能真实地返回接口数据,你可以用APIPOST实现项目初期纯前端的效果演示,也可以用APIPOST实现开发中的数据模拟从而实现前后端分离。在使用APIPOST之前,你的团队实现数据模拟可能是下面的方案中的一种或者多种:

  • 本地手写数据模拟,在前端代码中产生一大堆的mock代码。
  • 利用mockjs或者canjs的can-fixture实现ajax拦截,本地配置必要的json规则。
  • 后端在Controller层造假数据返回给前端。

上面的方式中,不管哪一种方式,都会要求开发人员写一些跟项目本无任何关联的代码,第一个和第二个方式还会需要前端项目在本地引入不必要的js文件。

使用APIPOST 的Mock 服务

您可以通过APIPOST 提供的Mock 服务实现上述功能。

编写Mock 规则

image.png

在APIPOST中,Mock 规则模板支持类型丰富(5.4版本起)。

基本数据(固定json结构)

{
  "code": "0",
  "data": {
    "name": "张三丰",
    "age": 100
  },
  "desc": "成功"
}

基本数据(Mock随机json结构)

{
  "code": "0",
  "data": {
    "list|20": [{
      "name": "@name",
      "age": "@integer(2)"
    }],
    "url": "https://echo.apipost.cn"
  },
  "desc": "成功"
}

RESTFUL逻辑数据

某些场景中,我们可能需要根据接口的入参规则,加入适当的逻辑处理后再返回数据。一个简单的场景就是登录场景,需要根据用户名密码,判断是否登录成功。再或者,我们需要根据产品ID动态返回产品信息,等等。

现在,ApiPost 的Mock 服务提供了这种场景的解决方案。
以下示例中,我们用到了 _req.body对象,其含义是:

当 post 请求以 x-www-form-urlencoded 或者application/json 方式提交时,我们可以拿到请求的参数对象。
{
  "code": "0000",
  "data": {
    "verifySuccess": function() {
      let body = _req.body;
      return body.username === 'admin' && body.password === '123456';
    },
    "userInfo": function() {
      let body = _req.body;
      if (body.username === 'admin' && body.password === '123456') {
        return Mock.mock({
          username: "admin",
          email: "@email",
          address: "@address"
        });
      } else {
        return null;
      }
    },
  },
  "desc": "成功"
}

填写Mock URL 相对地址

Mock URL相对地址是必填项(如果不填写的话,无法正常得到响应结果)。您可以通过在设置里开启“自动获取Mock URL地址”来自动获取Mock URL。

image.png

此项开启后,APIPOST将根据您输入的接口URL自动截取PATH部分作为Mock URL的相对路径。

利用APIPOST发送Mock URL

完成以上2步后,您可以通过在APIPOST中切换到“Mock 环境”来发送查看mock返回的详细数据。
image.png

将生成的mock URL地址发给前端

image.png

您可以将APIPOST生成的mock URL地址发给前端来代替您的接口地址,这样前端就可以使用您模拟的数据进行先一步的调试开发了。当您的接口完成后,再替换回来即可。

APIPOST的 mock 是基于mock.js 开发的。具体文档可以 参见 mock.js 详细文档。

相关文章
|
3月前
阿萨学工具:Apifox 用Mock.js写高级Mock的期望
阿萨学工具:Apifox 用Mock.js写高级Mock的期望
128 0
|
10月前
|
XML 前端开发 测试技术
【前端小技巧】如何使用 Eolink Apilkit 调用 Mock ?
在开发过程中,进度比较赶的情况下,前端人员当页面写完时,后台的接口还没写完,等要交付的时候后端才把接口给你,这个时候就很尴尬。 这个时候 Mock 就可以很好的解决这个问题,前端团队可以在 API 还没开发完成的情况下,借助 Mock API 实现预对接,加速开发进程。测试团队可以通过 Mock API 解决不必要的系统,完成集成测试。 Eolink Apikit 为前端工程师提供 API 文档管理,快速接口测试,以及 Mock API 创建与调用,及查看文档变更历史的能力。有助于前端工程师快速查看 API 文档详情与历史记录,快速生成和使用 Mock API 提前进行页面效果验证。
48 0
|
3月前
阿萨学工具: Apifox 的自定义智能Mock功能
阿萨学工具: Apifox 的自定义智能Mock功能
146 0
|
3月前
|
前端开发
阿萨学工具:Apifox的高级Mock 功能
阿萨学工具:Apifox的高级Mock 功能
109 0
|
3月前
阿萨学工具: Apifox 的智能Mock功能
阿萨学工具: Apifox 的智能Mock功能
|
数据可视化 安全 测试技术
Postcat 插件上线,支持 ApiPost 格式导入
最近我们的插件广场上线了一款由我们的社区共建者开发的 ApiPost 插件,安装即可支持导入 ApiPost 格式的数据,操作方法也很简单呢。
Postcat 插件上线,支持 ApiPost 格式导入
|
前端开发 JavaScript 测试技术
【Eolink Apikit】Mock 解决方案
在开发过程中,由于后端与前端并行开发,或者前端需要等待后台开发,难以保证对接效率,同时即使用开发好的 API 对接,也有可能一个 API 不通就阻塞了整个软件的对接工作。同时对软件的敏感度也很高,一不小心就可能导致整个软件不能正常工作。并且界面之间存在着严重的相互依赖关系,产生的业务逻辑非常复杂,这些都会对软件的开发效率产生很大的影响。 所以学习如何利用最好的 Mock 数据是很关键的。这样做会降低前端开发者的工作量,降低开发费用,提高开发效率。 以下是一些常见的 Mock 方法,我们可以根据具体的场景和条件来进行选择和配置。最关键的是要知道如何去做,并从中挑选出最适合自己的方式。
272 0
【Eolink Apikit】Mock 解决方案
jira学习案例3-对比常见mock方案
jira学习案例3-对比常见mock方案
72 0
jira学习案例3-对比常见mock方案
|
JSON 数据格式
阿萨聊测试:Apifox的高级Mock 自定义脚本
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第4天,点击查看活动详情 大家好,我是阿萨。今天我们学习高级Mock的自定义脚本功能。学习完前面的内容后, 我们还有一类场景使用前面的Mock 方法无法实现.
1262 0
阿萨聊测试:Apifox的高级Mock 自定义脚本
|
数据可视化 前端开发 Java
Mock工具介绍,为什么使用Mock?
Mock工具介绍,为什么使用Mock?
529 0