mock.js简单使用

原创于 2021-04-27 11:26:17 发布 · 268 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用Mock.js进行API接口的模拟，包括获取、删除、编辑和新增数据的操作。通过示例代码详细展示了Mock.js的用法，帮助开发者在开发过程中快速模拟后台数据。

安装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:'添加'
	}
})