🧩 Mock.js 数据 Mock 实战技巧与最佳实践

2025年11月1日 95点热度 0人点赞 0条评论

一、前言

在前端开发中，“接口未完成但功能要先联调”的情况屡见不鲜。
Mock 数据便成为开发初期不可或缺的利器。
无论你是使用 Vue、React、还是纯前端工程，只要能通过 HTTP 请求，就能轻松接入 Mock.js。

本文将从 Mock.js 的核心用法、常见数据生成技巧、接口场景模拟实战 到 团队最佳实践 逐步讲解，帮助你构建一个高可维护的 mock 系统。

二、Mock.js 基础快速上手

1. 安装与引入

Bash

npm install mockjs --save-dev

npm install mockjs --save-dev

在项目入口文件（如 main.js 或 index.js）中引入：

JavaScript

import Mock from 'mockjs'

import Mock from 'mockjs'

2. 定义基础 Mock 接口

JavaScript

Mock.mock('/api/user/info', 'get', {
  code: 0,
  message: 'success',
  data: {
    id: '@id',
    name: '@cname',
    age: '@integer(18, 60)',
    email: '@email',
    'roles|1': ['admin', 'editor', 'visitor']
  }
})

Mock.mock('/api/user/info', 'get', {
  code: 0,
  message: 'success',
  data: {
    id: '@id',
    name: '@cname',
    age: '@integer(18, 60)',
    email: '@email',
    'roles|1': ['admin', 'editor', 'visitor']
  }
})

请求 /api/user/info 时会返回一条随机用户数据。

三、Mock.js 数据模板语法技巧

Mock.js 最强大的地方在于其 数据模板语法（Data Template Syntax）。
这里总结几类最常用的写法与技巧：

1. 数组与对象生成规则

JavaScript

// 数组生成多条数据
'list|5-10': [
  {
    'id|+1': 1,
    name: '@cname',
    age: '@integer(18,60)'
  }
]

// 数组生成多条数据
'list|5-10': [
  {
    'id|+1': 1,
    name: '@cname',
    age: '@integer(18,60)'
  }
]

|5-10 表示生成 5~10 条数据
|+1 表示递增字段
@cname、@integer 是内置占位符

2. 嵌套数据

JavaScript

{
  id: '@id',
  name: '@cname',
  address: {
    city: '@city',
    zip: '@zip'
  }
}

{
  id: '@id',
  name: '@cname',
  address: {
    city: '@city',
    zip: '@zip'
  }
}

3. 模拟分页数据

JavaScript

Mock.mock('/api/list', 'get', (options) => {
  const { page = 1, pageSize = 10 } = JSON.parse(options.body || '{}')
  const total = 53
  const list = Mock.mock({
    [`data|${pageSize}`]: [
      {
        id: '@increment',
        title: '@ctitle(5,10)',
        author: '@cname',
        date: '@date("yyyy-MM-dd")'
      }
    ]
  }).data
  return {
    code: 0,
    message: 'success',
    total,
    page,
    list
  }
})

Mock.mock('/api/list', 'get', (options) => {
  const { page = 1, pageSize = 10 } = JSON.parse(options.body || '{}')
  const total = 53
  const list = Mock.mock({
    [`data|${pageSize}`]: [
      {
        id: '@increment',
        title: '@ctitle(5,10)',
        author: '@cname',
        date: '@date("yyyy-MM-dd")'
      }
    ]
  }).data
  return {
    code: 0,
    message: 'success',
    total,
    page,
    list
  }
})

四、接口 Mock 实战技巧

1. 模拟请求延迟（接口加载中）

JavaScript

Mock.setup({
  timeout: '300-800'
})

Mock.setup({
  timeout: '300-800'
})

使请求响应延迟 300～800ms，更接近真实环境。

2. 动态参数与正则匹配

JavaScript

Mock.mock(/\/api\/user\/\d+/, 'get', {
  code: 0,
  data: {
    id: '@id',
    name: '@cname',
    gender: '@pick(["男", "女"])'
  }
})

Mock.mock(/\/api\/user\/\d+/, 'get', {
  code: 0,
  data: {
    id: '@id',
    name: '@cname',
    gender: '@pick(["男", "女"])'
  }
})

支持正则匹配路由，如 /api/user/123。

3. 使用函数返回动态数据

JavaScript

Mock.mock('/api/random', 'get', () => {
  return {
    code: 0,
    msg: 'ok',
    timestamp: Date.now(),
    list: Array.from({ length: 3 }).map(() => Mock.mock('@cname'))
  }
})

Mock.mock('/api/random', 'get', () => {
  return {
    code: 0,
    msg: 'ok',
    timestamp: Date.now(),
    list: Array.from({ length: 3 }).map(() => Mock.mock('@cname'))
  }
})

函数方式更灵活，可以结合逻辑、参数等进行动态生成。

