vue3中mockjs模拟获取数据-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3中mockjs模拟获取数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

开发项目的时候，如果后端接口没有出来，前端工程师也不必非得等接口出来才进行下步开发。可以使用mock.js来模拟接口数据，以下就是使用vue3设置hook函数来封装axios请求，配合mock.js来实现的代码，mock的官网 Mock.js文章来源地址https://www.toymoban.com/news/detail-831045.html

一.mockjs安装

npm install mockjs --save

二.在src下创建mock\index.js 配置文件

import Mock from 'mockjs'

// 设置一下模拟返回数据时间
Mock.setup({
    timeout: '200-600'
})

// 方式一:无参数
Mock.mock(
    "/user/userinfo",
    'get',
    (req) => {
        console.log(req);
        return {
                msg: '请求成功',
                code: 0,
                data: [
                    {
                        meta: {
                            title: '系统',
                            icon: 'ri:pages-line',
                            defaultOpened: true,
                            breadcrumb: true,
                            permanent: false,
                            sidebar: true,
                        },
                        children: [
                            {
                                path: '/systemAuth',
                                component: 'Layout',
                                redirect: '/systemAuthDept',
                                name: 'systemAuth',
                                meta: {
                                    title: '权限管理',
                                    icon: 'ri:function-line',
                                    defaultOpened: true
                                },
                            }]
                    }]
        }
    }
)

// 方式二:有参数
Mock.mock(
    /\/account.*/,
    'get',
    (req) => {
        console.log(req);
        return {
            username: 'abc',
            type: '123'
        }
    }
)

三.在main.js中进行引入

import { createApp } from 'vue'
import App from './App.vue'
 
// 如果不想用mock测试就把这行代码注释掉
import './mock/index.js'

const app = createApp(App)
app.mount('#app')

四.页面使用

import { onMounted } from 'vue'
import axios from 'axios'
onMounted(() => {
    axios.get('/user/userinfo').then(res => {
        console.log(res, '返回数据 ')
    })
       axios.get('/account?username=张三&password=12345678').then(res => {
        console.log(res, '返回数据 ')
    })

})

到了这里，关于vue3中mockjs模拟获取数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！