Spring Boot3 + Vue3 实战：宠物领养三端管理系统（含踩坑复盘）
Spring Boot3 + Vue3 实战：宠物领养三端管理系统（含踩坑复盘）
Spring Boot Vue3 MyBatis-Plus JWT Element Plus 前后端分离 实战项目
适合读者：已了解 Java Web / Vue 基础，想做一个带多角色权限和复杂业务流程的完整练手项目。
目录
一、项目能学到什么
这是一个三端分离、角色权限清晰、业务流程可追溯的完整 Web 项目，主要学习点包括：
二、系统功能概览
系统拆分为三个独立前端入口，共用后端 REST API：
| 领养者端 | /、/pets 等 | ADOPTER | 浏览宠物、收藏、培训确认、提交领养申请、进度跟踪、回访材料、申诉、捐赠、志愿 |
| 机构端 | /shelter/** | SHELTER | 工作台 KPI、动物档案、领养审核与回访、医疗台账、物资、志愿活动、放归 TNR |
| 管理端 | /admin/** | ADMIN | 总站看板、机构启停与审核、用户黑名单、全站领养督导、申诉仲裁、公告与配置 |
三端职责对照（重点）：
| 领养申请主审 | 提交 | 主审 | 督导（只读） |
| 申诉 | 发起 | 可发起（如跨机构协调） | 仲裁 |
| 宠物档案 | 浏览 | 本机构维护 | 全局管理 |
| 机构入驻 | — | 注册使用 | 账号 / 资料审核 |
| 黑名单 | — | — | 设置 |
三、技术栈与项目结构
3.1 技术选型
| 后端框架 | Spring Boot | 3.2.6 |
| ORM | MyBatis-Plus | 3.5.7 |
| 安全 | Spring Security + JWT | 6.x / 0.12.x |
| 前端框架 | Vue 3 + Pinia + Vite | 3.3.x / 4.4.x |
| UI 组件 | Element Plus + ECharts | 2.3.x / 5.4.x |
| 数据库 | MySQL | 8.0+ |
架构特点：
- B/S、前后端分离，接口统一响应：{ \”code\”: 200, \”message\”: \”…\”, \”data\”: … }
- 管理员不单独建实体表，通过 user.role 区分（ADOPTER / SHELTER / ADMIN）
- 机构账号绑定 user.shelter_id，机构端 API 按机构隔离数据
- 分页参数 size 前后端统一上限 100
3.2 目录结构
pet-adoption/
├── backend/ # Spring Boot 后端
│ └── src/main/java/com/petadoption/
│ ├── config/ # Jackson、Security 等配置
│ ├── controller/ # R
