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 相关文章推荐
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
js给table赋值的实例代码
Oct 13 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 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
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
Python算术运算符实例详解
2017/05/31 Python
python实现输入数字的连续加减方法
2018/06/22 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
北体毕业生求职信
2014/02/28 职场文书
班主任新年寄语
2014/04/04 职场文书
电子商务专业自荐信
2014/06/02 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
HttpClient实现文件上传功能
2022/08/14 Java/Android