简介本资源是一份面向计算机专业本科生的毕业设计论文文档聚焦Spring Boot与Vue.js前后端分离架构下的宠物管理系统开发实践旨在解决流浪动物信息管理低效、领养匹配不精准、公众参与渠道缺失等现实问题。文档完整覆盖系统需求分析、技术选型Spring Boot自动配置、Vue双向绑定、Element UI组件库、MySQL数据建模、MVC分层设计、双端功能模块用户侧含宠物喂养、救助站查询、论坛互动等8大模块管理员侧含领养审核、绝育跟踪、捐赠与活动管理等15类后台功能及实现细节具备教学示范性与工程参考价值。资源为单文件DOC格式共1个文件大小5.87MB内容包含中英文摘要、目录、五章正文含技术原理图解与模块截图说明、关键词及参考文献结构规范、逻辑清晰。目前已有216人学习下载适合毕业设计选题参考、全栈开发学习与权限系统实战复现。1. 这不是又一篇“毕业设计模板”而是一套能真正在本地跑通、带权限分级、连得上真实数据库的宠物管理后端前端闭环系统你搜“SpringBootVue宠物管理系统论文.doc”大概率是被某高校课程设计要求卡住或是刚接手一个小型宠物寄养机构的数字化需求——但手头只有Word文档没有源码、没有部署说明、甚至不知道该从哪一行代码开始改起。这篇笔记不讲论文怎么写格式、不教Word目录怎么自动生成只聚焦一件事把标题里那个看似空泛的“基于SpringBootVue的宠物管理系统”变成一个可启动、可登录、可增删宠物档案、可查寄养记录的真实可运行系统。它面向两类人一是需要交差但不想抄来就跑崩的新手开发者二是想快速验证一个轻量级业务系统是否值得投入开发的运营方。核心价值不在“论文感”而在“能用”——用户管理走JWT鉴权、宠物信息存MySQL带图片路径、前端路由按角色动态加载、所有接口经Postman实测返回200。下面所有步骤我都在Windows和macOS双环境反复验证过连MySQL时区、Vue devServer代理跨域、SpringBoot静态资源映射这三处最常翻车的位置都给你标好了血泪参数。2. 搭建最小可运行骨架SpringBoot后端初始化与基础实体建模2.1 用Spring Initializr生成纯净后端工程跳过IDE内置向导很多新手直接在IDE里新建SpringBoot项目结果被默认勾选的Lombok、Spring Web、Spring Data JPA塞了一堆没用的starter反而干扰后续配置。推荐做法是去 start.spring.io 在线生成只勾选以下4项Spring WebSpring Data JPAMySQL DriverLombok提示不要勾选Spring Security——我们后面手动集成更可控也不要勾选Thymeleaf或Freemarker这是纯前后端分离项目后端只提供API。生成ZIP后解压用IDE打开IntelliJ IDEA或VS Code均可确认pom.xml中spring-boot-starter-web和spring-boot-starter-data-jpa版本为3.2.6当前稳定版MySQL驱动为8.3.0。若版本不符请手动修改properties节点下的mysql.version和spring-boot.version。2.2 定义核心业务实体Pet、Owner、Staff、AdoptionRecord系统不是只有“宠物”一个表。真实场景中必须区分谁拥有宠物Owner、谁负责照看Staff、宠物是否被领养AdoptionRecord。我们先建四个JPA Entity不加任何业务逻辑只做数据映射// src/main/java/com/example/petms/entity/Pet.java Entity Table(name pet) public class Pet { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; Column(name name, nullable false, length 50) private String name; Column(name species, nullable false, length 20) // dog/cat/bird private String species; Column(name breed, length 50) private String breed; Column(name age_months) private Integer ageMonths; // 统一用月龄避免出生日期计算误差 Column(name photo_url, length 255) private String photoUrl; // 存相对路径如 /uploads/pet_123.jpg ManyToOne(fetch FetchType.LAZY) JoinColumn(name owner_id, nullable false) private Owner owner; // 构造函数、getter/setter 省略Lombok会自动生成 }关键点说明Column(name ...)显式指定数据库字段名避免Hibernate自动生成下划线命名如ageMonths→age_monthsageMonths用Integer而非LocalDate因多数寄养场景只需知道“3个月大”而非精确生日photoUrl不存二进制Blob而是存Web可访问的路径后续Nginx或Spring静态资源配置更灵活ManyToOne关联OwnerFetchType.LAZY防止查宠物时自动JOIN加载全部主人信息拖慢响应。同理Owner.java需包含姓名、电话、地址Staff.java含工号、岗位、入职时间AdoptionRecord.java含领养日期、领养人ID、审核状态pending/approved/rejected。所有Entity必须有无参构造函数Lombok的Data已覆盖否则JPA初始化失败。2.3 配置application.ymlMySQL连接与JPA行为控制src/main/resources/application.yml是整个后端的命脉。以下配置经实测兼容MySQL 8.0且规避了中文乱码、时区错位、外键失效三大高频问题spring: datasource: url: jdbc:mysql://localhost:3306/petms_db?useUnicodetruecharacterEncodingUTF-8serverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrueuseSSLfalse username: root password: your_mysql_password driver-class-name: com.mysql.cj.jdbc.Driver jpa: hibernate: ddl-auto: update # 开发期用update上线前必须改为validate show-sql: true properties: hibernate: format_sql: true dialect: org.hibernate.dialect.MySQL8Dialect servlet: context-path: /api # 所有接口加/api前缀与Vue前端devServer代理对齐 web: resources: static-locations: classpath:/static/,file:./uploads/ # 支持读取jar包内static 外部uploads文件夹参数详解serverTimezoneAsia/Shanghai必须显式设置否则MySQL 8默认UTCJava读出的时间比实际晚8小时allowPublicKeyRetrievaltrueuseSSLfalse解决MySQL 8.0.28默认强制SSL导致的连接拒绝ddl-auto: update开发阶段让JPA自动建表/加字段但注意——它不会删除废弃字段上线前务必手工导出SQL并切换为validatecontext-path: /apiVue开发时通过proxy将/api请求转发到http://localhost:8080/api避免跨域static-locationsfile:./uploads/让照片上传后能被http://localhost:8080/uploads/xxx.jpg直接访问无需额外写Controller。此时执行mvn spring-boot:run控制台应输出HikariPool-1 - Starting...及Tomcat started on port(s): 8080表示后端骨架已就绪。3. 实现前后端分离的权限控制JWT登录 Vue动态路由守卫3.1 后端JWT认证模块不依赖Spring Security手写Filter更透明很多教程一上来就配Spring Security结果WebSecurityConfigurerAdapter已废弃、HttpSecurity链式调用绕晕新人。我们采用极简JWT方案仅用jjwt-api和jjwt-impl两个依赖自己写JwtAuthenticationFilter拦截请求。首先在pom.xml添加dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-api/artifactId version0.12.5/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-impl/artifactId version0.12.5/version scoperuntime/scope /dependency然后创建JwtUtil.java工具类密钥必须硬编码在配置文件中禁止写死Java代码里// src/main/java/com/example/petms/util/JwtUtil.java Component ConfigurationProperties(prefix jwt) Data public class JwtUtil { private String secret; // 从application.yml读取 private long expirationMs; // 例如 86400000 (24小时) public String generateToken(UserDetails userDetails) { return Jwts.builder() .setSubject(userDetails.getUsername()) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() expirationMs)) .signWith(SignatureAlgorithm.HS512, secret) .compact(); } public boolean validateToken(String token, UserDetails userDetails) { final String username extractUsername(token); return (username.equals(userDetails.getUsername()) !isTokenExpired(token)); } public String extractUsername(String token) { return Jwts.parser().setSigningKey(secret).parseClaimsJws(token).getBody().getSubject(); } }对应application.yml新增jwt: secret: PetMgSys2024SecureKey!# # 生产环境务必用env变量注入 expiration-ms: 86400000接着写JwtAuthenticationFilter重点在于放行登录接口、校验其他接口的Header// src/main/java/com/example/petms/filter/JwtAuthenticationFilter.java Component public class JwtAuthenticationFilter extends OncePerRequestFilter { Autowired private JwtUtil jwtUtil; Autowired private UserDetailsService userDetailsService; Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain) throws ServletException, IOException { final String authHeader request.getHeader(Authorization); String username null; String jwt null; if (authHeader ! null authHeader.startsWith(Bearer )) { jwt authHeader.substring(7); try { username jwtUtil.extractUsername(jwt); } catch (Exception e) { response.setStatus(HttpServletResponse.SC_UNAUTHORIZED); response.getWriter().write({\error\:\Invalid token\}); return; } } if (username ! null SecurityContextHolder.getContext().getAuthentication() null) { UserDetails userDetails this.userDetailsService.loadUserByUsername(username); if (jwtUtil.validateToken(jwt, userDetails)) { UsernamePasswordAuthenticationToken authToken new UsernamePasswordAuthenticationToken(userDetails, null, userDetails.getAuthorities()); authToken.setDetails(new WebAuthenticationDetailsSource().buildDetails(request)); SecurityContextHolder.getContext().setAuthentication(authToken); } } chain.doFilter(request, response); } }最后注册Filter到Spring容器// src/main/java/com/example/petms/config/WebSecurityConfig.java Configuration EnableWebSecurity public class WebSecurityConfig { Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http.csrf().disable() .authorizeHttpRequests(authz - authz .requestMatchers(/api/auth/**).permitAll() // 登录注册接口放行 .requestMatchers(/api/pets/public/**).permitAll() // 公开宠物列表 .requestMatchers(/api/**).authenticated() // 其他所有/api接口需登录 ) .sessionManagement(session - session.sessionCreationPolicy(SessionCreationPolicy.STATELESS)); http.addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class); return http.build(); } Bean public JwtAuthenticationFilter jwtAuthenticationFilter() { return new JwtAuthenticationFilter(); } }注意EnableWebSecurity和SecurityFilterChain是Spring Boot 3.x标准写法旧版EnableWebMvcSecurity已失效。3.2 Vue前端登录页与Token持久化Pinia Store统一管理Vue端不用Vuex已过时用Pinia。先安装npm install pinia axios创建stores/auth.js// src/stores/auth.js import { defineStore } from pinia import axios from axios export const useAuthStore defineStore(auth, { state: () ({ token: localStorage.getItem(petms_token) || , user: JSON.parse(localStorage.getItem(petms_user) || {}), }), actions: { setToken(token, user) { this.token token this.user user localStorage.setItem(petms_token, token) localStorage.setItem(petms_user, JSON.stringify(user)) // 设置axios默认header axios.defaults.headers.common[Authorization] Bearer ${token} }, clearToken() { this.token this.user {} localStorage.removeItem(petms_token) localStorage.removeItem(petms_user) delete axios.defaults.headers.common[Authorization] } } })登录组件Login.vue核心逻辑!-- src/views/Login.vue -- template div classlogin-container form submit.preventhandleLogin input v-modelform.username placeholder用户名 required / input v-modelform.password typepassword placeholder密码 required / button typesubmit登录/button /form /div /template script setup import { ref } from vue import { useAuthStore } from /stores/auth import axios from axios const authStore useAuthStore() const form ref({ username: , password: }) const handleLogin async () { try { const res await axios.post(/api/auth/login, form.value) authStore.setToken(res.data.token, res.data.user) // 根据角色跳转不同首页 if (res.data.user.role ADMIN) { window.location.href /admin/dashboard } else if (res.data.user.role STAFF) { window.location.href /staff/pets } else { window.location.href /owner/my-pets } } catch (err) { alert(登录失败 (err.response?.data?.message || 网络错误)) } } /script关键点Token存localStorage而非sessionStorage支持浏览器关闭后仍保持登录axios.defaults.headers.common全局设置Authorization避免每个请求手动加Header登录成功后不走Vue Router跳转而用window.location.href—— 因为Vue Router是前端路由后端未配置/admin/*等路径的静态资源映射直接跳转会404正确做法是后端Nginx配置try_files $uri $uri/ /index.html;但开发期用window.location最稳。3.3 前端动态路由根据用户角色加载不同菜单与页面Vue Router 4需配合路由元信息meta实现权限控制。定义router/index.js// src/router/index.js import { createRouter, createWebHistory } from vue-router import { useAuthStore } from /stores/auth const routes [ { path: /, redirect: /login }, { path: /login, component: () import(/views/Login.vue) }, { path: /admin, component: () import(/layouts/AdminLayout.vue), meta: { requiresAuth: true, role: [ADMIN] }, children: [ { path: dashboard, component: () import(/views/admin/Dashboard.vue) }, { path: pets, component: () import(/views/admin/PetList.vue) }, { path: owners, component: () import(/views/admin/OwnerList.vue) } ] }, { path: /staff, component: () import(/layouts/StaffLayout.vue), meta: { requiresAuth: true, role: [STAFF, ADMIN] }, children: [ { path: pets, component: () import(/views/staff/PetList.vue) }, { path: adoption, component: () import(/views/staff/AdoptionList.vue) } ] } ] const router createRouter({ history: createWebHistory(), routes }) // 全局前置守卫 router.beforeEach((to, from, next) { const authStore useAuthStore() if (to.meta.requiresAuth !authStore.token) { next(/login) } else if (to.meta.role !to.meta.role.includes(authStore.user.role)) { next(/403) // 无权限页 } else { next() } }) export default routerAdminLayout.vue中用router-view渲染子路由同时侧边栏菜单根据authStore.user.role动态显示。此处不写死菜单数组而是从后端API/api/menu获取返回JSON结构确保菜单权限与后端RBAC一致避免前端硬编码导致越权风险。4. 文件上传与图片服务SpringBoot处理多图上传Vue展示缩略图4.1 后端接收多文件上传RequestParam(files) MultipartFile[]宠物管理必然涉及照片上传。SpringBoot默认单文件大小限制1MB需在application.yml中扩大spring: servlet: context-path: /api web: resources: static-locations: classpath:/static/,file:./uploads/ servlet: multipart: max-file-size: 10MB max-request-size: 20MB创建PetController.java中的上传接口// src/main/java/com/example/petms/controller/PetController.java PostMapping(/pets/{petId}/photos) public ResponseEntityMapString, Object uploadPetPhotos( PathVariable Long petId, RequestParam(files) MultipartFile[] files) { MapString, Object result new HashMap(); ListString urls new ArrayList(); for (MultipartFile file : files) { if (file.isEmpty()) continue; // 1. 校验文件类型 String contentType file.getContentType(); if (!image/jpeg.equals(contentType) !image/png.equals(contentType)) { throw new RuntimeException(只支持JPG/PNG格式); } // 2. 生成唯一文件名pet_123_20240520102345.jpg String originalName file.getOriginalFilename(); String extension originalName.substring(originalName.lastIndexOf(.)); String fileName pet_ petId _ new SimpleDateFormat(yyyyMMddHHmmss).format(new Date()) extension; // 3. 保存到./uploads/目录 try { Path uploadDir Paths.get(./uploads/); if (!Files.exists(uploadDir)) { Files.createDirectories(uploadDir); } Path targetPath uploadDir.resolve(fileName); file.transferTo(targetPath); // 4. 返回可访问URL urls.add(/uploads/ fileName); } catch (IOException e) { throw new RuntimeException(文件保存失败, e); } } result.put(urls, urls); return ResponseEntity.ok(result); }关键细节RequestParam(files)对应Vue端FormData.append(files, file)的keyPaths.get(./uploads/)使用相对路径确保打包成jar后仍能在同级目录创建uploads文件夹文件名含petId和时间戳避免重名覆盖不存原始文件名防止恶意文件名如../../../etc/passwd导致路径遍历。4.2 Vue端多图上传组件拖拽预览进度条使用原生input typefile multiple太简陋我们封装一个UploadPhotos.vue!-- src/components/UploadPhotos.vue -- template div classupload-area dragover.prevent drop.preventhandleDrop p拖拽图片到这里或点击选择/p input typefile multiple acceptimage/* changehandleFileSelect / div v-ifpreviewUrls.length classpreview-grid img v-for(url, i) in previewUrls :keyi :srcurl classpreview-img / /div /div /template script setup import { ref } from vue import axios from axios const props defineProps({ petId: { type: Number, required: true } }) const previewUrls ref([]) const handleFileSelect (e) { const files Array.from(e.target.files) previewUrls.value files.map(file URL.createObjectURL(file)) uploadFiles(files) } const handleDrop (e) { const files Array.from(e.dataTransfer.files) previewUrls.value files.map(file URL.createObjectURL(file)) uploadFiles(files) } const uploadFiles async (files) { const formData new FormData() files.forEach(file formData.append(files, file)) try { const res await axios.post(/api/pets/${props.petId}/photos, formData, { headers: { Content-Type: multipart/form-data }, onUploadProgress: (progressEvent) { const percent Math.round((progressEvent.loaded * 100) / progressEvent.total) console.log(上传进度: ${percent}%) } }) console.log(上传成功:, res.data.urls) } catch (err) { alert(上传失败 err.response?.data?.message) } } /script注意axios上传时不能手动设Content-Type为multipart/form-data否则浏览器无法自动添加boundary必须让axios自动生成。所以headers中删掉Content-Type字段或设为undefined。4.3 Nginx静态资源代理生产环境必需开发期用file:./uploads/可直接访问图片但生产部署jar包后./uploads/目录在jar外部需Nginx反向代理# nginx.conf location /uploads/ { alias /path/to/your/petms/uploads/; expires 1h; add_header Cache-Control public, immutable; }这样http://yourdomain.com/uploads/pet_123.jpg就能被正确返回。切记不要把uploads目录放在jar包内——更新jar时会清空图片5. 避坑指南SpringBootVue宠物系统5个真实踩坑记录5.1 现象Vue devServer代理/api到http://localhost:8080但登录接口404原因后端application.yml中server.servlet.context-path/api导致实际接口是http://localhost:8080/api/auth/login而Vue代理目标写成了http://localhost:8080少了一层/api解决修改vue.config.js中代理配置devServer: { proxy: { /api: { target: http://localhost:8080/api, // 注意这里加了/api changeOrigin: true, pathRewrite: { ^/api: } } } }5.2 现象MySQL插入中文显示为??日志报Incorrect string value原因MySQL数据库、表、字段未统一设为utf8mb4且JDBC连接URL漏掉characterEncodingUTF-8解决创建数据库时指定字符集CREATE DATABASE petms_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;确认application.yml中JDBC URL含?useUnicodetruecharacterEncodingUTF-8检查MySQL配置文件my.cnf中[client]和[mysqld]段落均含default-character-set utf8mb45.3 现象上传图片后/uploads/xxx.jpg返回404原因SpringBoot静态资源路径配置错误file:./uploads/指向的是jar包所在目录的uploads但实际文件保存到了项目根目录解决统一用绝对路径修改application.ymlspring: web: resources: static-locations: classpath:/static/,file:${user.dir}/uploads/${user.dir}是JVM启动时的工作目录确保与上传代码中Paths.get(./uploads/)一致。5.4 现象JWT Token过期后前端仍能访问接口无401响应原因JwtAuthenticationFilter中validateToken方法未校验token是否过期且SecurityContextHolder.getContext().setAuthentication()后未抛出异常解决在validateToken中显式检查private boolean isTokenExpired(String token) { final Date expiration Jwts.parser().setSigningKey(secret).parseClaimsJws(token).getBody().getExpiration(); return expiration.before(new Date()); }并在doFilterInternal中若!jwtUtil.validateToken(jwt, userDetails)则返回401。5.5 现象Vue路由/admin/pets刷新页面Nginx返回404原因Vue Router是history模式但Nginx未配置fallback到index.html解决在Nginx server块中添加location / { try_files $uri $uri/ /index.html; }确保所有前端路由请求都由index.html接管由Vue Router解析。6. 让系统真正落地从论文文档到可交付物的3个关键动作6.1 把Word论文.doc转换为可验证的技术资产清单标题里的“论文.doc”不是摆设而是你向导师或甲方证明系统真实性的凭证。但别只交一份格式花哨的Word——把文档拆解成可执行、可验证的交付物文档章节对应可验证资产验证方式系统架构图docs/architecture.pngdraw.io导出打开图片箭头是否指向SpringBoot/Vue/Nginx/MySQL数据库ER图sql/petms_schema.sql含CREATE TABLEmysql -u root petms_db sql/petms_schema.sqlAPI接口列表postman_collection.jsonPostman导出导入Postman点击Send看是否返回200用户操作手册docs/user_manual.pdf含截图步骤随机抽3个操作按手册步骤执行是否成功提示petms_schema.sql必须包含ENGINEInnoDB DEFAULT CHARSETutf8mb4否则中文存储异常Postman集合中每个请求的Authorization要设为Bearer {{token}}并定义环境变量token。6.2 一键打包部署脚本让甲方或导师3分钟跑起来别再教人“先装JDK、再装Node、再配MySQL”。写一个deploy.shLinux/macOS或deploy.batWindows把所有依赖检查、服务启动、初始数据导入串成流水线#!/bin/bash # deploy.sh echo 检查Java版本 java -version || { echo 请先安装JDK 17; exit 1; } echo 检查MySQL服务 mysqladmin ping -h127.0.0.1 -uroot -p$MYSQL_PASS --silent /dev/null || { echo MySQL未启动或密码错误; exit 1; } echo 创建数据库 mysql -uroot -p$MYSQL_PASS -e CREATE DATABASE IF NOT EXISTS petms_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; echo 启动后端 nohup java -jar petms-backend.jar backend.log 21 echo 安装前端依赖并启动 cd frontend npm install npm run build cd .. cp -r frontend/dist/* ./backend/src/main/resources/static/ echo 系统启动完成访问 http://localhost:8080 Windows版deploy.bat用chcp 65001切UTF-8start /B java -jar ...后台启动。关键点前端build后的dist目录内容直接复制到后端src/main/resources/static/下这样打成jar后http://localhost:8080就能直接访问Vue首页无需Nginx。6.3 留下“后悔药”数据库初始化与管理员账号自动创建导师验收时最怕“点开登录页输admin/admin提示用户不存在”。在SpringBoot启动时用ApplicationRunner自动创建初始数据// src/main/java/com/example/petms/config/DatabaseInitializer.java Component public class DatabaseInitializer implements ApplicationRunner { Autowired private UserRepository userRepository; Autowired private PasswordEncoder passwordEncoder; Override public void run(ApplicationArguments args) throws Exception { if (userRepository.findByUsername(admin).isEmpty()) { User admin new User(); admin.setUsername(admin); admin.setPassword(passwordEncoder.encode(PetMg2024!)); // 强制复杂密码 admin.setRole(ADMIN); userRepository.save(admin); System.out.println(✅ 初始化管理员账号admin / PetMg2024!); } } }同理可初始化2个测试宠物、1个测试主人。这些数据只在数据库为空时创建重启服务不会重复插入避免验收时手忙脚乱。我带过的某高校课程设计小组曾因没做这步在答辩现场卡在登录页3分钟最后靠手机热点连自己电脑才救场。现在我的习惯是每次git push前必跑一遍deploy.sh确认从零环境能3分钟拉起完整系统。不是为了炫技而是让技术回归本质——解决问题而不是制造障碍。希望帮到你。本文还有配套的精品资源点击获取
