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实现,于是就有了下面的代码: ...
随机推荐
- Web Api 如何做上传文件的单元测试
代码如下: //--------上传------------ HttpClient client = new HttpClient(); #region MultipartFormDataConten ...
- 任E行M1端口比特率特征码
分辨率:800x480gps端口:com1比特率:4800设备特征码:01D1D008内存:128M
- LeetCode Letter Combinations of a Phone Number 电话号码组合
题意:给一个电话号码,要求返回所有在手机上按键的组合,组合必须由键盘上号码的下方的字母组成. 思路:尼玛,一直RE,题意都不说0和1怎么办.DP解决. class Solution { public: ...
- Mysql,SqlServer,Oracle主键自动增长的设置
1.把主键定义为自动增长标识符类型 MySql 在mysql中,如果把表的主键设为auto_increment类型,数据库就会自动为主键赋值.例如: )); insert into customers ...
- 用defy来潜水最终还是挂了........
defy526是6级,,不过好像这次我用来潜过去不足2米还是挂掉了... 国际通用的防水级别认证体系: IPX-0 没有防水保护 IPX-1 设备在正常操作状态下,可以提供相当于3-5毫米/分钟降雨的 ...
- 总结mysql服务器查询慢原因与解决方法
本文针对MySQL数据库服务器查询逐渐变慢的问题, 进行分析,并提出相应的解决办法,具体的分析解决办法如下: 会经常发现开发人员查一下没用索引的语句或者没有limit n的语句,这些没语句会对数据库造 ...
- hihocoder 1233 Boxes
题意:类汉诺塔的一个东西……移动规则与汉诺塔一样,但初始状态为题目中给出的每根棍上一个盘子,目标状态为盘子在棍上按大小顺序排列,盘子只能在相邻的棍儿上移动. 解法:广搜并打表记录从目标状态到所有可能的 ...
- HDU 5881 Tea
Tea Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- hdu 2457(ac自动机+dp)
题意:容易理解... 分析:这是一道比较简单的ac自动机+dp的题了,直接上代码. 代码实现: #include<stdio.h> #include<string.h> #in ...
- hdu 3341(ac自动机+状态压缩)
题意:容易理解... 思路:首先一开始容易想到要用到dp,开设一个dp[41][41][41][41][501]的数组来解决,但是明显内存已经超出范围了,于是就想如何减少内存呢?只要知道A.T.C.G ...