团队冲刺8
第8天：前端框架搭建与通用组件封装
关键词：Element Plus · Axios封装 · 动态路由 · 权限控制
前端技术选型
- Vue 3 + Element Plus + Vite
- Axios + 请求/响应拦截器
- ECharts + Vue-ECharts
- 动态路由 + 按钮级权限控制
通用组件封装
几天后台开发下来，发现很多模块有相似的模式。前端也做了大量封装：
- SearchFm组件：基于配置项渲染搜索表单，减少重复代码
- CrudTable组装：封装分页、排序、批量操作、行操作按钮
- 流程进度组件：基于ECharts的审核进度展示
- 图片上传组件：集成水印功能 + 压缩 + 预览
权限控制
企业后台的权限控制是刚需。采用RBAC模型：
- 用户 → 角色 → 权限（三级）
- 前端：路由级权限（动态路由） + 按钮级权限（自定义指令
v-permission） - 后端：接口级权限（Spring Security + 自定义注解）
踩坑：Element Plus表格性能
列表数据量大的时候（几千条），El-Table的渲染卡顿明显。
解决：启用虚拟滚动（el-table-v2），配合后端分页，每页只加载20条，前端展示流畅了很多。
