Mock.js的进阶用法，自定义生成随机数据

安装指南：Getting Started · nuysoft/Mock Wiki

官方文档：[Mock.js](http://mockjs.com/examples.html)

你在官网可以打开控制台，随意地试验这些方法。 像这样。

接下来介绍实际常用的 下面结合常见的接口场景，挑选并介绍几类 Mock.js 中常用的函数及其用法示例。

---

1. 数据模板定义（Template）

类型	示例	说明
String	`'id	+1': 1000`
Number	`'price	1-100.2': 1`
Boolean	`'isActive	1': true`
Object	`'meta	2': { a:1, b:2, c:3 }`
Array	`'tags	3': ['a','b','c','d']`
Function	computedDate() { return Date.now(); }	返回函数执行结果
RegExp	/^user_\d{3}$/	使用正则表达式校验或匹配

场景示例

1. 用户列表接口GET /api/users

   • id 自增
   • name 随机中文姓名
   • age 18–60 岁
   • isActive 随机布尔

   Mock.mock('/api/users', 'get', {
     'users|5-10': [{
       'id|+1': 1,
       'name': '@cname',
       'age|18-60': 1,
       'isActive|1': true
     }]
   });
   

2. 商品详情接口GET /api/product/:id

   • price 浮点数
   • tags 随机返回 2–4 个标签
   • description 随机段落

   Mock.mock(//api/product/\d+/, 'get', {
     'id|+1': 100,
     'name': '@ctitle',
     'price|10-1000.2': 1,
     'tags|2-4': ['电子', '家居', '运动', '食品'],
     'description': '@cparagraph(2,5)'
   });
   

---

2. 数据占位符定义（Placeholders）

下面列出一些平时用得比较多的占位符，并说明适用场景。

Basic

• @boolean：返回 true/false
• @natural(min, max)：自然数（整数）
• @integer(min, max)：整数
• @float(min, max, dmin, dmax)：浮点数
• @character(pool?)：随机字符
• @string('★')：重复给定字符

Date & Time

• @date('yyyy-MM-dd')：格式化日期
• @time('HH:mm:ss')：格式化时间
• @datetime('yyyy-MM-dd HH:mm:ss')：格式化日期时间
• @now：当前时间戳

Image

• @image('200x100', '#4A7BF7', 'Mock.js')：生成占位图
• @dataImage('png')：Base64 格式图像

Text

• @sentence(3, 5)：3–5 句英文
• @cparagraph(1, 3)：1–3 段中文

Name & Web

• @name / @cname：英文/中文姓名
• @email：电子邮件
• @url：URL
• @ip：IPv4 地址

Address

• @province / @city / @county：省/市/区
• @zip：邮编

Miscellaneous

• @guid：全局唯一 ID
• @increment：自增数字

---

3. 典型接口与常用占位符对照

接口	字段	常用占位符
/api/login	token	@guid
/api/users	id, name, age	@increment, @cname, @natural(18,60)
/api/users/:id/avatar	avatarUrl	@image('100x100', '#FFF', '头像')
/api/articles	title, body	@ctitle(5,10), @cparagraph(3,6)
/api/articles/:id/comments	user, content	@cname, @csentence(2,5)
/api/products	id, name, price	@increment, @word(3,5), @float(0.5, 999.99, 2, 2)
/api/orders	orderNo, date	@guid, @date('yyyy-MM-dd')
/api/dashboard/stats	visits, sales	@integer(1000,5000), @natural(100,500)

---

4. 综合示例

// 模拟电商首页数据
Mock.mock('/api/home', 'get', {
  'banners|3': [{
    'id|+1': 1,
    'imgUrl': '@image("800x300", "#ddd", "Banner")',
    'link': '@url'
  }],
  'featuredProducts|4': [{
    'id|+1': 100,
    'name': '@word(2,4)',
    'price|10-500.2': 1,
    'rating|1-5': 1,
    'inStock|1': true
  }],
  'news|2-5': [{
    'id|+1': 200,
    'title': '@ctitle(6,12)',
    'date': '@datetime("yyyy-MM-dd HH:mm:ss")'
  }]
});

以上就是 Mock.js 常用的模板类型、占位符，以及结合实际接口场景的使用示例，帮助你快速上手并在项目中高效模拟数据。