广东品牌网站建设多少钱,网站导航栏的作用,展览中心近期展会,appstore应用商店开发项目的时候#xff0c;如果后端接口没有出来#xff0c;前端工程师也不必非得等接口出来才进行下步开发。可以使用mock.js来模拟接口数据#xff0c;以下就是使用vue3设置hook函数来封装axios请求#xff0c;配合mock.js来实现的代码#xff0c;mock的官网 Mock.js 一… 开发项目的时候如果后端接口没有出来前端工程师也不必非得等接口出来才进行下步开发。可以使用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.jsconst 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张三password12345678).then(res {console.log(res, 返回数据 )})})
