简介这是一套面向计算机专业本科生的高分毕业设计级宠物领养系统实战项目适用于Java Web开发入门者完成课程设计、期末大作业或毕业设计选题。系统采用主流前后端分离架构后端基于SpringBoot含35个Java核心类与1个XML配置前端基于Vue2含228个JS逻辑文件与105个CSS样式文件配套完整MySQL数据库SQL脚本及基础静态资源小白可直接导入运行。压缩包共388个文件涵盖业务逻辑、页面渲染、表单验证、分页表格、消息提示等典型模块总大小仅3.41MB轻量易部署。已有7298人学习下载资源为作者纯手写实现代码结构清晰、注释规范包含登录注册、宠物信息管理、领养申请审核、用户权限控制等完整业务闭环附带常见部署问题排查说明助开发者快速理解全栈协作流程与企业级项目组织方式。 每年这个时候都有不少同学来找我看毕业设计项目十个里有六七个都是这种结构“基于xxx xxx的系统源码数据库”。这次拿到的标题是“基于springbootvue的宠物领养系统源码数据库高分毕业设计.zip”一听就是典型的Java Web方向毕设技术栈是SpringBoot Vue主题是宠物领养附带数据库脚本。这类项目在毕设圈子里确实非常吃香原因也简单宠物领养这个业务场景足够贴近生活功能边界清晰做出来以后演示起来也好看评委看着也有共鸣。我花时间把这个项目的源码和数据库完整梳理了一遍又从零开始复现了核心流程。今天这篇就把整个系统的设计思路、功能拆解、数据库结构、关键代码实现以及我在跑通过程中踩过的坑一次性讲清楚。无论你是打算拿这个项目直接交毕设还是想在它基础上改造成自己的东西这篇文章都能让你少走不少弯路。1. 项目整体设计与思路拆解1.1 为什么宠物领养系统适合做毕设先说一个很多人没想明白的问题毕设题目那么多为什么“宠物领养系统”成了经典款我个人的看法是一个合格的毕设项目需要满足三个条件技术覆盖面够、业务逻辑完整、演示效果好。宠物领养系统在这三点上几乎是满分选手。技术覆盖面这块它天然包含用户注册登录、宠物信息展示、领养申请流程、后台管理、图片上传、数据统计等功能模块。这些功能基本覆盖了SpringBoot后端开发的核心知识点RESTful API设计、MyBatis-Plus操作数据库、JWT或Session来做登录鉴权、文件上传与静态资源映射、全局异常处理等等。前端Vue这边也能把组件通信、路由跳转、Axios请求封装、Element UI组件库使用、Vuex或Pinia状态管理这些知识点全部串起来。一个项目做完前后端的核心技能点基本都练到了。业务逻辑完整也很关键。宠物领养不是简单的增删改查它有一个完整的业务闭环流浪宠物登记入库→用户浏览宠物信息→用户提交领养申请→管理员审核申请→审核通过后更新宠物领养状态。这个流程涉及到多角色、多状态流转比单纯的“学生管理系统”或者“图书管理系统”要有意思得多在论文里也更好写因为你可以画出业务流程图、用例图、时序图这些都是毕设论文的硬通货。演示效果更不用说了Vue配合Element UI做出来的界面本身就比JSPServlet那种老古董好看一个时代。宠物图片一展示整个系统就显得生动答辩的时候老师看着也舒服。1.2 技术选型SpringBoot Vue MySQL为什么是黄金组合这个项目的技术栈是SpringBoot Vue MySQL我复现完之后得说这个选型是真没什么毛病。SpringBoot可以说是当前Java后端开发的事实标准。它解决了Spring Framework配置繁琐的问题内嵌Tomcat简化了依赖管理和自动配置让开发者能快速搭建一个可运行的Web应用。对于毕设来说SpringBoot 2.x版本生态最成熟网上资料最多遇到问题一搜就能找到解决方案这点比用一些冷门框架要省心得多。Vue作为前端框架上手曲线相对平缓而且它跟后端的配合方式非常简单粗暴通过Axios发HTTP请求拿到JSON数据渲染到页面上。Vue的双向数据绑定让表单处理变得特别直观Element UI组件库又提供了现成的表格、表单、弹窗、菜单等组件不用自己写CSS也能做出一个像模像样的后台管理系统。MySQL作为数据库自然不用多说开源免费轻量稳定对于这种体量的系统完全够用。配合Navicat或者DataGrip这种可视化工具导入导出数据库都很方便这对毕设来说很重要——交论文的时候要附带数据库脚本答辩的时候要在另一台电脑上快速搭建环境MySQL的这套工作流非常成熟。不过这里我要多说一句很多同学拿到这种毕设项目包以后第一件事就是想改代码其实最重要的第一步是先跑起来。就像你拿到一辆新车先别急着改装先开一圈感受一下原厂调校。后面我会用一整节来讲怎么把项目完整跑起来。1.3 功能模块全景拆解我打开源码以后把整个系统的功能模块梳理了一遍大概是这样一个结构用户端功能注册登录用户注册账号登录后可以浏览宠物、提交领养申请、查看申请进度宠物浏览按分类猫、狗、其他、状态待领养、已领养筛选宠物列表查看宠物详情领养申请填写领养申请表包括个人基本信息、居住情况、养宠经验等个人中心查看自己提交的领养申请记录和审核状态宠物发布注册用户可以发布自己捡到或无法继续饲养的宠物信息管理端功能管理员登录独立的管理员账号体系宠物管理审核用户发布的宠物信息、添加/编辑/下架宠物、标记领养状态领养审核查看用户提交的领养申请审核通过或驳回用户管理查看注册用户列表、禁用违规账号数据统计简单统计宠物数量、领养成功率、每日新增用户等这个功能划分思路是清晰的。有两类用户角色——普通用户和管理员两类核心业务——宠物信息管理和领养申请管理。系统虽然不大但该有的角色权限区分、业务状态流转都实现了支撑一篇毕业设计论文绰绰有余。2. 数据库设计详解让你的表结构拿得出手2.1 核心数据表结构分析数据库是整个系统的基础也是答辩时老师最爱问的部分。我打开项目附带的SQL脚本把核心表结构整理了一遍这里挑几张关键表来说。先看用户表user这是系统最基本的表CREATE TABLE user ( id int(11) NOT NULL AUTO_INCREMENT, username varchar(50) NOT NULL COMMENT 用户名, password varchar(100) NOT NULL COMMENT 密码, nickname varchar(50) DEFAULT NULL COMMENT 昵称, phone varchar(20) DEFAULT NULL COMMENT 手机号, email varchar(100) DEFAULT NULL COMMENT 邮箱, avatar varchar(255) DEFAULT NULL COMMENT 头像地址, role tinyint(1) DEFAULT 0 COMMENT 角色0普通用户 1管理员, status tinyint(1) DEFAULT 1 COMMENT 状态1正常 0禁用, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, PRIMARY KEY (id), UNIQUE KEY uk_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;这表设计得不错。username加了唯一索引防止重复注册role字段区分用户角色虽然是单表字段而不是独立的角色表但对于毕设来说够用且直观status字段用于账户启用/禁用这种软控制比直接删用户要好得多因为用户一旦关联了宠物或申请记录直接删除会破坏数据完整性。再看宠物表pet这是核心业务表CREATE TABLE pet ( id int(11) NOT NULL AUTO_INCREMENT, name varchar(50) NOT NULL COMMENT 宠物名称, type varchar(20) NOT NULL COMMENT 类型cat/dog/other, breed varchar(50) DEFAULT NULL COMMENT 品种, age int(11) DEFAULT NULL COMMENT 年龄月, gender varchar(10) DEFAULT NULL COMMENT 性别, vaccine tinyint(1) DEFAULT 0 COMMENT 是否已打疫苗, neutered tinyint(1) DEFAULT 0 COMMENT 是否已绝育, description text COMMENT 描述, images varchar(1000) DEFAULT NULL COMMENT 图片地址逗号分隔, status tinyint(1) DEFAULT 0 COMMENT 状态0待审核 1待领养 2已领养 3已下架, publisher_id int(11) DEFAULT NULL COMMENT 发布人ID, create_time datetime DEFAULT CURRENT_TIMESTAMP, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;宠物表的设计有几个值得注意的地方。images字段用逗号分隔存储多张图片地址这种设计不算最规范——正规做法应该拆一张宠物图片子表但对毕设来说够用而且查询效率高不用多表联查。status字段做了四个状态区分这是非常务实的做法用户发布的宠物不能直接上架需要管理员审核从源头保证信息质量。领养申请表adoption_apply是业务闭环的关键CREATE TABLE adoption_apply ( id int(11) NOT NULL AUTO_INCREMENT, pet_id int(11) NOT NULL COMMENT 宠物ID, user_id int(11) NOT NULL COMMENT 申请人ID, real_name varchar(50) NOT NULL COMMENT 真实姓名, phone varchar(20) NOT NULL COMMENT 联系电话, address varchar(255) DEFAULT NULL COMMENT 家庭住址, live_type varchar(20) DEFAULT NULL COMMENT 居住类型自有/租房, pet_experience text COMMENT 养宠经验, reason text COMMENT 领养理由, status tinyint(1) DEFAULT 0 COMMENT 状态0待审核 1已通过 2已驳回, create_time datetime DEFAULT CURRENT_TIMESTAMP, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;这张表把领养人信息、居住条件、养宠经验和领养理由都存了下来管理员在审核的时候有充分的信息做判断。注意它通过pet_id和user_id建立了与宠物表、用户表的关联但没有写外键约束——对于毕设来说逻辑外键比物理外键更好管理删除数据时也更灵活论文里可以说“使用逻辑外键保持数据关联性减少删除操作时的约束冲突”。2.2 为什么说这套表结构值得直接借鉴我见过太多毕设数据库设计要么搞十几个张表多对多关系能绕晕人要么就两三张表一眼看到底。这套宠物领养系统的表结构大概在七八张表左右规模适中设计思路清晰对于毕设来说是个很好的范本。从表关系上看核心链路是用户user发布宠物pet用户提交领养申请adoption_apply管理员审核申请并更新宠物状态。外加公告表notice、留言表message作为辅助功能。整体关系不复杂用E-R图表达非常清晰这在论文里很加分。从字段设计上看每张表都有create_time作为创建时间需要追踪更新时间的表还会加update_time这是最基本的规范。状态字段都用tinyint存数字配合注释说明含义而不是直接用字符串存“待审核”、“已通过”这种中文——好处是节省存储空间程序里用常量或枚举对应代码更清晰也避免中文在不同环境中乱码的问题。唯一我认为可以改进的地方是图片存储策略。这个项目是把图片上传到本地磁盘然后数据库存访问路径。如果部署在云服务器上这种方案需要给上传目录单独配置域名或路径映射。不过对于毕设来说完全够用本机部署、本机演示一点问题没有。3. 核心功能实现从后端到前端的关键代码解读3.1 SpringBoot后端的接口设计与实现我先说后端毕竟这是整个系统的“大脑”。项目的主结构是标准的Spring Boot分层架构Controller接收请求、Service处理业务逻辑、Mapper操作数据库。用户登录模块的实现比较常规但有一个点值得单独拿出来说——密码的处理方式。项目源码里用的是MD5加密存储密码// 用户注册时对密码进行加密 String encryptedPassword DigestUtils.md5DigestAsHex( user.getPassword().getBytes(StandardCharsets.UTF_8) ); user.setPassword(encryptedPassword);MD5在正式项目中确实不够安全但对于毕设来说使用它并没有问题。如果你想让答辩更有亮点可以把它替换成BCrypt加密。Spring Security自带的BCryptPasswordEncoder是更好的选择同样是加盐哈希但安全性高一个数量级。替换成本也不高就改一个工具类的事。领养申请接口是核心业务接口我贴一段简化后的Service实现Service public class AdoptionApplyServiceImpl implements AdoptionApplyService { Override Transactional(rollbackFor Exception.class) public boolean submitApply(AdoptionApply apply) { // 1. 检查宠物是否存在且状态为“待领养” Pet pet petMapper.selectById(apply.getPetId()); if (pet null || pet.getStatus() ! 1) { throw new BusinessException(该宠物不存在或已被领养); } // 2. 防止同一用户重复申请同一宠物 LambdaQueryWrapperAdoptionApply wrapper new LambdaQueryWrapper(); wrapper.eq(AdoptionApply::getPetId, apply.getPetId()) .eq(AdoptionApply::getUserId, apply.getUserId()) .eq(AdoptionApply::getStatus, 0); Long count adoptionApplyMapper.selectCount(wrapper); if (count 0) { throw new BusinessException(您已申请过该宠物请勿重复提交); } // 3. 保存申请 apply.setCreateTime(new Date()); return adoptionApplyMapper.insert(apply) 0; } }这里有两个非常务实的细节。一是加了Transactional事务注解。这保证了整个操作要么全部成功要么全部回滚。虽然在当前代码逻辑里事务作用不大但这个注解本身就是加分项——论文里可以写“系统通过事务机制保证数据操作的一致性”。二是业务校验前置。先检查宠物状态再检查重复申请最后才落库。这就是工作中的真实开发习惯永远不要在数据库层才做约束业务层的校验才是第一道防线。而且这段代码用了MyBatis-Plus的LambdaQueryWrapper相比写XML里的自定义SQL要简洁得多也更容易理解和维护。文件上传模块也是必看的一块。宠物图片的上传、用户头像的上传都走这里。核心逻辑就是把上传的MultipartFile保存到服务器本地磁盘然后把文件访问路径返回给前端PostMapping(/upload) public Result upload(RequestParam(file) MultipartFile file) { if (file.isEmpty()) { return Result.error(上传文件不能为空); } // 生成唯一文件名避免重名覆盖 String originalFilename file.getOriginalFilename(); String ext originalFilename.substring(originalFilename.lastIndexOf(.)); String fileName UUID.randomUUID().toString().replace(-, ) ext; // 按日期分目录存储 String datePath new SimpleDateFormat(yyyyMMdd).format(new Date()); String dirPath uploadDir / datePath; File dir new File(dirPath); if (!dir.exists()) { dir.mkdirs(); } // 保存文件 file.transferTo(new File(dirPath / fileName)); // 返回访问路径 String url /files/ datePath / fileName; return Result.success(url); }用UUID作为文件名防止重名按日期分目录方便管理这两个都是常规操作。另外一个关键点在于上传目录必须配合一个WebMvcConfigurer做静态资源映射否则前端拿到路径也访问不到图片文件Configuration public class WebMvcConfig implements WebMvcConfigurer { Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/files/**) .addResourceHandler(file: uploadDir /); } }这个细节特别容易踩坑。很多人代码写完了图片也能上传成功但页面上图片就是显示不出来八成就是静态资源映射没配。这里配置的含义是所有URL以/files/开头的请求都映射到本地磁盘的uploadDir目录去找对应文件。3.2 Vue前端页面与组件设计前端这边用的是Vue全家桶 Element UI我逐个模块说一下实现思路。项目结构整体采用Vue CLI创建的标准结构src目录下分了api、assets、components、router、store、utils、views这几个目录。api目录按模块封装了Axios请求views目录按页面组织组件。这套结构是业内最常见的Vue项目组织方式清晰易懂答辩时也方便讲解。路由配置使用了Vue Router设定了两种路由的区分。用户端的首页、宠物列表、宠物详情、领养申请、个人中心是一组管理端的宠物管理、申请审核、用户管理、数据统计是另一组。值得一说的是路由守卫的实现router.beforeEach((to, from, next) { const token localStorage.getItem(token); if (to.meta.requireAuth !token) { next(/login); } else { next(); } });这段代码的逻辑是页面跳转前先检查目标路由是否标记了requireAuth如果有这个标记且本地没有token就强制跳到登录页。这就是典型的登录拦截后端接口也做了同样的拦截两边一起保护系统安全。Axios请求封装也很典型。项目在utils目录下创建了request.js用Axios实例统一配置了baseURL添加了请求拦截器和响应拦截器const request axios.create({ baseURL: /api, timeout: 10000 }); // 请求拦截器自动携带token request.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers[token] token; } return config; }); // 响应拦截器统一处理错误码 request.interceptors.response.use( response { const res response.data; if (res.code 200) { return res; } else { Message.error(res.msg); return Promise.reject(new Error(res.msg)); } }, error { Message.error(网络请求异常); return Promise.reject(error); } );这种封装在实际项目中几乎是标配。请求拦截器统一从localStorage取出token放到请求头响应拦截器统一判断后端返回的code码前端不用在每个页面里重复写错误处理逻辑。用统一拦截器来处理跨切面逻辑这就是工程思维在答辩时可以专门讲讲这部分老师会认可你的架构意识。核心页面逻辑也不复杂。宠物列表页通过Card组件加分页列表展示宠物信息点击卡片跳转详情宠物详情页展示了宠物基本信息、图片轮播、领养按钮领养表单页是一个Dialog弹窗里面是Form表单提交后走Axios调后端接口。个人中心页用tab切换展示“我发布的宠物”和“我的领养申请”两块内容。4. 完整部署与运行指南从零到一跑起来4.1 环境准备清单拿到源码包之后第一件事不是看代码而是把环境准备好。这个项目需要的开发环境清单如下软件版本建议用途JDK1.8或11运行SpringBoot后端Maven3.6后端依赖管理与打包MySQL5.7或8.0数据存储Node.js14.x或16.x前端构建环境开发工具IDEA / VSCode代码编辑与运行数据库工具Navicat / DataGrip数据库导入与操作需要特别注意JDK版本的兼容性问题。项目基于SpringBoot 2.x开发如果你装了JDK 17以上的版本大概率会遇到运行时兼容问题。最稳妥的做法是安装JDK 8配好JAVA_HOME环境变量然后用IDEA的Project Structure把项目的SDK指定为JDK 8。Node.js的版本同理Vue CLI 4.x项目在Node 16环境下运行最稳定Node 18以上有时会出现openssl相关的报错。如果你遇到这类问题解决方案是在package.json的scripts里加上serve: set NODE_OPTIONS--openssl-legacy-provider vue-cli-service serveWindows下。4.2 后端启动完整步骤后端启动的流程我按步骤拆解一下。第一步用IDEA打开后端的文件夹一般是项目根目录下的backend或者server目录。IDEA会自动识别Maven项目然后开始下载依赖。如果你的网络环境下载依赖特别慢建议给Maven配置阿里云镜像源。第二步创建数据库。打开Navicat新建一个名为pet_adoption的数据库字符集选utf8mb4排序规则选utf8mb4_general_ci。然后用Navicat的“运行SQL文件”功能导入项目附带SQL脚本。如果SQL脚本里已经有CREATE DATABASE语句那你只需要在Navicat里直接运行整个脚本就行它会自动建库。第三步修改数据库连接配置。找到application.yml文件把数据库名、用户名、密码改成你本机的配置spring: datasource: url: jdbc:mysql://localhost:3306/pet_adoption?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 你的数据库密码 driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl mapper-locations: classpath*:mapper/**/*.xml这里有两个容易踩的坑。一个是serverTimezone参数必须设置否则会报时区异常另一个是MySQL 8.0的驱动类名是com.mysql.cj.jdbc.DriverMySQL 5.7则是com.mysql.jdbc.Driver如果连不上数据库先检查驱动类名是不是匹配。第四步启动后端。找到PetAdoptionApplication.java类名可能略有不同右键点击运行。看到类似下面的日志输出就说明启动成功了Tomcat started on port(s): 8080 (http) with context path 默认端口一般是8080如果8080被占了可以在application.yml里改server.port。4.3 前端启动完整步骤前端的启动要分两步装依赖和启动开发服务器。在命令行里进到前端目录一般是项目根目录下的frontend或者web目录执行npm install如果这个步骤报错或者卡住不动多半是网络问题。可以用淘宝镜像源解决npm config set registry https://registry.npmmirror.comnpm install完成以后直接启动npm run serve启动成功后终端会显示一个本地访问地址一般是http://localhost:8081。打开浏览器访问这个地址就能看到系统首页了。还需要确认一件事前端代码里API请求的地址是否正确。打开前端的vue.config.js或者.env.development文件检查代理配置。常见的配置是在vue.config.js里设置devServer代理把/api开头的请求转发到后端的8080端口devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }这种代理方案的好处是前端只管发/api/xxx的请求由开发服务器转发到后端可以避免跨域问题。如果你看到的前端项目里没有这个配置而是直接用全路径请求比如http://localhost:8080/api/xxx那就要去后端确认是否配置了跨域支持。SpringBoot里常见的跨域配置是加一个CorsFilter我看到这个项目用的是代理方案所以我建议你别在本地强行改代码先把代理这套跑通。5. 常见问题与排查技巧实录5.1 启动阶段的典型报错我在复现这个项目的时候故意模拟了几种常见错误场景方便大家对照排查。报错一端口被占用现象是后端启动时提示Port 8080 was already in use。解决办法很简单找到占用端口的进程杀掉或者改端口。Windows下查看端口占用netstat -ano | findstr 8080会看到一个PID然后打开任务管理器结束对应进程。如果那是你自己跑的其他程序也可以换个思路把SpringBoot的端口改成8081前端代理也同步改一下就行。报错二数据库连接超时或拒绝连接现象是启动时报Access denied for user rootlocalhost (using password: YES)或者Communications link failure。前者是账号密码错误后者是MySQL服务没启动或者端口不对。先检查MySQL服务是否运行Windows下按WinR输入services.msc找到MySQL服务确保状态是“正在运行”。然后检查application.yml里的用户名和密码是不是真的能登录MySQL。通过命令行试一下mysql -u root -p如果密码是对的那就是数据库连接URL里的配置写错了逐一核对就行。报错三前端npm install报错常见的有两种。一种是因为Node版本太高导致node-sass安装失败我建议直接安装Node 14这个问题就消失了。如果你不想换Node版本也可以在项目的package.json里换掉node-sass的版本但那个路比较长不推荐在毕设阶段折腾。另一种是安装卡住多半是网络问题按上文改成淘宝镜像源即可。5.2 运行时的业务逻辑排查项目成功跑起来之后还有几个容易出现但不容易被发现的问题。问题一登录成功但获取不到用户信息如果前端登录成功后刷新页面又跳回登录页说明用户信息没有持久化。这个项目用的是token存localStorage的方案但用户在刷新时重新拉取个人信息接口如果失败就会导致前端认为用户未登录。排查思路清一下浏览器缓存检查后端接口是否需要特殊权限注解。如果后端接口加了RequiresAuthentication之类的拦截但前端发起请求时token没带上那问题多半在Axios的请求拦截器上——检查你的token的存储key是不是同一个。问题二图片上传后页面显示不出来这个前文提过九成是静态资源映射没配置好。你上传成功后拿返回的URL直接访问一下比如http://localhost:8080/files/20240601/xxx.jpg如果404就要去WebMvcConfig里检查映射路径是否和文件名前缀一致。有一个细节得提醒你如果开发时前端走的代理代理也可能会影响图片加载。前端代理只转发了/api开头的请求图片路径一般是不带/api前缀的所以你需要在vue.config.js里额外加一条代理规则proxy: { /api: { target: http://localhost:8080, changeOrigin: true }, /files: { target: http://localhost:8080, changeOrigin: true } }否则就会出现“接口通了但图片全裂”的尴尬局面。这个坑我自己当年做毕设时也踩过印象深刻。问题三领养申请提交失败这个大概率是校验逻辑拦截了。比如同一个用户对同一个宠物提交了两次申请第2次就会被拒绝。前端弹出“您已申请过该宠物请勿重复提交”的提示这不是bug是正常的业务保护。如果你只是想测试流程可以用一个不同账号申请或者找管理员把之前的申请记录驳回再重新申请。5.3 我整理的一份避坑清单最后把一次完整跑项目的经验浓缩成几条关键建议送给即将要动手的你严格按照JDK 8 Node 14 MySQL 5.7这套组合来装环境虽然这组合听起来不够“新潮”但它是这个项目最稳的环境兼容性最好。SQL脚本的导入顺序不要乱。先建库再建表如果有初始化的管理员账号数据也一起导入避免后续登录不了后台。改数据库连接之前先把application.yml原文件备份一份改乱了还能还原。前端代理不要只配/api图片路径/files也要一起配上否则图片加载不出来。拿到项目先跑通再改代码。很多同学喜欢一上来就改样式、改功能结果环境都没跑通出问题了也不知道是环境的锅还是代码的锅排查起来特别痛苦。连不上数据库时先确认MySQL的root密码是否真的正确。很多人装MySQL的时候密码设置了带符号的特殊字符在yaml文件里可能被解析出问题建议密码里不带符号。6. 经验总结从毕业设计到真正的前后端开发我拆解完这个宠物领养系统之后最大的感受是这个项目并不是什么“花架子”代码它里面包含的很多开发习惯和设计思路其实跟真实项目是一致的。先说你从这套代码里能学到的最有价值的东西。第一层是基础CRUD的写法。怎么用MyBatis-Plus写Mapper、怎么在Service层做业务逻辑、怎么在Controller层控制接口行为。这些代码你照着写一遍就掌握了SpringBoot最常用的开发模式。第二层是前后端交互的完整链路。从Vue页面发请求到后端Controller接收、Service处理、Mapper查库、返回JSON数据再到前端渲染页面。这套链路说起来简单但很多刚接触前后端分离的同学就是在这里卡壳不知道数据到底是怎么流起来的。这项目代码量不大非常适合通读一遍把链路理清楚。第三层是工程化的思维。统一响应结果封装、全局异常处理、登录拦截器、路由守卫、Axios拦截器——这些不是某个业务功能的要求而是保证整个系统可维护性的基础设施。你在做毕设的时候如果也能把这些“架子”搭起来答辩时讲出来绝对是加分项。再说你拿到这个项目之后可以往哪些方向去改。从我的角度看有几个扩展既不会太费劲又能让项目有明显差异化加上Redis做会话管理。把token存储从单纯的前端localStorage改成后端Redis管理这是一个经典升级也特别好讲面试。引入Spring Security做权限控制。虽然改动量不小但完成了之后系统的安全性在答辩时会有很硬的说服力。加一个公告轮播图功能。前端首页加个轮播图后端加一张公告表工作量不大但演示时视觉效果好很多。数据统计做成图表。用ECharts显示每月宠物新增数、领养成功率等不仅好看论文里也可“基于可视化分析”写一小节。最后我想说的是毕设项目只是一个阶段性的学习成果。它的意义不在于代码有多牛、功能有多全而在于你自己能不能把每一行代码都讲明白把每一个设计决策都解释清楚。这个宠物领养系统是一个很好的起步点——技术栈主流、业务完整、代码清晰。拿到它以后沉下心从头到尾读一遍代码把关键模块动手改一改跑通了、吃透了它才是真正属于你的东西。如果你在部署或者修改的过程中碰到什么奇怪的问题欢迎在评论区把日志贴出来我看到都会回复。这个项目本身不难但环境问题千奇百怪多交流能省不少时间。本文还有配套的精品资源点击获取 
长河君 · 2026/9/1 3:29:05 · 阅读 1.2k 基于SpringBoot+Vue的宠物领养系统设计与实现：毕设级前后端分离实战
简介这是一套面向计算机专业本科生的高分毕业设计级宠物领养系统实战项目适用于Java Web开发入门者完成课程设计、期末大作业或毕业设计选题。系统采用主流前后端分离架构后端基于SpringBoot含35个Java核心类与1个XML配置前端基于Vue2含228个JS逻辑文件与105个CSS样式文件配套完整MySQL数据库SQL脚本及基础静态资源小白可直接导入运行。压缩包共388个文件涵盖业务逻辑、页面渲染、表单验证、分页表格、消息提示等典型模块总大小仅3.41MB轻量易部署。已有7298人学习下载资源为作者纯手写实现代码结构清晰、注释规范包含登录注册、宠物信息管理、领养申请审核、用户权限控制等完整业务闭环附带常见部署问题排查说明助开发者快速理解全栈协作流程与企业级项目组织方式。 每年这个时候都有不少同学来找我看毕业设计项目十个里有六七个都是这种结构“基于xxx xxx的系统源码数据库”。这次拿到的标题是“基于springbootvue的宠物领养系统源码数据库高分毕业设计.zip”一听就是典型的Java Web方向毕设技术栈是SpringBoot Vue主题是宠物领养附带数据库脚本。这类项目在毕设圈子里确实非常吃香原因也简单宠物领养这个业务场景足够贴近生活功能边界清晰做出来以后演示起来也好看评委看着也有共鸣。我花时间把这个项目的源码和数据库完整梳理了一遍又从零开始复现了核心流程。今天这篇就把整个系统的设计思路、功能拆解、数据库结构、关键代码实现以及我在跑通过程中踩过的坑一次性讲清楚。无论你是打算拿这个项目直接交毕设还是想在它基础上改造成自己的东西这篇文章都能让你少走不少弯路。1. 项目整体设计与思路拆解1.1 为什么宠物领养系统适合做毕设先说一个很多人没想明白的问题毕设题目那么多为什么“宠物领养系统”成了经典款我个人的看法是一个合格的毕设项目需要满足三个条件技术覆盖面够、业务逻辑完整、演示效果好。宠物领养系统在这三点上几乎是满分选手。技术覆盖面这块它天然包含用户注册登录、宠物信息展示、领养申请流程、后台管理、图片上传、数据统计等功能模块。这些功能基本覆盖了SpringBoot后端开发的核心知识点RESTful API设计、MyBatis-Plus操作数据库、JWT或Session来做登录鉴权、文件上传与静态资源映射、全局异常处理等等。前端Vue这边也能把组件通信、路由跳转、Axios请求封装、Element UI组件库使用、Vuex或Pinia状态管理这些知识点全部串起来。一个项目做完前后端的核心技能点基本都练到了。业务逻辑完整也很关键。宠物领养不是简单的增删改查它有一个完整的业务闭环流浪宠物登记入库→用户浏览宠物信息→用户提交领养申请→管理员审核申请→审核通过后更新宠物领养状态。这个流程涉及到多角色、多状态流转比单纯的“学生管理系统”或者“图书管理系统”要有意思得多在论文里也更好写因为你可以画出业务流程图、用例图、时序图这些都是毕设论文的硬通货。演示效果更不用说了Vue配合Element UI做出来的界面本身就比JSPServlet那种老古董好看一个时代。宠物图片一展示整个系统就显得生动答辩的时候老师看着也舒服。1.2 技术选型SpringBoot Vue MySQL为什么是黄金组合这个项目的技术栈是SpringBoot Vue MySQL我复现完之后得说这个选型是真没什么毛病。SpringBoot可以说是当前Java后端开发的事实标准。它解决了Spring Framework配置繁琐的问题内嵌Tomcat简化了依赖管理和自动配置让开发者能快速搭建一个可运行的Web应用。对于毕设来说SpringBoot 2.x版本生态最成熟网上资料最多遇到问题一搜就能找到解决方案这点比用一些冷门框架要省心得多。Vue作为前端框架上手曲线相对平缓而且它跟后端的配合方式非常简单粗暴通过Axios发HTTP请求拿到JSON数据渲染到页面上。Vue的双向数据绑定让表单处理变得特别直观Element UI组件库又提供了现成的表格、表单、弹窗、菜单等组件不用自己写CSS也能做出一个像模像样的后台管理系统。MySQL作为数据库自然不用多说开源免费轻量稳定对于这种体量的系统完全够用。配合Navicat或者DataGrip这种可视化工具导入导出数据库都很方便这对毕设来说很重要——交论文的时候要附带数据库脚本答辩的时候要在另一台电脑上快速搭建环境MySQL的这套工作流非常成熟。不过这里我要多说一句很多同学拿到这种毕设项目包以后第一件事就是想改代码其实最重要的第一步是先跑起来。就像你拿到一辆新车先别急着改装先开一圈感受一下原厂调校。后面我会用一整节来讲怎么把项目完整跑起来。1.3 功能模块全景拆解我打开源码以后把整个系统的功能模块梳理了一遍大概是这样一个结构用户端功能注册登录用户注册账号登录后可以浏览宠物、提交领养申请、查看申请进度宠物浏览按分类猫、狗、其他、状态待领养、已领养筛选宠物列表查看宠物详情领养申请填写领养申请表包括个人基本信息、居住情况、养宠经验等个人中心查看自己提交的领养申请记录和审核状态宠物发布注册用户可以发布自己捡到或无法继续饲养的宠物信息管理端功能管理员登录独立的管理员账号体系宠物管理审核用户发布的宠物信息、添加/编辑/下架宠物、标记领养状态领养审核查看用户提交的领养申请审核通过或驳回用户管理查看注册用户列表、禁用违规账号数据统计简单统计宠物数量、领养成功率、每日新增用户等这个功能划分思路是清晰的。有两类用户角色——普通用户和管理员两类核心业务——宠物信息管理和领养申请管理。系统虽然不大但该有的角色权限区分、业务状态流转都实现了支撑一篇毕业设计论文绰绰有余。2. 数据库设计详解让你的表结构拿得出手2.1 核心数据表结构分析数据库是整个系统的基础也是答辩时老师最爱问的部分。我打开项目附带的SQL脚本把核心表结构整理了一遍这里挑几张关键表来说。先看用户表user这是系统最基本的表CREATE TABLE user ( id int(11) NOT NULL AUTO_INCREMENT, username varchar(50) NOT NULL COMMENT 用户名, password varchar(100) NOT NULL COMMENT 密码, nickname varchar(50) DEFAULT NULL COMMENT 昵称, phone varchar(20) DEFAULT NULL COMMENT 手机号, email varchar(100) DEFAULT NULL COMMENT 邮箱, avatar varchar(255) DEFAULT NULL COMMENT 头像地址, role tinyint(1) DEFAULT 0 COMMENT 角色0普通用户 1管理员, status tinyint(1) DEFAULT 1 COMMENT 状态1正常 0禁用, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, PRIMARY KEY (id), UNIQUE KEY uk_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;这表设计得不错。username加了唯一索引防止重复注册role字段区分用户角色虽然是单表字段而不是独立的角色表但对于毕设来说够用且直观status字段用于账户启用/禁用这种软控制比直接删用户要好得多因为用户一旦关联了宠物或申请记录直接删除会破坏数据完整性。再看宠物表pet这是核心业务表CREATE TABLE pet ( id int(11) NOT NULL AUTO_INCREMENT, name varchar(50) NOT NULL COMMENT 宠物名称, type varchar(20) NOT NULL COMMENT 类型cat/dog/other, breed varchar(50) DEFAULT NULL COMMENT 品种, age int(11) DEFAULT NULL COMMENT 年龄月, gender varchar(10) DEFAULT NULL COMMENT 性别, vaccine tinyint(1) DEFAULT 0 COMMENT 是否已打疫苗, neutered tinyint(1) DEFAULT 0 COMMENT 是否已绝育, description text COMMENT 描述, images varchar(1000) DEFAULT NULL COMMENT 图片地址逗号分隔, status tinyint(1) DEFAULT 0 COMMENT 状态0待审核 1待领养 2已领养 3已下架, publisher_id int(11) DEFAULT NULL COMMENT 发布人ID, create_time datetime DEFAULT CURRENT_TIMESTAMP, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;宠物表的设计有几个值得注意的地方。images字段用逗号分隔存储多张图片地址这种设计不算最规范——正规做法应该拆一张宠物图片子表但对毕设来说够用而且查询效率高不用多表联查。status字段做了四个状态区分这是非常务实的做法用户发布的宠物不能直接上架需要管理员审核从源头保证信息质量。领养申请表adoption_apply是业务闭环的关键CREATE TABLE adoption_apply ( id int(11) NOT NULL AUTO_INCREMENT, pet_id int(11) NOT NULL COMMENT 宠物ID, user_id int(11) NOT NULL COMMENT 申请人ID, real_name varchar(50) NOT NULL COMMENT 真实姓名, phone varchar(20) NOT NULL COMMENT 联系电话, address varchar(255) DEFAULT NULL COMMENT 家庭住址, live_type varchar(20) DEFAULT NULL COMMENT 居住类型自有/租房, pet_experience text COMMENT 养宠经验, reason text COMMENT 领养理由, status tinyint(1) DEFAULT 0 COMMENT 状态0待审核 1已通过 2已驳回, create_time datetime DEFAULT CURRENT_TIMESTAMP, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;这张表把领养人信息、居住条件、养宠经验和领养理由都存了下来管理员在审核的时候有充分的信息做判断。注意它通过pet_id和user_id建立了与宠物表、用户表的关联但没有写外键约束——对于毕设来说逻辑外键比物理外键更好管理删除数据时也更灵活论文里可以说“使用逻辑外键保持数据关联性减少删除操作时的约束冲突”。2.2 为什么说这套表结构值得直接借鉴我见过太多毕设数据库设计要么搞十几个张表多对多关系能绕晕人要么就两三张表一眼看到底。这套宠物领养系统的表结构大概在七八张表左右规模适中设计思路清晰对于毕设来说是个很好的范本。从表关系上看核心链路是用户user发布宠物pet用户提交领养申请adoption_apply管理员审核申请并更新宠物状态。外加公告表notice、留言表message作为辅助功能。整体关系不复杂用E-R图表达非常清晰这在论文里很加分。从字段设计上看每张表都有create_time作为创建时间需要追踪更新时间的表还会加update_time这是最基本的规范。状态字段都用tinyint存数字配合注释说明含义而不是直接用字符串存“待审核”、“已通过”这种中文——好处是节省存储空间程序里用常量或枚举对应代码更清晰也避免中文在不同环境中乱码的问题。唯一我认为可以改进的地方是图片存储策略。这个项目是把图片上传到本地磁盘然后数据库存访问路径。如果部署在云服务器上这种方案需要给上传目录单独配置域名或路径映射。不过对于毕设来说完全够用本机部署、本机演示一点问题没有。3. 核心功能实现从后端到前端的关键代码解读3.1 SpringBoot后端的接口设计与实现我先说后端毕竟这是整个系统的“大脑”。项目的主结构是标准的Spring Boot分层架构Controller接收请求、Service处理业务逻辑、Mapper操作数据库。用户登录模块的实现比较常规但有一个点值得单独拿出来说——密码的处理方式。项目源码里用的是MD5加密存储密码// 用户注册时对密码进行加密 String encryptedPassword DigestUtils.md5DigestAsHex( user.getPassword().getBytes(StandardCharsets.UTF_8) ); user.setPassword(encryptedPassword);MD5在正式项目中确实不够安全但对于毕设来说使用它并没有问题。如果你想让答辩更有亮点可以把它替换成BCrypt加密。Spring Security自带的BCryptPasswordEncoder是更好的选择同样是加盐哈希但安全性高一个数量级。替换成本也不高就改一个工具类的事。领养申请接口是核心业务接口我贴一段简化后的Service实现Service public class AdoptionApplyServiceImpl implements AdoptionApplyService { Override Transactional(rollbackFor Exception.class) public boolean submitApply(AdoptionApply apply) { // 1. 检查宠物是否存在且状态为“待领养” Pet pet petMapper.selectById(apply.getPetId()); if (pet null || pet.getStatus() ! 1) { throw new BusinessException(该宠物不存在或已被领养); } // 2. 防止同一用户重复申请同一宠物 LambdaQueryWrapperAdoptionApply wrapper new LambdaQueryWrapper(); wrapper.eq(AdoptionApply::getPetId, apply.getPetId()) .eq(AdoptionApply::getUserId, apply.getUserId()) .eq(AdoptionApply::getStatus, 0); Long count adoptionApplyMapper.selectCount(wrapper); if (count 0) { throw new BusinessException(您已申请过该宠物请勿重复提交); } // 3. 保存申请 apply.setCreateTime(new Date()); return adoptionApplyMapper.insert(apply) 0; } }这里有两个非常务实的细节。一是加了Transactional事务注解。这保证了整个操作要么全部成功要么全部回滚。虽然在当前代码逻辑里事务作用不大但这个注解本身就是加分项——论文里可以写“系统通过事务机制保证数据操作的一致性”。二是业务校验前置。先检查宠物状态再检查重复申请最后才落库。这就是工作中的真实开发习惯永远不要在数据库层才做约束业务层的校验才是第一道防线。而且这段代码用了MyBatis-Plus的LambdaQueryWrapper相比写XML里的自定义SQL要简洁得多也更容易理解和维护。文件上传模块也是必看的一块。宠物图片的上传、用户头像的上传都走这里。核心逻辑就是把上传的MultipartFile保存到服务器本地磁盘然后把文件访问路径返回给前端PostMapping(/upload) public Result upload(RequestParam(file) MultipartFile file) { if (file.isEmpty()) { return Result.error(上传文件不能为空); } // 生成唯一文件名避免重名覆盖 String originalFilename file.getOriginalFilename(); String ext originalFilename.substring(originalFilename.lastIndexOf(.)); String fileName UUID.randomUUID().toString().replace(-, ) ext; // 按日期分目录存储 String datePath new SimpleDateFormat(yyyyMMdd).format(new Date()); String dirPath uploadDir / datePath; File dir new File(dirPath); if (!dir.exists()) { dir.mkdirs(); } // 保存文件 file.transferTo(new File(dirPath / fileName)); // 返回访问路径 String url /files/ datePath / fileName; return Result.success(url); }用UUID作为文件名防止重名按日期分目录方便管理这两个都是常规操作。另外一个关键点在于上传目录必须配合一个WebMvcConfigurer做静态资源映射否则前端拿到路径也访问不到图片文件Configuration public class WebMvcConfig implements WebMvcConfigurer { Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/files/**) .addResourceHandler(file: uploadDir /); } }这个细节特别容易踩坑。很多人代码写完了图片也能上传成功但页面上图片就是显示不出来八成就是静态资源映射没配。这里配置的含义是所有URL以/files/开头的请求都映射到本地磁盘的uploadDir目录去找对应文件。3.2 Vue前端页面与组件设计前端这边用的是Vue全家桶 Element UI我逐个模块说一下实现思路。项目结构整体采用Vue CLI创建的标准结构src目录下分了api、assets、components、router、store、utils、views这几个目录。api目录按模块封装了Axios请求views目录按页面组织组件。这套结构是业内最常见的Vue项目组织方式清晰易懂答辩时也方便讲解。路由配置使用了Vue Router设定了两种路由的区分。用户端的首页、宠物列表、宠物详情、领养申请、个人中心是一组管理端的宠物管理、申请审核、用户管理、数据统计是另一组。值得一说的是路由守卫的实现router.beforeEach((to, from, next) { const token localStorage.getItem(token); if (to.meta.requireAuth !token) { next(/login); } else { next(); } });这段代码的逻辑是页面跳转前先检查目标路由是否标记了requireAuth如果有这个标记且本地没有token就强制跳到登录页。这就是典型的登录拦截后端接口也做了同样的拦截两边一起保护系统安全。Axios请求封装也很典型。项目在utils目录下创建了request.js用Axios实例统一配置了baseURL添加了请求拦截器和响应拦截器const request axios.create({ baseURL: /api, timeout: 10000 }); // 请求拦截器自动携带token request.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers[token] token; } return config; }); // 响应拦截器统一处理错误码 request.interceptors.response.use( response { const res response.data; if (res.code 200) { return res; } else { Message.error(res.msg); return Promise.reject(new Error(res.msg)); } }, error { Message.error(网络请求异常); return Promise.reject(error); } );这种封装在实际项目中几乎是标配。请求拦截器统一从localStorage取出token放到请求头响应拦截器统一判断后端返回的code码前端不用在每个页面里重复写错误处理逻辑。用统一拦截器来处理跨切面逻辑这就是工程思维在答辩时可以专门讲讲这部分老师会认可你的架构意识。核心页面逻辑也不复杂。宠物列表页通过Card组件加分页列表展示宠物信息点击卡片跳转详情宠物详情页展示了宠物基本信息、图片轮播、领养按钮领养表单页是一个Dialog弹窗里面是Form表单提交后走Axios调后端接口。个人中心页用tab切换展示“我发布的宠物”和“我的领养申请”两块内容。4. 完整部署与运行指南从零到一跑起来4.1 环境准备清单拿到源码包之后第一件事不是看代码而是把环境准备好。这个项目需要的开发环境清单如下软件版本建议用途JDK1.8或11运行SpringBoot后端Maven3.6后端依赖管理与打包MySQL5.7或8.0数据存储Node.js14.x或16.x前端构建环境开发工具IDEA / VSCode代码编辑与运行数据库工具Navicat / DataGrip数据库导入与操作需要特别注意JDK版本的兼容性问题。项目基于SpringBoot 2.x开发如果你装了JDK 17以上的版本大概率会遇到运行时兼容问题。最稳妥的做法是安装JDK 8配好JAVA_HOME环境变量然后用IDEA的Project Structure把项目的SDK指定为JDK 8。Node.js的版本同理Vue CLI 4.x项目在Node 16环境下运行最稳定Node 18以上有时会出现openssl相关的报错。如果你遇到这类问题解决方案是在package.json的scripts里加上serve: set NODE_OPTIONS--openssl-legacy-provider vue-cli-service serveWindows下。4.2 后端启动完整步骤后端启动的流程我按步骤拆解一下。第一步用IDEA打开后端的文件夹一般是项目根目录下的backend或者server目录。IDEA会自动识别Maven项目然后开始下载依赖。如果你的网络环境下载依赖特别慢建议给Maven配置阿里云镜像源。第二步创建数据库。打开Navicat新建一个名为pet_adoption的数据库字符集选utf8mb4排序规则选utf8mb4_general_ci。然后用Navicat的“运行SQL文件”功能导入项目附带SQL脚本。如果SQL脚本里已经有CREATE DATABASE语句那你只需要在Navicat里直接运行整个脚本就行它会自动建库。第三步修改数据库连接配置。找到application.yml文件把数据库名、用户名、密码改成你本机的配置spring: datasource: url: jdbc:mysql://localhost:3306/pet_adoption?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 你的数据库密码 driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl mapper-locations: classpath*:mapper/**/*.xml这里有两个容易踩的坑。一个是serverTimezone参数必须设置否则会报时区异常另一个是MySQL 8.0的驱动类名是com.mysql.cj.jdbc.DriverMySQL 5.7则是com.mysql.jdbc.Driver如果连不上数据库先检查驱动类名是不是匹配。第四步启动后端。找到PetAdoptionApplication.java类名可能略有不同右键点击运行。看到类似下面的日志输出就说明启动成功了Tomcat started on port(s): 8080 (http) with context path 默认端口一般是8080如果8080被占了可以在application.yml里改server.port。4.3 前端启动完整步骤前端的启动要分两步装依赖和启动开发服务器。在命令行里进到前端目录一般是项目根目录下的frontend或者web目录执行npm install如果这个步骤报错或者卡住不动多半是网络问题。可以用淘宝镜像源解决npm config set registry https://registry.npmmirror.comnpm install完成以后直接启动npm run serve启动成功后终端会显示一个本地访问地址一般是http://localhost:8081。打开浏览器访问这个地址就能看到系统首页了。还需要确认一件事前端代码里API请求的地址是否正确。打开前端的vue.config.js或者.env.development文件检查代理配置。常见的配置是在vue.config.js里设置devServer代理把/api开头的请求转发到后端的8080端口devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }这种代理方案的好处是前端只管发/api/xxx的请求由开发服务器转发到后端可以避免跨域问题。如果你看到的前端项目里没有这个配置而是直接用全路径请求比如http://localhost:8080/api/xxx那就要去后端确认是否配置了跨域支持。SpringBoot里常见的跨域配置是加一个CorsFilter我看到这个项目用的是代理方案所以我建议你别在本地强行改代码先把代理这套跑通。5. 常见问题与排查技巧实录5.1 启动阶段的典型报错我在复现这个项目的时候故意模拟了几种常见错误场景方便大家对照排查。报错一端口被占用现象是后端启动时提示Port 8080 was already in use。解决办法很简单找到占用端口的进程杀掉或者改端口。Windows下查看端口占用netstat -ano | findstr 8080会看到一个PID然后打开任务管理器结束对应进程。如果那是你自己跑的其他程序也可以换个思路把SpringBoot的端口改成8081前端代理也同步改一下就行。报错二数据库连接超时或拒绝连接现象是启动时报Access denied for user rootlocalhost (using password: YES)或者Communications link failure。前者是账号密码错误后者是MySQL服务没启动或者端口不对。先检查MySQL服务是否运行Windows下按WinR输入services.msc找到MySQL服务确保状态是“正在运行”。然后检查application.yml里的用户名和密码是不是真的能登录MySQL。通过命令行试一下mysql -u root -p如果密码是对的那就是数据库连接URL里的配置写错了逐一核对就行。报错三前端npm install报错常见的有两种。一种是因为Node版本太高导致node-sass安装失败我建议直接安装Node 14这个问题就消失了。如果你不想换Node版本也可以在项目的package.json里换掉node-sass的版本但那个路比较长不推荐在毕设阶段折腾。另一种是安装卡住多半是网络问题按上文改成淘宝镜像源即可。5.2 运行时的业务逻辑排查项目成功跑起来之后还有几个容易出现但不容易被发现的问题。问题一登录成功但获取不到用户信息如果前端登录成功后刷新页面又跳回登录页说明用户信息没有持久化。这个项目用的是token存localStorage的方案但用户在刷新时重新拉取个人信息接口如果失败就会导致前端认为用户未登录。排查思路清一下浏览器缓存检查后端接口是否需要特殊权限注解。如果后端接口加了RequiresAuthentication之类的拦截但前端发起请求时token没带上那问题多半在Axios的请求拦截器上——检查你的token的存储key是不是同一个。问题二图片上传后页面显示不出来这个前文提过九成是静态资源映射没配置好。你上传成功后拿返回的URL直接访问一下比如http://localhost:8080/files/20240601/xxx.jpg如果404就要去WebMvcConfig里检查映射路径是否和文件名前缀一致。有一个细节得提醒你如果开发时前端走的代理代理也可能会影响图片加载。前端代理只转发了/api开头的请求图片路径一般是不带/api前缀的所以你需要在vue.config.js里额外加一条代理规则proxy: { /api: { target: http://localhost:8080, changeOrigin: true }, /files: { target: http://localhost:8080, changeOrigin: true } }否则就会出现“接口通了但图片全裂”的尴尬局面。这个坑我自己当年做毕设时也踩过印象深刻。问题三领养申请提交失败这个大概率是校验逻辑拦截了。比如同一个用户对同一个宠物提交了两次申请第2次就会被拒绝。前端弹出“您已申请过该宠物请勿重复提交”的提示这不是bug是正常的业务保护。如果你只是想测试流程可以用一个不同账号申请或者找管理员把之前的申请记录驳回再重新申请。5.3 我整理的一份避坑清单最后把一次完整跑项目的经验浓缩成几条关键建议送给即将要动手的你严格按照JDK 8 Node 14 MySQL 5.7这套组合来装环境虽然这组合听起来不够“新潮”但它是这个项目最稳的环境兼容性最好。SQL脚本的导入顺序不要乱。先建库再建表如果有初始化的管理员账号数据也一起导入避免后续登录不了后台。改数据库连接之前先把application.yml原文件备份一份改乱了还能还原。前端代理不要只配/api图片路径/files也要一起配上否则图片加载不出来。拿到项目先跑通再改代码。很多同学喜欢一上来就改样式、改功能结果环境都没跑通出问题了也不知道是环境的锅还是代码的锅排查起来特别痛苦。连不上数据库时先确认MySQL的root密码是否真的正确。很多人装MySQL的时候密码设置了带符号的特殊字符在yaml文件里可能被解析出问题建议密码里不带符号。6. 经验总结从毕业设计到真正的前后端开发我拆解完这个宠物领养系统之后最大的感受是这个项目并不是什么“花架子”代码它里面包含的很多开发习惯和设计思路其实跟真实项目是一致的。先说你从这套代码里能学到的最有价值的东西。第一层是基础CRUD的写法。怎么用MyBatis-Plus写Mapper、怎么在Service层做业务逻辑、怎么在Controller层控制接口行为。这些代码你照着写一遍就掌握了SpringBoot最常用的开发模式。第二层是前后端交互的完整链路。从Vue页面发请求到后端Controller接收、Service处理、Mapper查库、返回JSON数据再到前端渲染页面。这套链路说起来简单但很多刚接触前后端分离的同学就是在这里卡壳不知道数据到底是怎么流起来的。这项目代码量不大非常适合通读一遍把链路理清楚。第三层是工程化的思维。统一响应结果封装、全局异常处理、登录拦截器、路由守卫、Axios拦截器——这些不是某个业务功能的要求而是保证整个系统可维护性的基础设施。你在做毕设的时候如果也能把这些“架子”搭起来答辩时讲出来绝对是加分项。再说你拿到这个项目之后可以往哪些方向去改。从我的角度看有几个扩展既不会太费劲又能让项目有明显差异化加上Redis做会话管理。把token存储从单纯的前端localStorage改成后端Redis管理这是一个经典升级也特别好讲面试。引入Spring Security做权限控制。虽然改动量不小但完成了之后系统的安全性在答辩时会有很硬的说服力。加一个公告轮播图功能。前端首页加个轮播图后端加一张公告表工作量不大但演示时视觉效果好很多。数据统计做成图表。用ECharts显示每月宠物新增数、领养成功率等不仅好看论文里也可“基于可视化分析”写一小节。最后我想说的是毕设项目只是一个阶段性的学习成果。它的意义不在于代码有多牛、功能有多全而在于你自己能不能把每一行代码都讲明白把每一个设计决策都解释清楚。这个宠物领养系统是一个很好的起步点——技术栈主流、业务完整、代码清晰。拿到它以后沉下心从头到尾读一遍代码把关键模块动手改一改跑通了、吃透了它才是真正属于你的东西。如果你在部署或者修改的过程中碰到什么奇怪的问题欢迎在评论区把日志贴出来我看到都会回复。这个项目本身不难但环境问题千奇百怪多交流能省不少时间。本文还有配套的精品资源点击获取