五、前端联调场景最佳实践

1. 按模块拆分 Mock 文件

推荐目录结构：

mock/
├── user.js
├── article.js
├── comment.js
└── index.js

在 index.js 中统一引入：

import './user'
import './article'
import './comment'

console.log('✅ Mock 服务已启动')

2. 与 Axios / Fetch 集成

只需在开发环境引入：

JavaScript

if (process.env.NODE_ENV === 'development') {
  require('../mock')
}

if (process.env.NODE_ENV === 'development') {
  require('../mock')
}

生产环境不会被打包。

3. 搭配 `vite-plugin-mock` / `mockjs2`

如果是 Vite 项目：

Bash

npm install vite-plugin-mock mockjs -D

npm install vite-plugin-mock mockjs -D

vite.config.js 配置：

JavaScript

import { viteMockServe } from 'vite-plugin-mock'

export default {
  plugins: [
    viteMockServe({
      mockPath: 'mock',
      localEnabled: true,
      watchFiles: true
    })
  ]
}

import { viteMockServe } from 'vite-plugin-mock'

export default {
  plugins: [
    viteMockServe({
      mockPath: 'mock',
      localEnabled: true,
      watchFiles: true
    })
  ]
}

自动根据文件目录生成 mock 服务，更贴近后端接口风格。

六、进阶技巧：复杂业务场景模拟

1. 登录鉴权模拟

JavaScript

Mock.mock('/api/login', 'post', (options) => {
  const { username, password } = JSON.parse(options.body)
  if (username === 'admin' && password === '123456') {
    return { code: 0, token: 'mock-token-123456' }
  } else {
    return { code: 401, message: '用户名或密码错误' }
  }
})

Mock.mock('/api/login', 'post', (options) => {
  const { username, password } = JSON.parse(options.body)
  if (username === 'admin' && password === '123456') {
    return { code: 0, token: 'mock-token-123456' }
  } else {
    return { code: 401, message: '用户名或密码错误' }
  }
})

2. 模拟 CRUD 接口

JavaScript

const mockList = Mock.mock({
  'items|10': [{ id: '@id', title: '@ctitle(5,10)' }]
}).items

Mock.mock('/api/article/list', 'get', { code: 0, data: mockList })
Mock.mock('/api/article/add', 'post', { code: 0, message: '添加成功' })
Mock.mock('/api/article/delete', 'post', { code: 0, message: '删除成功' })

const mockList = Mock.mock({
  'items|10': [{ id: '@id', title: '@ctitle(5,10)' }]
}).items

Mock.mock('/api/article/list', 'get', { code: 0, data: mockList })
Mock.mock('/api/article/add', 'post', { code: 0, message: '添加成功' })
Mock.mock('/api/article/delete', 'post', { code: 0, message: '删除成功' })

3. 模拟分页与搜索过滤

JavaScript

Mock.mock('/api/search', 'post', (options) => {
  const { keyword } = JSON.parse(options.body)
  const all = Mock.mock({ 'list|30': [{ title: '@ctitle(5,10)' }] }).list
  const filtered = all.filter((item) => item.title.includes(keyword))
  return { code: 0, data: filtered }
})

Mock.mock('/api/search', 'post', (options) => {
  const { keyword } = JSON.parse(options.body)
  const all = Mock.mock({ 'list|30': [{ title: '@ctitle(5,10)' }] }).list
  const filtered = all.filter((item) => item.title.includes(keyword))
  return { code: 0, data: filtered }
})

七、企业级最佳实践建议

✅ 1. Mock 数据与接口文档保持同步
建议使用 Swagger、Apifox、YApi 导出的接口定义生成 Mock。

✅ 2. 建立统一 Mock 规则库
集中管理常用模板，如用户、分页、文件上传响应格式等。

✅ 3. 区分「前端 Mock」与「本地 Mock Server」

前端 Mock：快速调试 UI 层
本地 Node Server Mock：联调时更贴近后端（推荐使用 express + mockjs）

✅ 4. 与 CI 流程集成
测试阶段使用 mock 数据进行 E2E 测试，提升自动化验证效率。

✅ 5. 与微前端架构结合
在 qiankun / micro-app 环境中，可通过独立 mock 实例解决跨子应用数据隔离问题。

八、 Mock.js 常用内置占位符速查表

分类	占位符	说明	示例
标识与数字	`@id`	随机唯一 ID（GUID）	`"id": "@id"`
	`@increment`	自增整数（可与 `	+1` 配合）
	`@natural(min,max)`	随机自然数（非负）	`"num": "@natural(0,100)"`
	`@integer(min,max)`	随机整数（可负）	`"age": "@integer(18,60)"`
	`@float(min,max,dmin,dmax)`	浮点数（小数位数可控）	`"price": "@float(10,100,2,2)"`
	`@boolean`	随机布尔值	`"ok": "@boolean"`
