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. python使用suds调用webservice接口

    最近做接口对接,遇到了.net开发的webservice接口,因为python第一次与webservice对接,连问带查,最后使用suds库来实现了 1.安装suds mac: sudo pip in ...

  2. 点击刷新验证码所需要的onclick函数

    <img src="__APP__/Public/verify" onclick="this.src=this.src+'?'+Math.random()" ...

  3. java框架之Spring(5)-注解驱动开发

    准备 1.使用 maven 创建一个 java 项目,依赖如下: <dependency> <groupId>org.springframework</groupId&g ...

  4. [js]js中4种无节操的预解释情况

    js中4种无节操的预解释情况 - 1. if语句即使条件不成立,条件里的表达式也会进行预解释. - 2. 匿名函数的预解释: 只对等号左边与解释 - 3. 自执行函数的预解释: 不进行预就解释, 执行 ...

  5. 安装WIN7/WIN10上的 CPU版本的TensorFlow

    随手记 ancaconda Anaconda2-5.0.1-Windows-x86_64(python3.5 ancaconda python-3.5.2-amd64 安装TensorFlow的时候自 ...

  6. #WEB安全基础 : HTTP协议 | 0x7 学会使用wireshark分析数据包

    wireshark是开源,免费,跨平台的抓包分析工具 我们可以通过wireshark学习HTTP报文和进行抓包分析,在CTF中的流量分析需要用到抓包 1.下载和安装 这是wireshark的官网 ht ...

  7. HDU 1160

    FatMouse believes that the fatter a mouse is, the faster it runs. To disprove this, you want to take ...

  8. Class_fourth

    动手动脑 1,多层异常捕捉一 2,多层异常捕捉二 3,EmbedFinally.java示例 最先截获的错误 最后输出finally 4, SystemExitAndFinally.java示例 如果 ...

  9. <转>jmeter(二十)阶梯式加压测试

    本博客转载自:http://www.cnblogs.com/imyalost/category/846346.html 个人感觉不错,对jmeter讲解非常详细,担心以后找不到了,所以转发出来,留着慢 ...

  10. inux下输入ifconfig命令,没有eth0,怎么解决

    用ifconfig命令,只有lo,没有eth0的解决方案 问题描述:视频中输入ifconfig命令,显示eth0和lo,但是自己在虚拟机中并非得到这样的结果,而是只有lo,即网卡未启动,也没有ip,无 ...