Mock.js 生成模拟数据完整示例
本文介绍如何使用 Mock.js 库在前端生成模拟数据。通过引入 Mock.js 脚本,利用 Mock.mock 方法定义数据结构与规则,如自增 ID、随机范围数值、姓名及地址等。提供可直接运行的 HTML 代码示例,帮助开发者快速掌握前端接口数据模拟技巧。
Mock.js 模拟数据生成示例
本文详细介绍如何利用 Mock.js 库实现前端模拟数据的生成,并提供具体代码示例供参考。
Mock.js 的使用方式非常直观。以下展示了基础用法,更详细的文档请参阅官方说明。将下方代码保存为本地 HTML 文件并双击打开,即可直接生成模拟数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MockJS-demo</title>
<script type="text/javascript" src="http://mockjs.com/bower_components/mockjs/dist/mock.js"></script>
</head>
<body>
<script>
var Random = Mock.Random;
var data = Mock.mock({
'list|4': [{
'id|+1': 1,
'number|1-10': 7,
// 英文姓名
'name' :'@name',
// 颜色
'color': '@color',
// 英文标题
'title': '@title',
// 链接
'url': '@url("http")',
// 邮箱
'email': '@email',
// 图片
'image': Random.image('200x200', '#50B347', '#FFF', 'Mock.js'),
// 时间
'date': '@date("yyyy-MM-dd HH:mm:ss")',
'date2': '@dateTime',
// 汉字
'ctitle': '@ctitle(8)',
// 汉字姓名
'canme': '@cname()',
// 地址
'cadd': '@province' + '@city' + '@county',
// 手机号
'phone': /^1[385][1-9]\d{8}/
}]
});
console.log(JSON.stringify(data, null, 4))
</script>
</body>
</html>
建议使用在线 HTML/CSS/JavaScript 代码运行工具(如 http://tools.jb51.net/code/HtmlJsRun)对上方代码进行测试,运行后可获得如下结果。

如需进一步了解 JavaScript 相关知识,可参考本站相关专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。
希望上述关于 JavaScript 程序设计的说明能为您提供帮助。
为什么叫JavaScript:语言命名由来及与Java的历史渊源
2026-11-05 11:37:48
JS获取当前时间年月日时分秒并格式化为YYYY-MM-DD HH:mm:ss
2026-11-04 21:25:21
不同语言间JS与Java/Python加密结果不一致怎么办
2026-11-04 18:27:23
Mock.js 拦截 Axios 和 Fetch 请求的原理与配置方法
2026-11-04 08:13:59
JS怎么获取当前日期并格式化为YYYY-MM-DD
2026-11-03 18:47:03
