vue3中mockjs模拟获取数据

本文主要是介绍vue3中mockjs模拟获取数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

 一.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模拟获取数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---