什么是Mock?

在程序设计中，指的是使用模拟对象来替代真实对象，以测试其他对象的行为；
在前端开发流程中，通常是指模拟数据（假数据）以及生成和使用模拟数据的工具和流程。

为什么要使用Mock?

理想情况下在项目开发中输出接口文档后，前后端同时开发，两端都开发完成后进入联调。

理想开发流程

但实际上，随着项目前端交互流程的日益复杂化，在开发流程中，前端往往需要依赖一定的数据模型来组织页面与组件中的交互流程，而数模型又依赖着后端提供的 API 接口。

假设在后端实际 API 功能完成之前，我们能获得对应的模拟数据作为接口的返回值来处理前端交互中的数据模型，等到开发完成进入联调后再将假数据换为真实的后端服务接口数据，这样开发阶段的阻碍问题就解决了。

Mock方案

直接在代码中侵入式地书写静态返回数据来调试相关逻辑；
使用后端开发服务作为 Mock 服务，将未实现的功能在后端返回 Mock 数据；
通过一些本地 Mock 工具，使用项目本地化的 Mock 规则来生成 Mock 数据；
使用功能更丰富的接口管理工具来提供独立的 Mock 能力...

Mock工具

Mock.js

Mock.js 是前端领域流行的 Mock 数据生成工具之一，后续许多功能更丰富的工具和系统在各自的 Mock 功能部分都将它作为基础设施。

Mock.js 的核心能力是定义了两类生成模拟数据的规范：数据模板定义规范（Data Template Definition, DTD）与数据占位符定义规范（Data Placeholder Definition, DPD），以及实现了应用相应规范生成模拟数据的方法。

Mock.js特性（截自官网）

使用示例（Vue）

安装依赖
npm install mockjs --save-dev
新建 mock.js 文件

// 引入 mock.js
import Mock from 'mockjs'

// 使用 mockjs 模拟数据
Mock.mock(/\/api\/test/, {
  'status': 200,
  'data': {
    'mtime': '@datetime', // 随机生成日期时间
    'score|1-800': 800, // 随机生成1-800的数字
    'rank|1-100': 100, // 随机生成1-100的数字
    'stars|1-5': 5, // 随机生成1-5的数字
    'nickname': '@cname', // 随机生成中文名字
    'boo|1-2': true,
    'email': '@email',
    'city': '@city(true)'
  }
})

在main.js里面引入该文件

import '@/apis/mock/mock.js'

在 vue 文件中调用

mounted () {
    this.$axios.get('/api/test').then(res => {
      console.log(res.data)
    }, err => console.log(err))
  }

实现效果预览

其他

easy mock 可视化，并且能快速生成模拟数据的持久化服务
rap2 阿里开源接口管理平台
Faker.js 模拟数据生成工具
YApi 接口管理服务
- 支持接口的定义、修改、运行、集合测试等
- 提供 Mock 服务，以定义的接口可以通过服务直接获取 Mock 数据。Mock 定义中支持 JSON Schema 和 Mock.js（不支持函数功能）
- 支持 Swagger 多种接口描述的数据导入与导出
- 支持部署到内网服务以及自定义插件
  
  YApi功能特点
Apifox 桌面应用类的接口管理工具
- 支持接口调试工具 Postman 的特色功能，例如环境变量、Cookie/Session 全局共享等
- 对同一个接口支持多种用例管理（成功用例、错误用例等）
- Mock 数据功能方面支持自定义期望，支持自定义占位符规则等
- 支持生成自动业务代码和接口请求代码，支持自定义代码模板等。
server-mock 实现本地mock服务器的node.js工具