前端 mock 数据及工具介绍

前端 mock 数据及工具介绍

阅读本文，需要有前端开发的简单知识，接下来我们分别从介绍 Mock 数据概念（what）、为啥要 Mock(why)、如何 mock(how）、mock 工具等方面来展开讲解。

mock 数据概念 - what

mock 英文翻译为模拟，这里的数据是指后端接口数据, 串起来也就简单一句话：（根据接口定义）模拟前端需要的后端接口数据。

为啥要 mock - why

因为现在绝大部分项目采用的都是前后端分离的开发模式，而前端主要关注页面和交互，需要结合数据来调试界面样式、页面交互和功能操作闭环的验证。前后端开发是并行的，在后端提供真正可用的接口前，前端要完成页面和功能的开发、调试，构造数据是必须的。

如何 mock - how

这个工作可以放前端，也可以放后端来做，构造数据主要有以下三种方式来实现：

• 写死在代码里 （没有和工程代码解耦，前后端都可做，不推荐）
• 项目中实现的 mock 功能 （可用，但不适合跨项目使用）
• 三方工具 （解耦，推荐使用）

使用第二种方式的，像 umi 框架、Vue3+vite 脚手架内置的 mock 功能。使用第三种方式的市面上 mock 工具挺多的，像知名的 Yapi、Apifox 等，好用，但大多都是要安装软件或部署前后端服务才能使用的。

mock 工具

网上的 mock 工具很多，我就不展开介绍了，我说下自己期望的强大好用的 mock 工具应该什么样，应该具备以下功能特性：

1. mock 功能和工程代码解耦
2. 能批量创建、方便管理 mock 数据
3. 独立，能跨项目使用
4. 无需依赖另外的后端服务和第三方库（前端能自己玩转）
5. 能在浏览器 network 中看到 mock 接口
6. mock 功能支持热更新，即更改 mock 内容无需手动重启 mock 服务
7. mock 数据在开发、生产环境下都可以使用
8. 能方便将后端实际接口 Response 数据转化为 mock 数据

对于第 8 点，是考虑到后端没准备好接口或后端接口服务经常故障、不稳定的情况，关于这个，经常和后端开发联调的前端同学应该感受颇深。

为了方便前端同学能自己 mock 数据，我实现了这么一个 Mock 工具 mock-service-cli，能满足上述所有要求，接下来我就简单讲解下怎么使用。

mock-service-cli

是基于 node 和 express 实现的 Mock 服务套件命令行工具

简易轻量、B/S 架构、0 秒启动， 支持热更新。具备以下能力

• Mock Server
• Web Server
• Http request proxy

只需安装 Node，即可使用 mock-service-cli 的所有功能，包括 mock 数据。

使用方式

在项目根目录下创建 mock 目录，也可指定其他位置的目录作为 mock 目录，里面可创建无限层级的 mock 分组目录，里面的所有 js 文件默认为 mock 数据文件。启动 mock 服务时会自动递归遍历 mock 目录的所有 js 文件，收集 mock 数据

1. 构造 mock 数据

• mock 根目录范例

mock
├── element-template.js
├── sub
│   └── sub-test.js
└── test.js

• mock 数据的 js 文件范例

以对象字面量方式定义 mock 数据，js 中可使用 mockjs 来生成随机数据

格式：[method] url:ResponseData或ResponseFunction
method 可省略，默认Get, 支持GET,POST,PUT,DELETE,PATCH,OPTIONS,COPY,LINK,UNLINK,PURGE 等常用请求类型

const Mock = require("mockjs");
module.exports = {
  "/mock/api/getImage": {
    code: 0,
    message: "成功",
    data: {
      url: "https://cdn.pixabay.com/photo/2021/01/28/21/12/wave-5959087__340.jpg",
    },
  },
  "post /mock/api/genRandomText": (req, res) => {
    res.json({
      code: 0,
      message: "成功",
      data: {
        text: Mock.mock("@ctitle"),
      },
    });
  },
};

2. 启动 mock 服务

编辑 mock 目录下的任何文件都会自动重启 mock 服务

$ mock-service-cli

Starting up mock-server, serving /Users/chendq/MyProjects/mock-service-cli/mock  2022-08-07 18:47:41

🌍  mock-server version: 3.1.0


 Mock server available on:

    http://localhost:8090
    http://127.0.0.1:8090
    http://192.168.1.140:8090

启动 mock 服务并显示 mock 详情

$ mock-service-cli -a
Mockfile 1:  /Users/chendq/MyProjects/mock-service-cli/mock/element-template.js all API URL is follows:
path 1:  /mock/api/getImage object
path 2:  POST /mock/api/genRandomText function
Mockfile 2:  /Users/chendq/MyProjects/mock-service-cli/mock/sub/sub-test.js all API URL is follows:
path 3:  /mock/api/cjx/video/camera/ function
Mockfile 3:  /Users/chendq/MyProjects/mock-service-cli/mock/test.js all API URL is follows:
path 4:  /mock/api/test1 object
path 5:  GET /mock/api/test object
path 6:  POST /mock/api/test object
path 7:  DELETE /mock/api/test object
path 8:  PUT /mock/api/test object
path 9:  PATCH /mock/api/test object
path 10:  HEAD /mock/api/test object
path 11:  OPTIONS /mock/api/test object
path 12:  COPY /mock/api/test object
3 mock file are parsed in total.

Starting up mock-server, serving /Users/chendq/MyProjects/mock-service-cli/mock  2022-08-07 18:47:55

🌍  mock-server version: 3.1.0


 Mock server available on:

    http://localhost:8090
    http://127.0.0.1:8090
    http://192.168.1.140:8090

3. 配置、切换 mock 接口请求

只要接口的 url 和 method 能匹配上 mock 请求，就能获取到 mock 的响应数据

以 axios 请求工具展示配置范例:

以下的范例中，都加上 Node 环境变量 MOCK 总开关控制，方便 npm script 切换是否启用 mock 的本地开发模式

 {
  scripts: {
    "start": "vue-cli-service serve",
    "start:mock": "cross-env MOCK=true concurrently \"npx mock-service-cli -a\" \"vue-cli-service serve\" "
  }
 }

• 根据 url 前缀（比如/mock）切换成 mock 请求

  在请求拦截配置中，将需要 mock 的真实接口加上/mock前缀

前端 api 请求：

const getIndicatorList = async (params) => {
  return axios.get(`/mock/api/udmp/v2/indicator`, { params });
};

axios 拦截配置：

import Axios from "axios";
const axios = Axios.create();
axios.interceptors.request.use((config) => {
  if (process.env.MOCK && config.url.startsWith("/mock")) {
    // 启用mock
    config.baseURL = "http://localhost:8090";
  } else if (config.url.startsWith("/mock")) {
    // 不启用mock
    config.url = config.url.replace("/mock", "");
  }
  return config;
});

• 根据请求的 header 特定标识字段切换成 mock 请求

  在请求拦截配置中，为需要 mock 的接口请求 header 加上：mock: true标识

前端 api 请求：

const getIndicatorList = async (params) => {
  return axios.get(`/mock/api/udmp/v2/indicator`, {
    params,
    headers: { mock: true },
  });
};

axios 拦截配置：

import Axios from "axios";
const axios = Axios.create();
axios.interceptors.request.use((config) => {
  if (process.env.MOCK && config.headers.mock) {
    // 启用mock
    config.baseURL = "http://localhost:8090";
  }
  return config;
});

是不是非常简单，这个 npm 工具不仅支持 mock，而且也支持 web server 和 http request proxy，可一键启动 web 服务来加载 dist 产物，模拟 production preview，更多使用详情请查看 npm 页面，所有功能全部自己实现，代码已开源 Github，喜欢就star，谢谢啦。