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实现,于是就有了下面的代码: ...
随机推荐
- ajax上传图片 jquery插件 jquery.form.js 的方法 ajaxSubmit; AjaxForm与AjaxSubmit的差异
先引入脚本 这里最好是把jquery的脚本升级到1.7 <script src="js/jquery-1.7.js" type="text/javascript& ...
- git - 搭建git仓库
1. 更新git版本: http://codelife.me/blog/2013/06/25/upgrade-git-on-centos-6-4/ 2. 建立git仓库: git init --bar ...
- poj 1742 Coins
// v给出N种硬币和个数,问可以取到1->M中的多少个值.// 背包 完全背包 或多 重背包(二进制优化)都可以做// #include <iostream> #include & ...
- 【Servlet】doGet()与doPost()的区别
doGet与doPost的区别 .Servlet接口只定义了一个服务方法--service .当发出客户端请求时,调用service方法并传递一个请求和响应对象 .使用时经常在doPost()中调用d ...
- table中嵌套table，如何用jquery来控制奇偶行颜色
总是要趁着自己还有记忆的时候,把该记录下来的都记录下来,着实是不敢恭维自己的记性. 相信很多时候,我们前端人员,经常会用到table里面的某个td中还嵌套着table,而这个时候还总要去弄奇偶行的颜色 ...
- java中的getClass()函数
Java反射学习 所谓反射,可以理解为在运行时期获取对象类型信息的操作.传统的编程方法要求程序员在编译阶段决定使用的类型,但是在反射的帮助下,编程人员可以动态获取这些信息,从而编写更加具有可移植性的代 ...
- golang学习遭遇错误原因分析续
7. error: reference to field ‘Printf’ in object which has no fields or methods f.Printf("%v&quo ...
- hive 传递变量的两种方式
在使用hive开发数据分析代码时,经常会遇到需要改变运行参数的情况,比如select语句中对日期字段值的设定,可能不同时间想要看不同日期的数据,这就需要能动态改变日期的值.如果开发量较大.参数多的话, ...
- mybatis系列-10-一对一查询
10.1 需求 查询订单信息,关联查询创建订单的用户信息 10.2 resultType 10.2.1 sql语句 确定查询的主表:订单表 确定查询的关联表:用户表 关联查询 ...
- JAVA中的异常（异常处理流程、异常处理的缺陷）
异常处理流程 1)首先由try{...}catch(Exception e){ System.out.println(e); e.printStackTrace(); }finally{...}结构 ...