前言
后台管理平台对于前端来说应该是最简单的一种业务方向了,对于toB的项目来说,对样式的要求没有那么多,一般用来完成流程上的推进和资源的管理(增删改查四件套)。
这类项目其实没有特别大的技术难度(除非产品逆天),如果面试时需要描述自己做过的项目时,可以从这些几个点做技术介绍。
权限管理
权限管理其实是一个很大的概念,一般来是通过角色、粒度这两个维度的结合,在粒度上划分有菜单、页面、接口的访问。
涉及到技术的。需要注意的问题关键词是
- 菜单router配置与后端结合,(一般会用到localstorage、redux/vuex)。
- 页面router钩子里的判断、动态加载。(没有权限时的处理,申请?在菜单处不显示?)
- 按钮级别:(根据用户角色权限判断,vue可以用指令,react可以直接写个通用hook。)
列表查询
列表查询比较简单,主要是搜索条件的逻辑,并与或的筛选。可以从封装和优化的角度来看。
- 多个列表对应多个搜索框,封装通用的搜索栏
- 超大数据渲染优化
- 如果末尾页只有一条数据,删除这条数据后的查询页码问题(前端或后端解决)
水印
- dom(结合使用
pointer-events: none;实现 点击穿透完成) - canvans (通过
canvas.toDataURL("image/png");方法 获取到对应水印的base64格式的图片,作为背景图)
表单
简单的表单用ui组件自带的就够了,但为了体现技术性,一般还是需要提及表单的封装。 这里一般强调封装表单时需要注意的事项,比如需要定义哪些参数,讲一下各个参数的作用,比如rule的校验触发
- type
- required
- label
- value
- rule
- max
- min ...
文件上传&解析
- 大文件上传(断点续传)
- 文件解析(在文件上传的几个钩子里做相应操作,上传进度完成时,后端返回结果时,有错误信息返回时)
用户登录
- 保存用户信息,(切换组件时信息不丢失,localstorage、redux/vuex)
- n天内免登录 (localstorage 、sessionId )
- 退出时删除登录信息
- 禁用devtool(判断生产环境,添加监听)