当前位置: 首页 > 工具软件 > Blur-Admin > 使用案例 >

Vue和Vue-Element-Admin(十一):axios,mockjs和vuex

汪理
2023-12-01


axios,mockjs和vuex在开发/生产环境基本是耦合的,axios完成请求发送/接收及封装,mockjs进行数据的拦截/模拟,vuex进行本地数据存储及全局变量维护。
以登录场景为例,登录表单el-form标签绑定form.item数据,el-input分别对应item.username和item.passwd,点击登录的button触发login()方法,入参即item数据,login()方法使用被axios统一封装的request(增加baseurl,请求头等)发起http请求,mockjs拦截请求返回模拟数据,axios拿到返回后封装respond(增加或修改相应code,处理权限等),vuex存储模拟的token,其他components比如router可以直接引用token来判断是否有权限跳转。
实现如下的居中登录输入框,登录触发login请求,图中/api/menu/getMenu的url就是login方法
 类似资料: