宠物领养平台 —— 基于Spring Boot + Vue的Web应用

一、项目概述

1.1 项目背景

随着城市化进程不断加快，流浪动物问题日益突出。越来越多的城市居民希望通过“以领养代替购买”的方式，为流浪动物提供一个温暖的家。然而，现有的宠物领养渠道（如微信群、朋友圈、贴吧等）存在信息分散、审核流程不透明、领养效率低下等问题，救助站也缺乏统一的信息管理工具。

基于此背景，我开发了一个宠物领养平台，旨在连接救助站与领养者，实现宠物信息发布、领养申请提交和审核管理的全流程信息化。

1.2 项目功能

本系统主要面向三类用户：访客、普通用户和管理员。

1.3 技术栈

二、核心界面展示

2.1 首页

首页是平台的入口，包含宣传横幅和待领养宠物卡片列表。每个卡片展示宠物的照片、名称、种类、年龄、性别、健康状况和简要描述。用户点击卡片或“查看详情”按钮即可进入详情页。导航栏根据用户登录状态动态显示“登录/注册”或“个人中心/退出登录”。

关键代码：首页使用 Vue.js 的v-for指令遍历宠物列表渲染卡片，通过axios调用后端/api/pet/available接口获取待领养宠物数据。

2.2 宠物详情页

宠物详情页集中展示某一只宠物的完整信息，包括大尺寸照片、名称、年龄、性别、种类、健康状况和详细描述。页面底部提供“提交领养申请”按钮，如果宠物已被领养，该按钮会自动禁用并显示提示。

关键代码：页面通过 URL 参数（?id=xxx）获取宠物ID，调用/api/pet/detail/{id}接口加载宠物数据。

2.3 提交领养申请

用户登录后，在宠物详情页点击“提交领养申请”进入此页面。需要填写真实姓名、联系电话（11位手机号格式验证）和居住情况。提交后，系统生成一条“待审核”的申请记录，等待管理员处理。用户可在个人中心查看申请进度。

关键代码：表单提交前进行前端校验（姓名非空、手机号格式），通过后调用/api/apply接口提交申请。

2.4 个人中心

个人中心

个人中心是用户管理个人信息和查看领养记录的地方。左侧为功能菜单，右侧展示用户信息（用户名、手机号、身份、注册时间）和所有领养申请记录。每条申请记录显示宠物名称、申请时间、联系电话和审核状态，状态以不同颜色的标签呈现（待审核-黄色、已通过-绿色、已驳回-红色）。

关键代码：页面加载时调用/api/user/center接口获取用户信息和申请列表，根据status字段动态渲染标签颜色。

2.5 管理员后台

管理员后台是系统管理的核心，包含四个主要模块：

控制台：展示注册用户数、领养申请数、待审核申请数和宠物总数，方便快速了解平台运营状况。

用户管理：支持按用户名/手机号搜索用户，可修改和删除用户信息，也可将普通用户设为管理员。

领养审核：列出所有领养申请，管理员可对待审核的申请进行“通过”或“驳回”操作。审核通过后，宠物状态自动更新为“已领养”。

宠物管理：支持添加新宠物（填写名称、种类、年龄、性别、健康状况、图片URL和描述），以及修改和删除已有宠物信息。

关键代码：后台使用 Element UI 的 Table 组件展示数据列表，通过 Dialog 组件实现新增和修改表单，所有操作通过 axios 调用后端 API 完成。

三、技术要点

3.1 前后端分离架构

本系统采用前后端分离架构，前端通过 axios 发送 HTTP 请求调用后端 RESTful API，后端返回 JSON 格式的统一响应（{"code":1,"msg":"成功","data":{}}）。前后端可独立开发和部署，后端 API 也可复用于移动端。

3.2 JWT 登录认证

系统使用 JWT（JSON Web Token）实现用户身份认证。用户登录成功后，后端生成包含用户ID和角色信息的令牌返回前端，前端保存在 LocalStorage 中。后续请求在请求头中携带该令牌，后端通过过滤器验证令牌有效性，实现统一登录校验，无需在服务端存储 Session。

3.3 三层架构设计

后端严格遵循 Controller-Service-DAO 三层架构：Controller 层接收请求和参数校验，Service 层处理核心业务逻辑，DAO 层使用 Spring JdbcTemplate 执行数据库操作。各层职责清晰，便于代码维护和单元测试。

四、视频展示