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 jq 弹出层实例
Aug 25 Javascript
js 走马灯简单实例
Nov 21 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
VUE长按事件需求详解
Oct 18 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 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
日本十大惊悚动漫
2020/03/04 日漫
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
Vue性能优化的方法
2020/07/30 Javascript
python中requests库session对象的妙用详解
2017/10/30 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
python+django+rest框架配置创建方法
2019/08/31 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
web页面录屏实现
2019/02/12 HTML / CSS
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
简短的公司员工自我评价分享
2013/11/13 职场文书
质量管理标语
2014/06/12 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
《鲸》教学反思
2016/02/23 职场文书
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python