vue项目第七天

项目中模块操做业务使用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获取错误状态集合。

项目中的模态框

项目中大量使用模态框，对模态框进行封装

在父组件中使用：