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 相关文章推荐
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 Javascript
详解JavaScript 高阶函数
Sep 14 Javascript
JavaScript实现网页动态生成表格
Nov 25 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统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
js验证账户名是否重复
2020/05/26 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python 正则式 概述及常用字符
2009/05/07 Python
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
Python Subprocess模块原理及实例
2019/08/26 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
python可视化text()函数使用详解
2020/02/11 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
2013届毕业生求职信范文
2013/11/20 职场文书
工业学校毕业生自荐书
2014/01/03 职场文书
置业顾问岗位职责
2014/03/02 职场文书
美容院经理岗位职责
2014/04/03 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers