前端业务方向技术点分析--后台管理&普通用户前台

204 阅读2分钟

前言

后台管理平台对于前端来说应该是最简单的一种业务方向了,对于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(判断生产环境,添加监听)