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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 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 文件上传代码(限制jpg文件)
2010/01/05 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
Python pass 语句使用示例
2014/03/11 Python
介绍Python中内置的itertools模块
2015/04/29 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
python制作填词游戏步骤详解
2019/05/05 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
台湾旅游网站:灿星旅游
2018/10/11 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
《陈毅探母》教学反思
2014/05/01 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
项目投资合作意向书
2014/07/29 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
先进个人申报材料
2014/12/30 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技