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 HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
Javascript 数组排序详解
Oct 22 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
微信小程序自定义组件
Aug 16 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
原生JavaScript实现留言板
Jan 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的计数器程序
2006/10/09 PHP
php基础学习之变量的使用
2011/06/09 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
用jquery存取照片的具体实现方法
2013/06/30 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
JS实现判断有效的数独算法示例
2019/02/25 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
Python定时执行之Timer用法示例
2015/05/27 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
python中bytes和str类型的区别
2019/10/21 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
PHP笔试题
2012/02/22 面试题
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
应届生的求职推荐信范文
2013/11/30 职场文书
客服工作职责
2013/12/11 职场文书
老公给老婆的保证书
2014/04/28 职场文书
民主生活会意见
2015/06/05 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA