vue3 + vite + Mock数据模拟

安装mock.js

npm install mockjs

文件配置

在src文件夹下新建mock文件夹

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sN4h5bJy-1671357082198)(C:\Users\lzz\AppData\Roaming\Typora\typora-user-images\image-20221218172731147.png)]

index.js内容

// 首先引入Mock
import Mock from 'mockjs'
// 设置拦截ajax请求的相应时间
Mock.setup({
    timeout: '200-600'
});
let configArray = [];
// vite遍历文件
const files = import.meta.globEager('./*.js')
Object.keys(files).forEach((key) => {
    if (key === './index.js') return;
    configArray = configArray.concat(files[key].default);
    console.log(configArray)

});

// 注册所有的mock服务
configArray.forEach((item) => {
    for (let [path, target] of Object.entries(item)) {
        let protocol = path.split('|');
        console.log(protocol)
        Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
    }
});

data.js内容

// 返回值
let demoList = [{
    id: 1,
    name: 'zs',
    age: '23',
    job: '前端工程师'
}, {
    id: 2,
    name: 'ww',
    age: '24',
    job: '后端工程师'
}]

// 导出接口
export default {
    /**
     * get请求
     * url：/parameter/get
     * @param option
     * @return { Object }
     * */
    'get|/parameter/get': option => {
        console.log(option,'----get---')
        return {
            status: 200,
            message: 'success',
            data: demoList
        };
    },
    /**
     * post请求
     * url：/parameter/query
     * @param option
     * @return { Object }
     * */
    'post|/parameter/query': option => {
        let response = {
            status: 200,
            message: 'success',
        }
        if (JSON.parse(option.body).id === 1) {
            response.data = demoList
        } else {
            response.status = '400'
            response.message = 'error'
        }
        return response

    }
}

main.js引入

import './mock'

使用

get_test('/parameter/get').then(res=>{
    console.log(res,'----get ')
})
post_test('/parameter/query',{id:1}).then(res=>{
    console.log(res,'----post ')
})