编程 Javascript

mock.js实现模拟生成假数据功能示例

Posted in Javascript onJanuary 15, 2019

本文实例讲述了mock.js实现模拟生成假数据功能。分享给大家供大家参考，具体如下：

mock使用方法很简单, 下面是简单的用法, 详细的用法可以看官方文档, 写的很清楚, 下面的代码直接拷贝到本地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.3water.com/code/HtmlJsRun测试运行上述代码，可得如下运行结果：

mock.js实现模拟生成假数据功能示例

更多关于JavaScript相关内容还可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

mock.js实现模拟生成假数据功能示例

- Author -

唐宋元明清.

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

ie支持function.bind()方法实现代码

Dec 27 Javascript

jQuery/CSS3图片特效插件整理推荐

Dec 07 Javascript

js使用心得分享

Jan 13 Javascript

JavaScript判断是否为数组的3种方法及效率比较

Apr 01 Javascript

JavaScript获取表格（table）当前行的值、删除行、增加行

Jul 03 Javascript

javascript中SetInterval与setTimeout的定时器用法

Aug 24 Javascript

实用jquery操作表单元素的简单代码

Jul 04 Javascript

基于JavaScript实现前端文件的断点续传

Oct 17 Javascript

JavaScript动态检验密码强度的实现方法

Nov 09 Javascript

JavaScript中return用法示例

Nov 29 Javascript

vue 使用鼠标滚动加载数据的例子

Oct 31 Javascript

详解webpack引入第三方库的方式以及注意事项

Jan 15 #Javascript

JS高阶函数原理与用法实例分析

Jan 15 #Javascript

JS立即执行函数功能与用法分析

Jan 15 #Javascript

vue-cli 目录结构详细讲解总结

Jan 15 #Javascript

webpack file-loader和url-loader的区别

Jan 15 #Javascript

jQuery+vue.js实现的多选下拉列表功能示例

Jan 15 #jQuery

Element输入框带历史查询记录的实现示例

Jan 15 #Javascript