1. 项目背景与意义
随着城市化进程的加快，流浪动物数量逐年增多，流浪动物的救助、领养与管理成为社会关注的热点问题。传统的流浪动物管理方式多依赖线下登记、纸质档案和人工统计，存在信息不透明、领养流程繁琐、数据难以追溯等痛点。
本项目基于SpringBoot和Vue构建流浪动物管理网站，旨在为救助站、志愿者和领养人提供一个统一的信息化管理平台。通过线上化的动物档案管理、领养申请审核、志愿者活动发布等功能，能够有效提升流浪动物救助工作的效率与透明度，推动“领养代替购买”理念的落地。
2. 系统技术栈
本系统采用前后端分离架构，前端使用Vue框架，后端使用SpringBoot框架，数据库选用MySQL，整体技术栈如下：
| 层次 | 技术选型 | 说明 |
|---|---|---|
| 前端框架 | Vue 3 + Element Plus | 组件化开发，提供丰富的UI组件 |
| 前端构建 | Vite | 快速启动与热更新 |
| 后端框架 | SpringBoot 2.7 | 简化配置，快速构建RESTful服务 |
| 持久层 | MyBatis-Plus | 简化数据库操作，支持分页查询 |
| 数据库 | MySQL 8.0 | 存储用户、动物、领养申请等数据 |
| 权限认证 | Spring Security + JWT | 实现登录认证与接口鉴权 |
| 文件存储 | 本地存储 / OSS | 存储动物图片等静态资源 |
3. 系统功能模块设计
系统面向管理员、救助站工作人员和普通用户三类角色，主要功能模块如下：
- 用户管理模块：用户注册、登录、个人信息维护、密码修改。
- 动物管理模块：流浪动物的录入、编辑、下架，支持图片上传与状态标记（待领养、已领养、治疗中）。
- 领养申请模块：用户提交领养申请，工作人员审核，审核结果通知。
- 志愿者活动模块：发布救助活动、用户报名参与、活动记录管理。
- 公告资讯模块：发布平台公告与养宠知识文章。
- 数据统计模块：按月份统计动物救助数量、领养成功率等指标。
4. 数据库设计
系统核心数据表包括用户表、动物表、领养申请表、活动表和公告表。以下为动物表的主要字段设计：
CREATE TABLE animal ( id BIGINT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50) NOT NULL COMMENT '动物名称', species VARCHAR(20) NOT NULL COMMENT '物种：猫/狗', breed VARCHAR(50) COMMENT '品种', gender TINYINT COMMENT '性别：0未知 1公 2母', age INT COMMENT '年龄（月）', health_status VARCHAR(100) COMMENT '健康状况', status TINYINT DEFAULT 0 COMMENT '状态：0待领养 1已领养 2治疗中', cover_image VARCHAR(255) COMMENT '封面图片URL', description TEXT COMMENT '详细描述', create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ) COMMENT '流浪动物信息表';5. 核心代码实现
5.1 后端：动物实体类
@Data @TableName("animal") public class Animal { @TableId(type = IdType.AUTO) private Long id; private String name; private String species; private String breed; private Integer gender; private Integer age; private String healthStatus; private Integer status; private String coverImage; private String description; private LocalDateTime createTime; private LocalDateTime updateTime; }5.2 后端：动物查询接口
@RestController @RequestMapping("/api/animal") public class AnimalController { @Autowired private AnimalService animalService; @GetMapping("/list") public Result<Page<Animal>> list(@RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "10") Integer size, @RequestParam(required = false) String species, @RequestParam(required = false) Integer status) { Page<Animal> pageParam = new Page<>(page, size); LambdaQueryWrapper<Animal> wrapper = new LambdaQueryWrapper<>(); if (StringUtils.hasText(species)) { wrapper.eq(Animal::getSpecies, species); } if (status != null) { wrapper.eq(Animal::getStatus, status); } wrapper.orderByDesc(Animal::getCreateTime); return Result.success(animalService.page(pageParam, wrapper)); } }5.3 前端：动物列表页面
<template> <div class="animal-list"> <el-card v-for="item in animals" :key="item.id" class="animal-card"> <img :src="item.coverImage" class="animal-img" /> <div class="animal-info"> <h3>{{ item.name }}</h3> <p>品种：{{ item.breed }}｜年龄：{{ item.age }}个月</p> <el-tag :type="statusType(item.status)">{{ statusText(item.status) }}</el-tag> <el-button type="primary" size="small" @click="applyAdopt(item.id)">申请领养</el-button> </div> </el-card> </div> </template> <script setup> import { ref, onMounted } from 'vue' import { getAnimalList } from '@/api/animal' const animals = ref([]) const loadData = async () => { const res = await getAnimalList({ page: 1, size: 12 }) animals.value = res.data.records } onMounted(loadData) </script>5.4 前端：领养申请提交
// api/animal.js import request from '@/utils/request' export function getAnimalList(params) { return request({ url: '/api/animal/list', method: 'get', params }) } export function applyAdopt(animalId, form) { return request({ url: '/api/adopt/apply', method: 'post', data: { animalId, ...form } }) }6. 系统亮点与总结
本系统通过SpringBoot与Vue的前后端分离架构，实现了流浪动物管理的信息化与流程化。系统具备以下亮点：
- 流程规范：领养申请、审核、结果反馈全流程线上化，数据可追溯。
- 界面友好：基于Element Plus的组件化界面，操作简单，适合非技术用户使用。
- 扩展性强：模块化设计便于后续接入支付捐赠、地图定位、消息推送等功能。
未来可进一步引入AI图像识别辅助动物品种分类，并结合微信小程序拓展移动端入口，让更多爱心人士便捷地参与到流浪动物救助中来。
