前端基于 Vue 3 + Element Plus 的后台基于Spring Boot 3.2.5 + Java 17管理系统框架，提供用户管理、角色管理、菜单管理、字典管理等基础功能。

开源项目 干净开箱即用前后端通干全栈代码托管https://gitee.com/chen-dongjing/projects前端https://gitee.com/chen-dongjing/frontend.git后端https://gitee.com/chen-dongjing/backend.git#首次将代码从本地上传到gitlab步骤#初始化仓库git init#和远程绑定git remote add origin https://gitee.com/chen-dongjing/backend.git#将文件添加到本地仓库git add .#备注git commit -m 首次提交初始化项目完整代码#将本地仓库代码推送到远程git push -u origin master系统架构说明前端# 系统开发管理平台## 项目简介基于 Vue 3 Element Plus 的后台管理系统前端框架提供用户管理、角色管理、菜单管理、字典管理等基础功能。## 系统架构### 技术栈| 技术 | 版本 | 说明 ||------|------|------|| Vue | 3.4 | 前端核心框架 || Vue Router | 4.2 | 路由管理 || Pinia | 2.1 | 状态管理 || Element Plus | 2.5 | UI 组件库 || Axios | 1.6 | HTTP 请求库 || Vite | 5.0 | 构建工具 || Sass | 1.69 | CSS 预处理器 |### 目录结构frontend/├── src/│ ├── api/ # API 接口定义│ │ ├── system/ # 系统管理相关接口│ │ │ ├── user.js # 用户管理│ │ │ ├── role.js # 角色管理│ │ │ ├── menu.js # 菜单管理│ │ │ ├── dict.js # 字典管理│ │ │ └── log.js # 日志管理│ │ ├── login.js # 登录相关接口│ │ └── dashboard.js # 仪表盘接口│ ├── assets/ # 静态资源│ ├── components/ # 公共组件│ │ ├── DictSelect/ # 字典选择器│ │ ├── FileUpload/ # 文件上传│ │ ├── Pagination/ # 分页组件│ │ └── ...│ ├── directive/ # 自定义指令│ │ ├── permission.js # 权限指令│ ├── layout/ # 布局组件│ ├── router/ # 路由配置│ ├── store/ # 状态管理│ │ └── modules/│ │ └── user.js # 用户状态│ ├── styles/ # 全局样式│ ├── utils/ # 工具函数│ │ ├── request.js # Axios 封装│ │ ├── auth.js # Token 管理│ │ ├── validate.js # 校验函数│ │ └── common.js # 通用工具│ ├── views/ # 页面组件│ │ ├── login/ # 登录页│ │ ├── dashboard/ # 仪表盘│ │ ├── system/ # 系统管理页面│ │ └── profile/ # 个人中心│ ├── App.vue # 根组件│ └── main.js # 入口文件├── .env.development # 开发环境变量├── .env.production # 生产环境变量├── vite.config.js # Vite 配置└── package.json # 项目依赖### 架构设计┌─────────────────────────────────────────────────┐│ Views (页面层) ││ login | dashboard | system/* | profile | error │└────────────────────────┬────────────────────────┘│┌────────────────────────▼────────────────────────┐│ Components (组件层) ││ Pagination | DictSelect | FileUpload | ... │└────────────────────────┬────────────────────────┘│┌────────────────────────▼────────────────────────┐│ Store (状态管理层) ││ Pinia - user module │└────────────────────────┬────────────────────────┘│┌────────────────────────▼────────────────────────┐│ API (接口层) ││ login | user | role | menu | dict | log │└────────────────────────┬────────────────────────┘│┌────────────────────────▼────────────────────────┐│ Utils (工具层) ││ request(Axios) | auth | validate | common │└────────────────────────┬────────────────────────┘│┌────────────────────────▼────────────────────────┐│ Backend API (后端接口) ││ http://localhost:8080 │└─────────────────────────────────────────────────┘### 核心功能- **用户认证**: 登录/登出、Token 管理、路由守卫- **权限控制**: 基于角色的权限控制、动态路由、按钮级权限指令- **系统管理**: 用户管理、角色管理、菜单管理、字典管理- **组件封装**: 分页、字典选择、文件上传、图标选择等通用组件## 安装教程1. 安装依赖bashnpm install2. 启动开发服务器bashnpm run dev3. 构建生产版本bashnpm run build## 使用说明1. 开发环境访问地址: http://localhost:30002. 后端接口代理地址: http://localhost:80803. 默认管理员账号: admin / 123456系统架构说明后端## 系统架构说明这是一个基于 **Spring Boot 3.2.5 Java 17** 的**后台管理系统后端**采用经典的 **RBAC基于角色的访问控制** 模型技术栈现代化分层清晰。---### 一、技术栈总览| 分类 | 技术 | 版本 | 作用 ||------|------|------|------|| 基础框架 | Spring Boot | 3.2.5 | 应用框架 || 编程语言 | Java | 17 | JDK || ORM | MyBatis-Plus | 3.5.5 | 数据访问层简化 CRUD || 数据库 | MySQL | 8.0.33 | 主数据库 || 连接池 | Druid | 1.2.22 | 高性能数据库连接池 || 缓存 | Spring Data Redis | - | 缓存/会话存储 || 鉴权 | JJWT | 0.12.5 | JWT Token 生成与校验 || 工具库 | Hutool | 5.8.26 | 通用工具类 || API 文档 | Knife4j (OpenAPI 3) | 4.4.0 | Swagger UI 增强 || 简化代码 | Lombok | 1.18.32 | 自动生成 getter/setter || 参数校验 | Spring Validation | - | 请求参数校验 |---### 二、项目分层结构com.qinfen.backend├── BackendApplication.java ← 启动类├── common/ ← 公共模块│ ├── constant/ ← 常量 (Constants.java)│ ├── exception/ ← 统一异常处理│ │ ├── BusinessException ← 业务异常│ │ └── GlobalExceptionHandler ← 全局异常处理器│ ├── result/ ← 统一响应封装│ │ ├── Result ← 通用响应体│ │ ├── PageResult ← 分页响应体│ │ └── ResultCode ← 响应码枚举│ └── utils/ ← 工具类│ └── JwtUtils ← JWT 工具├── config/ ← 配置类│ ├── CorsConfig ← 跨域配置│ ├── Knife4jConfig ← API 文档配置│ ├── MybatisPlusConfig ← MyBatis-Plus 配置 (分页插件等)│ ├── RedisConfig ← Redis 配置│ └── WebMvcConfig ← Web MVC 配置 (注册拦截器)├── interceptor/ ← 拦截器│ └── AuthInterceptor ← 登录鉴权拦截器├── controller/ ← 控制层 (REST API)│ ├── AuthController ← 认证接口 (登录/登出)│ ├── UserController ← 用户管理│ ├── RoleController ← 角色管理│ ├── MenuController ← 菜单管理│ └── DashboardController ← 仪表盘统计├── service/ ← 业务层 (接口 impl)│ ├── UserService / impl│ ├── RoleService / impl│ ├── MenuService / impl│ └── DashboardService / impl├── mapper/ ← 数据访问层 (继承 BaseMapper)│ ├── UserMapper│ ├── RoleMapper│ ├── MenuMapper│ ├── UserRoleMapper│ └── RoleMenuMapper├── entity/ ← 数据库实体 (DO)│ ├── User / Role / Menu│ ├── UserRole / RoleMenu├── dto/ ← 数据传输对象 (入参)│ ├── UserLoginDTO / UserCreateDTO / UserUpdateDTO / UserQueryDTO / PasswordResetDTO│ ├── RoleCreateDTO / RoleUpdateDTO / RoleQueryDTO / RoleMenuDTO│ └── MenuCreateDTO / MenuUpdateDTO└── vo/ ← 视图对象 (出参)├── AuthInfoVO / UserVO / RoleVO / MenuVO├── DashboardStatsVO / SystemInfoVO 这是标准的 **Controller → Service → Mapper** 三层架构配合 **DTO / Entity / VO** 三种对象分离入参、持久化对象和出参职责清晰。---### 三、数据库设计RBAC 模型5 张表构成完整的 RBAC 权限体系sys_user ──(sys_user_role)── sys_role ──(sys_role_menu)── sys_menu| 表名 | 说明 | 关键字段 ||------|------|----------|| sys_user | 用户表 | username, password(BCrypt), status, 逻辑删除 deleted || sys_role | 角色表 | role_name, role_code(唯一), sort, status || sys_menu | 菜单表 | parent_id(树形结构), menu_type(M目录/C菜单/F按钮), path, component, perms(权限标识) || sys_user_role | 用户-角色关联 | user_id role_id 多对多 || sys_role_menu | 角色-菜单关联 | role_id menu_id 多对多 |**特性**- 所有业务表都有 create_time / update_time 自动维护- 采用**逻辑删除**deleted 字段由 MyBatis-Plus 自动处理- 初始数据admin / test 用户ROLE_ADMIN / ROLE_USER 角色---### 四、核心工作流程#### 1. 认证流程AuthController AuthInterceptor客户端 POST /auth/login│▼AuthController.login(UserLoginDTO)│ 校验用户名密码 (BCrypt)│ 查询用户角色│ 生成 JWT Token (JwtUtils)▼返回 { token, userInfo, menus }│▼后续请求携带 Header: Authorization: Bearer token│▼AuthInterceptor 拦截 → 解析 JWT → 校验 → 放行/拒绝(通过 WebMvcConfig 注册排除 /auth/** 等公开路径)#### 2. 业务请求流程HTTP Request│▼AuthInterceptor (鉴权)│▼GlobalExceptionHandler (异常兜底)│▼Controller (Valid 参数校验)│ DTO 入参▼Service (业务逻辑)│ Entity 持久化▼Mapper (MyBatis-Plus BaseMapper)│▼MySQL / Redis│▼返回 ResultT / PageResultT (统一响应)#### 3. 统一响应格式java// 成功{ code: 200, message: success, data: {...} }// 分页{ code: 200, message: success, data: { list: [...], total: 100, page: 1, size: 10 } }// 失败{ code: 40001, message: 用户名或密码错误, data: null }#### 4. 异常处理Controller / Service 抛出 BusinessException(code, message)│▼GlobalExceptionHandler (RestControllerAdvice)│ 捕获后转为统一 Result 响应│ 同时处理参数校验异常、未知异常▼返回错误信息---### 五、配置要点application.yml| 配置项 | 值 | 说明 ||--------|-----|------|| server.port | 8080 | 服务端口 || mybatis-plus | 驼峰映射 逻辑删除 自增主键 | ORM 配置 || app.jwt.secret | 默认密钥生产需更换 | JWT 签名密钥 || app.jwt.expire-hours | 24 | Token 有效期 || 多环境 | dev / test / prod | 用 spring.profiles.active 切换 |---### 六、架构亮点总结1. **分层清晰**Controller / Service / Mapper 三层 DTO / Entity / VO 三对象职责单一2. **RBAC 权限模型**用户 → 角色 → 菜单5 张表实现灵活的权限控制菜单支持树形结构3. **无状态鉴权**JWT Token AuthInterceptorRedis 用于可能的 Token 黑名单/缓存扩展4. **统一响应 异常**ResultT GlobalExceptionHandler前端处理省心5. **MyBatis-Plus**省去大部分 CRUD自带分页、逻辑删除、乐观锁等6. **API 文档**Knife4jSwagger 增强访问 /doc.html 即可查看和调试接口7. **多环境配置**dev / test / prod 三套配置隔离8. **生产就绪**Druid 连接池、Jackson 日期格式化、Lombok 简化代码这是一个设计规范、适合作为企业级后台管理系统脚手架的后端项目。