SpringBoot与Vue.js构建的流浪宠物救助系统设计与实践

1. 项目背景与核心价值

流浪宠物救助一直是社会关注的公益热点，但传统救助模式存在信息不对称、流程不透明、资源分配不均等问题。去年我在参与本地动物保护组织活动时，亲眼目睹志愿者用Excel表格手动记录上百只流浪猫狗信息，领养申请全靠微信群沟通，经常出现信息遗漏和重复劳动。这促使我开发这套基于SpringBoot和Vue.js的数字化救助系统，经过三个月的迭代和两个救助站的实测运行，目前日均处理救助申请30+次，领养匹配成功率提升40%。

系统采用RBAC（基于角色的访问控制）模型，将参与者划分为管理员、志愿者和普通用户三类角色。这种设计源于实际业务中的权限隔离需求——救助站工作人员需要审核权限、志愿者需要任务执行权限、公众只需要基础交互权限。前后端分离架构让移动端志愿者能实时更新任务状态，而管理员在PC端可以即时查看数据看板。

2. 技术架构设计解析

2.1 后端技术栈选型

选择SpringBoot 2.7作为后端框架主要考虑三点：一是其自动配置特性快速集成Spring Security和JWT，二是内嵌Tomcat简化部署，三是丰富的Starter依赖。实测在2核4G的云服务器上，单个实例能稳定支撑500+并发请求。

权限控制采用改良的RBAC模型：

java复制// 权限注解示例
@PreAuthorize("hasRole('VOLUNTEER') and @petService.canOperatePet(#petId)")
public ResponseEntity<PetInfo> updatePetStatus(@PathVariable Long petId) {
    // 志愿者只能修改自己负责的宠物状态
}

数据库设计遵循"事件溯源"模式，关键表包括：

• pet_operation_log：记录所有状态变更
• task_distribution：志愿者任务关系
• adoption_application：领养申请流水

2.2 前端工程化实践

Vue 3的组合式API更适合复杂交互场景，比如领养申请的多步骤表单：

vue复制<script setup>
const formSteps = [
  { title: '基本信息', fields: [...] },