企业官网建设流程全解析

简介：这份资源是面向计算机专业毕业生与答辩准备的SpringBoot+Vue宠物领养系统答辩PPT，适合正在做毕业设计、需要梳理项目思路与答辩材料的学生参考。压缩包内共1个pptx文件，大小约2.65MB，内容围绕选题背景、开发环境、功能结构、操作流程与结论致谢等答辩环节展开，可直接用于答辩演示或作为PPT排版与内容组织的参考模板。系统采用Java+SpringBoot+MySQL开发，前端使用Vue.js构建B/S三层架构，按软件工程流程实施并借助UML完成分析与设计，功能上区分管理员与用户两类角色：管理员负责用户信息、宠物领养与认领、教学视频、感谢信及公告的管理与审核，用户则可申请领养或认领、查看审核状态、发布感谢信并收藏留言教学视频。目前已有1486人学习下载，能帮助读者快速理解项目整体架构、功能模块划分与答辩陈述逻辑，节省整理答辩材料的时间。

1. 从一份答辩 PPT 说起：这套 SpringBoot+Vue 宠物领养系统到底能跑通什么

如果你正在为计算机毕业设计发愁，尤其是选题定了“宠物领养系统”却不知道从哪下手，那这份《SpringBoot+Vue宠物领养系统答辩PPT.pptx》值得你花十分钟看完。它不是一份空泛的模板，而是一个已经走完“选题背景—开发环境—功能设计—操作流程—结论致谢”全流程的答辩材料，配套的源码和论文也在同一套资源里。换句话说，你拿到的不是一张皮，而是一个能直接对照复现的完整项目骨架。

这套系统用 Java + Spring Boot 做后端，MySQL 存数据，Vue.js 做前端，B/S 三层架构，按软件工程流程走，UML 做分析与设计。管理员管用户、宠物领养、宠物认领、教学视频、感谢信和公告，还要审核领养与认领申请；用户能申请领养、申请认领、查看审核状态、发感谢信、收藏和留言教学视频。适合谁？适合选了同类题但不知道怎么拆功能模块、怎么设计数据表、怎么把前后端串起来的同学，也适合想拿一个真实可运行项目练手 Spring Boot + Vue 全栈的开发者。

提示：这份资源的核心价值在于“答辩 PPT + 配套源码 + 论文”三件套，PPT 负责讲清设计思路，源码负责落地，论文负责补全文档。三者对照看，比单独啃代码快得多。

2. 环境搭建与项目启动：从零把 SpringBoot+Vue 跑起来

2.1 后端环境：JDK、Maven 与 MySQL 的版本对齐

这套系统后端是 Spring Boot，常见做法是用 JDK 1.8 或 JDK 11，Maven 3.6 以上，MySQL 5.7 或 8.0。版本不对齐是新手翻车最多的地方——JDK 17 配老版 Spring Boot 会报反射相关的错，MySQL 8.0 配旧版驱动会连不上。我一般会先确认三件事：java -version、mvn -v、mysql --version，三个都对了再往下走。

# 检查基础环境，三条命令缺一不可 java -version mvn -v mysql --version # 登录 MySQL 并创建数据库，字符集用 utf8mb4 避免中文乱码 mysql -u root -p CREATE DATABASE pet_adoption DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

逻辑说明：第一条命令确认 JDK 版本，Spring Boot 2.x 系列建议 JDK 8 或 11；第二条确认 Maven 能正常调用；第三条确认 MySQL 服务在跑。建库时指定utf8mb4是因为宠物名称、感谢信内容、公告都可能出现中文和特殊符号，用默认字符集后期改起来很麻烦。参数上，数据库名可以按自己习惯改，但改完要同步改application.yml里的spring.datasource.url。

2.2 后端配置：application.yml 里四个必须改的项

拿到源码后，第一件事不是急着mvn spring-boot:run，而是打开src/main/resources/application.yml，把数据库连接、端口、文件上传路径、日志级别这四项过一遍。很多“启动就报错”的情况，根源都在这里。

