因为Vue3项目开发中需要用到Mock数据,所以这里记录一种快速Mock数据的方法。
一、安装
首先,你需要安装 axios
和 axios-mock-adapter
。
npm install axios axios-mock-adapter --save
二、编写mock
数据
为了保证项目的整洁,我们在项目根目录下的src
目录下新建一个名为mock
的文件夹。然后依次进行如下步骤:
(1)在mock
文件夹下新建index.js
文件,文件内容如下:
import MockAdapter from 'axios-mock-adapter'
import axios from 'axios'
// 创建一个 MockAdapter 实例
let mock = new MockAdapter(axios)
const initMock = () => {
// mock模拟一个get方法的响应数据
mock.onGet('/users').reply(200, { // 200 为状态码,后面对象为返回data
users: [
{ id: 1, name: '李华' }
]
})
// mock模拟一个post方法的响应数据
mock.onPost('/foo').reply(200, { // 200 为状态码,后面对象为返回data
msg: 'success',
desc: "恭喜,请求成功!"
})
// 模拟一个带参数请求的响应
mock.onGet("/search", { params: { searchText: "张" } }).reply(200, {
users: [{ id: 1, name: "张小花" }],
});
// 模拟一个错误响应
mock.onPut('/api/users/1').networkError();
}
// 导出
export default initMock
(2)在main.js中引入使用,在main.js中加入如下代码:
// 导入mock数据
import initMock from './mock/index';
// 初始化mock数据函数方法
initMock()
三、使用mock数据
以下是使用mock数据的方法的vue页面代码,Mock.vue
示例页面:
<template>
<div>
<div><b>axios-mock-adapter</b>数据模拟js库,请注意浏览器控制台输出</div>
<button @click="funGetTest">get请求测试</button>
<button @click="funParamsTest">get带参数请求测试</button>
<button @click="funPostTest">post请求测试</button>
<button @click="funPutTest">put请求测试(错误响应示例)</button>
</div>
</template>
<script setup>
//引入axios
import axios from 'axios';
const funGetTest = () => {
axios.get("/users").then((res) => {
console.log("GET请求结果:", res);
});
}
const funParamsTest = () => {
axios.get("/search", {
params: { searchText: "张" }
}).then(res => {
console.log("GET带参数请求结果:", res);
});
}
const funPostTest = () => {
axios.post("/foo").then(res => {
console.log("POST请求结果:", res);
});
}
const funPutTest = () => {
axios.put("/api/users/1").then(res => {
console.log("PUT请求结果:", res);
});
}
</script>
<style scoped>
button {
border: 1px solid #000;
padding: 10px;
margin: 10px;
cursor: pointer;
}
button:hover {
background-color: #3496eb;
color: #ffffff;
}
</style>
上述方法示例展示了如何使用 axios-mock-adapter
来模拟不同的 HTTP 请求和响应,让你能够测试你的应用在各种情况下的行为,而不需要实际发送网络请求。