字符串与文本	`@character(pool)`	随机字符（字母/数字/自定义集合）	`"ch": "@character('lower')"`
	`@string(pool?,min,max)`	随机字符串	`"str": "@string(5,10)"`
	`@word(min,max)`	英文单词	`"word": "@word(2,5)"`
	`@sentence(min,max)`	英文句子	`"sentence": "@sentence(5,10)"`
	`@title(min,max)`	英文标题	`"title": "@title(3,7)"`
	`@paragraph(min,max)`	英文段落	`"content": "@paragraph(1,3)"`
中文文本	`@cword(pool?,min,max)`	随机中文字符	`"char": "@cword(2,5)"`
	`@csentence(min,max)`	中文句子	`"sentence": "@csentence(5,12)"`
	`@ctitle(min,max)`	中文标题	`"title": "@ctitle(3,7)"`
	`@cparagraph(min,max)`	中文段落	`"content": "@cparagraph(1,3)"`
	`@cname`	中文姓名	`"name": "@cname"`
	`@cfirst` / `@clast`	中文姓 / 名	`"first": "@cfirst"`
人名与联系信息	`@name`	英文姓名	`"name": "@name"`
	`@first` / `@last`	名 / 姓	`"first": "@first"`
	`@email`	邮箱地址	`"email": "@email"`
	`@url`	完整网址	`"site": "@url"`
	`@protocol`	协议（http/https）	`"proto": "@protocol"`
	`@domain`	域名	`"domain": "@domain"`
	`@tld`	顶级域名	`"tld": "@tld"`
	`@ip`	IPv4 地址	`"ip": "@ip"`
	`@guid` / `@uuid`	全局唯一标识	`"uuid": "@guid"`
地址与地理信息	`@region`	地区（省份）	`"region": "@region"`
	`@province`	省份	`"province": "@province"`
	`@city`	城市（支持省市组合）	`"city": "@city(true)"`
	`@county`	区/县	`"county": "@county(true)"`
	`@zip` / `@postal`	邮政编码	`"zip": "@zip"`
日期与时间	`@date(format?)`	日期	`"date": "@date('yyyy-MM-dd')"`
	`@time(format?)`	时间	`"time": "@time('HH:mm:ss')"`
	`@datetime(format?)`	日期时间	`"dt": "@datetime('yyyy-MM-dd HH:mm:ss')"`
	`@now(format?)`	当前时间	`"now": "@now('yyyy-MM-dd HH:mm:ss')"`
图片与颜色	`@image(size?,bgColor?,fgColor?,text?)`	占位图片 URL	`"img": "@image('200x100','#50B347','#FFF','Mock.js')"`
	`@dataImage(size?,text?)`	Base64 图片	`"dataImg": "@dataImage('200x100','Hello')"`
	`@color` / `@hex` / `@rgb`	随机颜色	`"color": "@color"`
辅助 / 集合操作	`@pick(array)`	从数组中随机取一个	`"role": "@pick(['admin','user','guest'])"`
	`@shuffle(array)`	打乱数组顺序	`"shuffle": "@shuffle(['A','B','C'])"`
其他常用	`@upper` / `@lower`	转为大写/小写（部分实现）	`"up": "@upper('abc')"`
	`@capitalize`	首字母大写（部分实现）	`"cap": "@capitalize('mock')"`
	`@sentence` / `@paragraph`	文本句子/段落	`"txt": "@sentence"`
	`@pick`	随机取值	`"level": "@pick(['A','B','C'])"`

🧠 使用提示与进阶技巧

模板修饰符 | 的妙用
- 'list|5': 固定生成 5 条
- 'list|1-10': 生成 1~10 条随机数量
- 'id|+1': 1: 自增字段
- 'score|1-100': 1: 随机数范围
结合函数动态生成 Mock.mock('/api/random', 'get', () => ({ id: Mock.Random.id(), name: Mock.Random.cname(), token: Mock.Random.guid() }))
自定义扩展占位符 const Random = Mock.Random Random.extend({ appVersion() { return 'v' + Random.integer(1, 10) + '.' + Random.integer(0, 9) } }) Mock.mock('@appVersion') // => v3.7

📦 常见组合示例

JavaScript

{
  'list|5-10': [{
    'id|+1': 1,
    title: '@ctitle(5,10)',
    author: '@cname',
    date: '@date("yyyy-MM-dd")',
    price: '@float(10,999,2,2)',
    pic: '@image("200x100", "#ccc", "#000", "Mock")'
  }]
}

{
  'list|5-10': [{
    'id|+1': 1,
    title: '@ctitle(5,10)',
    author: '@cname',
    date: '@date("yyyy-MM-dd")',
    price: '@float(10,999,2,2)',
    pic: '@image("200x100", "#ccc", "#000", "Mock")'
  }]
}