server: port: 8080 # 后端端口，和前端代理保持一致 spring: datasource: url: jdbc:mysql://localhost:3306/pet_adoption?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: 你的密码 driver-class-name: com.mysql.cj.jdbc.Driver servlet: multipart: max-file-size: 10MB # 宠物图片上传大小限制 max-request-size: 20MB mybatis-plus: mapper-locations: classpath:mapper/*.xml configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 开发期打印 SQL，上线关掉

逻辑说明：url里的serverTimezone=Asia/Shanghai是 MySQL 8.0 的必填项，不写会报时区错误；max-file-size控制单文件上传上限，宠物图片一般 2MB 以内就够，设 10MB 是留余量；log-impl打开后控制台会打印每条 SQL，方便排查“查不到数据”的问题，但上线前一定关掉，否则日志量会拖慢响应。参数怎么改：数据库名、用户名、密码按你本机实际情况填，端口如果 8080 被占用就改成 8081，同时前端代理也要同步改。

2.3 前端环境：Node.js 版本与依赖安装的坑

前端是 Vue.js 项目，常见做法是 Node.js 14 或 16，npm 6 以上。Node 版本过高（比如 18+）有时会碰到node-sass编译失败，这是血泪经验——不是代码问题，是依赖和 Node 版本不匹配。解决办法要么降 Node 版本，要么把node-sass换成sass（dart-sass）。

# 进入前端目录，安装依赖 cd frontend npm install # 如果 node-sass 报错，先卸载再换 dart-sass npm uninstall node-sass npm install sass --save-dev # 启动开发服务器，默认端口 8081 npm run serve

逻辑说明：npm install会读取package.json安装所有依赖，耗时取决于网络；如果卡在node-sass的 postinstall 阶段，就是版本不兼容，换sass即可。npm run serve启动的是 Vue CLI 的开发服务器，通常带热更新，改完代码浏览器自动刷新。启动后访问http://localhost:8081，如果页面能出来但接口报 404，说明前端代理没配好，去vue.config.js里检查proxy指向的后端地址和端口。

2.4 前后端联调：跨域与代理配置

前后端分离项目绕不开跨域。开发阶段常见做法是在vue.config.js里配代理，把/api开头的请求转发到后端，这样浏览器看到的是同源请求，不会触发 CORS 拦截。

// vue.config.js module.exports = { devServer: { port: 8081, proxy: { '/api': { target: 'http://localhost:8080', // 后端地址 changeOrigin: true, // 允许跨域 pathRewrite: { '^/api': '' } // 去掉 /api 前缀再转发 } } } }

逻辑说明：target填后端实际地址和端口；changeOrigin: true让代理服务器伪装请求来源，绕过浏览器的同源策略；pathRewrite是因为后端接口路径通常不带/api，前端加前缀只是为了区分静态资源和接口。改完记得重启npm run serve，代理配置不会热更新。如果联调时登录接口返回 200 但前端拿不到数据，先看浏览器 Network 面板里响应体是不是空的，再查后端控制台有没有 SQL 报错。

3. 功能模块拆解：管理员与用户两条线的实现逻辑

3.1 管理员端：宠物领养与认领的审核状态机

管理员端最核心的不是增删改查，而是审核状态流转。宠物领养和认领都涉及“用户申请 → 管理员审核 → 状态变更”这条链路。常见做法是在宠物表里加一个status字段，用 0 表示待审核、1 表示已通过、2 表示已拒绝，审核通过后把宠物状态改成“已被领养”或“已找到主人”。

-- 宠物领养信息表核心字段 CREATE TABLE pet_adoption ( id INT PRIMARY KEY AUTO_INCREMENT, pet_name VARCHAR(50) NOT NULL, pet_type VARCHAR(20), pet_img VARCHAR(255), description TEXT, status TINYINT DEFAULT 0, -- 0待审核 1已通过 2已拒绝 adopter_id INT, -- 领养人ID create_time DATETIME DEFAULT CURRENT_TIMESTAMP ); -- 审核通过时更新状态和领养人 UPDATE pet_adoption SET status = 1, adopter_id = ? WHERE id = ?;

