Mock.js：一款用于生成模拟数据的 JavaScript 库

原创于 2025-11-01 00:43:18 发布 · 1.3k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #java #html #前端 #前端框架

前端专栏收录该内容

38 篇文章

订阅专栏

Mock.js：一款用于生成模拟数据的 JavaScript 库

Mock.js 是一款用于生成模拟数据的 JavaScript 库，主要用于前端开发中模拟后端接口返回的数据，解决 “前端开发时后端接口未就绪” 的问题，提高前端开发效率。其核心特点是支持随机生成各种格式的数据，并能拦截 Ajax 请求，返回模拟响应，无需依赖真实后端服务。

一、核心功能

生成随机数据支持生成文本、数字、日期、图片、地址、姓名等常见数据类型，且可自定义规则（如长度、范围、格式）。
拦截 Ajax 请求无需修改原有代码，即可拦截 XMLHttpRequest 或 fetch 请求，返回预设的模拟数据，模拟后端接口响应。
数据模板定义通过简洁的语法定义数据结构模板，支持嵌套、关联数据生成（如根据用户 ID 生成对应的订单信息）。
扩展能力可自定义随机数据生成函数，满足特定业务场景（如生成符合规则的手机号、身份证号）。

二、安装与引入

1. 浏览器直接引入

<!-- 引入 Mock.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>

2. Node.js 或前端工程化项目

# 安装依赖
npm install mockjs --save-dev

引入：

const Mock = require('mockjs'); // CommonJS
// 或 ES6 模块
import Mock from 'mockjs';

三、基础语法与数据生成

Mock.js 生成数据的核心是 Mock.mock() 方法，其语法为：Mock.mock(template) 或 Mock.mock(rurl, rtype, template)（拦截请求时）。

1. 基本数据类型生成

（1）随机文本

// 生成指定长度的随机字符串
const text1 = Mock.mock({
  "string|5": "★" // 重复 "★" 5 次 → "★★★★★"
});

// 生成随机汉字（长度 3-5）
const text2 = Mock.mock({
  "string|3-5": "中" // 生成 3-5 个 "中" → 如 "中中中"
});

// 生成随机标题（1-3个词）
const title = Mock.mock({
  title: "@ctitle(1,3)" // @ctitle 是内置占位符，生成中文标题
});

（2）随机数字

const num = Mock.mock({
  "number1|1-100": 1, // 1-100 之间的整数 → 如 42
  "number2|1-100.2-5": 1, // 1-100 之间的小数，保留 2-5 位 → 如 36.729
  "number3|+1": 100 // 自增 1 → 100, 101, 102...（多次调用时）
});

（3）随机日期时间

const date = Mock.mock({
  date1: "@date", // 日期 → 如 "2023-08-15"
  date2: "@time", // 时间 → 如 "14:30:25"
  date3: "@datetime", // 日期时间 → 如 "2023-08-15 14:30:25"
  date4: "@now('yyyy-MM-dd HH:mm:ss')" // 自定义格式
});

（4）随机布尔值

const bool = Mock.mock({
  "bool|1": true // 50% 概率为 true，50% 为 false
});

（5）图片

const image = Mock.mock({
  img: "@image('200x100', '#50B7C1', '#FFF', 'Mock.js')" 
  // 生成 200x100 的图片，背景色 #50B7C1，文字 #FFF，内容 "Mock.js"
});

（6）姓名、地址等

const user = Mock.mock({
  name: "@cname", // 中文姓名 → 如 "张三"
  id: "@id", // 身份证号 → 如 "110101199001011234"
  phone: "@phone", // 手机号 → 如 "13812345678"
  address: "@city(true)", // 完整地址（省+市）→ 如 "江苏省南京市"
  email: "@email" // 邮箱 → 如 "zhangsan@example.com"
});

2. 复杂数据结构（对象、数组）

（1）对象

const user = Mock.mock({
  id: "@id",
  name: "@cname",
  age: "@integer(18, 60)", // 18-60 岁
  "gender|1": ["男", "女"], // 随机选择数组中的值
  isVip: "@boolean",
  regTime: "@datetime"
});
console.log(user);
// 输出示例：
// {
//   id: "620000199507151234",
//   name: "李四",
//   age: 32,
//   gender: "男",
//   isVip: false,
//   regTime: "2023-01-15 08:30:45"
// }

