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操作cookie的函数代码
Oct 03 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
js实现石头剪刀布游戏
Oct 11 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中Date()时间日期函数的使用方法小结
2011/04/20 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
php之curl设置超时实例
2014/11/03 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
jQuery事件详解
2017/02/23 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
跟老齐学Python之dict()的操作方法
2014/09/24 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
设置器与访问器的定义以及各自特点
2016/01/08 面试题
大学应届生的自我评价
2014/03/06 职场文书
请假条范文大全
2014/04/10 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
Python制作动态字符画的源码
2021/08/04 Python
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫
我去timi了,一起去timi是什么意思?
2022/04/13 杂记
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python