乐趣区

关于apipost:使用-mockjs-给前端生成需要的数据

jiezi

Mock 的意义

通过 Mock 当时编写好 API 的数据生成规定，由工具动静生成 API 的返回数据。开发人员通过拜访 Mock 来取得页面所须要的数据，就能够轻松地实现对接工作。前后端人员只须要定义好接口文档就能够开始并行工作，互不影响，只在最初的联调阶段往来亲密；

后端与后端之间如果有接口耦合，也同样能被 Mock 解决。

测试过程中如果遇到依赖接口没有筹备好，同样能够借助 Mock，不会呈现一个团队期待另一个团队的状况。

这样的话，开发自测阶段就能够及早发展，从而发现缺点的机会也提前了，有利于整个产品质量以及进度的保障。

在 APIPOST 中应用 Mock

APIPOST 能够让你在没有后端程序的状况下能实在地返回接口数据，你能够用 APIPOST 实现我的项目初期纯前端的成果演示，也能够用 APIPOST 实现开发中的数据模仿从而实现前后端拆散。在应用 APIPOST 之前，你的团队实现数据模仿可能是上面的计划中的一种或者多种：

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

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

应用 APIPOST 的 Mock 服务

您能够通过 APIPOST 提供的 Mock 服务实现上述性能。

编写 Mock 规定


在 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。

此项开启后，APIPOST 将依据您输出的接口 URL 主动截取 PATH 局部作为 Mock URL 的相对路径。

利用 APIPOST 发送 Mock URL

实现以上 2 步后，您能够通过在 APIPOST 中切换到“Mock 环境”来发送查看 mock 返回的具体数据。

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

您能够将 APIPOST 生成的 mock URL 地址发给前端来代替您的接口地址，这样前端就能够应用您模仿的数据进行先一步的调试开发了。当您的接口实现后，再替换回来即可。

APIPOST 的 mock 是基于 mock.js 开发的。具体文档能够 参见 mock.js 具体文档。

退出移动版