淮北网站建设求职简历,江西企业网站建设电话,外国网站架构,开发工具在哪里找开发项目的时候#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, 返回数据 )})})
