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就干了这件事,而且干的还挺好. 下面是我作为初学者的一些总结经验,期 ...
- 学习 | mockjs入门
最近工作有用到mockjs模拟数据,实现前后端分离,今天系统的把mockjs的API都过了一遍,算是入门吧. 什么是mockjs mockjs就是一个模拟数据,生成随机数据,拦截ajax请求. 为什么 ...
- dva + antd + mockjs 实现基础用户管理
1.安装dva-cli npm install dva-cli -g 2.创建应用 dva new dvadashboard [dvadashboard为项目名] 3.安装mockjs ...
- Vue学习小结(一)安装依赖与数据来源
不多说啥了,生活中都是各种阵痛与惊喜.最近在学习vue框架,刚写完一个小型的后台管理系统(https://github.com/michaelzhengzm/info-manager-systerm_ ...
- 我的web前端整理和学习
知识点收藏:(边看.边记录.边写) 开直播学习:虎牙 待办事理>> 练习自我表达(把文章做成视频).技术学习总结(博客与公众号).跳出舒适圈. 前端知识体系:https://www.cnb ...
- 正确开启Mockjs的三种姿势:入门参考(一)
一.文章初衷 阅读本文章需要注意以下几点: 文章不主要介绍Mockjs的使用语法 文章暂不涉及Mockjs的第三方封装框架 文章会结合以往做过上线项目的方式总结 想主要介绍如何使用Mockjs,是因为 ...
- 前端虚拟接口mockjs的使用
最近在学习VueJS,也进一步学习了ES6,看了一遍之后,难免手痒,所以想仿写点什么,但是数据是个问题,你总不能写个分页,写个轮播吧,但是在公司做自己的东西找后台要接口也不那么像回事,怎么办呢? 无意 ...
- mockJs语法糖用例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 用vue2.0+vuex+vue-router+element-ui+mockjs实现后台管理系统的实践探索
A magical vue element touzi admin. 效果演示地址 更多demo展示 分支说明 master分支:前后端统一开发的版本:可以用于学习nodejs+mongodb+exp ...
随机推荐
- linux终端提示符显示bash-4.2#
原因是root在/root下面的几个配置文件丢失,丢失文件如下: 1..bash_profile 2..bashrc 以上这些文件是每个用户都必备的文件. 使用以下命令从主默认文件重新拷贝一份配置信息 ...
- MacOS High Sierra 引起 VirtualBox Vagrant 同步慢
问题 最近把mac的操作系统升级到了最新版本发现了一个问题,通过共享文件夹的方式 修改的文件,无法立即同步到虚拟机中,大概需要30秒才能同步到共享文件夹. 操作环境如下 虚拟机:Virtualbox ...
- 树莓派3 之 USB摄像头安装和使用
需求 如果你想在树莓上拍照或者录影,你可以安装树莓派的摄像头(有点贵).如果你不想要为摄像头模块花费额外的金钱,那有另外一个方法,就是你常见的USB 摄像头.你可能已经在PC上安装过了.我买的如图的这 ...
- DELPHI中完成端口(IOCP)的简单分析(2)
DELPHI中完成端口(IOCP)的简单分析(2) 今天我写一下关于DELPHI编写完成端口(IOCP)的工作者线程中的东西.希望各位能提出批评意见.上次我写了关于常见IOCP的代码,对于IOCP ...
- 目标检测(四)Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks
作者:Shaoqing Ren, Kaiming He, Ross Girshick, and Jian Sun SPPnet.Fast R-CNN等目标检测算法已经大幅降低了目标检测网络的运行时间. ...
- 从光盘安装ubuntu系统
参考博客: https://www.jianshu.com/p/7929e4911206
- PHP调用接口用post方法传送json数据
1.核心代码: <?php require("helper.php"); header('content-type:text/html;charset=utf-8'); $k ...
- 016-并发编程-java.util.concurrent.locks之-Lock及ReentrantLock
一.概述 重入锁ReentrantLock,就是支持重进入的锁 ,它表示该锁能够支持一个线程对资源的重复加锁.支持公平性与非公平性选择,默认为非公平. 以下梳理ReentrantLock.作为依赖于A ...
- Mac下搭建solr搜索引擎与PHP扩展开发(下)
[接上一篇]https://www.cnblogs.com/rxbook/p/10716759.html [下载php的solr扩展] 现在开始使用php和solr交互了,所以必需安装solr扩展,下 ...
- 谷歌PM面试官告诉你,如何成功拿到理想offer
快来看看大咖Nick如何甄选人才~文章转自墨刀公众号. 本文作者: Nick Baum,目前在谷歌做PM 作为谷歌的产品经理和面试官,我已经面过几百个PM的候选人了吧.这些经历能让我分享一下在PM求职 ...