技术栈:vue3+element-plus+webpack-axios+pinia+vue-router+ts
项⽬简介:这是⼀个员⼯的后台办公系统,主要包含了⼈事调动,请假,绩效考核,权限管理等内容
1.使⽤element-plus进⾏组件化开发,实现了⽤户列表、个⼈信息修改、权限配置、⻆⾊管理,员⼯操
作等⻚⾯
2.利⽤Axios拦截器实现了权限判断,对管理系统的登⼊权限进⾏控制,通过配置http response
inteceptor,当后端接⼝返回401,让⽤户重新登录,避免了⽆效请求。
3.动态⽣成⽤户权限表,登录完成后,将⽤户信息存储在cookie,通过路由钩⼦函数获取动态路由信
息,递归解析后端路由,通过addRouter与基本路由信息进⾏拼接,存储到pinia,⽤于侧边栏显示
4.通过⼆次封装Element-plus的组件,在组件间实现复⽤,减少冗余度
5.⾸次⽩屏,绘制⻣架屏,通过监听onLoad事件,加载完成之后,在mounted()钩⼦中替换掉这张
图⽚。
6.使⽤pinia进⾏持久化存储⽤户信息
7.加载2000条以上数据导致⻚⾯卡顿,通过使⽤Vue Virtual Scroll List,将列表列表分为可⻅区域
和缓冲区域,超出这个范围的列表 DOM 都将被删除。