mockjs学习总结（方便前端模拟数据，加快开发效率）
基本介绍：
<script>
//模拟自定义对象
var data = Mock.mock({
"list|2-3":23,
"name|1":"@name",
"age|1-88":100
})
console.info(JSON.stringify(data,null,4))
//模拟ajax请求
var data1 = Mock.mock("http://rich.cn",{
"name":"@name",
"isTrue|1":true,
"color":"@color"
})
$.ajax({
url:'http://rich.cn',
success:function(e){
console.info(e)
}
})
console.info(JSON.stringify(data1,null,4))
</script>
数据占位符定义（DPD）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/mockjs/dist/mock.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
</head>
<body>
<script>
//值为string时
var data1 = Mock.mock({
"name1|2-3":"nihao",//重复生成nihao，重复次数大于等于2，小于等于3
"name2|3":"*",//重复生成*，重复次数等于3
})
console.info("string",JSON.stringify(data1,null,4))
//值为boolean时
var data2 = Mock.mock({
'name3|1':true, //"1"为数字，没有意义，必须存在，随机显示true或false
'name4|1-9':true//出现true的概率为1/（1+9），false的概率为9/（1+9）
})
console.info("boolean",JSON.stringify(data2,null,4))
//值为number时
var data3 = Mock.mock({
'name5|+1':2,//不会自动加1？？显示2，
'name6|12':3,//显示规则所显示的数字
'name7|1-100':3,//随机生成一个大于等于1小于等于100的数字，3为确定类型，大小随意
'name8|1-100.2-3':2,//随机生成一个大于1小于等于100的数字，小数点保留2位或3位。2为确定类型，大小随意
'name9|123.2':2//生成一个123，小数点后保留两位的数字
})
console.info("number",JSON.stringify(data3,null,4))
//值为array时
var data4 = Mock.mock({
'name10|1':[1,2,3],//随机生成数组中的每一项
'name11|3':[5,6,7],//重复数组内的元素3次输出
'name12|1-3':[12,13,15,16],//重复数组内的元素1-3次输出
'name13|2-3':[
{
'name4|1-9':true,
'name7|1-100':3,
'name9|123.2':2,
},{
"name1|2-3":"nihao",
"name2|3":"*",
},{
"name1|2-3":"nihao",
"name2|3":"*",
},{
'name5|+1':2,
'name6|12':3,
'name7|1-100':3,
}
]
})
console.info("array",JSON.stringify(data4,null,4))
//当属性名是object时
var data5 = Mock.mock({
'name14|1':{
id:"23",
class:"衬衫",
price:"1234"
},
'name15|2-3':{
id:"34",
class:"袜子",
price:"156",
size:"xxl"
}
})
console.info("object",JSON.stringify(data5,null,4))
//当属性值是function时
var data6 = Mock.mock({
'fun':function(){
console.info("123")
}
})
console.info("function",JSON.stringify(data6,null,4))
//当属性值为RegExp时
var data7 = Mock.mock({
'regexp1':/[a-z][A-Z]/,
'regexp2':/\d{2,8}/,
'regexp3':/\w[0-9]/
})//生成自定义字符串
console.info("RegExp",JSON.stringify(data7,null,4)) //模拟ajax数据
//模板：Mock.mock( rurl?, rtype?, template|function(options) )
var data8 = Mock.mock("http://rich.cn","get",{
"name":"@name",
"isTrue|1":true,
"color":"@color"
})
$.ajax({
url:'http://rich.cn',
method:"get",
success:function(e){
console.info(e)
}
}) //占位符地定义格式
//属性名:占位符
var data9 = Mock.mock({
first:'@FIRST',
email:'@email',
sent:'@sentence',
color:'@color',
name:"@name"
})
console.info(JSON.stringify(data9,null,4)) </script>
</body>
</html>
mockjs学习总结（方便前端模拟数据，加快开发效率）的更多相关文章
- Mock.js 与 fiddler 前端模拟数据与拦截请求
最近 工作需要 接触了Mock.js. Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试.提供了以下模拟功能: 根据数据模板生成模拟数据 模拟 Ajax ...
- 前端模拟数据接口json-server
今天要找帮前端找一个可以实现数据接口模拟的工具.首先看到的mock.js这个.但是这个需要在页面里插入Mock.js我是要给小程序使用,所以不能这么插入.然后又找到了json-server这个Node ...
- Json-Server模拟数据接口开发
前端开发过程中调用后台接口是常事,在前后台定义好接口规范和参数后,后台接口的进度有时会成为我们的掣肘,这里推荐使用一款简单的小工具json-server,小而轻便. 确保本地已有node环境. 一:安 ...
- 应用express mockjs模拟前端json数据接口
一.首先需要在项目安装express 1.cnpm install express --save-dev 2.cnpm install mockjs --save-dev 二.在项目根目录下新建pr ...
- Mockjs，模拟数据生成器
(推荐使用)Mock.js是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试. 提供了以下模拟功能: 1. 根据数据模板生成模拟数据. 2. 模拟Ajax请求,生成并返回模拟 ...
- vue+mockjs 模拟数据，实现前后端分离开发
在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...
- 让前端独立于后端进行开发，模拟数据生成器Mock.js
让前端独立于后端进行开发,模拟数据生成器Mock.jsMock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试. Home · nuysoft/Mock Wiki ...
- 如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
- 在java中调用mockjs生成模拟数据
一.手写版 在前端有个模拟数据的神器 Mock.js 能生成随机数据,拦截 Ajax 请求,然后我觉得他的这个生成随机数据不错.然后我就到度娘一顿操作,没找到类似的java实现,于是就有了下面的代码: ...
随机推荐
- Java 7 语法新特性
一.二进制数字表达方式 原本整数(以60为例)能够用十进制(60).八进制(074).十六进制(0x3c)表示,唯独不能用二进制表示(111100),Java 7 弥补了这点. public clas ...
- 当前，思路+进展+idea+下一步要做的工作
1.在phy+版本中,downweighting操作后,是如何计算相关系数的. 2.这里的算法的自适应,体现在哪里?3.在引入PCA之后,这里有一个维度的选择的过程,这个标准是如何定义的? 4.在NP ...
- java常量池
Java的堆是一个运行时数据区,类的(对象从中分配空间.这些对象通过new.newarray. anewarray和multianewarray等指令建立,它们不需要程序代码来显式的释放.堆是由垃圾回 ...
- 【转】话说我打算一天学完object c语法，系列1--------来自书Objective-c程序设计
原文网址:http://blog.csdn.net/zengraoli/article/details/8993466 类型: NSString NSInteger NSLong控制台输出 NSObj ...
- iOS - NSLog、UncaughtException日志保存到文件
转:http://blog.csdn.net/marujunyy/article/details/12005767 对于真机,日志没法保存,不好分析问题.所以有必要将日志保存到应用的Docunment ...
- MySQL row模式binlog复制原理
http://www.360doc.com/content/14/1107/14/12904276_423333021.shtml
- Jedis的Sharded源代码分析
概述 Jedis是Redis官方推荐的Java客户端,更多Redis的客户端可以参考Redis官网客户端列表.当业务的数据量非常庞大时,需要考虑将数据存储到多个缓存节点上,如何定位数据应该存储的节点, ...
- Metaspace 之一--java8 去掉 perm 用 Metaspace 来替代
正如大家所知,JDK 8 Early Access版已经提供下载.这使开发者可以体验Java8的新特性.其中之一,是Oracle从JDK7发布以来就一直宣称的要完全移除永久代空间.例如,字符串内部池, ...
- PHP $_SERVER的详细参数及说明
$_SERVER['PHP_SELF']#当前正在执行脚本的文件名,与documentroot相关. $_SERVER['argv']#传递给该脚本的参数. $_SERVER['argc']#包含传递 ...
- C# 中如何判断某个字符串是否为空的方法 分享了三个方法来判断字
1. 三种常用的字符串判空串方法:Length法:bool isEmpty = (str.Length == 0);Empty法:bool isEmpty = (str == String.Empty ...