（2）数组

// 生成 3-5 个用户的数组
const userList = Mock.mock({
  "list|3-5": [{ // 数组长度 3-5
    id: "@id",
    name: "@cname",
    "score|80-100": 1 // 80-100 分
  }]
});
console.log(userList.list); // 数组形式的用户列表

3. 自定义数据模板（高级）

（1）关联数据

const order = Mock.mock({
  "orderId|100000-999999": 1, // 订单号
  userId: "@id", // 用户 ID
  userName: "@cname", // 用户名（与 userId 无实际关联，仅模拟）
  "amount|100-10000.2": 1, // 订单金额
  "status|1": ["待支付", "已支付", "已取消"],
  createTime: "@datetime",
  // 嵌套数组：订单商品列表（2-4 件）
  "products|2-4": [{
    "productId|1000-9999": 1,
    "productName": "@ctitle(3, 6)",
    "price|50-500.2": 1,
    "num|1-5": 1 // 购买数量
  }]
});

（2）自定义函数

通过 Mock.Random.extend() 扩展自定义随机数据生成规则：

// 扩展：生成指定格式的学号（如 "2023001"）
Mock.Random.extend({
  studentId: function() {
    const prefix = "2023"; // 年份前缀
    const num = Mock.Random.integer(1, 999); // 1-999 的序号
    return prefix + num.toString().padStart(3, "0"); // 补零至 3 位
  }
});

// 使用自定义规则
const student = Mock.mock({
  id: "@studentId", // 调用自定义占位符
  name: "@cname"
});
console.log(student.id); // 如 "2023045"

四、拦截 Ajax 请求

Mock.js 可拦截前端的 Ajax 请求（如 XMLHttpRequest、fetch，或 jQuery、Axios 等库的请求），返回模拟数据，无需后端接口即可测试。

1. 基本用法

语法：Mock.mock(rurl, rtype, template|function(option))

rurl：匹配请求的 URL（支持字符串、正则）。
rtype：请求方法（GET/POST/PUT/DELETE 等）。
template：数据模板或返回数据的函数。

示例：拦截 GET 请求

// 拦截 /api/users 的 GET 请求，返回模拟用户列表
Mock.mock("/api/users", "get", {
  "code": 200,
  "message": "success",
  "data|5-10": [{ // 5-10 条用户数据
    "id|+1": 1, // 自增 ID
    "name": "@cname",
    "age|18-60": 1,
    "email": "@email"
  }]
});

// 前端发送请求（以 Axios 为例）
axios.get("/api/users").then(res => {
  console.log(res.data); // 接收 Mock 返回的模拟数据
});

示例：拦截 POST 请求（带参数）

// 拦截 /api/login 的 POST 请求，根据参数返回不同结果
Mock.mock("/api/login", "post", function(option) {
  // option 包含请求参数：{ url, type, body }
  const { username, password } = JSON.parse(option.body);
  
  // 模拟登录逻辑
  if (username === "admin" && password === "123456") {
    return {
      code: 200,
      message: "登录成功",
      data: { token: "@string(32)", user: { name: username } }
    };
  } else {
    return { code: 401, message: "用户名或密码错误" };
  }
});

// 前端发送登录请求
axios.post("/api/login", { username: "admin", password: "123456" })
  .then(res => console.log(res.data));

2. 取消拦截

若需要关闭 Mock 拦截（如后端接口就绪后），可调用：

Mock.restore(); // 清除所有拦截规则

五、常用占位符（内置）

Mock.js 提供了大量内置占位符（以 @ 开头），简化数据生成：

类别	示例	说明
基础	`@integer(1, 100)`	随机整数
文本	`@cparagraph(2, 4)`	2-4 段中文段落
姓名	`@cname`	中文姓名
日期	`@date('yyyy年MM月dd日')`	自定义格式日期
网络	`@url`	随机 URL
图片	`@image('300x200')`	300x200 的图片 URL
地址	`@county(true)`	省 + 市 + 县
ID	`@guid`	全局唯一标识符