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);
- })
来源: http://www.bubuko.com/infodetail-2554103.html