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. webservice接口测试wsdl

    http和webservice接口测试有什么区别? webservice的基础组成是http+xml 三要素:soap传输协议,uddi,wsdl(webservice描述语言xml格式) 优点:跨平 ...

  2. SqlHelper2

    public abstract class DBHelper { public static string connectionString = @"DATA SOURCE=.\sqldat ...

  3. jQuery设置时间格式

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  4. [qemu] 差分盘使用

    我要装好多台同样配置的虚拟机.比如10台CentOS7, 各自有不同的配置. 这样的话装10台kvm虚拟机,特别的浪费空间,image文件相互迁移的话也不方便. 这个时候可以选择差分盘:就是先装一个标 ...

  5. [摘录] 图灵机与lambda演算的关系

    在阅读函数式编程相关资料时,看到如下一段话.感觉说的很好,可以帮助我这种学渣一点点的建立起整个知识体系. 以下片段,摘抄自豆瓣网友 赛义甫 的豆列 “逻辑与计算” 中的一段介绍. 莱布尼兹曾经有两个梦 ...

  6. 深度学习基础(三)NIN_Network In Network

    该论文提出了一种新颖的深度网络结构,称为"Network In Network"(NIN),以增强模型对感受野内local patches的辨别能力.与传统的CNNs相比,NIN主 ...

  7. datagridview的一些设置

    1.自动调整列宽 this.dataGridView1.AutoSizeColumnsMode = System.Windows.Forms.DataGridViewAutoSizeColumnsMo ...

  8. windows----------自启动QQ报错”initialization failure:0x0000000C“

    1.从来没遇到过这个问题,不知道为啥最近竟然遇到了两次,家里的电脑和公司的电脑都这样. 通过百度得知答案,并亲自试过了,是正确的解决方法: 原因:上次没有正常关机导致的错误  方法:管理员运行cmd ...

  9. Delphi数据库技术中Disablecontrols和Enablecontrols的功能

    一般来说,用来扫描整个数据库表并修改每个记录的某一个字段的程序如下所示: with Table Do begin DisableControls;{在修改记录的过程中,使其它部件无效} First; ...

  10. springboot 没有跳转到指定页面

    Whitelabel Error Page   解决办法,添加依赖: <dependency> <groupId>org.springframework.boot</gr ...