尧图网站建设 
简介这是一份面向Java毕业设计及课程设计的SpringBootVue流浪动物救助平台完整项目包。系统包含前台首页、用户注册登录、新闻动态、志愿者风采、爱心募捐、动物类别、留言板以及后台个人用户与管理员的领养申请、志愿者管理、爱心捐助、留言管理等模块适合计算机相关专业学生作为毕设参考或Java学习者实战练习。压缩包整体约50.66MB内含项目源码、数据库脚本、开发说明文档、演示视频及代码注释等文件总数未单独列出保证调试可运行。目前已有422人浏览学习使用即可获得一套可直接启动的完整方案便于快速理解前后端交互与SpringBootVue项目结构。1. 从毕业设计到生产项目SpringBootVue的这套组合为什么是主流流浪动物救助平台的题目在课程设计和毕业设计里出镜率很高普通用户浏览待领养宠物、提交领养申请管理员审核状态、维护宠物信息偶尔还要处理寻主启事和捐赠记录。业务看着不大角色权限、状态流转和图片上传一样不少正好把SpringBoot后端、Vue前端、MySQL数据库和交接文档全串起来。选SpringBootVue理由很实在——这套前后端分离组合的资料密度最大从创建项目到跑通列表页遇到问题能快速搜到对照解法。下面按“后端接口 → 前端交互 → 数据表 → 联调部署”往下讲每一步都给出可复制的命令、代码和参数解释适合正在做课程设计、毕设或者想把这套系统补完整的人。2. SpringBoot后端接口分层、鉴权与文件上传的落地组合流浪动物救助平台的后端复杂度不高但“能写接口”和“能交接给别人跑”是两回事。我会先定包结构再选持久层框架最后统一处理登录态和文件上传。2.1 包结构先按业务切别按技术切常见做法是按 controller/service/mapper/entity 四层切包看起来规整实际加功能时要跨五个目录找文件。对这种业务边界清晰的系统按模块切更舒服com.rescue ├── common // 统一返回体、全局异常、配置 ├── security // JWT、拦截器、登录接口 ├── pet // 宠物模块Controller / Service / Mapper / 实体 └── adopt // 领养申请模块后续加“寻主启事”“捐赠记录”时直接新增一个包不碰原有模块。common 里的ResultT统一包装 code、message、data 三个字段所有接口都返回这个结构前端 axios 拦截器处理起来就省事。2.2 用 MyBatis-Plus 操作 Pet 表少写一半 SQL选型上Spring Data JPA 也常见但这类系统动态查询多、分页多MyBatis-Plus 的 LambdaQueryWrapper 写起来更顺手。pom 里引入依赖后实体直接映射表dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.7/version /dependency对应实体Data TableName(pet) public class Pet { TableId(type IdType.AUTO) private Integer id; private String name; private String species; // 猫 / 狗 private String breed; private Integer ageMonth; // 月龄 private String status; // WAIT / APPROVED / ADOPTED private String coverImage; private String detail; private LocalDateTime createTime; }TableName指定的表名要和数据库一致字段命名用驼峰MyBatis-Plus 默认开启下划线自动映射。status用字符串而不是数字接口返回给前端时能直接判断状态含义比如 WAIT 是待领养ADOPTED 是已领养。年龄用ageMonth而非字符串描述这样列表页可以筛“三个月以下幼猫”或排序。分页接口是这类系统的标配直接写在 Controller 里GetMapping(/pet/page) public ResultIPagePet page(RequestParam(defaultValue 1) long current, RequestParam(defaultValue 10) long size, RequestParam(required false) String species) { PagePet page new Page(current, size); LambdaQueryWrapperPet wrapper new LambdaQueryWrapper(); wrapper.eq(StringUtils.hasText(species), Pet::getSpecies, species) .orderByDesc(Pet::getCreateTime); return Result.ok(petService.page(page, wrapper)); }这里的要点是eq(condition, column, value)第一个参数为 true 才拼接条件。species 传空时返回全部宠物传 “cat” 时只查猫。分页参数current从 1 开始不是数据库里的 offset前端传页码前先确认这个约定。提示分页参数建议从请求里显式取不要直接信任前端传的 size 值加一个最大 50 的限制能避免别人一次拉走全表数据。2.3 JWT 做登录态拦截器里区分角色平台里至少有三类角色游客、普通用户、救助站管理员。最省事的方案是登录成功后签发 JWT前端后续请求都带 Authorization 头。JWT 工具类常见写法如下注意这是 jjwt 0.12 之后的 API 风格Component public class JwtUtil { private final SecretKey key Keys.hmacShaKeyFor( rescue-platform-demo-secret-2024.getBytes(StandardCharsets.UTF_8)); public String generateToken(Integer userId, String role) { return Jwts.builder() .subject(String.valueOf(userId)) .claim(role, role) .expiration(new Date(System.currentTimeMillis() 7L * 24 * 3600 * 1000)) .signWith(key) .compact(); } }Keys.hmacShaKeyFor对密钥长度有硬性要求HS256 算法下必须满 32 字节短了启动时会抛 WeakKeyException。过期时间给 7 天演示和评审都够用。拦截器里解析 token 拿到role后对/admin/**路径校验管理员角色避免普通用户直接调删除接口。文件上传涉及磁盘路径和访问 URL 的区分放到最后一章展开。3. Vue前端宠物列表、路由守卫与接口封装的交互细节前端如果还在从 Vue2 起步建议直接切 Vue3 Vite Element Plus。组合式 API 在列表和表单场景更简洁官方文档和社区示例也全面遇到安装依赖的报错基本都能在环境配置相关文章里找到对照解法。3.1 用 Vue Router 把页面组织成两套布局前台页面给游客和普通用户看后台页面给管理员用路由直接分成两个布局const routes [ { path: /, component: Layout, children: [ { path: , component: PetList }, { path: pet/:id, name: PetDetail, component: PetDetail, props: true } ] }, { path: /admin, component: AdminLayout, meta: { requiresAuth: true, role: ADMIN }, children: [ { path: pending, component: PendingApprove } ] } ]pet/:id是动态路由段组件里通过route.params.id取宠物 ID。meta字段挂权限信息配合全局前置守卫router.beforeEach((to) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { return /login } })Vue Router 4 中守卫返回false表示取消导航返回路径字符串表示重定向到对应页面返回值语义要记清。这里只校验了 token 是否存在实际项目还需要根据角色字段判断是否有权访问后台。3.2 axios 实例处理 baseURL、超时和错误提示直接在每个页面里调用 axios 也能跑但后端接口路径一变就要改多处。我会先封装一个 request 模块import axios from axios import router from ../router 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( resp resp.data, err { if (err.response?.status 401) { router.push(/login) } return Promise.reject(err) } ) export default requestbaseURL 设为/api开发环境用 Vite 代理转发到后端 8080生产环境由 Nginx 统一转发前后端都不需要关心跨域细节。timeout 给 10 秒本机联调接口响应通常几十毫秒10 秒足够判断服务是否异常。401 统一跳登录页避免每个接口都写重复逻辑。3.3 宠物卡片用组件抽离列表和详情页共用script setup const props defineProps({ pet: { type: Object, required: true } }) /script template div classpet-card img :srcpet.coverImage :altpet.name / h3{{ pet.name }}/h3 p{{ pet.breed }} · {{ pet.ageMonth }}个月/p el-tag v-ifpet.status WAIT typesuccess待领养/el-tag el-tag v-else typeinfo已领养/el-tag /div /templatedefineProps是 Vue3script setup的标准用法子组件不修改 props列表数据由父组件请求接口后传入。这样首页列表和后台管理页可以复用同一套展示逻辑只改操作按钮就行。4. 流浪动物救助平台的数据库设计用三张核心表撑起救助流程数据模型单独看每张表都不复杂关键是状态关系和冗余控制。我做这类系统时从 pet 表起步再用领养申请把用户和宠物关联起来最后用文档把这些定义固化下来。4.1 pet 表的字段先支撑“列表 筛选 详情”建表 SQL 一般是这样CREATE TABLE pet ( id INT PRIMARY KEY AUTO_INCREMENT COMMENT 宠物ID, name VARCHAR(50) NOT NULL COMMENT 宠物昵称, species VARCHAR(20) NOT NULL COMMENT 猫/狗, breed VARCHAR(50) COMMENT 品种, age_month INT COMMENT 月龄, sex TINYINT DEFAULT 1 COMMENT 性别 1公 2母, status VARCHAR(20) DEFAULT WAIT COMMENT 领养状态, cover_image VARCHAR(255) COMMENT 封面图URL, detail TEXT COMMENT 健康状况描述, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, KEY idx_species (species) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;两个关键决定species 用 VARCHAR 不用 ENUM后续扩展“兔子”“鸟类”不用改表结构status 用字符串方便接口层直接映射查 SQL 时看到值就能明白意思。age_month 存整数避免“1岁3个月”这种文本在筛选排序时没法处理。detail 字段用 TEXT注意它不能参与排序和索引列表排序只走 create_time。4.2 领养申请单独建表保存全过程状态如果直接在 pet 表上存申请人的 user_id一次申请被拒绝后历史记录就被覆盖了管理员没法回溯。更合理的做法是建一张领养申请表把每次申请和审核行为都记录成一行CREATE TABLE adopt_apply ( id INT PRIMARY KEY AUTO_INCREMENT, pet_id INT NOT NULL COMMENT 宠物ID, user_id INT NOT NULL COMMENT 申请人ID, reason VARCHAR(500) COMMENT 领养理由, status VARCHAR(20) DEFAULT PENDING COMMENT PENDING / APPROVED / REJECTED, reviewer_id INT COMMENT 审核人ID, review_remark VARCHAR(255) COMMENT 驳回原因, apply_time DATETIME DEFAULT CURRENT_TIMESTAMP, review_time DATETIME, KEY idx_pet (pet_id), KEY idx_user (user_id), CONSTRAINT fk_apply_pet FOREIGN KEY (pet_id) REFERENCES pet(id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;这张表把“谁申请了哪只动物、为什么、审核到哪一环节”完整保存下来。后台审核列表就是查这张表 join pet 和 user。审核通过后需要同步更新 pet.status 为 ADOPTED这两步必须放在同一个事务里否则会出现“申请已通过但宠物还挂着待领养”的脏数据。提示审核状态流转后建议再写一条状态变更记录哪怕是往 apply 表里更新一个 review_time也能让后续排查问题时有据可查。4.3 建库 SQL 和文档一起放进项目仓库数据库课程设计阶段很多人在 Navicat 里直接建表最后交一个 png 截图就算完。评审要的是可复现的东西建表 SQL、初始化数据、字段说明。用 Navicat 的“转储 SQL 文件”功能导出 schema 和 insert 语句放到项目 docs 目录下。文档至少要有这三个文件文件内容README.md项目简介、技术栈、目录结构、本地启动步骤部署手册后端打包命令、前端 build 命令、Nginx 配置、数据库初始化步骤API.md接口路径、请求参数、返回示例、登录和鉴权说明部署手册里我会特别标清楚数据库连接串、上传目录配置在第几行这样别人拿到压缩包后不用通读代码就能启动服务。5. SpringBootVue联调打包跨域、文件地址与版本坑位前后端分开开发时常见的坑集中在跨域、文件路径和版本兼容三块。5.1 跨域报错的常见解法前端开发服务器跑在 5173后端接口在 8080浏览器默认拦截跨域响应。我不建议在每个 Controller 上加CrossOrigin而是用全局过滤器统一处理Configuration public class CorsConfig { Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); CorsConfiguration config new CorsConfiguration(); config.addAllowedOriginPattern(*); config.addAllowedMethod(*); config.addAllowedHeader(*); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); } }用addAllowedOriginPattern(*)而不是addAllowedOrigin(*)后者在请求携带 Authorization 头时某些版本会出问题。前端发的是OPTIONS预检请求后端正常处理后实际请求才能到 Controller。5.2 文件上传保存路径和访问 URL 要分开宠物封面图上传后保存到本地磁盘配置写在 application.ymlupload: dir: /data/rescue/upload url-prefix: /files/**上传时用 UUID 重命名文件把http://localhost:8080/files/xxx.jpg这个 URL 写入数据库而不是存D:\upload\xxx.jpg这样的本地路径。否则前端在另一台机器渲染页面时图片全部裂开。5.3 SpringBoot 版本太高引发的兼容问题SpringBoot 3.x 之后javax 包迁移到了 jakarta旧版拦截器、JWT 代码的 import 路径要全改MyBatis-Plus 也要换成mybatis-plus-spring-boot3-starter才能匹配。遇到这类问题先看 Maven 依赖树确认实际引入的传递依赖版本别在无关的配置上浪费时间。本文还有配套的精品资源点击获取 SpringBoot+Vue前后端分离项目实战：流浪动物救助平台开发指南
简介这是一份面向Java毕业设计及课程设计的SpringBootVue流浪动物救助平台完整项目包。系统包含前台首页、用户注册登录、新闻动态、志愿者风采、爱心募捐、动物类别、留言板以及后台个人用户与管理员的领养申请、志愿者管理、爱心捐助、留言管理等模块适合计算机相关专业学生作为毕设参考或Java学习者实战练习。压缩包整体约50.66MB内含项目源码、数据库脚本、开发说明文档、演示视频及代码注释等文件总数未单独列出保证调试可运行。目前已有422人浏览学习使用即可获得一套可直接启动的完整方案便于快速理解前后端交互与SpringBootVue项目结构。1. 从毕业设计到生产项目SpringBootVue的这套组合为什么是主流流浪动物救助平台的题目在课程设计和毕业设计里出镜率很高普通用户浏览待领养宠物、提交领养申请管理员审核状态、维护宠物信息偶尔还要处理寻主启事和捐赠记录。业务看着不大角色权限、状态流转和图片上传一样不少正好把SpringBoot后端、Vue前端、MySQL数据库和交接文档全串起来。选SpringBootVue理由很实在——这套前后端分离组合的资料密度最大从创建项目到跑通列表页遇到问题能快速搜到对照解法。下面按“后端接口 → 前端交互 → 数据表 → 联调部署”往下讲每一步都给出可复制的命令、代码和参数解释适合正在做课程设计、毕设或者想把这套系统补完整的人。2. SpringBoot后端接口分层、鉴权与文件上传的落地组合流浪动物救助平台的后端复杂度不高但“能写接口”和“能交接给别人跑”是两回事。我会先定包结构再选持久层框架最后统一处理登录态和文件上传。2.1 包结构先按业务切别按技术切常见做法是按 controller/service/mapper/entity 四层切包看起来规整实际加功能时要跨五个目录找文件。对这种业务边界清晰的系统按模块切更舒服com.rescue ├── common // 统一返回体、全局异常、配置 ├── security // JWT、拦截器、登录接口 ├── pet // 宠物模块Controller / Service / Mapper / 实体 └── adopt // 领养申请模块后续加“寻主启事”“捐赠记录”时直接新增一个包不碰原有模块。common 里的ResultT统一包装 code、message、data 三个字段所有接口都返回这个结构前端 axios 拦截器处理起来就省事。2.2 用 MyBatis-Plus 操作 Pet 表少写一半 SQL选型上Spring Data JPA 也常见但这类系统动态查询多、分页多MyBatis-Plus 的 LambdaQueryWrapper 写起来更顺手。pom 里引入依赖后实体直接映射表dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.7/version /dependency对应实体Data TableName(pet) public class Pet { TableId(type IdType.AUTO) private Integer id; private String name; private String species; // 猫 / 狗 private String breed; private Integer ageMonth; // 月龄 private String status; // WAIT / APPROVED / ADOPTED private String coverImage; private String detail; private LocalDateTime createTime; }TableName指定的表名要和数据库一致字段命名用驼峰MyBatis-Plus 默认开启下划线自动映射。status用字符串而不是数字接口返回给前端时能直接判断状态含义比如 WAIT 是待领养ADOPTED 是已领养。年龄用ageMonth而非字符串描述这样列表页可以筛“三个月以下幼猫”或排序。分页接口是这类系统的标配直接写在 Controller 里GetMapping(/pet/page) public ResultIPagePet page(RequestParam(defaultValue 1) long current, RequestParam(defaultValue 10) long size, RequestParam(required false) String species) { PagePet page new Page(current, size); LambdaQueryWrapperPet wrapper new LambdaQueryWrapper(); wrapper.eq(StringUtils.hasText(species), Pet::getSpecies, species) .orderByDesc(Pet::getCreateTime); return Result.ok(petService.page(page, wrapper)); }这里的要点是eq(condition, column, value)第一个参数为 true 才拼接条件。species 传空时返回全部宠物传 “cat” 时只查猫。分页参数current从 1 开始不是数据库里的 offset前端传页码前先确认这个约定。提示分页参数建议从请求里显式取不要直接信任前端传的 size 值加一个最大 50 的限制能避免别人一次拉走全表数据。2.3 JWT 做登录态拦截器里区分角色平台里至少有三类角色游客、普通用户、救助站管理员。最省事的方案是登录成功后签发 JWT前端后续请求都带 Authorization 头。JWT 工具类常见写法如下注意这是 jjwt 0.12 之后的 API 风格Component public class JwtUtil { private final SecretKey key Keys.hmacShaKeyFor( rescue-platform-demo-secret-2024.getBytes(StandardCharsets.UTF_8)); public String generateToken(Integer userId, String role) { return Jwts.builder() .subject(String.valueOf(userId)) .claim(role, role) .expiration(new Date(System.currentTimeMillis() 7L * 24 * 3600 * 1000)) .signWith(key) .compact(); } }Keys.hmacShaKeyFor对密钥长度有硬性要求HS256 算法下必须满 32 字节短了启动时会抛 WeakKeyException。过期时间给 7 天演示和评审都够用。拦截器里解析 token 拿到role后对/admin/**路径校验管理员角色避免普通用户直接调删除接口。文件上传涉及磁盘路径和访问 URL 的区分放到最后一章展开。3. Vue前端宠物列表、路由守卫与接口封装的交互细节前端如果还在从 Vue2 起步建议直接切 Vue3 Vite Element Plus。组合式 API 在列表和表单场景更简洁官方文档和社区示例也全面遇到安装依赖的报错基本都能在环境配置相关文章里找到对照解法。3.1 用 Vue Router 把页面组织成两套布局前台页面给游客和普通用户看后台页面给管理员用路由直接分成两个布局const routes [ { path: /, component: Layout, children: [ { path: , component: PetList }, { path: pet/:id, name: PetDetail, component: PetDetail, props: true } ] }, { path: /admin, component: AdminLayout, meta: { requiresAuth: true, role: ADMIN }, children: [ { path: pending, component: PendingApprove } ] } ]pet/:id是动态路由段组件里通过route.params.id取宠物 ID。meta字段挂权限信息配合全局前置守卫router.beforeEach((to) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { return /login } })Vue Router 4 中守卫返回false表示取消导航返回路径字符串表示重定向到对应页面返回值语义要记清。这里只校验了 token 是否存在实际项目还需要根据角色字段判断是否有权访问后台。3.2 axios 实例处理 baseURL、超时和错误提示直接在每个页面里调用 axios 也能跑但后端接口路径一变就要改多处。我会先封装一个 request 模块import axios from axios import router from ../router 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( resp resp.data, err { if (err.response?.status 401) { router.push(/login) } return Promise.reject(err) } ) export default requestbaseURL 设为/api开发环境用 Vite 代理转发到后端 8080生产环境由 Nginx 统一转发前后端都不需要关心跨域细节。timeout 给 10 秒本机联调接口响应通常几十毫秒10 秒足够判断服务是否异常。401 统一跳登录页避免每个接口都写重复逻辑。3.3 宠物卡片用组件抽离列表和详情页共用script setup const props defineProps({ pet: { type: Object, required: true } }) /script template div classpet-card img :srcpet.coverImage :altpet.name / h3{{ pet.name }}/h3 p{{ pet.breed }} · {{ pet.ageMonth }}个月/p el-tag v-ifpet.status WAIT typesuccess待领养/el-tag el-tag v-else typeinfo已领养/el-tag /div /templatedefineProps是 Vue3script setup的标准用法子组件不修改 props列表数据由父组件请求接口后传入。这样首页列表和后台管理页可以复用同一套展示逻辑只改操作按钮就行。4. 流浪动物救助平台的数据库设计用三张核心表撑起救助流程数据模型单独看每张表都不复杂关键是状态关系和冗余控制。我做这类系统时从 pet 表起步再用领养申请把用户和宠物关联起来最后用文档把这些定义固化下来。4.1 pet 表的字段先支撑“列表 筛选 详情”建表 SQL 一般是这样CREATE TABLE pet ( id INT PRIMARY KEY AUTO_INCREMENT COMMENT 宠物ID, name VARCHAR(50) NOT NULL COMMENT 宠物昵称, species VARCHAR(20) NOT NULL COMMENT 猫/狗, breed VARCHAR(50) COMMENT 品种, age_month INT COMMENT 月龄, sex TINYINT DEFAULT 1 COMMENT 性别 1公 2母, status VARCHAR(20) DEFAULT WAIT COMMENT 领养状态, cover_image VARCHAR(255) COMMENT 封面图URL, detail TEXT COMMENT 健康状况描述, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, KEY idx_species (species) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;两个关键决定species 用 VARCHAR 不用 ENUM后续扩展“兔子”“鸟类”不用改表结构status 用字符串方便接口层直接映射查 SQL 时看到值就能明白意思。age_month 存整数避免“1岁3个月”这种文本在筛选排序时没法处理。detail 字段用 TEXT注意它不能参与排序和索引列表排序只走 create_time。4.2 领养申请单独建表保存全过程状态如果直接在 pet 表上存申请人的 user_id一次申请被拒绝后历史记录就被覆盖了管理员没法回溯。更合理的做法是建一张领养申请表把每次申请和审核行为都记录成一行CREATE TABLE adopt_apply ( id INT PRIMARY KEY AUTO_INCREMENT, pet_id INT NOT NULL COMMENT 宠物ID, user_id INT NOT NULL COMMENT 申请人ID, reason VARCHAR(500) COMMENT 领养理由, status VARCHAR(20) DEFAULT PENDING COMMENT PENDING / APPROVED / REJECTED, reviewer_id INT COMMENT 审核人ID, review_remark VARCHAR(255) COMMENT 驳回原因, apply_time DATETIME DEFAULT CURRENT_TIMESTAMP, review_time DATETIME, KEY idx_pet (pet_id), KEY idx_user (user_id), CONSTRAINT fk_apply_pet FOREIGN KEY (pet_id) REFERENCES pet(id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;这张表把“谁申请了哪只动物、为什么、审核到哪一环节”完整保存下来。后台审核列表就是查这张表 join pet 和 user。审核通过后需要同步更新 pet.status 为 ADOPTED这两步必须放在同一个事务里否则会出现“申请已通过但宠物还挂着待领养”的脏数据。提示审核状态流转后建议再写一条状态变更记录哪怕是往 apply 表里更新一个 review_time也能让后续排查问题时有据可查。4.3 建库 SQL 和文档一起放进项目仓库数据库课程设计阶段很多人在 Navicat 里直接建表最后交一个 png 截图就算完。评审要的是可复现的东西建表 SQL、初始化数据、字段说明。用 Navicat 的“转储 SQL 文件”功能导出 schema 和 insert 语句放到项目 docs 目录下。文档至少要有这三个文件文件内容README.md项目简介、技术栈、目录结构、本地启动步骤部署手册后端打包命令、前端 build 命令、Nginx 配置、数据库初始化步骤API.md接口路径、请求参数、返回示例、登录和鉴权说明部署手册里我会特别标清楚数据库连接串、上传目录配置在第几行这样别人拿到压缩包后不用通读代码就能启动服务。5. SpringBootVue联调打包跨域、文件地址与版本坑位前后端分开开发时常见的坑集中在跨域、文件路径和版本兼容三块。5.1 跨域报错的常见解法前端开发服务器跑在 5173后端接口在 8080浏览器默认拦截跨域响应。我不建议在每个 Controller 上加CrossOrigin而是用全局过滤器统一处理Configuration public class CorsConfig { Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); CorsConfiguration config new CorsConfiguration(); config.addAllowedOriginPattern(*); config.addAllowedMethod(*); config.addAllowedHeader(*); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); } }用addAllowedOriginPattern(*)而不是addAllowedOrigin(*)后者在请求携带 Authorization 头时某些版本会出问题。前端发的是OPTIONS预检请求后端正常处理后实际请求才能到 Controller。5.2 文件上传保存路径和访问 URL 要分开宠物封面图上传后保存到本地磁盘配置写在 application.ymlupload: dir: /data/rescue/upload url-prefix: /files/**上传时用 UUID 重命名文件把http://localhost:8080/files/xxx.jpg这个 URL 写入数据库而不是存D:\upload\xxx.jpg这样的本地路径。否则前端在另一台机器渲染页面时图片全部裂开。5.3 SpringBoot 版本太高引发的兼容问题SpringBoot 3.x 之后javax 包迁移到了 jakarta旧版拦截器、JWT 代码的 import 路径要全改MyBatis-Plus 也要换成mybatis-plus-spring-boot3-starter才能匹配。遇到这类问题先看 Maven 依赖树确认实际引入的传递依赖版本别在无关的配置上浪费时间。本文还有配套的精品资源点击获取