版权声明：本文为博主原创文章，未经博主允许不得转载 https://blog.csdn.net/qq_39197547/article/details/82789252
mock的增删改查
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<h2>看你这波13装的，给你82分，多了怕你骄傲，剩下的给你来个666.</h2>
<div>
<button id="delet">删除</button><hr />
<ul id="deleteData"></ul>
<button id="add">增加</button><hr />
<ul id="addData"></ul>
<button id="change">修改</button><hr />
<ul id="changeData"></ul>
<button id="finds">查找</button>
<ul id="findsData"></ul>
</div>
</div>
</body>
<script src="Mock.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var arr=[
{name:'fei',age:20,id:1},
{name:'liang',age:30,id:2},
{name:'jun',age:40,id:3},
{name:'ming',age:50,id:4}
]
/*参数处理*/
function parseQueryStr(queryStr){
let queryData={};
console.log("queryStr==",queryStr)
let queryStrList = queryStr.split('&');//去除所有的&连接符
console.log(queryStrList);
for( let [index,queryStr] of queryStrList.entries() ){
let itemList = queryStr.split('=');
queryData[itemList[0]] = decodeURIComponent(itemList[1]);
}
return queryData
}
/*模拟删除数据的方式*/
Mock.mock('http://www.bai.com/delet','delete',function(options){
console.log(options.body.params)
const datas= parseQueryStr(options.body);
var id = datas.id;
var name=datas.name;
var index;
for(var i in arr){
if(arr[i].id==id || arr[i].name===name){//在数组arr里找到这个id
console.log(i)
index=i;
arr.splice(index,1)//把这个id对应的对象从数组里删除
}
}
const data= {
data:arr,
status:1,
message:"删除成功！"
}
return data;//返回这个数组,也就是返回处理后的假数据
})
/*模拟添加数据的方式*/
Mock.mock("http://www.bai.com/add",'post',function(options){
console.log(options.body)
const datas= parseQueryStr(options.body);
console.log(datas)
var id = datas.id;
var ishave=true;
for(var i in arr){
if(arr[i].id==id){//在数组arr里找到这个id
ishave=!ishave;
}
}
arr.push(datas);
data={
data:ishave?arr:null,
status:1,
message:ishave?"添加成功！":"数据已存在"
}
return data
})
/*模拟查找数据的方式*/
Mock.mock("http://www.bai.com/finds",'post',function(options){
console.log(options.body)
const datas= parseQueryStr(options.body);
console.log(datas)
var id = datas.id;
var item={};
for(var i in arr){
if(arr[i].id==id){//在数组arr里找到这个id
item=arr[i];
}
}
data={
data:item,
status:1,
message:"搜索成功！"
}
return data
})
/*模拟修改数据方式*/
Mock.mock("http://www.bai.com/change",'post',function(options){
console.log(options.body)
const datas= parseQueryStr(options.body);
console.log(datas)
var id = datas.id;
for(var i in arr){
if(arr[i].id==id){//在数组arr里找到这个id
arr[i]=datas;
}
}
data={
data:arr,
status:1,
message:"修改成功！"
}
return data
})
/*删除*/
$("#delet").on('click',function(){
$.ajax({
url:'http://www.bai.com/delet',
type:"DELETE",
data:{
id:1,//假设需要删除id=1的数据
name:'jun'
},
dataType:'json',
success:function(e){
var lilist = "";
if (e.status===1) {
alert(e.message)
e.data.map(item=>{
lilist+='<li id='+item.id+'><span>序号'+item.id+'</span> <span><span>姓名：'+item.name+'</span> <span>年龄：'+item.age+'</span></li>';
})
$("#deleteData").append(lilist)
}
console.log(e.data)
}
})
})
/*添加*/
$("#add").on('click',function(){
$.ajax({
url:'http://www.bai.com/add',
type:"POST",
data:{
id:parseInt(Math.random()*100),//假设需要删除id=1的数据
name:'张金宝',
age:33+parseInt(Math.random()*100)
},
dataType:'json',
success:function(e){
var lilist="";
if (e.status===1) {
alert(e.message)
e.data.map(item=>{
lilist+='<li id='+item.id+'><span>序号'+item.id+'</span> <span><span>姓名：'+item.name+'</span> <span>年龄：'+item.age+'</span></li>';
})
$("#addData").append(lilist)
}
console.log(e.data)
}
})
})
/*查询数据*/
$("#finds").on('click',function(){
$.ajax({
url:'http://www.bai.com/finds',
type:"POST",
data:{
id:1,//假设需要删除id=1的数据
},
dataType:'json',
success:function(e){
var lilist="";
if (e.status===1) {
alert(e.message)
var item =e.data;
lilist='<li id='+item.id+'><span>序号'+item.id+'</span> <span><span>姓名：'+item.name+'</span> <span>年龄：'+item.age+'</span></li>';
$("#findsData").append(lilist)
}
console.log(e.data)
}
})
})
/*修改数据*/
$("#change").on('click',function(){
$.ajax({
url:'http://www.bai.com/change',
type:"POST",
data:{
name:'张金宝',
age:33+parseInt(Math.random()*10),
id:1,//假设需要删除id=1的数据
},
dataType:'json',
success:function(e){
var lilist="";
if (e.status===1) {
alert(e.message)
e.data.map(item=>{
lilist+='<li id='+item.id+'><span>序号'+item.id+'</span> <span><span>姓名：'+item.name+'</span> <span>年龄：'+item.age+'</span></li>';
})
$("#changeData").append(lilist)
}
console.log(e.data)
}
})
})
</script>
</html>效果图如下：
