vue：mockjs的使用

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';