逻辑说明：status字段是状态机的核心，所有列表查询都要带WHERE status = 1才能只显示已通过的宠物；adopter_id在审核通过时才写入，保证未被领养的宠物不会被误关联。参数上，pet_type可以做成字典表或枚举，方便前端下拉选择；create_time用数据库默认值，避免后端忘记赋值。审核拒绝时把status改成 2，前端根据状态显示不同标签，用户也能在“我的申请”里看到进度。

3.2 用户端：领养申请与认领申请的差异处理

用户端有两个容易混淆的功能：申请领养和申请认领。领养是“我看中一只待领养的宠物，申请带回家”；认领是“我捡到或丢失了一只宠物，发布信息等主人来认”。两者在数据表设计上可以共用一张宠物表，但用type字段区分，申请流程也走不同的审核入口。

// 申请领养接口的核心逻辑（简化示意） @PostMapping("/adopt/apply") public Result applyAdopt(@RequestBody AdoptApplyDTO dto) { Pet pet = petService.getById(dto.getPetId()); if (pet.getStatus() != 0) { return Result.fail("该宠物已被领养或正在审核中"); } AdoptApply apply = new AdoptApply(); apply.setPetId(dto.getPetId()); apply.setUserId(dto.getUserId()); apply.setStatus(0); // 待审核 adoptApplyService.save(apply); return Result.success("申请已提交，等待管理员审核"); }

逻辑说明：先查宠物当前状态，只有status = 0（待领养）才允许申请，这是防止重复申请的关键判断；申请记录单独存一张表，保留申请时间、用户ID、审核状态，方便用户查进度和管理员批量审核。参数上，AdoptApplyDTO至少包含petId和userId，如果要做实名领养还可以加联系方式字段。认领申请的差异在于：认领是用户发布宠物信息，管理员审核的是“信息真实性”，而不是“是否同意领走”，所以审核通过后宠物状态变成“待主人认领”，而不是直接关联用户。

3.3 教学视频与感谢信：收藏、留言的关联表设计

教学视频和感谢信是这套系统的两个附加模块，看似简单，但收藏和留言涉及多对多关系，表设计不对后期查询会很别扭。常见做法是：视频表存视频基本信息，收藏表存user_id和video_id，留言表存user_id、video_id和留言内容。

-- 视频收藏表 CREATE TABLE video_collect ( id INT PRIMARY KEY AUTO_INCREMENT, user_id INT NOT NULL, video_id INT NOT NULL, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY uk_user_video (user_id, video_id) -- 防止重复收藏 ); -- 视频留言表 CREATE TABLE video_comment ( id INT PRIMARY KEY AUTO_INCREMENT, user_id INT NOT NULL, video_id INT NOT NULL, content VARCHAR(500), create_time DATETIME DEFAULT CURRENT_TIMESTAMP );

逻辑说明：UNIQUE KEY是防止同一用户重复收藏同一视频，前端点收藏时如果已经收藏过，后端捕获唯一键冲突返回“已收藏”提示即可；留言表不加唯一约束，因为同一用户可以多次留言。查询时用LEFT JOIN把用户昵称带出来，避免前端再发一次请求。感谢信模块类似，只是把video_id换成letter_id，收藏变成“点赞”或“查看”。

4. 避坑与排查：这套系统最容易翻车的五个地方

4.1 启动报“Table doesn't exist”，但数据库里明明有表

现象：mvn spring-boot:run启动后访问接口报错，控制台提示某张表不存在，但你去 MySQL 里SHOW TABLES能看到。原因：application.yml里的数据库名和实际建库名不一致，或者 MyBatis-Plus 的mapper-locations路径写错，导致 XML 没加载到。解决：先确认url里的库名和CREATE DATABASE时一致，再检查mapper-locations是否指向classpath:mapper/*.xml，最后看 XML 里的namespace是否和 Mapper 接口全限定名对得上。

4.2 前端页面能打开，但所有接口返回 404

现象：浏览器访问http://localhost:8081正常显示登录页，但点登录按钮提示“请求失败”，Network 面板显示 404。原因：vue.config.js里的proxy没配，或者target指向的端口和后端实际端口不一致。解决：确认后端启动日志里Tomcat started on port(s): 8080，然后检查proxy的target是不是http://localhost:8080，pathRewrite是否把/api去掉了。改完必须重启前端开发服务器。

4.3 图片上传成功但页面不显示

现象：管理员发布宠物信息时上传图片提示成功，但列表里图片位置是裂图。原因：后端把文件存到了本地磁盘某个目录，但没配静态资源映射，或者前端拼接的图片 URL 少了前缀。解决：在后端加一个WebMvcConfigurer实现类，把上传目录映射到/upload/**；前端用:src="'/upload/' + item.petImg"拼接。如果用了 Nginx，还要在 Nginx 里加一条location /upload/指向实际目录。

4.4 审核通过后列表状态没变

现象：管理员点了“审核通过”，提示成功，但刷新列表宠物状态还是“待审核”。原因：审核接口只更新了申请表的status，忘了同步更新宠物表的status和adopter_id。解决：审核逻辑里用事务包住两个更新操作，先改申请表，再改宠物表，任一失败就回滚。检查时看后端控制台打印的 SQL，确认两条UPDATE都执行了。

4.5 中文乱码：从数据库到前端全链路排查

现象：感谢信内容或宠物描述里的中文显示成问号或乱码。原因：数据库字符集不是utf8mb4，或者 JDBC URL 没加characterEncoding=utf8，或者前端请求头没带Content-Type: application/json;charset=utf-8。解决：按“数据库 → 连接串 → 后端响应 → 前端请求”顺序排查。建库时用utf8mb4，JDBC URL 加useUnicode=true&characterEncoding=utf8，后端返回 JSON 时 Spring Boot 默认就是 UTF-8，前端 axios 默认也是 UTF-8，一般前两步对了就不会乱码。

5. 答辩演示与二次开发：把 PPT 讲成加分项的几个技巧

答辩 PPT 不是把论文目录搬上去，评委想听的是“你为什么这么设计”和“你踩过什么坑”。这套 PPT 里已经给了选题背景、开发环境、功能结构、操作流程、结论致谢的完整框架，但直接念稿子效果很差。我一般会建议把“功能结构设计”那几页拆成“管理员视角”和“用户视角”两条线，每条线用一张流程图加一句核心逻辑，比如“管理员审核领养申请时，系统会同时更新申请状态和宠物状态，保证数据一致”。评委听到“同时更新”和“保证一致”，就知道你理解事务，而不是只会 CRUD。

二次开发方面，这套系统有几个容易扩展的点。一是把审核状态从两级（待审核/已通过）扩展成多级（待初审/待复审/已通过/已拒绝），适合想加工作流引擎的同学；二是把教学视频模块换成“宠物养护知识库”，加标签和搜索，适合想练 Elasticsearch 的同学；三是把感谢信改成“领养回访记录”，加定时提醒，适合想练定时任务的同学。每个扩展点都能在答辩时讲成“我在原有基础上做了哪些改进”，比单纯说“我完成了增删改查”有说服力得多。

// 前端权限控制：根据角色动态渲染菜单（简化示意） const routes = [ { path: '/admin', component: AdminLayout, meta: { role: 'admin' } }, { path: '/user', component: UserLayout, meta: { role: 'user' } } ] router.beforeEach((to, from, next) => { const role = localStorage.getItem('role') if (to.meta.role && to.meta.role !== role) { next('/login') // 角色不匹配踢回登录页 } else { next() } })

逻辑说明：meta.role标记路由所需角色，beforeEach在每次跳转前检查本地存储的角色是否匹配，不匹配就跳登录页。这是前端层面的权限控制，后端接口也要做同样的校验，否则用户手动改 URL 还是能访问。参数上，localStorage存角色不安全，正式项目建议存 token，由后端解析角色。答辩时如果被问到“前端权限控制有什么用”，可以答“防止用户误操作进入无权页面，但真正的安全边界在后端”。

从那以后我每次拿到一个前后端分离项目，都强制先跑通“登录 → 查列表 → 提交表单”这条最小闭环，再去看其他功能。这套宠物领养系统的最小闭环就是：用户登录后能看到待领养宠物列表，点申请领养能提交成功，管理员登录后能看到申请记录并审核通过。这条链路通了，剩下的模块都是复制粘贴加改字段。希望帮到你。

本文还有配套的精品资源，点击获取