关于本地mockjs的使用

最新推荐文章于 2025-05-20 08:12:16 发布

鱼是一只鱼啊

最新推荐文章于 2025-05-20 08:12:16 发布

阅读量361

点赞数

文章标签： javascript 前端 vue.js mockjs

本文链接：https://blog.youkuaiyun.com/honeycandys/article/details/132253740

版权

安装mockjs

npm install mockjs -s

在src下新建目录mockData，所有mock请求可以放该文件夹下面。例如在mockData文件夹下新建一个home.js文件。用来处理首页的请求数据
home.js

export default {
    getHomeData:()=>{
        return{
            code:200,
            data:{
                tableData:[
                    {
                        name:'张三',
                        sex:'男',
                        phone:'15245857898',
                        createdOn:'2023-05-04'
                    },
                    {
                        name:'赵卓然',
                        sex:'男',
                        phone:'15245857898',
                        createdOn:'2023-05-04'
                    },
                    {
                        name:'赵柯',
                        sex:'男',
                        phone:'15245857898',
                        createdOn:'2023-05-04'
                    },
                ]
            }
        }
    }
}

在src下新建一个mock.js文件，主要用来拦截首页数据请求，返回自定义的数据

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

在main.js中引入mock.js

import './api/mock.js'

在Home.vue中调用请求

import { defineComponent,onMounted,ref} from 'vue'
import axios from 'axios'
export default defineComponent({
    setup() {
        let tableData = ref([])
        const getTableList=async()=>{
            await axios.get('/home/getData').then((res)=>{
                tableData.value=res.data.data.tableData;
            })
        }
        onMounted(()=>{
            getTableList()
        })
        return {
            tableData,
        }
    }
})