vue3中mockjs模拟获取数据

开发项目的时候,如果后端接口没有出来,前端工程师也不必非得等接口出来才进行下步开发。可以使用mock.js来模拟接口数据,以下就是使用vue3设置hook函数来封装axios请求,配合mock.js来实现的代码,mock的官网 Mock.js

一.mockjs安装

javascript 复制代码
npm install mockjs --save

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

javascript 复制代码
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中进行引入

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

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

四.页面使用

javascript 复制代码
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, '返回数据 ')
    })

})
相关推荐
清风92003 分钟前
Logback——日志技术(基础)
java·前端·logback
EndingCoder3 分钟前
排序算法与前端交互优化
开发语言·前端·javascript·算法·排序算法·交互
晓13134 分钟前
JavaScript加强篇——第五章 DOM节点(加强)与BOM
java·开发语言·javascript
三月的一天28 分钟前
在 React Three Fiber 中实现 3D 模型点击扩散波效果
前端·react.js·前端框架
爱敲代码的小冰28 分钟前
npm 切换 node 版本 和npm的源
前端·npm·node.js
DoraBigHead33 分钟前
🧠【彻底读懂 reduce】acc 是谁?我是谁?我们要干嘛?
前端·javascript·面试
future14121 小时前
项目开发日记
前端·学习·c#·游戏开发
汪子熙1 小时前
CSS 中 td:last-child a 选择器详解
前端·javascript
q567315231 小时前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫
北北~Simple1 小时前
第一次搭建数据库
服务器·前端·javascript·数据库