以前开发流程中,接口比较慢时都是自己写点死数据测试,不够高级~
目前在新项目中接触到了mock接口,现在记录学习下:
在Vue项目中,可以使用mock来模拟接口,方便进行开发和测试。
且正式环境中应该移除mock的配置和依赖,使用真实的接口数据。
http://mockjs.com/ Mock.js官网地址
1: 安装依赖
首先,需要安装 axios 和 mockjs 两个依赖包。可以使用 npm 或者 yarn 进行安装:
npm install axios mockjs --save-dev
2: 创建Mock数据
在项目的根目录下创建一个 mock 文件夹,并在其中创建一个 mock.js 文件。在 mock.js 文件中编写模拟的接口数据:
import Mock from 'mockjs';
Mock.mock('/api/users', 'get', {
success: true,
data: [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Smith' }
]
});
上述代码模拟了一个 GET 请求 /api/users,返回一个包含两个用户对象的数据。
3: 配置Vue项目
在Vue项目中的入口文件(例如 main.js)中,引入 axios 和 mock.js,并配置axios的baseURL为mock的根路径:
import { createApp } from 'vue';
import axios from 'axios';
import './mock/mock'; // 导入mock.js
axios.defaults.baseURL = 'http://localhost:8080'; // mock服务器地址
createApp(App).mount('#app');
这里假设mock服务器运行在本地的 http://localhost:8080。
4: 发送请求
在Vue组件中,可以使用axios发送请求并获取模拟的数据。例如,在一个组件中发送GET请求:
import axios from 'axios';
export default {
mounted() {
axios.get('/api/users')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
}
};
当组件挂载时,它会发送一个GET请求到 /api/users,并打印响应数据到控制台。