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学习的更多相关文章

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

      基本介绍: 在我们前端开发中经常遇到这样的事情,接口没有写好,只能写静态页面,如何才能用很简单的方法模拟后端数据呢?mockjs就干了这件事,而且干的还挺好. 下面是我作为初学者的一些总结经验,期 ...

  2. 学习 | mockjs入门

    最近工作有用到mockjs模拟数据,实现前后端分离,今天系统的把mockjs的API都过了一遍,算是入门吧. 什么是mockjs mockjs就是一个模拟数据,生成随机数据,拦截ajax请求. 为什么 ...

  3. dva + antd + mockjs 实现基础用户管理

    1.安装dva-cli npm install dva-cli -g 2.创建应用 dva new dvadashboard   [dvadashboard为项目名]       3.安装mockjs ...

  4. Vue学习小结(一)安装依赖与数据来源

    不多说啥了,生活中都是各种阵痛与惊喜.最近在学习vue框架,刚写完一个小型的后台管理系统(https://github.com/michaelzhengzm/info-manager-systerm_ ...

  5. 我的web前端整理和学习

    知识点收藏:(边看.边记录.边写) 开直播学习:虎牙 待办事理>> 练习自我表达(把文章做成视频).技术学习总结(博客与公众号).跳出舒适圈. 前端知识体系:https://www.cnb ...

  6. 正确开启Mockjs的三种姿势:入门参考(一)

    一.文章初衷 阅读本文章需要注意以下几点: 文章不主要介绍Mockjs的使用语法 文章暂不涉及Mockjs的第三方封装框架 文章会结合以往做过上线项目的方式总结 想主要介绍如何使用Mockjs,是因为 ...

  7. 前端虚拟接口mockjs的使用

    最近在学习VueJS,也进一步学习了ES6,看了一遍之后,难免手痒,所以想仿写点什么,但是数据是个问题,你总不能写个分页,写个轮播吧,但是在公司做自己的东西找后台要接口也不那么像回事,怎么办呢? 无意 ...

  8. mockJs语法糖用例

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. 用vue2.0+vuex+vue-router+element-ui+mockjs实现后台管理系统的实践探索

    A magical vue element touzi admin. 效果演示地址 更多demo展示 分支说明 master分支:前后端统一开发的版本:可以用于学习nodejs+mongodb+exp ...

随机推荐

  1. CentOS 7.6 安装Oracle 12c

    下载地址: http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html https://www ...

  2. windows7,python3使用time.strftime()函数报ValueError: embedded null byte

    windows7环境下,执行代码报ValueError: embedded null byte时,在原代码前面加一行代码:locale.setlocale(locale.LC_ALL,'en')即可解 ...

  3. vue-property-decorator 提供 OO 的风格 Vue Component 方便类型声明

    @Prop  父子组件之间传值 Install: npm install --save vue-property-decorator Child: <template> <div&g ...

  4. Jedis 连接池实例

    package com.java56.redis; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; im ...

  5. SpringBoot2.0整合mybatis、shiro、redis实现基于数据库权限管理系统

    转自https://blog.csdn.net/poorcoder_/article/details/71374002 本文主要介绍使用SpringBoot与shiro实现基于数据库的细粒度动态权限管 ...

  6. bounds的应用

    frame是参考父view的坐标系来设置自己左上角的位置.设置bounds可以修改自己坐标系的原点位置,进而影响到其“子view”的显示位置.   向上滚动scrollview,我们就不断增加scro ...

  7. jenkins和svn搭建自动代码构建发布

    jenkins安装和配置 .安装jenkins .yum install java wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins. ...

  8. python基础之 面向对象之反射

    1.isinstance和issubclass issubclass(Son,Foo) 判断雷与类之间的是否有继承关系,接受两个参数,一个是疑似子类,一个是疑似父类,判断Son是否是Foo的子类 ob ...

  9. 1: unit test

    1: se01  进入到TR包里面,创建自己的包.(开发过程中,每个人创建一个包,最后每个包合成一个team的TR包.整个产品将所有的TR包合成,发布. 2:向cds view里面插入假数据 3:使用 ...

  10. [js]js中变量带var和不带var的区别

    上图已说的很清晰了. 下面代码是赘述 <script> //带var和不带var的区别: // 1.只有带var的才可以预解释,所以在赋值的前操作不会报错. console.log(num ...