vue3 + vite + Mock数据模拟

菜鸡的崛起

已于 2022-12-18 18:00:18 修改

阅读量1k

点赞数

分类专栏： vue 文章标签： javascript 前端 vue.js

于 2022-12-18 17:53:13 首次发布

本文链接：https://blog.csdn.net/l_____z______z/article/details/128364245

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了如何在 Vue3 项目中结合 Vite 安装和配置 Mock.js，用于模拟数据。通过创建 mock 文件夹，配置 index.js 和 data.js，然后在 main.js 中引入并使用，实现对 get 和 post 请求的模拟响应。内容详细解释了每个步骤，包括设置拦截 AJAX 请求的时间、注册 mock 服务和定义接口返回值。

摘要由CSDN通过智能技术生成

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 ')
})