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实现,于是就有了下面的代码: ...
随机推荐
- fzu 1675 The Seventy-seven Problem
给你长度为 10^5~10^6长度,由数字组成的串 其中有4位不见了 补全该串 使得在该串能整除 77的同时 尽可能大// 先计算出每个 n*10^m 模 77 的循环节 n=0,1,2..,9// ...
- 【JS】js获得下拉列表选中项的值和id
function tijiao(){ var elem = document.getElementById("dish_sort"); var index=elem.selecte ...
- RTMP协议详解(转)
转自<RTMP协议详解(一) (二) (三) > Real Time Messaging Protocol(实时消息传送协议协议)是Adobe Systems公司为Flash播放器和服务器 ...
- function 中定义函数的默认返回值，
result有默认值的int类型的为0,string类型的为‘’,tobject类型的为nil等等
- Delphi Waring 的信息
Display PreferencesWarning messages (Delphi)Go Up to Delphi Compiler Directives (List) Index TypeSwi ...
- hdu 3341(ac自动机+状态压缩)
题意:容易理解... 思路:首先一开始容易想到要用到dp,开设一个dp[41][41][41][41][501]的数组来解决,但是明显内存已经超出范围了,于是就想如何减少内存呢?只要知道A.T.C.G ...
- A Spy in the Metro
题意: n个车站,已知到达相邻车站的时间,有m1辆车从1站出发已知发车时间,有m2辆车从n站出发已知发车时间,求从1到达n所需等车的总时间最小. 分析: 有三种情况,在原地等,乘左到右的车,乘右到左的 ...
- opencv人脸检测分类器训练小结
这两天在初学目标检测的算法及步骤,其中人脸检测作为最经典的算法,于是进行了重点研究.该算法最重要的是建立人脸检测分类器,因此我用了一天的时间来学习分类器的训练.这方面的资料很多,但是能按照一个资料运行 ...
- 【原】Storm分布式RPC
5. Storm高级篇 序列化 分布式RPC High level overview LinearDRPCTopologyBuilder Local mode DRPC Remote mode DRP ...
- LeetCode题解——Longest Common Prefix
题目: 给定一系列的字符串,找出这些字符串的最长公共前缀. 解法: 暴力法,依次比较每个字符串的每个字符,碰到第一个不同的就返回之前找到的前缀. 代码: class Solution { public ...