Mock数据

虚假数据,前端可以 mock 假数据,模拟开发;这样就不用等后端的接口了。

有了 Mock,前后端人员只需要定义好接口文档就可以开始并行工作,互不影响,只在最后的联调阶段往来;后端与后端之间如果有接口耦合,也同样能被Mock解决;测试过程中如果遇到依赖接口没有准备好,同样可以借助 Mock;不会出现一个团队等待另一个团队的情况。这样的话,开发自测阶段就可以及早开展,从而发现缺陷的时机也提前了,有利于整个产品质量以及进度的保证。

如果将模拟数据编辑成 json 数据或者是零碎的 js 脚本中,通过请求取回数据,并进行业务逻辑处理,渲染到 dom。终究还是麻烦,后续工作量等原因这种模式还是被抛弃。

最理想的前后端开发

  • 前后台在需求分解之后,一起定义好接口 api,包含:请求url(项目前缀+具体的接口名称)、请求方式、请求参数、数据响应;
  • 前端研发人员根据接口约定,模拟请求返回对应的数据,完成对应的交互;
  • 后台人员根据接口约定,完成对应的 api,并完成对应的自测;
  • 待后台人员交付接口 api 后,前端人员直接修改接口项目前缀,切换到对应的环境,即可进入项目提测。

Mock数据工具

  • DOClever
  • mock.js
  • Easy Mock
  • YApi

Mock数据开发流程

前端定义接口 -> 完成静态页面 -> 完成UI交互 -> 对接真实接口 -> 页面/逻辑测试 -> 线上部署

DOClever

安装

在 DOClever github 上有基于Docker的本地部署,这里推荐使用 docker-compose 的方式来一键部署。

这里不会用Docker的老哥推荐看一下我写过的一个博客,写的还是比较全和易读的。

https://www.xn2001.com/archives/545.html

version: '2'
services:
  DOClever:
    image: lw96/doclever
    restart: always
    container_name: 'DOClever'
    ports:
      - 30000:10000
    volumes:
      - /docker/doclever/file:/root/DOClever/data/file
      - /docker/doclever/img:/root/DOClever/data/img
      - /docker/doclever/tmp:/root/DOClever/data/tmp
    environment:
      - DB_HOST=mongodb://mongo:27017/DOClever
      - PORT=10000
    links:
      - mongo:mongo

  mongo:
    image: mongo:latest
    restart: always
    container_name: 'mongodb'
    volumes:
      - /docker/mongodb/datadir:/data/db

创建 docker-compose.yml ,内容如上

在该目录下使用 docker-compose up -d 一键启动即可。

访问 http://192.168.160.145:30000/

管理员后台默认用户名密码都是 DOClever

自己注册一个账号,登录进去就可以开始使用了。

使用

点击新增项目,创建一个新项目,新建分组,新建接口

  • name:@code(query['name']) 可以从query中取出值
  • date:@date 随机生成时间
  • number:@num(1,100) 表示随机生成从1到100的数字

点击右上角的运行,就可以测试刚刚写的接口了。

点击设置,展开Mock,下载 net.js,跟着文档说明走。

直接复制示例里面的命令在cmd运行就行了。可以看到提示监听36742,这时候你可以用postman等工具去请求该端口下接口。这里推荐一个在线版的工具,apizza

Mock Server地址:http://192.168.160.145:30000/mock/600313eb55117d000cc31a10
Mock Js文件:net.js(和内网测试是同一个文件,需要安装node环境,安装包点击下载:window mac
使用方法:在本地用node运行net.js ,加上mock server地址和你需要请求的真实地址的根地址,当您的接口文档的状态为开发完成的时候,net.js不会去请求mock server地址而去请求真实地址(举例:node net.js http://192.168.160.145:30000/mock/600313eb55117d000cc31a10 http://localhost:8081) ,然后将您开发工程下的根地址替换为localhost:36742即可开启您的Mock之旅!

当你修改接口时,无需做任何操作就可以同步更新。

当你把接口设置为开发已完成,此时访问接口就会去请求真实的地址,例如我们上面设置的 http://localhost:8081

Mock.js

Github文档说明

一个轻量级的 Mock.js,相比 DOClever,它可以快速完成开发使用。如果你觉得 DOClever麻烦,那 Mock.js 就是不二的选择。

使用方式,可以用 npm 安装,这里我就直接使用 cdn 的方式引入了。

<script src="http://mockjs.com/dist/mock.js"></script>
<script>
  var mock = Mock.mock({
    "list|1-8": [
      {
        "id|+1": 1,
        name: "@cname",
        age: "@integer(1,30)",
      },
    ],
  });
console.log(JSON.stringify(mock, null, 2));
  • list|1-8:表示数据名为list,随机可以有1-8条
  • id|+1":id自增
  • @cname:表示随机起名
  • @integer(1,30):表示取1-30随机整数

结果:

"list": [
    {
      "id": 1,
      "name": "阎伟",
      "age": 8
    },
    {
      "id": 2,
      "name": "苏丽",
      "age": 20
    },
    {
      "id": 3,
      "name": "陆磊",
      "age": 14
    },
    {
      "id": 4,
      "name": "康敏",
      "age": 11
    }
    ]
}

关于 mock.js 语法规范

牛逼的是,mock.js 可以帮我们拦截请求。

完整的示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://mockjs.com/dist/mock.js"></script>

    <button type="button" id="app">发送请求</button>

    <script>
      $("#app").click(function () {
        $.ajax({
          url: "https://api.xn2001.com/getList",
          type: "get",
          dataType: "json",
        }).done(function (data, status, xhr) {
          console.log(data, null, 2);
        });
        // 拦截url
        const mock = Mock.mock("https://api.xn2001.com/getList", {
          "user|1-5": [
            {
              "id|+1": 1,
              name: "@cname",
              birthday: "@date",
              city: "@city",
            },
          ],
        });
      });
    </script>
  </body>
</html>

将我们原本请求的真实路径拦截,返回 mock 数据,大大提高了我们开发效率。


Last modification:February 8, 2021
如果觉得我的文章对你有用,请随意赞赏