Vue3项目中使用Mock模拟接口数据【提高开发效率】

在前后端开发时，前端视图需要依赖后端数据进行展示，如果后端数据暂时不能请求，那么前端开发人员的进度就要停滞不前了吗？答案当然不是，前端开发者可以在本地进行模拟后端数据，在请求数据之前进行拦截，这样就不会影响前端视图的展示了，mock就可以实现。

一、安装mockjs

cnpm install mockjs -S

在使用 mock 模拟接口数据时，别忘了安装 axios 哦！

二、在src目录下新建api文件夹

在api文件夹下新建一个mock.js文件和mockData文件夹

// src/api/mockData/home.js
export default {
    getHomeData: () => {
        return {
            code: 200,
            data: {
                tableData: [
                    {
                        name: '张三',
                        sex: '男',
                        phone: '13465876789'
                    },
                    {
                        name: '小红',
                        sex: '女',
                        phone: '13465870645'
                    },
                    {
                        name: '李四',
                        sex: '男',
                        phone: '13465870645'
                    }
                ]
            }
        }
    }
}

// src/api/mock.js
import Mock from 'mockjs'
import homeApi from './mockData/home'
// 拦截请求
Mock.mock('/home/getData', homeApi.getHomeData)

三、在main.js文件中引入mock

import './api/mock'

四、在组件中模拟请求数据

<template>
    ...
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue';
import axios from 'axios';

export default defineComponent({
    setup(){
        // 定义数组变量
        let tableData = ref([]);
        // 请求数据的方法（请求接口url要与mock中定义的url相同）
        const getTableList = async () => {
            await axios.get('/home/getData').then(res => {
                tableData.value = res.data.data.tableData
            })
        }
        // 在生命周期中调用方法
        onMounted(() => {
            getTableList()
        })

        return {
            tableData
        }
    }
})
</script>