vue:mockjs的使用
1、在src目录下创建mock文件夹,创建XXX.json的文件,文件里面配置对应的json格式的虚拟数据,注意里面的数据不能包含空格,必须是键值对的形式
[{
"id": "1"
},
{
"id": "2"
}
]
2、mock文件夹下面创建mockServer.js文件,安装mockjs插件,并且引入mockjs和json文件,使用Mock.mock(url,{data:XXX,code:200})
/*
利用mockjs来mock数据接口
*/
import Mock from "mockjs";
import xxx from "./xxx.json";
// 提供数据的接口
Mock.mock("/mock/xxx", {
code: 200,
data: xxx,
});```
3、在api文件夹下创建ajaxMockjs文件中封装request请求,在api文件下创建index文件并且引入同目录下的js文件,创建请求接口并导出
```bash
/*
ajaxMockjs.js文件
专门请求mock接口的axios封装
*/
import axios from "axios";
const mockAjax = axios.create({
baseURL: "/mock", // 路径前缀
timeout: 10000, // 请求超时时间
});
mockAjax.interceptors.request.use((config) => {
return config;
});
mockAjax.interceptors.response.use(
(response) => {
return response.data;
},
(error) => {
return Promise.reject(error);
}
);
export default mockAjax;
index文件
import requests from "./request.js";
import mockAjax from "./ajaxMock.js";
export const xxx = () =>
requests({ url: "xxxx", method: "get" });
注意:
1、mock文件中需要的图片必须放在public文件目录创建的images中
2、mockjs必须在入口文件中引入,必须执行一次才可以使用
main.js文件中引入
import '@/mock/mockServe.js';