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程序设计有所帮助。

Javascript 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 Javascript
关于JS中的作用域中的问题思考分享
Apr 06 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
You might like
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
webpack4简单入门实例
2018/09/06 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
关于python字符串方法分类详解
2019/08/20 Python
Python列表元素常见操作简单示例
2019/10/25 Python
通过自学python能找到工作吗
2020/06/21 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
Python实现微信表情包炸群功能
2021/01/28 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
创业计划书的主要内容有哪些
2014/01/29 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
创业计划书之校园超市
2019/09/12 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript