mockjs学习

Posted 飘然离去

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了mockjs学习相关的知识,希望对你有一定的参考价值。

mockjs简单学习与应用,可以满足工作所需就行。
******************************************************************************
1.获取list.
// 前端请求
$.ajax({
url: ‘http://www.aa.bb.com/test/aaa‘,
type:"get"
})
----------------------------
// mock处理
// 如果返回是对象
let json = {
name:"yansir",
"age":18
}
Mock.mock("http://www.aa.bb.com/test/aaa", json)
// 如果返回是字符串
let ss = "yansir";
Mock.mock("http://www.aa.bb.com/test/aaa", function(options){return ss;})
//ps:这里的options是你传入的参数,你也可以在请求的时候不穿。
******************************************************************************
2.插入操作 不要想歪了哈
// 因为正常的插入成功,后台只会给一个200或者success告诉成功,但是我们前台想要知道的话,是不是可以通过控制台打印呢
// 前端请求
$.ajax({
url: ‘http://www.aa.bb.com/test/bbb‘,
type:"post",
data:{
name:"yansir",
age:1231
},
dataType: ‘json‘
})
----------------------------
// mock处理
let template = [
{name:"xiaoli",id:"121",age:18}
]
Mock.mock("http://www.aa.bb.com/test/aaa", ‘post‘,function(options){
console.log("http://www.aa.bb.com/test/aaa","post","原来数据",template);
options.id = Math.random()*300
// 深拷贝一下
let tem = JSON.parse(JSON.stringify(template));
tem.push(options);
console.log("http://www.aa.bb.com/test/aaa","post","新的数据",tem);
})
******************************************************************************
3.删除操作
// 前端请求
$.ajax({
url: ‘http://www.aa.bb.com/test/ccc/121‘,
type:"delete",
data:{
name:"yansir",
age:1231
},
dataType: ‘json‘
})
----------------------------
// mock处理
let template = [
{name:"xiaoli",id:"121",age:18},
{name:"zhangsan",id:"122",age:19},
{name:"lisi",id:"123",age:20},
]
Mock.mock("http://www.aa.bb.com/ccc/", ‘delete‘,function(options){
console.log("http://www.aa.bb.com/test/aaa","post","原来数据",template);
// 深拷贝一下
let tem = JSON.parse(JSON.stringify(template));
let ids = options.body.data.ids;
ids.forEach((item,index)=>{
tem.splice(index,1)
})
console.log("http://www.aa.bb.com/test/aaa","post","新的数据",tem);
})

 

 

 











































































以上是关于mockjs学习的主要内容,如果未能解决你的问题,请参考以下文章

进行独立于后台后端的前端开发——学习Mockjs

mockjs学习总结(方便前端模拟数据,加快开发效率)

Vue开发实例(13)之axios和mockjs的安装与使用

Vue开发实例(13)之axios和mockjs的安装与使用

mockjs 的使用步骤

mockjs的增删改查(vue)