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 formpanel加载数据的方式
Nov 09 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
vue结合element-ui使用示例
Jan 24 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
node.js的http.createServer过程深入解析
Jun 06 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
element-ui点击查看大图的方法示例
Dec 14 Javascript
vue自定义右键菜单之全局实现
Apr 09 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
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
JS实现星星海特效
2019/12/24 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
vue实现放大镜效果
2020/09/17 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
跟老齐学Python之Import 模块
2014/10/13 Python
python检测是文件还是目录的方法
2015/07/03 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
浅谈Python中的私有变量
2018/02/28 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
简单了解Python生成器是什么
2019/07/02 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
大学四年的个人自我评价
2014/01/14 职场文书
社区食品安全实施方案
2014/03/28 职场文书
二年级学生评语大全
2014/04/23 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
介绍长城的导游词
2015/01/30 职场文书
辩论赛新闻稿
2015/07/17 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL