1-2 4种Mock假数据生成工具&mock.js用法介绍
四大 Mock 数据库对比
| 库名 | 状态 | 特点 | 推荐度 |
|---|---|---|---|
| Mock.js | 长期未更新 | 国内使用最广泛，内置占位符丰富 | 学习参考 |
| Faker.js | 活跃维护 | API 最丰富，支持多语言数据 | 推荐 |
| Chance.js | 活跃维护 | 随机数据生成，API 简洁 | 推荐 |
| Casual.js | 停更 | 简单易用，但已停止维护 | 不推荐 |
这些库可以混用，某个库缺少特定方法时可配合其他库使用。
Mock.js 语法规范
数据模板规范（DTD）
格式：属性名|生成规则: 属性值
// 生成 1-10 个元素
'list|1-10': [{ ... }]
// 整数，1-100
'age|1-100': 1
// 自增步长
'id|+1': 1
javascript
数据占位符规范（DPD）
格式：@占位符
Mock.mock({
name: '@cname', // 中文名
title: '@ctitle', // 中文标题
sentence: '@csentence', // 中文句子
image: '@image("200x100")', // 随机图片
url: '@url', // URL
date: '@date("yyyy-MM-dd")' // 日期
})
javascript
常用占位符：
| 分类 | 占位符 | 说明 |
|---|---|---|
| Basic | @boolean, @natural, @integer, @float | 基础类型 |
| Text | @cword, @ctitle, @csentence, @cparagraph | 中文文本 |
| Image | @image | 随机图片（灰色背景） |
| Name | @cname, @cfirst, @clast | 中文姓名 |
| Web | @url, @domain, @email, @ip | 网络相关 |
| Date | @date, @time, @datetime | 时间日期 |
扩展占位符
使用 Mock.Random.extend() 自定义占位符：
Mock.Random.extend({
customImage() {
const images = ['img1.jpg', 'img2.jpg', 'img3.jpg']
return this.pick(images)
}
})
Mock.mock({ bg: '@customImage' })
javascript
结合 AI 工具的最佳实践
直接使用 AI 生成 Mock 数据可能不够真实，但结合 Mock.js 的占位符后效果显著提升。
提示词示例：
请结合 Mock.js 库，使用 Mock.mock() 方法产生对应的属性数据，
重新生成一份 mock 假数据。要求：
- bg 使用 Mock.js 的 @image 方法
- title 使用 @ctitle，subtitle 使用 @csentence
- 每个数组属性至少 3 条数据
text
Node.js 中测试 Mock 数据
// index.cjs（注意使用 CommonJS 规范）
const Mock = require('mockjs')
const data = Mock.mock({
'list|5': [{
'id|+1': 1,
title: '@ctitle(5,15)',
subtitle: '@csentence(10,30)',
bg: '@image("375x200")'
}]
})
console.log(JSON.stringify(data, null, 2))
javascript
运行：node index.cjs
注意：如果项目使用 ES Module（package.json 中 type 为 module），需要使用 .cjs 后缀以 CommonJS 规范运行。
参考资源
- Mock.js 官方文档 - 语法规范和占位符
- Faker.js GitHub - API 最丰富
- Chance.js 官网 - 随机数据生成
↑