Mock.js模拟数据

一、为什么使用mockjs
在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口

我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查
使用json-server模拟，但不能随机生成所需数据
使用mockjs模拟后端接口，可随机生成所需数据，可模拟对数据的增删改查
二、mock优点
前后端分离，
可随机生成大量的数据
用法简单
数据类型丰富
可扩展数据类型
在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变url地址即可。
三、mock使用

1、首先需要下载安装mockjs模块

安装命令：

npm install --save mockjs

2、然后可以在scr下创建一个文件夹，用于存放模拟的数据的文件 例如 /src/mock/index.ts,在这个文件中

import Mock from 'mockjs'

//设置请求延时
Mock.setup({
    timeout: '200-2000' //单位为毫秒
})

// Mock.mock(请求路径,请求方式,()=>{})
Mock.mock(/\/api\/test/, 'get', (req: any) => {
    // console.log(req);

    return {
        code: 200,
        data: {
            msg: '请求成功'
        }
    }
})


// 登陆页轮播图接口

Mock.mock(/\/api\/loginSwiper/, 'get', (req: any) => {
    return {
        code: 200,
        data: {
            bannerList: [
                {
                    img: require('@/assets/loginSwiper/slide1.webp'),
                    id: 1
                },
                {
                    img: require('@/assets/loginSwiper/slide2.webp'),
                    id: 2
                },
                {
                    img: require('@/assets/loginSwiper/slide3.webp'),
                    id: 3
                },
                {
                    img: require('@/assets/loginSwiper/slide4.webp'),
                    id: 4
                }
            ]
        }
    }
})



// 暴露mock
export default Mock;

注意：

 发现引入mockjs部分报错，没有找到 mockjs//无法找到模块“mockjs”的声明文件。

解决方案：

shims-vue.d.ts文件中添加

declare module 'mockjs'

​

 3、模拟完数据后，需要在入口主文件 main.ts中 引入这个模拟数据的文件

// 在main.ts中引入mock
import './mock/index'

4、在页面中，我们直接可以进行axios请求。

<script lang="ts" setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
// 创建当前组件的实例
let { proxy }: any = getCurrentInstance()

const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];


// 请求首页轮播图数据
const getSwierImg = async () => {
    let { data: res } = await proxy.$http.get('/api/loginSwiper')
    // 请求登录轮播图的数据
    console.log(res);

}
onMounted(() => {
    getSwierImg()
})
</script>

5、结果