简介基于Springboot与Vue的宠物领养系统毕业设计项目包面向计算机专业毕业生或需完成期末项目的学生提供一套可独立运行、便于答辩演示的前后端分离方案。项目已获导师认可答辩评审97分在Windows10/11环境下严格调试配合部署文档即可运行适合作为高分毕设模板或实战练习。资源共749个文件约62.68MB以124个Java源码、42个Vue组件及配套JS/CSS等前端资源为主同时包含SQL数据库脚本、开题报告、使用文档、答辩PPT、演示视频以及安装、构建、启动辅助脚本覆盖从环境准备到部署上线的完整链路。目前已有401人学习。获取后可获得可直接编译运行的项目代码、数据库初始化脚本、完整文档与答辩材料通过演示视频可快速熟悉系统流程与答辩讲解要点节省搭建与排错时间便于直接参考复用。1. 为什么 SpringbootVue 宠物领养系统是高分毕设的稳妥答案如果你问十个用过它的人“Java毕业设计-基于SpringbootVue宠物领养系统源码数据库PPT开题报告使用文档演示视频高分项目到底值得不值得”大多数人的答案不是“代码多难写”而是“演示闭环太完整了”。这个项目把毕设要交的所有东西一次配齐后端 Springboot 接口、前端 Vue 页面、数据库脚本连开题报告和演示视频都给你搭好了框架。答辩老师最看重的不是你会不会背八股文而是能不能把“注册登录→浏览宠物→提交领养申请→管理员审核→领养成功”这条链路完整讲清楚。对 Java 基础一般、又想尽快拿出可演示作品的毕业生来说这套项目最大的价值是把“能跑”变成“能讲”而“能讲”才是打分的关键。2. 先把选题拆明白宠物领养系统的功能边界与数据模型很多同学拿到这套项目第一反应是找代码、跑起来这其实是最容易翻车的顺序。任何 SpringbootVue 项目第一步都应该是把角色、状态、表结构想明白。别看宠物领养系统听起来简单它比纯增删改查多了一个关键业务域——领养申请的状态管理。这一节我们把功能边界和数据模型一起理顺后面写接口、写页面才有依据。2.1 三类核心用户领养人、管理员、系统边界宠物领养系统里最少要有三个参与方游客、注册用户、管理员。游客只能看宠物列表注册用户能提交领养申请、查看自己的申请进度、取消未审核的申请管理员负责宠物上架下架、审核领养申请、维护用户列表。在演示项目里管理员账号一般预置在数据库里比如 admin/admin123这比现场注册再改角色要快得多。权限设计上常见做法是前端用 Vue 路由守卫控制页面入口后端用拦截器控制接口访问。注意一点前端藏按钮只是用户体验后端接口必须再验一次角色否则答辩老师只要多问一句“直接调接口能不能越权”你就容易答不上来。有些资料会把宠物管理员和系统管理员拆成两个角色但毕设体量不建议拆。角色越多页面和接口的重复代码越多答辩时反而不好讲。一个 user 表加 role 字段角色就两个普通用户、管理员足够覆盖演示场景。2.2 领养申请状态机从提交到回访的五种状态领养申请是整个系统的业务核心它不能用一个“是否通过”的布尔字段糊弄。我见过不少项目把状态只做成 0 和 1结果演示时出现“一只已经被领养的宠物还能被再次申请”的尴尬局面。正确做法是画一个状态机pending待审核、approved审核通过、rejected已拒绝、adopted已领养、closed已关闭。这里的关键流转规则三条用户提交申请后状态为 pending管理员审核通过后变为 approved同时宠物状态改为“已被预领养”防止别人再申请用户在线下完成交接后管理员把申请置为 adopted宠物状态改为“已领养”。rejected 和 closed 是终态不能再流转到 pending。closed 通常用来处理长时间未完成线下交接的单子或者用户主动取消的申请。把状态机写进开题报告的“业务流程”一节是答辩加分的第一个点。老师看到你用了状态机思想而不是三个 if 判断会认为你有基本的业务建模能力。实现上不需要引入工作流引擎一张 application 表加一个 status 字段就够。2.3 数据库最小表集合六张表搭起完整业务闭环数据库脚本是毕设评分里权重很高的一块。下面这组表结构是我按最稳妥的通用方案整理的既覆盖演示需求又不会让 ER 图复杂到讲不清。表名核心字段用途userid、username、password、role、phone、avatar、status登录账号与角色petid、name、type、breed、age、gender、health_status、status、image、description宠物信息与上架状态applicationid、user_id、pet_id、status、reason、reject_reason、apply_time、update_time领养申请与审核记录adoption_recordid、application_id、adopt_time、remark交接完成的领养档案feedbackid、application_id、user_id、content、create_time领养后回访/反馈commentid、pet_id、user_id、content、create_time宠物留言可选加分项user.id 和 pet.id 都用自增主键application 表对 user_id、pet_id 各建一个普通索引避免联表查询时扫描全表。推荐用 MyBatis-Plus 的分页插件配合 Page 对象做列表分页Springboot 集成 mybatis-plus 的分页配置是这几行Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }这个配置不加分页查询只会返回全部数据而不会真的分页属于高频翻车点。参数只有一个 DbType.MYSQL它告诉分页插件按 MySQL 的 LIMIT 语法生成 SQL。字段命名统一用下划线比如 apply_time、adopt_time让 map-underscore-to-camel-case 自动映射为 applyTime、adoptTime。创建时间字段一律用 datetime不要用 timestamp后者有时区坑具体在第五章避坑里细说。数据库脚本里要预置两种角色账号、五只宠物、两条不同状态的申请记录这些演示数据直接决定你演示视频能否一次录成。3. 从空项目到可演示Springboot 后端与 Vue 前端的落地步骤把数据模型定好之后就可以从头搭工程了。这一章我按“后端能起服务、前端能调通接口”的目标来写每一步都给出最小可运行配置。这个项目的前后端分离意味着前后端可以分开启动联调时只需要注意代理、跨域、时间格式三个参数几乎不会卡死。3.1 后端骨架Springboot 工程与 MyBatis-Plus 的最小配置先建 Springboot 工程Java 版本用 8 或 11Springboot 版本建议 2.7.x兼容性最好。依赖引入 spring-boot-starter-web、mybatis-plus-boot-starter、mysql-connector-java、jjwt、poi、lombok。资源配置文件 application.yml 是最先要写对的东西也是启动报错重灾区server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/pet_adoption?useSSLfalseserverTimezoneAsia/ShanghaicharacterEncodingutf8mb4 username: root password: root servlet: multipart: max-file-size: 5MB max-request-size: 20MB mybatis-plus: mapper-locations: classpath:/mapper/*.xml configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: id-type: auto这里的参数一个都不能删useSSLfalse 是关掉 MySQL 连接时的 SSL 握手避免本地环境报警告甚至连不上serverTimezoneAsia/Shanghai 解决数据库时间比中国时间少 8 小时的问题characterEncodingutf8mb4 保证宠物描述里的 emoji 和特殊字符不乱码。max-file-size 默认只有 1MB宠物图片通常超过这个值不调大接口会直接报文件大小超限属于“看起来是代码问题、其实是配置问题”的典型。mapper-locations 指定了 XML 文件位置如果项目里没有 XML也要保留这个配置否则报 invalid bound statement。log-impl 配成 StdOutImpl 能把 SQL 打印到控制台联调时看参数特别好用正式部署再关掉。3.2 用 JWT 把登录态和角色校验串起来宠物领养系统没有 session 场景前端是 Vue后端是纯接口最佳实践是用 JWT 做登录态。登录接口校验用户名密码后签发 token前端把 token 存在 localStorage之后每次请求在 Authorization 头里带回来。后端用一个拦截器统一解析 token解析失败直接返回 401。拦截器的核心代码长这样Component public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (OPTIONS.equalsIgnoreCase(request.getMethod())) { return true; } String token request.getHeader(Authorization); if (token ! null token.startsWith(Bearer )) { try { Integer userId JwtUtil.parseToken(token.replace(Bearer , )); request.setAttribute(userId, userId); return true; } catch (Exception e) { // token 过期或签名错误 } } response.setStatus(401); response.setContentType(application/json;charsetutf-8); response.getWriter().write({\code\:401,\message\:\未登录或登录已过期\}); return false; } }逻辑说明这段代码先把 OPTIONS 请求直接放行因为浏览器跨域预检不会带自定义 Authorization 头不放过它就会被跨域拦死。然后是取 token、解析 token、把 userId 塞进 request 属性方便后续 Controller 直接取当前登录用户。所有需要登录的接口都走这个拦截器比如提交领养申请、查看我的申请、上传宠物图片。角色校验不在这个拦截器里做。我一般会再写一个 RequireRole 注解标注在管理员接口上再用一个 AOP 切面检查 request 里的用户角色。答辩时如果老师问“普通用户能不能直接访问管理员接口”你可以回答拦截器管登录注解管角色两层都校验。3.3 Vue3 Element Plus 页面骨架与 Axios 接口封装前端部分用 Vue3 Element Plus Vite 是标配。先做一张最关键的工程图登录页、注册页、宠物列表页、宠物详情页、领养申请页、我的申请页、后台管理页。管理页里再拆宠物管理、申请审核、领养记录三个 Tab。接口请求不能每个页面都写一遍 axios必须封装成一个模块统一处理 token 注入和 401 跳转import axios from axios const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer token } return config }) request.interceptors.response.use( response { const res response.data if (res.code 200) { return res.data } return Promise.reject(new Error(res.message || 请求失败)) }, error { if (error.response error.response.status 401) { localStorage.removeItem(token) window.location.href /login } return Promise.reject(error) } ) export default request这个封装有几个约定后端统一返回 { code, message, data } 结构code 为 200 时才取 data业务错误走 Promise.reject由页面里的 catch 统一提示HTTP 401 表示登录过期直接清空 token 并跳登录页。这套约定能让前端代码少写很多 if。Vue 路由这里有个容易被忽略的小知识点带动态参数的详情页比如 /pet/:id在导航切换时组件会复用不会重新走 created需要加 watch 监听 route.params.id 变化去重新请求接口。这就是热搜里经常提到的“vue 路由参数”变更刷新问题毕设演示时如果从详情页切到另一个详情页发现数据没变就是这里没处理。3.4 前后端联调三件套代理、跨域、时间格式后端在 8080 端口Vite 开发服务器默认在 5173 或 3000直接发请求必然跨域。开发阶段最省事的方式不是在后端写 CorsFilter而是让 Vite 做代理// vite.config.js export default defineConfig({ server: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })注意这个配置的含义前端请求 /api/pet/listVite 会把请求转发到 http://localhost:8080/api/pet/list。后端接口路径里要带 /api 前缀两边约定好。changeOrigin 必须为 true否则后端反查域名时可能拦截请求。时间格式是另一个高频坑。后端返回的 LocalDateTime 默认序列化成 “2024-06-01T10:30:00” 这种带 T 的格式Element Plus 的日期组件不一定能正确显示。在后端配置里统一处理spring: jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: Asia/Shanghaidate-format 只对 java.util.Date 生效对 LocalDateTime 需要额外加一个 Jackson 自定义配置或者简单一点实体类里 LocalDateTime 字段全部用 JsonFormat(pattern yyyy-MM-dd HH:mm:ss) 注解。演示时时间格式统一、直观老师看屏幕上不会出现 T 字母这种细节很能拉好感。4. 把“高分”做出来开题报告、PPT、演示视频的加分打法代码能跑只是及格线真正把分数拉到 90 以上的是开题报告、PPT、演示视频这三件“包装物”。很多同学把源码和文档当成两个独立的东西答辩时讲代码讲得支支吾吾文档跟代码还对不上。正确的做法是用文档反推代码先让逻辑闭环再准备演示。4.1 开题报告把“技术选型理由”写成答辩第一个加分项开题报告一般要交代研究背景、国内外现状、研究内容、技术路线、进度安排。多数人在这部分只会堆概念比如“随着社会发展宠物领养越来越受关注”这种空话老师一天要看几十份不会留下印象。我建议把重点压在“功能闭环”和“技术选型理由”两段。技术选型这一段是最好写的也是最好加分的。照着这个思路写为什么用 Springboot因为 Spring 生态成熟、内置 Tomcat、starter 机制简化配置为什么用 Vue因为前后端分离、组件化开发、Element Plus 能快速搭建后台界面为什么用 MySQL因为关系型数据适合表达用户、宠物、申请之间的实体关系为什么用 JWT因为无状态、扩展性好、适合接口鉴权。每一条都要写“我因为这个原因选了它”而不是“这个技术很流行”。进度安排按六周规划第一周需求分析与表设计第二周后端登录与宠物模块第三周领养申请与审核模块第四周前端页面联调第五周文档与测试第六周答辩预演。这个计划看起来很务实老师最怕看到“两周完成全部开发”这种离谱排期。4.2 答辩 PPT九页结构与两处必演画面PPT 不需要多九页足够但每一页都要承担一个功能。我按最稳的答辩结构给你列出来页码页面标题内容要点1封面项目名称、技术栈、班级姓名2背景与意义宠物领养现状、系统要解决的三个问题3技术选型Springboot、Vue、MySQL、JWT、Element Plus4需求分析角色划分、功能模块图5数据库设计ER 图、六张核心表、状态流转说明6核心功能演示演示视频链接或录屏嵌入7技术难点JWT 鉴权、分页查询、文件上传、状态机8测试与改进测试用例、边界处理、后续可扩展方向9总结项目收获、致谢有两页必须认真做第 5 页数据库设计里一定要画出 application 表的五种状态流转图这一页直接显示你有业务建模能力第 7 页技术难点不要写“实现了登录注册”要写“基于 JWT 的无状态鉴权方案”哪怕代码是参考的也要能讲清楚原理。老师提问基本集中在这两页。4.3 演示视频从数据库初始化到领养闭环的五分钟脚本演示视频是标题里最容易被低估的材料。你要知道很多评委老师不会现场操作你的系统他们最依赖的就是这段视频。视频不要求长五分钟最好超过八分钟老师会快进。脚本建议按下面这个顺序录第一步展示数据库初始化打开 Navicat执行 sql 脚本展示 user、pet、application 三张表的数据强调“系统自带演示数据”。第二步游客视角浏览宠物列表进入详情页查看健康状态和描述。第三步注册一个新用户登录后提交领养申请填领养理由。第四步切换管理员账号在申请审核页把这条申请从 pending 改为 approved。第五步回到用户端能看到申请进度变为“审核通过”再以管理员身份把状态调整为 adopted。第六步打开统计页面展示月度领养趋势图表。录视频前有个血泪经验一定要把浏览器缓存清掉数据库状态重置到初始脚本不然录到一半发现列表里有上次测试留下的脏数据。屏幕分辨率建议设置成 1920x1080录屏时把系统操作窗口放大到 100%老师看着舒服细节不会被压缩糊掉。5. SpringbootVue 宠物领养系统避坑从启动报错到答辩追问这套项目整体不难但有几个坑几乎每个人都会踩一遍。我按现象、原因、解决的顺序写遇到问题直接对着查。5.1 MySQL 时区与 SSL 连接导致后端启动失败现象后端项目启动时控制台刷出大量 SQLNonTransientConnectionException或者虽然能启动但接口查询报“The server time zone value”错误跑出来的数据时间比实际少 8 小时。原因MySQL 8.x 默认使用系统时区本地机器时区如果不是标准时区JDBC 驱动解析不了同时 useSSL 默认开启本地 MySQL 没配证书就会卡在握手阶段。解决在 jdbc 连接串后面按 3.1 节那样拼上 useSSLfalseserverTimezoneAsia/Shanghai同时确保 pom 里引入的是 mysql-connector-java 8.0.x。改完配置后重启服务如果还报错在 MySQL 命令行执行 SELECT NOW()先确认数据库本身时间是否正确。这个坑 90% 是连接串参数问题不要一报错就去翻代码。5.2 拦截器放行路径与跨域过滤器顺序冲突现象前端页面能打开但所有 axios 请求都报 CORS error浏览器控制台提示 Access-Control-Allow-Origin 缺失。更诡异的是把代码从直连改成 Vite 代理后部分请求通了部分请求还是跨域。原因JWT 拦截器在 preHandle 里拦截了所有请求包括浏览器跨域预检的 OPTIONS 请求。预检没通过后面的跨域配置写得再好也没用。另外如果后端同时配了 CorsFilter 和拦截器要确认过滤器的执行顺序在拦截器之前。解决拦截器第一行放行 OPTIONS 请求代码见 3.2 节。如果后端单独开放跨域用 WebMvcConfigurer 注册 addCorsMappings把 allowedOriginPatterns 设为 *allowedMethods 加上 OPTIONS。生产环境我一般直接用 Nginx 做反向代理同源部署后跨域问题自然消失这比在代码里折腾 CORS 更省心。5.3 Vue 打包后刷新 404 与图片资源路径现象本地开发一切正常npm run build 后部署到 Nginx进入首页没问题但刷新 /pet/3 或 /admin 页面直接 404。图片也是上传的宠物照片在详情页显示不出来。原因Vue Router 用的是 history 模式路径是虚拟路由Nginx 没有对应物理文件刷新时会去真实找 /pet/3 这个路径找不到就 404。图片问题则是上传文件保存在本地磁盘但 Nginx 不认 /upload 这个虚拟路径。解决Nginx 的 location 配置加 try_fileslocation / { try_files $uri $uri/ /index.html; } location /upload/ { alias /data/pet_adoption/upload/; }try_files 的意思是先找真实文件找不到就回退到 index.html交给 Vue Router 处理。第二个 location 把 /upload/** 的请求映射到磁盘上的实际目录。这里要提醒一个细节后端保存上传文件时数据库里存 /upload/xxx.jpg 这种相对路径不要存 D:/xxxx 这种绝对路径否则换台电脑演示图片全裂。5.4 答辩追问为什么“已领养”的宠物还能再申请现象这是答辩现场最容易翻车的场景。老师不一定会动手操作但会盯着状态流转问“你数据库里有只宠物 status 已经是 adopted 了如果前端把申请按钮隐藏了我直接调后端的提交申请接口会成功吗”如果你没做后端状态校验这一问直接卡壳。原因只做了前端控制后端提交申请接口只校验了宠物 id 是否存在没有校验宠物当前状态。同样的漏洞还有管理员把宠物下架后用户仍可以对下架的宠物提交申请。解决在提交申请的业务代码里加状态判断Pet pet petMapper.selectById(petId); if (pet null || !available.equals(pet.getStatus())) { throw new BusinessException(该宠物暂不可领养); }审核通过时把宠物状态改成“预领养”领养完成时改成“已领养”同时把该宠物其他 pending 的申请批量置为 rejected保证同一时间只有一条有效申请。这一步逻辑代码量不大但是答辩评分的分水岭做了的人能在“数据一致性”这一栏拿分。6. 把项目往上提一个档统计接口、POI 导出与验收清单项目到这里已经能完整演示了但高分项目通常还有一个“超出预期”的点。我建议把力气花在统计报表和导出功能上因为这两个功能演示效果直观代码量又可控性价比非常高。6.1 领养趋势统计接口一张图表撑起答辩的高潮统计页面画一个“近 12 个月领养数量”柱状图前端用 ECharts后端做一个聚合查询接口。SQL 不复杂重点是让数据先有值不然图表是空的。SELECT MONTH(adopt_time) AS month, COUNT(*) AS count FROM application WHERE status adopted AND YEAR(adopt_time) #{year} GROUP BY MONTH(adopt_time) ORDER BY MONTH(adopt_time)前端拿到 [{ month: 1, count: 2 }, ...] 这种结构后把 month 映射成 1 月、2 月再传给 ECharts 的 series。演示前在数据库里手工造几条不同月份的领养记录柱状图有高有低视觉效果才会打动人。6.2 POI 导出领养记录把“能跑”变成“能用”有同学会问“java poi word 能生成图表吗”其实在毕设场景里导出的主体是 Excel 表格而不是图表。用 POI 的 XSSFWorkbook 创建一个“领养记录.xlsx”把申请编号、宠物名、领养人、领养时间导出几行代码就能完成。这个功能单独做成管理员页面的一个按钮演示时点一下系统生成 Excel 文件比口头说“我做了导入导出”更有说服力。答辩前按这个清单自检一遍后端能否一次性启动数据库脚本是否能完整恢复演示数据前端打包后部署是否还要改代理开题报告里的角色和表结构是否与代码一致PPT 里是否有两张以上截图演示视频时长是否控制在六分钟内。每项都过这个项目才算真正交付到位。做毕设这几年我最大的教训是不要只当代码的搬运工要当项目的讲解人。把状态流转、权限校验、统计导出这些点串成一条故事线老师问什么你都能接住。希望帮到你。本文还有配套的精品资源点击获取 Springboot+Vue宠物领养系统：从功能设计到答辩加分的完整实战
简介基于Springboot与Vue的宠物领养系统毕业设计项目包面向计算机专业毕业生或需完成期末项目的学生提供一套可独立运行、便于答辩演示的前后端分离方案。项目已获导师认可答辩评审97分在Windows10/11环境下严格调试配合部署文档即可运行适合作为高分毕设模板或实战练习。资源共749个文件约62.68MB以124个Java源码、42个Vue组件及配套JS/CSS等前端资源为主同时包含SQL数据库脚本、开题报告、使用文档、答辩PPT、演示视频以及安装、构建、启动辅助脚本覆盖从环境准备到部署上线的完整链路。目前已有401人学习。获取后可获得可直接编译运行的项目代码、数据库初始化脚本、完整文档与答辩材料通过演示视频可快速熟悉系统流程与答辩讲解要点节省搭建与排错时间便于直接参考复用。1. 为什么 SpringbootVue 宠物领养系统是高分毕设的稳妥答案如果你问十个用过它的人“Java毕业设计-基于SpringbootVue宠物领养系统源码数据库PPT开题报告使用文档演示视频高分项目到底值得不值得”大多数人的答案不是“代码多难写”而是“演示闭环太完整了”。这个项目把毕设要交的所有东西一次配齐后端 Springboot 接口、前端 Vue 页面、数据库脚本连开题报告和演示视频都给你搭好了框架。答辩老师最看重的不是你会不会背八股文而是能不能把“注册登录→浏览宠物→提交领养申请→管理员审核→领养成功”这条链路完整讲清楚。对 Java 基础一般、又想尽快拿出可演示作品的毕业生来说这套项目最大的价值是把“能跑”变成“能讲”而“能讲”才是打分的关键。2. 先把选题拆明白宠物领养系统的功能边界与数据模型很多同学拿到这套项目第一反应是找代码、跑起来这其实是最容易翻车的顺序。任何 SpringbootVue 项目第一步都应该是把角色、状态、表结构想明白。别看宠物领养系统听起来简单它比纯增删改查多了一个关键业务域——领养申请的状态管理。这一节我们把功能边界和数据模型一起理顺后面写接口、写页面才有依据。2.1 三类核心用户领养人、管理员、系统边界宠物领养系统里最少要有三个参与方游客、注册用户、管理员。游客只能看宠物列表注册用户能提交领养申请、查看自己的申请进度、取消未审核的申请管理员负责宠物上架下架、审核领养申请、维护用户列表。在演示项目里管理员账号一般预置在数据库里比如 admin/admin123这比现场注册再改角色要快得多。权限设计上常见做法是前端用 Vue 路由守卫控制页面入口后端用拦截器控制接口访问。注意一点前端藏按钮只是用户体验后端接口必须再验一次角色否则答辩老师只要多问一句“直接调接口能不能越权”你就容易答不上来。有些资料会把宠物管理员和系统管理员拆成两个角色但毕设体量不建议拆。角色越多页面和接口的重复代码越多答辩时反而不好讲。一个 user 表加 role 字段角色就两个普通用户、管理员足够覆盖演示场景。2.2 领养申请状态机从提交到回访的五种状态领养申请是整个系统的业务核心它不能用一个“是否通过”的布尔字段糊弄。我见过不少项目把状态只做成 0 和 1结果演示时出现“一只已经被领养的宠物还能被再次申请”的尴尬局面。正确做法是画一个状态机pending待审核、approved审核通过、rejected已拒绝、adopted已领养、closed已关闭。这里的关键流转规则三条用户提交申请后状态为 pending管理员审核通过后变为 approved同时宠物状态改为“已被预领养”防止别人再申请用户在线下完成交接后管理员把申请置为 adopted宠物状态改为“已领养”。rejected 和 closed 是终态不能再流转到 pending。closed 通常用来处理长时间未完成线下交接的单子或者用户主动取消的申请。把状态机写进开题报告的“业务流程”一节是答辩加分的第一个点。老师看到你用了状态机思想而不是三个 if 判断会认为你有基本的业务建模能力。实现上不需要引入工作流引擎一张 application 表加一个 status 字段就够。2.3 数据库最小表集合六张表搭起完整业务闭环数据库脚本是毕设评分里权重很高的一块。下面这组表结构是我按最稳妥的通用方案整理的既覆盖演示需求又不会让 ER 图复杂到讲不清。表名核心字段用途userid、username、password、role、phone、avatar、status登录账号与角色petid、name、type、breed、age、gender、health_status、status、image、description宠物信息与上架状态applicationid、user_id、pet_id、status、reason、reject_reason、apply_time、update_time领养申请与审核记录adoption_recordid、application_id、adopt_time、remark交接完成的领养档案feedbackid、application_id、user_id、content、create_time领养后回访/反馈commentid、pet_id、user_id、content、create_time宠物留言可选加分项user.id 和 pet.id 都用自增主键application 表对 user_id、pet_id 各建一个普通索引避免联表查询时扫描全表。推荐用 MyBatis-Plus 的分页插件配合 Page 对象做列表分页Springboot 集成 mybatis-plus 的分页配置是这几行Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }这个配置不加分页查询只会返回全部数据而不会真的分页属于高频翻车点。参数只有一个 DbType.MYSQL它告诉分页插件按 MySQL 的 LIMIT 语法生成 SQL。字段命名统一用下划线比如 apply_time、adopt_time让 map-underscore-to-camel-case 自动映射为 applyTime、adoptTime。创建时间字段一律用 datetime不要用 timestamp后者有时区坑具体在第五章避坑里细说。数据库脚本里要预置两种角色账号、五只宠物、两条不同状态的申请记录这些演示数据直接决定你演示视频能否一次录成。3. 从空项目到可演示Springboot 后端与 Vue 前端的落地步骤把数据模型定好之后就可以从头搭工程了。这一章我按“后端能起服务、前端能调通接口”的目标来写每一步都给出最小可运行配置。这个项目的前后端分离意味着前后端可以分开启动联调时只需要注意代理、跨域、时间格式三个参数几乎不会卡死。3.1 后端骨架Springboot 工程与 MyBatis-Plus 的最小配置先建 Springboot 工程Java 版本用 8 或 11Springboot 版本建议 2.7.x兼容性最好。依赖引入 spring-boot-starter-web、mybatis-plus-boot-starter、mysql-connector-java、jjwt、poi、lombok。资源配置文件 application.yml 是最先要写对的东西也是启动报错重灾区server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/pet_adoption?useSSLfalseserverTimezoneAsia/ShanghaicharacterEncodingutf8mb4 username: root password: root servlet: multipart: max-file-size: 5MB max-request-size: 20MB mybatis-plus: mapper-locations: classpath:/mapper/*.xml configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: id-type: auto这里的参数一个都不能删useSSLfalse 是关掉 MySQL 连接时的 SSL 握手避免本地环境报警告甚至连不上serverTimezoneAsia/Shanghai 解决数据库时间比中国时间少 8 小时的问题characterEncodingutf8mb4 保证宠物描述里的 emoji 和特殊字符不乱码。max-file-size 默认只有 1MB宠物图片通常超过这个值不调大接口会直接报文件大小超限属于“看起来是代码问题、其实是配置问题”的典型。mapper-locations 指定了 XML 文件位置如果项目里没有 XML也要保留这个配置否则报 invalid bound statement。log-impl 配成 StdOutImpl 能把 SQL 打印到控制台联调时看参数特别好用正式部署再关掉。3.2 用 JWT 把登录态和角色校验串起来宠物领养系统没有 session 场景前端是 Vue后端是纯接口最佳实践是用 JWT 做登录态。登录接口校验用户名密码后签发 token前端把 token 存在 localStorage之后每次请求在 Authorization 头里带回来。后端用一个拦截器统一解析 token解析失败直接返回 401。拦截器的核心代码长这样Component public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (OPTIONS.equalsIgnoreCase(request.getMethod())) { return true; } String token request.getHeader(Authorization); if (token ! null token.startsWith(Bearer )) { try { Integer userId JwtUtil.parseToken(token.replace(Bearer , )); request.setAttribute(userId, userId); return true; } catch (Exception e) { // token 过期或签名错误 } } response.setStatus(401); response.setContentType(application/json;charsetutf-8); response.getWriter().write({\code\:401,\message\:\未登录或登录已过期\}); return false; } }逻辑说明这段代码先把 OPTIONS 请求直接放行因为浏览器跨域预检不会带自定义 Authorization 头不放过它就会被跨域拦死。然后是取 token、解析 token、把 userId 塞进 request 属性方便后续 Controller 直接取当前登录用户。所有需要登录的接口都走这个拦截器比如提交领养申请、查看我的申请、上传宠物图片。角色校验不在这个拦截器里做。我一般会再写一个 RequireRole 注解标注在管理员接口上再用一个 AOP 切面检查 request 里的用户角色。答辩时如果老师问“普通用户能不能直接访问管理员接口”你可以回答拦截器管登录注解管角色两层都校验。3.3 Vue3 Element Plus 页面骨架与 Axios 接口封装前端部分用 Vue3 Element Plus Vite 是标配。先做一张最关键的工程图登录页、注册页、宠物列表页、宠物详情页、领养申请页、我的申请页、后台管理页。管理页里再拆宠物管理、申请审核、领养记录三个 Tab。接口请求不能每个页面都写一遍 axios必须封装成一个模块统一处理 token 注入和 401 跳转import axios from axios const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer token } return config }) request.interceptors.response.use( response { const res response.data if (res.code 200) { return res.data } return Promise.reject(new Error(res.message || 请求失败)) }, error { if (error.response error.response.status 401) { localStorage.removeItem(token) window.location.href /login } return Promise.reject(error) } ) export default request这个封装有几个约定后端统一返回 { code, message, data } 结构code 为 200 时才取 data业务错误走 Promise.reject由页面里的 catch 统一提示HTTP 401 表示登录过期直接清空 token 并跳登录页。这套约定能让前端代码少写很多 if。Vue 路由这里有个容易被忽略的小知识点带动态参数的详情页比如 /pet/:id在导航切换时组件会复用不会重新走 created需要加 watch 监听 route.params.id 变化去重新请求接口。这就是热搜里经常提到的“vue 路由参数”变更刷新问题毕设演示时如果从详情页切到另一个详情页发现数据没变就是这里没处理。3.4 前后端联调三件套代理、跨域、时间格式后端在 8080 端口Vite 开发服务器默认在 5173 或 3000直接发请求必然跨域。开发阶段最省事的方式不是在后端写 CorsFilter而是让 Vite 做代理// vite.config.js export default defineConfig({ server: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })注意这个配置的含义前端请求 /api/pet/listVite 会把请求转发到 http://localhost:8080/api/pet/list。后端接口路径里要带 /api 前缀两边约定好。changeOrigin 必须为 true否则后端反查域名时可能拦截请求。时间格式是另一个高频坑。后端返回的 LocalDateTime 默认序列化成 “2024-06-01T10:30:00” 这种带 T 的格式Element Plus 的日期组件不一定能正确显示。在后端配置里统一处理spring: jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: Asia/Shanghaidate-format 只对 java.util.Date 生效对 LocalDateTime 需要额外加一个 Jackson 自定义配置或者简单一点实体类里 LocalDateTime 字段全部用 JsonFormat(pattern yyyy-MM-dd HH:mm:ss) 注解。演示时时间格式统一、直观老师看屏幕上不会出现 T 字母这种细节很能拉好感。4. 把“高分”做出来开题报告、PPT、演示视频的加分打法代码能跑只是及格线真正把分数拉到 90 以上的是开题报告、PPT、演示视频这三件“包装物”。很多同学把源码和文档当成两个独立的东西答辩时讲代码讲得支支吾吾文档跟代码还对不上。正确的做法是用文档反推代码先让逻辑闭环再准备演示。4.1 开题报告把“技术选型理由”写成答辩第一个加分项开题报告一般要交代研究背景、国内外现状、研究内容、技术路线、进度安排。多数人在这部分只会堆概念比如“随着社会发展宠物领养越来越受关注”这种空话老师一天要看几十份不会留下印象。我建议把重点压在“功能闭环”和“技术选型理由”两段。技术选型这一段是最好写的也是最好加分的。照着这个思路写为什么用 Springboot因为 Spring 生态成熟、内置 Tomcat、starter 机制简化配置为什么用 Vue因为前后端分离、组件化开发、Element Plus 能快速搭建后台界面为什么用 MySQL因为关系型数据适合表达用户、宠物、申请之间的实体关系为什么用 JWT因为无状态、扩展性好、适合接口鉴权。每一条都要写“我因为这个原因选了它”而不是“这个技术很流行”。进度安排按六周规划第一周需求分析与表设计第二周后端登录与宠物模块第三周领养申请与审核模块第四周前端页面联调第五周文档与测试第六周答辩预演。这个计划看起来很务实老师最怕看到“两周完成全部开发”这种离谱排期。4.2 答辩 PPT九页结构与两处必演画面PPT 不需要多九页足够但每一页都要承担一个功能。我按最稳的答辩结构给你列出来页码页面标题内容要点1封面项目名称、技术栈、班级姓名2背景与意义宠物领养现状、系统要解决的三个问题3技术选型Springboot、Vue、MySQL、JWT、Element Plus4需求分析角色划分、功能模块图5数据库设计ER 图、六张核心表、状态流转说明6核心功能演示演示视频链接或录屏嵌入7技术难点JWT 鉴权、分页查询、文件上传、状态机8测试与改进测试用例、边界处理、后续可扩展方向9总结项目收获、致谢有两页必须认真做第 5 页数据库设计里一定要画出 application 表的五种状态流转图这一页直接显示你有业务建模能力第 7 页技术难点不要写“实现了登录注册”要写“基于 JWT 的无状态鉴权方案”哪怕代码是参考的也要能讲清楚原理。老师提问基本集中在这两页。4.3 演示视频从数据库初始化到领养闭环的五分钟脚本演示视频是标题里最容易被低估的材料。你要知道很多评委老师不会现场操作你的系统他们最依赖的就是这段视频。视频不要求长五分钟最好超过八分钟老师会快进。脚本建议按下面这个顺序录第一步展示数据库初始化打开 Navicat执行 sql 脚本展示 user、pet、application 三张表的数据强调“系统自带演示数据”。第二步游客视角浏览宠物列表进入详情页查看健康状态和描述。第三步注册一个新用户登录后提交领养申请填领养理由。第四步切换管理员账号在申请审核页把这条申请从 pending 改为 approved。第五步回到用户端能看到申请进度变为“审核通过”再以管理员身份把状态调整为 adopted。第六步打开统计页面展示月度领养趋势图表。录视频前有个血泪经验一定要把浏览器缓存清掉数据库状态重置到初始脚本不然录到一半发现列表里有上次测试留下的脏数据。屏幕分辨率建议设置成 1920x1080录屏时把系统操作窗口放大到 100%老师看着舒服细节不会被压缩糊掉。5. SpringbootVue 宠物领养系统避坑从启动报错到答辩追问这套项目整体不难但有几个坑几乎每个人都会踩一遍。我按现象、原因、解决的顺序写遇到问题直接对着查。5.1 MySQL 时区与 SSL 连接导致后端启动失败现象后端项目启动时控制台刷出大量 SQLNonTransientConnectionException或者虽然能启动但接口查询报“The server time zone value”错误跑出来的数据时间比实际少 8 小时。原因MySQL 8.x 默认使用系统时区本地机器时区如果不是标准时区JDBC 驱动解析不了同时 useSSL 默认开启本地 MySQL 没配证书就会卡在握手阶段。解决在 jdbc 连接串后面按 3.1 节那样拼上 useSSLfalseserverTimezoneAsia/Shanghai同时确保 pom 里引入的是 mysql-connector-java 8.0.x。改完配置后重启服务如果还报错在 MySQL 命令行执行 SELECT NOW()先确认数据库本身时间是否正确。这个坑 90% 是连接串参数问题不要一报错就去翻代码。5.2 拦截器放行路径与跨域过滤器顺序冲突现象前端页面能打开但所有 axios 请求都报 CORS error浏览器控制台提示 Access-Control-Allow-Origin 缺失。更诡异的是把代码从直连改成 Vite 代理后部分请求通了部分请求还是跨域。原因JWT 拦截器在 preHandle 里拦截了所有请求包括浏览器跨域预检的 OPTIONS 请求。预检没通过后面的跨域配置写得再好也没用。另外如果后端同时配了 CorsFilter 和拦截器要确认过滤器的执行顺序在拦截器之前。解决拦截器第一行放行 OPTIONS 请求代码见 3.2 节。如果后端单独开放跨域用 WebMvcConfigurer 注册 addCorsMappings把 allowedOriginPatterns 设为 *allowedMethods 加上 OPTIONS。生产环境我一般直接用 Nginx 做反向代理同源部署后跨域问题自然消失这比在代码里折腾 CORS 更省心。5.3 Vue 打包后刷新 404 与图片资源路径现象本地开发一切正常npm run build 后部署到 Nginx进入首页没问题但刷新 /pet/3 或 /admin 页面直接 404。图片也是上传的宠物照片在详情页显示不出来。原因Vue Router 用的是 history 模式路径是虚拟路由Nginx 没有对应物理文件刷新时会去真实找 /pet/3 这个路径找不到就 404。图片问题则是上传文件保存在本地磁盘但 Nginx 不认 /upload 这个虚拟路径。解决Nginx 的 location 配置加 try_fileslocation / { try_files $uri $uri/ /index.html; } location /upload/ { alias /data/pet_adoption/upload/; }try_files 的意思是先找真实文件找不到就回退到 index.html交给 Vue Router 处理。第二个 location 把 /upload/** 的请求映射到磁盘上的实际目录。这里要提醒一个细节后端保存上传文件时数据库里存 /upload/xxx.jpg 这种相对路径不要存 D:/xxxx 这种绝对路径否则换台电脑演示图片全裂。5.4 答辩追问为什么“已领养”的宠物还能再申请现象这是答辩现场最容易翻车的场景。老师不一定会动手操作但会盯着状态流转问“你数据库里有只宠物 status 已经是 adopted 了如果前端把申请按钮隐藏了我直接调后端的提交申请接口会成功吗”如果你没做后端状态校验这一问直接卡壳。原因只做了前端控制后端提交申请接口只校验了宠物 id 是否存在没有校验宠物当前状态。同样的漏洞还有管理员把宠物下架后用户仍可以对下架的宠物提交申请。解决在提交申请的业务代码里加状态判断Pet pet petMapper.selectById(petId); if (pet null || !available.equals(pet.getStatus())) { throw new BusinessException(该宠物暂不可领养); }审核通过时把宠物状态改成“预领养”领养完成时改成“已领养”同时把该宠物其他 pending 的申请批量置为 rejected保证同一时间只有一条有效申请。这一步逻辑代码量不大但是答辩评分的分水岭做了的人能在“数据一致性”这一栏拿分。6. 把项目往上提一个档统计接口、POI 导出与验收清单项目到这里已经能完整演示了但高分项目通常还有一个“超出预期”的点。我建议把力气花在统计报表和导出功能上因为这两个功能演示效果直观代码量又可控性价比非常高。6.1 领养趋势统计接口一张图表撑起答辩的高潮统计页面画一个“近 12 个月领养数量”柱状图前端用 ECharts后端做一个聚合查询接口。SQL 不复杂重点是让数据先有值不然图表是空的。SELECT MONTH(adopt_time) AS month, COUNT(*) AS count FROM application WHERE status adopted AND YEAR(adopt_time) #{year} GROUP BY MONTH(adopt_time) ORDER BY MONTH(adopt_time)前端拿到 [{ month: 1, count: 2 }, ...] 这种结构后把 month 映射成 1 月、2 月再传给 ECharts 的 series。演示前在数据库里手工造几条不同月份的领养记录柱状图有高有低视觉效果才会打动人。6.2 POI 导出领养记录把“能跑”变成“能用”有同学会问“java poi word 能生成图表吗”其实在毕设场景里导出的主体是 Excel 表格而不是图表。用 POI 的 XSSFWorkbook 创建一个“领养记录.xlsx”把申请编号、宠物名、领养人、领养时间导出几行代码就能完成。这个功能单独做成管理员页面的一个按钮演示时点一下系统生成 Excel 文件比口头说“我做了导入导出”更有说服力。答辩前按这个清单自检一遍后端能否一次性启动数据库脚本是否能完整恢复演示数据前端打包后部署是否还要改代理开题报告里的角色和表结构是否与代码一致PPT 里是否有两张以上截图演示视频时长是否控制在六分钟内。每项都过这个项目才算真正交付到位。做毕设这几年我最大的教训是不要只当代码的搬运工要当项目的讲解人。把状态流转、权限校验、统计导出这些点串成一条故事线老师问什么你都能接住。希望帮到你。本文还有配套的精品资源点击获取