Spring Boot 3 + Vue3 中后台管理脚手架。开箱即用，支持 JWT 登录、RBAC 权限、动态菜单、Docker 一键启动，适合作为 ERP、CRM、OA 类项目的起始骨架。
| 后端 | 版本 | 前端 | 版本 |
|---|---|---|---|
| Spring Boot | 3.2.x | Vue | 3.4.x |
| Spring Security | 6.x | Element Plus | 2.7.x |
| MyBatis-Plus | 3.5.x | Pinia | 2.1.x |
| MySQL | 8.x | Vue Router | 4.4.x |
| Redis | 7.x | Vite | 5.3.x |
| JWT (jjwt) | 0.12.x | ECharts | 5.5.x |
| Hutool | 5.8.x | Axios | 1.7.x |
| springdoc-openapi | 2.3.x | Sass | 1.x |
- JWT 无状态登录 / 登出，令牌自动刷新
- RBAC 权限模型（用户-角色-菜单-按钮粒度）
- 统一响应封装 + 全局异常处理
- 动态路由 + 侧边栏菜单 + 面包屑
- 用户管理（分页、搜索、新增、编辑、删除、重置密码、状态切换）
- 角色管理（CRUD + 权限树分配）
- 操作日志（审计追踪 + 多条件筛选 + 导出）
- 个人中心（信息修改 + 密码修改 + 登录日志）
- Dashboard 数据看板（ECharts 图表 + 统计卡片 + 时间轴动态）
- 404 错误页 + 路由守卫
- Docker Compose 一键启动前端 + 后端 + MySQL + Redis
- Knife4j / springdoc OpenAPI 接口文档
渐变背景 + 居中卡片布局，支持表单校验、回车提交、加载状态。
┌──────────────────────────────────────────────────┐
│ [渐变紫色背景] │
│ │
│ ┌──────────────────┐ │
│ │ Admin Pro │ │
│ │ │ │
│ │ [用户名输入框] │ │
│ │ [密码输入框] │ │
│ │ [ 登 录 ] │ │
│ └──────────────────┘ │
│ │
└──────────────────────────────────────────────────┘
- Element Plus 表单校验 + Loading
- 渐变背景
linear-gradient(135deg, #667eea → #764ba2) - 默认填充 admin / 123456 方便快速登录
首页仪表盘，集成 ECharts 图表 + 统计卡片 + 实时动态。
┌──────────────────────────────────────────────────────┐
│ [Sidebar] │ Header: admin ▾ │
│ ├────────────────────────────────────────┐ │
│ Dashboard │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ │
│ │ │用户 │ │在线 │ │订单 │ │消息 │ │ │
│ 系统管理 │ │12,864│ │ 327 │ │1,456 │ │ 23 │ │ │
│ ├用户管理 │ │↑8.2% │ │↑12.5%│ │↓3.1% │ │↑5.0% │ │ │
│ ├角色管理 │ └──────┘ └──────┘ └──────┘ └──────┘ │ │
│ ├操作日志 │ ┌───────────────────┐ ┌──────────┐ │ │
│ └个人中心 │ │ 近7日访问趋势 │ │ 用户来源 │ │ │
│ │ │ ╱╲ ╱╲ │ │ 环形图 │ │ │
│ │ │ ╱ ╲╱ ╲___ │ │ │ │ │
│ │ │ 面积渐变填充 │ │ 搜索 48% │ │ │
│ │ │ [PV] [UV] 切换 │ │ 直访 31% │ │ │
│ │ └───────────────────┘ └──────────┘ │ │
│ │ ┌──────────────┐ ┌────────────────┐ │ │
│ │ │ 系统操作日志 │ │ 待办事项 │ │ │
│ │ │ ● 14:32 登录 │ │ ☐ 审核注册申请 │ │ │
│ │ │ ● 14:20 改状态│ │ ☐ 处理CPU告警 │ │ │
│ │ │ ● 13:45 导出 │ │ ☑ 清理日志 │ │ │
│ │ └──────────────┘ └────────────────┘ │ │
│ └────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────┘
- 统计卡片：4 张渐变图标卡片，显示数值 + 同比趋势
- 折线图：7 日 PV/UV 趋势，支持 Tab 切换，面积渐变填充
- 环形图：用户来源分布（搜索引擎 / 直访 / 社交媒体等）
- 操作日志时间轴：最新系统操作动态
- 待办事项：可勾选 + 优先级标签
完整 CRUD 列表页，含搜索、分页、弹窗表单。
┌──────────────────────────────────────────────────┐
│ ┌────────────────────────────────────────────┐ │
│ │ 用户名 [____] 手机号 [____] 状态 [▼] │ │
│ │ [查询] [重置] │ │
│ └────────────────────────────────────────────┘ │
│ ┌────────────────────────────────────────────┐ │
│ │ [+ 新增用户] │ │
│ │────────────────────────────────────────────│ │
│ │ # │ 用户名 │ 昵称 │ 手机号 │ 邮箱 │ 状态 │ │ │
│ │ 1 │ admin │ 超管 │ 138** │ @ex │ 启用 │ │ │
│ │ 2 │ test │ 测试 │ 139** │ @te │ 启用 │ │ │
│ │────────────────────────────────────────────│ │
│ │ [编辑] [重置密码] [禁用] [删除] │ │
│ │────────────────────────────────────────────│ │
│ │ 共 2 条 [< 1 >] 10条/页 [跳转] │ │
│ └────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────┘
- 搜索区：用户名、手机号、状态多条件筛选
- 工具栏：新增用户按钮
- 表格列：序号、用户名、昵称、手机号、邮箱、状态标签、创建时间
- 行操作：编辑、重置密码、启用/禁用切换、删除（二次确认）
- 分页：支持切换每页条数、跳转页码
- 弹窗表单：新增 / 编辑共用弹窗，含表单校验规则
┌──────────────────────────────────────────────────┐
│ [+ 新增角色] [刷新] │
│──────────────────────────────────────────────────│
│ # │ 角色编码 │ 角色名称 │ 描述 │ 状态 │
│ 1 │ ROLE_ADMIN │ 超级管理员 │ 全部权限 │ 启用 │
│ 2 │ ROLE_OPERATOR│ 运营人员 │ 日常运营 │ 启用 │
│ 3 │ ROLE_EDITOR │ 内容编辑 │ 内容审核 │ 启用 │
│──────────────────────────────────────────────────│
│ [分配权限] [编辑] [删除] │
└──────────────────────────────────────────────────┘
点击「分配权限」弹出权限树：
┌────────────────────────────────────┐
│ 角色：运营人员 │
│────────────────────────────────────│
│ ☑ 系统管理 │
│ ☑ 用户管理 │
│ ☑ 查看 ☑ 新增 ☑ 编辑 ☐ 删除│
│ ☐ 角色管理 │
│ ☐ 菜单管理 │
│ ☐ 内容管理 │
│ ☐ 系统监控 │
│────────────────────────────────────│
│ [取消] [保存权限] │
└────────────────────────────────────┘
- 角色列表：编码、名称、描述、状态、创建时间
- 权限树：el-tree 多级权限，支持全选 / 半选 / 联动
- 三级权限结构：模块 → 功能 → 操作（查看/新增/编辑/删除）
┌──────────────────────────────────────────────────┐
│ 操作用户 [____] 类型 [▼] 时间 [日期范围] │
│ [查询] [重置] [导出] │
│──────────────────────────────────────────────────│
│ # │ 用户 │ 类型 │ 模块 │ 描述 │IP │
│ 1 │admin │登录 │ 认证 │ 用户登录 │.100│
│ 2 │admin │新增 │ 用户管理 │ 新增zhangsan │.100│
│ 3 │lisi │修改 │ 角色管理 │ 改权限配置 │.52 │
│ 4 │wangwu│导出 │ 用户管理 │ 导出1024条 │.88 │
│ 5 │admin │删除 │ 用户管理 │ 删test_user │.100│
│──────────────────────────────────────────────────│
│ 共 10 条 [< 1 >] 10条/页 │
└──────────────────────────────────────────────────┘
- 多条件搜索：用户名、操作类型、时间范围
- 类型标签：登录(蓝) / 新增(绿) / 修改(橙) / 删除(红) / 导出(灰)
- 状态标签：成功 / 失败
- 耗时展示：接口响应耗时（ms）
- 导出功能：异步导出任务
┌──────────────┬───────────────────────────────────┐
│ │ [基本信息] [修改密码] [登录日志] │
│ [头像] │───────────────────────────────────│
│ 超级管理员 │ 昵称: [超级管理员 ] │
│ [超管标签] │ 手机号: [138****8888 ] │
│──────────────│ 邮箱: [admin@example.com ] │
│ 用户名: admin│ │
│ 手机号: 138**│ [保存修改] [重置] │
│ 邮箱: @ex │───────────────────────────────────│
│ 注册: 01-01 │ │
│ 登录: 14:32 │ │
└──────────────┴───────────────────────────────────┘
- 左侧信息卡：头像、昵称、角色标签、个人信息描述列表
- Tab 1 基本信息：修改昵称 / 手机号 / 邮箱
- Tab 2 修改密码：当前密码 + 新密码 + 确认密码，含强度校验
- Tab 3 登录日志：IP / 地点 / 浏览器 / 状态 / 描述 / 时间
el-result 组件，居中展示，提供返回首页按钮。
# 1. 克隆项目
git clone https://github.com/Andrew1957/admin-pro.git
cd admin-pro
# 2. 启动数据库（需要 Docker）
docker compose up -d mysql redis
# 3. 初始化数据
mysql -h127.0.0.1 -uroot -padmin123 admin_pro < backend/src/main/resources/init.sql
# 4. 启动后端
cd backend
mvn spring-boot:run
# 5. 启动前端
cd ../frontend
npm install
npm run dev访问 http://localhost:5173，默认账号 admin / 123456。
| 账号 | 密码 | 角色 |
|---|---|---|
| admin | 123456 | 超级管理员 |
| test | 123456 | 普通用户 |
admin-pro
├── backend/ Spring Boot 后端
│ ├── src/main/java/com/adminpro/
│ │ ├── AdminProApplication.java 启动类
│ │ ├── common/ 公共模块
│ │ │ ├── Result.java 统一响应封装
│ │ │ ├── ResultCode.java 状态码枚举
│ │ │ ├── PageResult.java 分页结果
│ │ │ ├── Constants.java 常量定义
│ │ │ ├── BusinessException.java 业务异常
│ │ │ └── GlobalExceptionHandler.java 全局异常处理
│ │ ├── config/ 配置类
│ │ │ ├── SecurityConfig.java Spring Security 配置
│ │ │ ├── CorsConfig.java 跨域配置
│ │ │ ├── RedisConfig.java Redis 配置
│ │ │ ├── MybatisPlusConfig.java MyBatis-Plus 配置
│ │ │ ├── MyMetaObjectHandler.java 自动填充
│ │ │ └── Knife4jConfig.java 接口文档配置
│ │ ├── security/ 安全模块
│ │ │ ├── JwtUtil.java JWT 工具类
│ │ │ ├── JwtAuthenticationFilter.java JWT 过滤器
│ │ │ └── SecurityUserDetails.java 用户详情
│ │ └── module/ 业务模块
│ │ ├── auth/controller/AuthController.java
│ │ └── system/ 系统管理
│ │ ├── controller/SysUserController.java
│ │ ├── entity/SysUser.java
│ │ ├── mapper/SysUserMapper.java
│ │ ├── service/SysUserService.java
│ │ └── dto/ 数据传输对象
│ ├── src/main/resources/
│ │ ├── application.yml 主配置
│ │ ├── application-dev.yml 开发环境配置
│ │ └── init.sql 初始化 SQL
│ ├── Dockerfile
│ └── pom.xml
├── frontend/ Vue3 前端
│ ├── src/
│ │ ├── api/ 接口层
│ │ │ ├── request.ts axios 封装
│ │ │ ├── auth.ts 认证接口
│ │ │ └── user.ts 用户接口
│ │ ├── store/
│ │ │ └── user.ts Pinia 用户状态
│ │ ├── router/
│ │ │ └── index.ts 路由 + 守卫
│ │ └── views/
│ │ ├── login/index.vue 登录页
│ │ ├── dashboard/index.vue 数据看板
│ │ ├── layout/index.vue 布局框架
│ │ ├── system/
│ │ │ ├── user/index.vue 用户管理
│ │ │ ├── role.vue 角色管理
│ │ │ ├── log.vue 操作日志
│ │ │ └── profile.vue 个人中心
│ │ └── error/404.vue 404 页
│ ├── package.json
│ ├── vite.config.ts
│ └── tsconfig.json
├── docker-compose.yml MySQL + Redis + Backend
└── README.md
# 一键启动全部服务
docker compose up -d
# 仅启动数据库
docker compose up -d mysql redis
# 重新构建后端镜像
docker compose build backendMIT