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 字符串转换成数字的三种方法
Mar 23 Javascript
关于JS管理作用域的问题
Apr 10 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 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静态类
2006/11/25 PHP
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
php4与php5的区别小结(配置异同)
2011/12/20 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
jQuery DOM操作小结与实例
2010/01/07 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
python设置检查点简单实现代码
2014/07/01 Python
简析Python的闭包和装饰器
2016/02/26 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
对python中的argv和argc使用详解
2018/12/15 Python
python提取log文件内容并画出图表
2019/07/08 Python
Python 控制终端输出文字的实例
2019/07/12 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
经典导游欢迎词大全
2014/01/16 职场文书
社区七一党员活动方案
2014/01/25 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
优秀党员先进材料
2014/12/18 职场文书
详解Redis瘦身指南
2021/05/26 Redis
使用python绘制分组对比柱状图
2022/04/21 Python