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 中的replace方法说明
Apr 13 Javascript
javascript各种复制代码收集
Sep 20 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
详解JavaScript 的执行机制
Sep 18 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数组使用规则分析
2015/02/27 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
php实现的双色球算法示例
2017/06/20 PHP
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
简述JS控制台的使用
2018/07/15 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
python实现爬虫下载漫画示例
2014/02/16 Python
编写简单的Python程序来判断文本的语种
2015/04/07 Python
部署Python的框架下的web app的详细教程
2015/04/30 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
Django视图类型总结
2021/02/17 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
硕士研究生自我鉴定范文
2013/12/27 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
个人优缺点自我评价
2014/01/27 职场文书
挂科检讨书范文
2014/02/20 职场文书
大学生社团活动总结
2014/04/26 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android