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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
redux.js详解及基本使用
May 24 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
Javascript实现打鼓效果
Jan 29 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递归返回值时出现的问题解决办法
2013/02/19 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
Python找出最小的K个数实例代码
2018/01/04 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
网站开发实习生的自我评价
2013/12/11 职场文书
办公室文员工作职责
2014/01/31 职场文书
写自荐信的注意事项
2014/03/09 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
2015年检验科工作总结
2015/04/27 职场文书
2015年加油站工作总结
2015/05/13 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js