宠物领养平台 —— 基于Spring Boot Vue的Web应用一、项目概述1.1 项目背景随着城市化进程不断加快流浪动物问题日益突出。越来越多的城市居民希望通过“以领养代替购买”的方式为流浪动物提供一个温暖的家。然而现有的宠物领养渠道如微信群、朋友圈、贴吧等存在信息分散、审核流程不透明、领养效率低下等问题救助站也缺乏统一的信息管理工具。基于此背景我开发了一个宠物领养平台旨在连接救助站与领养者实现宠物信息发布、领养申请提交和审核管理的全流程信息化。1.2 项目功能本系统主要面向三类用户访客、普通用户和管理员。用户角色主要功能访客浏览首页、查看宠物列表、查看宠物详情、注册账号普通用户登录系统、提交领养申请、查看个人中心个人信息 领养记录管理员登录后台、控制台数据概览、用户管理增删改查、宠物管理增删改查、领养申请审核通过/驳回1.3 技术栈层级技术版本说明后端框架Spring Boot2.7.14IoC容器、自动配置、Web MVC后端语言Java8主要开发语言数据库MySQL8.0数据存储数据访问Spring JDBC2.7.14JdbcTemplate操作数据库前端框架Vue.js2.7.14响应式UI构建前端UIElement UI2.15.14UI组件库HTTP客户端Axios1.6.7前后端通信认证机制JWT0.9.1用户身份验证构建工具Maven3.8项目构建和依赖管理二、核心界面展示2.1 首页首页是平台的入口包含宣传横幅和待领养宠物卡片列表。每个卡片展示宠物的照片、名称、种类、年龄、性别、健康状况和简要描述。用户点击卡片或“查看详情”按钮即可进入详情页。导航栏根据用户登录状态动态显示“登录/注册”或“个人中心/退出登录”。关键代码首页使用 Vue.js 的v-for指令遍历宠物列表渲染卡片通过axios调用后端/api/pet/available接口获取待领养宠物数据。2.2 宠物详情页宠物详情页集中展示某一只宠物的完整信息包括大尺寸照片、名称、年龄、性别、种类、健康状况和详细描述。页面底部提供“提交领养申请”按钮如果宠物已被领养该按钮会自动禁用并显示提示。关键代码页面通过 URL 参数?idxxx获取宠物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 登录认证系统使用 JWTJSON Web Token实现用户身份认证。用户登录成功后后端生成包含用户ID和角色信息的令牌返回前端前端保存在 LocalStorage 中。后续请求在请求头中携带该令牌后端通过过滤器验证令牌有效性实现统一登录校验无需在服务端存储 Session。3.3 三层架构设计后端严格遵循 Controller-Service-DAO 三层架构Controller 层接收请求和参数校验Service 层处理核心业务逻辑DAO 层使用 Spring JdbcTemplate 执行数据库操作。各层职责清晰便于代码维护和单元测试。四、视频展示屏幕录制 2026-07-08 194701
