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 相关文章推荐
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
详解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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
php删除指定目录的方法
2015/04/03 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
php中的异常和错误浅析
2017/05/03 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
js实现验证码功能
2020/07/24 Javascript
python实现树形打印目录结构
2018/03/29 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
基于Pytorch SSD模型分析
2020/02/18 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
信息管理员岗位职责
2013/12/01 职场文书
初中数学教学反思
2014/01/16 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
大学生评语大全
2014/04/18 职场文书
幼儿评语大全
2014/04/30 职场文书
治超工作实施方案
2014/05/04 职场文书
道歉情书大全
2015/05/12 职场文书
健康证明
2015/06/19 职场文书
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS