Mock数据详解与使用

乐心湖

发布于 2021-01-20 10:01:02

3K00

代码可运行

文章被收录于专栏：MyTechnology

运行总次数：0

代码可运行

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数据，大大提高了我们开发效率。