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 相关文章推荐
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 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
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
Laravel框架表单验证详解
2014/09/04 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
JavaScript打字小游戏代码
2011/12/26 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Python项目跨域问题解决方案
2020/06/22 Python
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
活动邀请函范文
2014/01/19 职场文书
物流专员岗位职责
2014/02/17 职场文书
超市中秋节促销方案
2014/03/21 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
协议书格式
2014/04/23 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
小学教育见习报告
2014/10/31 职场文书
市场部岗位职责
2015/02/12 职场文书
党小组考察意见
2015/06/02 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript