【计算机毕业设计】流浪动物救助平台 - SpringBoot+Vue

今天有个Bug2025-12-28 19:04

【计算机毕业设计】流浪动物救助平台 - SpringBoot+Vue

一、项目背景

近年来，城市流浪动物问题日益突出。许多爱心人士希望领养宠物，但缺乏可靠的信息渠道；救助组织信息发布不便；志愿者招募困难。基于这些痛点，开发了这个流浪动物救助平台。

该平台通过前后端分离架构，实现了动物信息管理、在线领养申请、志愿者招募、公告发布等核心功能，帮助更多流浪动物找到温暖的家。

二、项目概述

2.1 技术架构

  • 后端：Spring Boot 2.5.15 + MyBatis-Plus + MySQL + Redis
  • 前端：Vue 3.5.16 + Vite + Element Plus
  • 基础框架：RuoYi-Vue（提供权限管理、日志记录等基础功能）

2.2 功能模块

复制代码 
流浪动物救助平台
├── 前台服务（面向公众）
│   ├── 首页展示
│   ├── 动物列表与筛选
│   ├── 动物详情与领养申请
│   ├── 公告中心
│   ├── 志愿者报名
│   └── 用户中心
│
└── 后台管理（面向管理员）
    ├── 动物信息管理
    ├── 领养申请审核
    ├── 公告管理
    ├── 志愿者管理
    ├── 捐赠记录管理
    └── 系统管理

三、前台功能展示

3.1 首页

功能说明：

首页作为平台入口，展示了平台的核心理念和快速导航功能。主要包含：

  • 轮播图区域：展示救助成功案例、最新活动信息
  • 平台简介：介绍救助理念和服务内容
  • 快速入口：提供领养动物、志愿者报名、公告查看等快速入口

页面效果：

3.2 动物列表

功能说明：

展示所有待领养动物，支持多维度筛选查询：

  • 筛选条件：动物类型（狗/猫/其他）、体型（小/中/大）、年龄段、性别
  • 卡片展示：每只动物显示封面图、名称、品种、年龄、性别、健康状态
  • 状态标识：待领养、已领养、救助中等状态标签
  • 分页功能：支持大数据量展示

页面效果：

3.3 动物详情

功能说明：

展示单只动物的完整信息，用户可以在此页面提交领养申请：

  • 基本信息：名称、品种、年龄、性别、体重、毛色
  • 健康状况：疫苗接种记录、绝育情况、体检报告
  • 救助故事：发现地点、救助经过、性格特点描述
  • 图片轮播：多张动物照片展示
  • 领养申请：点击按钮弹出申请表单

页面效果：

3.4 领养申请表单

功能说明：

用户填写领养申请信息，提交后进入后台审核流程：

  • 申请人信息：姓名、联系方式、住址、身份证号
  • 家庭情况：住房类型、面积、家庭成员、是否有其他宠物
  • 养宠经验：是否有过养宠经历、养宠年限
  • 领养理由：为什么想领养、如何照顾动物
  • 表单验证：必填项校验、手机号格式校验、身份证格式校验

页面效果 ：

3.5 公告列表

功能说明：

发布平台动态、救助故事、活动通知：

  • 公告分类：救助动态、领养公告、活动通知、志愿者招募
  • 卡片展示：标题、类型标签、发布时间、封面图、摘要
  • 搜索功能：按标题、内容关键词搜索
  • 置顶显示：重要公告置顶展示

页面效果：

3.6 公告详情

功能说明：

展示公告完整内容，支持富文本图文混排：

  • 标题、发布时间、作者
  • 正文内容（支持图片、视频）
  • 相关公告推荐

页面效果 ：

3.7 志愿者报名

功能说明：

爱心人士在线申请成为志愿者：

  • 个人信息：姓名、性别、年龄、联系方式
  • 技能特长：动物护理、医疗知识、摄影、宣传等
  • 可参与时间：工作日/周末、具体时段
  • 申请理由：志愿服务经验、为什么想参与

页面效果 ：

3.8 用户中心

功能说明：

用户个人信息管理和服务记录查询：

  • 个人资料：头像、昵称、联系方式修改
  • 我的领养申请：查看申请记录、审核状态、审核意见
  • 我的志愿服务：志愿者报名状态、服务时长统计
  • 账号安全：密码修改

页面效果 ：

四、后台管理功能展示

4.1 动物信息管理

功能说明：

管理员对救助动物信息进行全生命周期管理：

  • CRUD操作：新增、编辑、删除、批量删除
  • 信息维护：基本信息、健康档案、救助故事、图片管理
  • 状态管理：待领养、已领养、救助中、已离世
  • 高级搜索：按名称、品种、类型、状态组合查询
  • 数据导出：导出 Excel 统计报表

4.2 领养申请审核

功能说明：

审核用户提交的领养申请，管理领养流程：

  • 申请列表：显示所有申请及状态（待审核/通过/拒绝）
  • 详情查看：申请动物信息、申请人资料、家庭情况、申请理由
  • 审核操作：通过（填写审核意见）、拒绝（填写拒绝理由）
  • 状态跟踪：记录审核时间、审核人、审核意见

4.3 公告管理

功能说明：

发布和管理平台公告、活动信息：

  • 公告发布：标题、类型、富文本编辑器、封面图上传、置顶设置
  • 内容管理：编辑、删除、批量删除
  • 预览功能：发布前预览展示效果
  • 数据统计：浏览量统计

4.4 志愿者管理

功能说明：

审核志愿者申请，管理志愿者信息：

  • 申请审核：查看报名信息、审核通过/拒绝（填写审核意见）
  • 志愿者档案：基本信息、技能特长、服务记录、志愿时长统计
  • 数据导出：导出志愿者名单和服务统计

4.5 捐赠记录管理

功能说明：

管理爱心捐赠记录，提升资金透明度：

  • 捐赠记录：捐赠人信息、金额、时间、方式、备注
  • 状态管理：待确认、已到账、已使用
  • 财务统计：总捐赠额、月度/年度统计、捐赠趋势图表

4.6 系统管理

功能说明：

基于 RuoYi 框架的完整后台管理功能：

  • 用户管理：管理员账号、前台用户管理
  • 角色管理：超级管理员、救助站管理员、审核员等角色定义
  • 菜单管理：动态配置后台菜单和权限
  • 操作日志：记录关键操作（领养审核、信息修改等）

页面效果 ：

五、技术实现

5.1 技术栈

后端技术：

  • Spring Boot 2.5.15（基础框架）
  • MyBatis-Plus 3.4.3（ORM 框架，简化 CRUD）
  • MySQL 8.0（数据库）
  • Redis 5.0+（缓存）
  • Spring Security + JWT（安全认证）

前端技术：

  • Vue 3.5.16（Composition API）
  • Vite 5.4.11（构建工具）
  • Element Plus（UI 组件库）
  • Axios（HTTP 客户端）

5.2 数据库设计

核心业务表（5张）：

sql 复制代码 
-- 动物信息表
CREATE TABLE pet_animal (
    animal_id BIGINT PRIMARY KEY AUTO_INCREMENT,
    animal_name VARCHAR(100) NOT NULL,
    animal_type VARCHAR(20),
    breed VARCHAR(50),
    age INT,
    gender VARCHAR(10),
    size VARCHAR(20),
    health_status VARCHAR(500),
    images TEXT,
    rescue_story TEXT,
    status VARCHAR(20),
    create_time DATETIME
);

-- 领养申请表
CREATE TABLE pet_adoption (
    adoption_id BIGINT PRIMARY KEY AUTO_INCREMENT,
    animal_id BIGINT,
    applicant_name VARCHAR(100),
    phone VARCHAR(20),
    address VARCHAR(200),
    status VARCHAR(20),
    review_comment TEXT,
    create_time DATETIME
);

-- 公告表
CREATE TABLE pet_announcement (
    announcement_id BIGINT PRIMARY KEY AUTO_INCREMENT,
    title VARCHAR(200),
    type VARCHAR(50),
    content TEXT,
    cover_image VARCHAR(500),
    status VARCHAR(20),
    create_time DATETIME
);

-- 志愿者表
CREATE TABLE pet_volunteer (
    volunteer_id BIGINT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100),
    phone VARCHAR(20),
    skills VARCHAR(200),
    available_time VARCHAR(200),
    status VARCHAR(20),
    service_hours DECIMAL(10,2),
    create_time DATETIME
);

-- 捐赠记录表
CREATE TABLE pet_donation (
    donation_id BIGINT PRIMARY KEY AUTO_INCREMENT,
    donor_name VARCHAR(100),
    amount DECIMAL(10,2),
    payment_method VARCHAR(50),
    status VARCHAR(20),
    create_time DATETIME
);

5.3 后端核心代码示例

以领养申请模块为例，展示完整的后端实现（Controller + Service）。

Controller 层（处理 HTTP 请求）：

java 复制代码 
package com.ruoyi.project.pet.controller;

import java.util.List;
import javax.servlet.http.HttpServletResponse;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import com.ruoyi.framework.aspectj.lang.annotation.Log;
import com.ruoyi.framework.aspectj.lang.enums.BusinessType;
import com.ruoyi.project.pet.domain.Adoption;
import com.ruoyi.project.pet.service.IAdoptionService;
import com.ruoyi.framework.web.controller.BaseController;
import com.ruoyi.framework.web.domain.AjaxResult;
import com.ruoyi.common.utils.poi.ExcelUtil;
import com.ruoyi.framework.web.page.TableDataInfo;

/**
 * 领养申请Controller
 */
@RestController
@RequestMapping("/pet/adoption")
public class AdoptionController extends BaseController {

    @Autowired
    private IAdoptionService adoptionService;

    /**
     * 查询领养申请列表（分页）
     */
    @PreAuthorize("@ss.hasPermi('pet:adoption:list')")
    @GetMapping("/list")
    public TableDataInfo list(Adoption adoption) {
        startPage();  // 启动分页
        List<Adoption> list = adoptionService.selectAdoptionList(adoption);
        return getDataTable(list);  // 返回分页结果
    }

    /**
     * 导出领养申请列表
     */
    @PreAuthorize("@ss.hasPermi('pet:adoption:export')")
    @Log(title = "领养申请", businessType = BusinessType.EXPORT)
    @PostMapping("/export")
    public void export(HttpServletResponse response, Adoption adoption) {
        List<Adoption> list = adoptionService.selectAdoptionList(adoption);
        ExcelUtil<Adoption> util = new ExcelUtil<>(Adoption.class);
        util.exportExcel(response, list, "领养申请数据");
    }

    /**
     * 获取领养申请详细信息
     */
    @PreAuthorize("@ss.hasPermi('pet:adoption:query')")
    @GetMapping(value = "/{adoptionId}")
    public AjaxResult getInfo(@PathVariable("adoptionId") Long adoptionId) {
        return success(adoptionService.selectAdoptionByAdoptionId(adoptionId));
    }

    /**
     * 新增领养申请（用户提交申请）
     */
    @PreAuthorize("@ss.hasPermi('pet:adoption:add')")
    @Log(title = "领养申请", businessType = BusinessType.INSERT)
    @PostMapping
    public AjaxResult add(@RequestBody Adoption adoption) {
        return toAjax(adoptionService.insertAdoption(adoption));
    }

    /**
     * 修改领养申请（管理员审核）
     */
    @PreAuthorize("@ss.hasPermi('pet:adoption:edit')")
    @Log(title = "领养申请", businessType = BusinessType.UPDATE)
    @PutMapping
    public AjaxResult edit(@RequestBody Adoption adoption) {
        return toAjax(adoptionService.updateAdoption(adoption));
    }

    /**
     * 删除领养申请
     */
    @PreAuthorize("@ss.hasPermi('pet:adoption:remove')")
    @Log(title = "领养申请", businessType = BusinessType.DELETE)
    @DeleteMapping("/{adoptionIds}")
    public AjaxResult remove(@PathVariable Long[] adoptionIds) {
        return toAjax(adoptionService.deleteAdoptionByAdoptionIds(adoptionIds));
    }
}

Service 层（业务逻辑处理）：

java 复制代码 
package com.ruoyi.project.pet.service.impl;

import java.util.List;
import com.ruoyi.common.utils.DateUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.ruoyi.project.pet.mapper.AdoptionMapper;
import com.ruoyi.project.pet.domain.Adoption;
import com.ruoyi.project.pet.service.IAdoptionService;

/**
 * 领养申请Service业务层处理
 */
@Service
public class AdoptionServiceImpl implements IAdoptionService {

    @Autowired
    private AdoptionMapper adoptionMapper;

    /**
     * 查询领养申请详情
     */
    @Override
    public Adoption selectAdoptionByAdoptionId(Long adoptionId) {
        return adoptionMapper.selectAdoptionByAdoptionId(adoptionId);
    }

    /**
     * 查询领养申请列表
     */
    @Override
    public List<Adoption> selectAdoptionList(Adoption adoption) {
        return adoptionMapper.selectAdoptionList(adoption);
    }

    /**
     * 新增领养申请
     */
    @Override
    public int insertAdoption(Adoption adoption) {
        adoption.setCreateTime(DateUtils.getNowDate());
        return adoptionMapper.insertAdoption(adoption);
    }

    /**
     * 修改领养申请（审核时调用）
     */
    @Override
    public int updateAdoption(Adoption adoption) {
        adoption.setUpdateTime(DateUtils.getNowDate());
        return adoptionMapper.updateAdoption(adoption);
    }

    /**
     * 批量删除领养申请
     */
    @Override
    public int deleteAdoptionByAdoptionIds(Long[] adoptionIds) {
        return adoptionMapper.deleteAdoptionByAdoptionIds(adoptionIds);
    }

    /**
     * 删除单个领养申请
     */
    @Override
    public int deleteAdoptionByAdoptionId(Long adoptionId) {
        return adoptionMapper.deleteAdoptionByAdoptionId(adoptionId);
    }
}

技术要点：

  • @PreAuthorize 注解实现权限控制
  • startPage() 启动 PageHelper 分页插件
  • @Log 注解记录操作日志
  • ExcelUtil 实现 Excel 导出

5.4 前端核心代码示例

API 封装 （src/api/pet/adoption.js）：

javascript 复制代码 
import request from '@/utils/request'

// 查询领养申请列表
export function listAdoption(query) {
  return request({
    url: '/pet/adoption/list',
    method: 'get',
    params: query
  })
}

// 查询领养申请详细
export function getAdoption(adoptionId) {
  return request({
    url: '/pet/adoption/' + adoptionId,
    method: 'get'
  })
}

// 新增领养申请
export function addAdoption(data) {
  return request({
    url: '/pet/adoption',
    method: 'post',
    data: data
  })
}

// 修改领养申请（审核）
export function updateAdoption(data) {
  return request({
    url: '/pet/adoption',
    method: 'put',
    data: data
  })
}

// 删除领养申请
export function delAdoption(adoptionId) {
  return request({
    url: '/pet/adoption/' + adoptionId,
    method: 'delete'
  })
}

页面组件（Vue 3 Composition API）：

vue 复制代码 
<template>
  <div class="adoption-management">
    <!-- 搜索栏 -->
    <el-form :inline="true" :model="queryParams">
      <el-form-item label="状态">
        <el-select v-model="queryParams.status" placeholder="请选择" clearable>
          <el-option label="待审核" value="pending" />
          <el-option label="已通过" value="approved" />
          <el-option label="已拒绝" value="rejected" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-table v-loading="loading" :data="adoptionList">
      <el-table-column label="申请ID" prop="adoptionId" width="100" />
      <el-table-column label="申请人" prop="applicantName" />
      <el-table-column label="动物名称" prop="animalName" />
      <el-table-column label="联系电话" prop="phone" />
      <el-table-column label="申请时间" prop="createTime" width="180" />
      <el-table-column label="状态" prop="status" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 'pending'" type="warning">待审核</el-tag>
          <el-tag v-else-if="scope.row.status === 'approved'" type="success">已通过</el-tag>
          <el-tag v-else type="danger">已拒绝</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="text" @click="handleView(scope.row)">查看</el-button>
          <el-button type="text" @click="handleApprove(scope.row)"
                     v-if="scope.row.status === 'pending'">通过</el-button>
          <el-button type="text" @click="handleReject(scope.row)"
                     v-if="scope.row.status === 'pending'">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { listAdoption, updateAdoption } from '@/api/pet/adoption'
import { ElMessage, ElMessageBox } from 'element-plus'

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  status: null
})

const adoptionList = ref([])
const total = ref(0)
const loading = ref(false)

// 查询列表
const getList = () => {
  loading.value = true
  listAdoption(queryParams.value).then(response => {
    adoptionList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

// 搜索
const handleQuery = () => {
  queryParams.value.pageNum = 1
  getList()
}

// 重置
const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    status: null
  }
  getList()
}

// 审核通过
const handleApprove = (row) => {
  ElMessageBox.prompt('请输入审核意见', '审核通过', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /.+/,
    inputErrorMessage: '请输入审核意见'
  }).then(({ value }) => {
    const data = {
      adoptionId: row.adoptionId,
      status: 'approved',
      reviewComment: value
    }
    updateAdoption(data).then(() => {
      ElMessage.success('审核成功')
      getList()
    })
  })
}

// 审核拒绝
const handleReject = (row) => {
  ElMessageBox.prompt('请输入拒绝理由', '审核拒绝', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /.+/,
    inputErrorMessage: '请输入拒绝理由'
  }).then(({ value }) => {
    const data = {
      adoptionId: row.adoptionId,
      status: 'rejected',
      reviewComment: value
    }
    updateAdoption(data).then(() => {
      ElMessage.success('已拒绝')
      getList()
    })
  })
}

onMounted(() => {
  getList()
})
</script>

技术要点：

  • 使用 Composition API（<script setup>）
  • ref 定义响应式数据
  • ElMessageBox.prompt 实现交互式审核
  • Element Plus 组件（表格、分页、标签等）

六、部署说明

6.1 环境要求

  • JDK 1.8+
  • MySQL 5.7+ / 8.0
  • Redis 3.0+
  • Maven 3.6+
  • Node.js 16+

6.2 后端部署

bash 复制代码 
# 1. 导入数据库
mysql -u root -p
CREATE DATABASE ry_single DEFAULT CHARACTER SET utf8mb4;
USE ry_single;
SOURCE sql/ry_20250522.sql;

# 2. 修改配置文件
vim src/main/resources/application-druid.yml
# 配置数据库连接和 Redis

# 3. 打包运行
mvn clean package -DskipTests
java -jar target/pet-system.jar

6.3 前端部署

bash 复制代码 
# 1. 安装依赖
cd vue3-web
yarn install

# 2. 开发环境
yarn dev

# 3. 生产构建
yarn build:prod

# 4. 使用 Nginx 部署 dist 目录

七、总结

本文分享了流浪动物救助平台的完整实现过程，涵盖了前后台的主要功能模块。通过 Spring Boot + Vue 3 前后端分离架构，实现了动物管理、领养申请、志愿者招募等核心业务。

🔥毕设/课设/大作业救急！Java全栈、Python、深度学习、环境配置

被课程项目折磨？被毕设折磨？环境配了一天全是红字报错？系统跑不起来？

🤝 找我，帮你搞定！ 无论是从零开发，还是在现有代码上改功能，通通没问题。

🚀 我能帮你做什么？

做系统： Java SpringBoot + Vue/React，各类管理系统、商城、小程序。

配环境： 无论是 Java JDK, MySQL, Redis，还是 Python 深度学习 (Anaconda, PyTorch) 环境，远程帮你装好，不仅能用，还教你怎么用！

改Bug： 代码报错、数据库连不上、页面显示异常，专治疑难杂症。

💡 为什么选我？

交付全套： 源码 + 数据库 + 部署文档，毕业论文啥都不缺。

全程指导： 不懂代码没关系，我教你如何启动，如何演示。

价格良心： 学生党友好，只有大概想法也能聊。

💡 学校任务搞不定？找我代劳，省时省心！

👇 这里的坑我来填，你只管过：

联系方式：

需要源码和任意论文、技术文档或者项目定制开发，处理疑难杂症，文章下方二维码联系我

欢迎大家点赞、收藏、关注、评论啦 ！

相关推荐
码农学院2 小时前
Mysql 中的性能调优方法
数据库·mysql
韩立学长2 小时前
【开题答辩实录分享】以《基于SSM的电影售票管理系统的设计与实现》为例进行选题答辩实录分享
java·spring·servlet
UrSpecial2 小时前
MySQL索引
数据库·mysql
骑着bug的coder2 小时前
第7讲：索引（下）——失效场景与优化实战
后端·mysql
程序员阿鹏2 小时前
@Autowired和@Resource的区别
java·开发语言·spring
FixPng4 小时前
【数据库】MySQL基于MyCAT分库分表
数据库·mysql
哈里谢顿4 小时前
千万级订单表新增字段应该如何做？操作小结
mysql
小曹要微笑4 小时前
MySQL的TRIM函数
android·数据库·mysql
热门推荐
01GitHub 镜像站点02从快手“12·22”直播攻击事件看：一次教科书式的业务层饱和攻击03电脑检测软件—图吧工具箱04Web安全中SQL注入绕过WAF的具体手法和实战案例05Linux下V2Ray安装配置指南063D 圣诞树网页代码07UV安装并设置国内源08SQLmap 完整使用指南：环境搭建 + 命令详解 + 实操案例09jdk21下载、安装（Windows、Linux、macOS）10在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）