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开发包大全整理
Dec 22 Javascript
枚举JavaScript对象的函数
Dec 22 Javascript
JavaScript Archive Network 集合
May 12 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
微信小程序上传图片实例
May 28 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 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和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
基于jquery的loading效果实现代码
2010/11/05 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
python数字图像处理之高级形态学处理
2018/04/27 Python
python开启debug模式的方法
2019/06/27 Python
python增加图像对比度的方法
2019/07/12 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
上班玩手机检讨书
2014/02/17 职场文书
产品发布会策划方案
2014/05/12 职场文书
拉拉队口号
2014/06/16 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
个人业务学习心得体会
2016/01/25 职场文书
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