张家口网站建设哪家服务好品牌活动策划
项目中模块操做业务使用ajax
(需要使用接口认证)

修改封装的findData发送ajax请求

管理员列表内部搜索业务

复用之前的findData 方法即可实现整个查询业务。
实现退出业务
在下拉菜单上添加事件以及属性。


用户退出登录,二次登录系统菜单可能不存在的bug

在守卫中添加上面代码即可解决。
该系统属于单端登录,存在被顶掉token失效。
系统上再次操做。默认会发送请求,但是token失效。

在项目的整体请求封装文件中进行一次性处理。(request.js 的响应拦截器。)
1.在响应拦截器中静态处理(根据错误状态码写固定)

最终静态的处理代码
//响应拦截器
axios.interceptors.response.use((response) => {//响应成功//写服务器响应错误处理let { code } = response.data;console.log(MessageBox);switch (code) {case 401://token令牌失效//messageBox提示MessageBox.confirm("当前用户登录失效?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {//清除所有缓存removeAllStorage();//跳转登录router.replace({ path: "/login" });});break;case 404:break;case 500:break;default:break;}//简单的数据过滤return Promise.resolve(response.data);},(error) => {return Promise.reject(error);}
);
2.动态处理异常
将错误的状态码以及消息存在后端的服务器上表中(mysql)用户登录成功之后发送ajax请求获取错误状态数据,将数据存储到vuex。在到request响应拦截中使用vuex获取错误状态集合。
项目中的模态框
项目中大量使用模态框,对模态框进行封装


在父组件中使用:
