[技术分享]Mock.js 带参数请求
xperia发布于2 年前 • 808 次阅读
Mock.js的作用
mock.js的作用是生成随机数据，拦截 Ajax 请求，总的来说就是使用前端的方式来实现模拟后端的api获取的数据。
使用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mock使用</title>
<style>
</style>
</head>
<body>
<pre></pre>
<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
//定义数据
const list = Mock.mock({
"list|10-20":[
{
"id|+1":0,
"name|+1":["a","b","c"]
}
]
})
//定义mock的接口,请求方式,数据
Mock.mock("www.baidu.com","get",list);
//请求数据
$.ajax({
url: 'www.baidu.com',
type: "get",
success: function(data) {
$("pre").text(data);
},
error: function() {
console.log("error");
}
})
</script>
</body>
</html>
那么post的方式也是一样，不过post的方式一般都是需要带参数params，请转移Mock.js的api中的Mock.mock()，从中我们可以看到Mock.mock(url,type,function( options ) )中的function（options）函数，其中的options就是我们请求数据的信息，其中包括url，params，type。请看实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mock使用</title>
<style>
</style>
</head>
<body>
<h3></h3>
<p></p>
<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
//定义数据
const list = function (options){
$("h3").text("请求的参数（data）：" + JSON.stringify(options,null,3) );
return Mock.mock({
"list|10-20":[
{
"id|+1":0,
"name|+1":["a","b","c"]
}
]
})
}
//定义mock的接口,请求方式,数据
Mock.mock("www.baidu.com","post",list);
//请求数据
$.ajax({
url: 'www.baidu.com',
data:{
start:0,
end:10
},
type: "post",
success: function(data) {
$("p").text("数据：" + data);
},
error: function() {
console.log("error");
}
})
</script>
</body>
</html>
实例：带参数post请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mock使用</title>
<style>
</style>
</head>
<body>
<h3></h3>
<p></p>
<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
//定义数据
const list = function(options) {
$("h3").text("请求的参数（data）：" + JSON.stringify(options, null, 3));
const arr = options.body.split("&");
let params = Object();
arr.forEach(function(item, index) {
let arrItem = item.split("=");
params[arrItem[0]] = parseInt(arrItem[1]);
})
let list = Mock.mock({
"list|10-20": [{
"id|+1": 0,
"name|+1": ["a", "b", "c"]
}]
})
return list.list.slice(params.start,params.end);
}
//定义mock的接口,请求方式,数据
Mock.mock("www.baidu.com", "post", list);
//请求数据
$.ajax({
url: 'www.baidu.com',
data: {
start: 0,
end: 10
},
type: "post",
success: function(data) {
$("p").text("数据：" + data);
},
error: function() {
console.log("error");
}
})
</script>
</body>
</html>
实现增删数据
上面我们已经使用过带参数进行请求数据了，那么实现增删除数据该如何操作呢？ 增删除实现思路:
- 增删除的数据是规定的，所以在定义数据是写死的。
- 增删除数据是接受字段和标志，比如删除对应id的数据。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mock使用</title>
<style>
</style>
</head>
<body>
<h3>删除了id=2和id=3的2项</h3>
<pre></pre>
<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
//定义数据
const data = [{
name: "ll",
id: 0
}, {
name: "oo",
id: 1
}, {
name: "hh",
id: 2
}, {
name: "uu",
id: 3
}];
let list = function(options){
console.log(options);
let id = parseInt(options.body.split("=")[1]);//获取删除的id
for(let i=0 ; i<data.length ; i++){
if(data[i].id === id){
data.splice(i,1);
}
}
console.log(data);
return data;
}
//定义mock的接口,请求方式,数据
Mock.mock("/removeItem", "post", list);
//请求数据
$.ajax({
url: '/removeItem',
data: {
id: 2
},
type: "post",
success: function(data) {
$("pre").text("数据：" + data);
},
error: function() {
console.log("error");
}
})
//请求数据
$.ajax({
url: '/removeItem',
data: {
id: 3
},
type: "post",
success: function(data) {
$("pre").text("数据：" + data);
},
error: function() {
console.log("error");
}
})
</script>
</body>
</html>
