mock是干什么的?
mock.js官网上介绍的是 生成随机数据,拦截Ajax请求。简单说 mock就是一个模拟数据生成器,旨在帮助前端独立于后端进行开发,帮助编写单元测试
mock功能
1.模拟ajax请求,生成请求数据
2.根据数据模板生成模板数据
3.加快前端开发速度
在开发过程中,进度比较赶的情况下,前端人员当页面写完时,后台的接口还没写完,等要交付的时候后端才把接口给你,这个时候就很尴尬。这个时候Mock就可以很好的解决这个问题。
mock安装地址
https://github.com/nuysoft/Mock/wiki/Getting-Started
如何使用
页面中先引用
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
配合Ajax使用
<div id='mockjs'></div>
<script type="text/javascript">
//调用mock方法模拟数据
Mock.mock(
'http://mockjs', {
"userName" : '@name', //模拟名称
"age|1-100":100, //模拟年龄(1-100)
"color" : "@color", //模拟色值
"date" : "@date('yyyy-MM-dd')", //模拟时间
"url" : "@url()", //模拟url
"content" : "@cparagraph()" //模拟文本
}
);
//ajax请求
$("#mockjs").click(function(){
$.ajax({
url : "http://mockjs", //请求的url地址
dataType : "json", //返回格式为json
async : true, //请求是否异步,默认为异步
data : {}, //参数值
type : "GET", //请求方式
beforeSend : function() {
//请求前的处理
},
success: function(req) {
//请求成功时处理
console.log(req);
},
complete: function() {
//请求完成的处理
},
error: function() {
//请求出错处理
}
});
});
</script>
案例:
<script>
var scroller = new BScroll('#scroll-warp',{});
var Random=Mock.Random;
var data = Mock.mock(
{"data|10-20":[{
"name":"@cname",
"img":Random.image('100x100','#999'),
"price" :'@float(100,200,1,1)',
"price1" :'@float(10,100,1,1)',
"text":Random.cparagraph( 60, 100 )
}]
})
console.log(data);
//此部分可简写
function getDomFunc(imgs,name,price,price1,text) {
var img=document.createElement("img");
img.src=imgs;
var li=document.createElement("li");
li.className="content";
var div=document.createElement("div");
div.className='content-l';
var span=document.createElement("span");
span.className='contentl-tab';
span.innerText=text;
var span1=document.createElement("span");
span1.className='contentl-b';
span1.innerText=price;
var span2=document.createElement("span");
span2.className='contentl-rb';
span2.innerText=price1;
var span3=document.createElement("span");
span3.className='contentl-br';
span3.innerText='购买';
var span4=document.createElement("span");
span4.className='contentl-tb';
span4.innerText=name;
li.appendChild(img);
li.appendChild(div);
div.appendChild(span);
div.appendChild(span1);
div.appendChild(span2);
div.appendChild(span3);
div.appendChild(span4);
return li;
}
for(var i=0;i<data.data.length;i++){
var $ul=document.getElementById("div");
$ul.appendChild( getDomFunc(data.data[i].img,data.data[i].name,data.data[i].price,data.data[i].price1,data.data[i].text));
}
</script>