安装mock,js
1.script标签引入
<script src="http://mockjs.com/dist/mock.js"></script>
2.npm安装
npm install mockjs
在vue中使用
1.新建test.js文件
// 引入Mock.js
import Mock from 'mockjs'
2.使用mock()方法模拟请求接口
mock() 第一个参数填写请求地址(自定义);第二个参数是请求到的数据
3.在vue项目main.js中引入
4.mock使用具体代码
- 模拟获取数据
// 模拟数据
let classify = [{id: 0,name: '鞋包'},{id: 1,name: '裤子'},{id: 2,name: '衣服'}]
// 写法一
Mock.mock('https://www.api.com/class',classify)
// 写法二
Mock.mock('https://www.api.com/class', 'get', () => {
return classify
})
// 发起请求实例
axios({
method: 'get',
url:'https://www.api.com/class',
data: {}
})
- 模拟删除数据
// 模拟数据
let classify = [{id: 0,name: '鞋包'},{id: 1,name: '裤子'},{id: 2,name: '衣服'}]
Mock.mock('https://www.api.com/deleteclass','delete',function(classify){
var id = parseInt(options.body.split("=")[1])//获取ajax转递的id
var index;
for(var i in classify){
if(classify[i].id===id){//在数组arr里找到这个id
index=i
break;
}
}
classify.splice(index,1)//把这个id对应的对象从数组里删除
return classify;//返回这个数组,也就是返回处理后的假数据
})
// 发起请求实例
axios({
method: 'delete',
url:'https://www.api.com/deleteclass',
data: {
id: 1 //假设需要删除id=1的数据
}
})
- 模拟编辑数据
Mock.mock('https://www.api.com/edit','post',function(res){
let id = parseInt(res.body.split("=")[1]);
for(let i = 0;i<arr.length;i++){
if(arr[i].id == id){
arr[i].name = decodeURI(res.body.split("=")[2])
}
}
return arr;
})
// 发起请求示例
axios({
url:'https://www.api.com/edit',
method: 'post',
responseType: 'json',
data:{
id:3,
name:'修改'
}
}).then(function(res) {
console.log(res)
});
- 模拟新增数据
Mock.mock('https://www.api.com/add','post',function(res){
let id = parseInt(res.body.split("=")[1]);
console.log(res);
var name = decodeURI(res.body.split("=")[2])
var obj = {id:id,name:name}
arr.push(obj);
return arr;
})
axios({
url:'https://www.api.com/add',
method: 'post',
responseType: 'json',
data:{
id:4,
name:'添加'
}
})