简介本资源是一份面向计算机专业本科生的毕业设计论文文档聚焦Spring Boot与Vue.js前后端分离架构下的宠物管理系统开发实践适用于Java全栈开发入门到进阶学习者。论文完整覆盖系统需求分析、Spring Boot后端框架选型依据、Vue.js前端实现逻辑、MVC分层设计、Element UI组件应用及MySQL数据建模等核心内容并详细阐述用户端宠物喂养、流浪救助、论坛交流、活动管理与管理员端领养审核、动物追踪、救助站调度、捐赠与公告管理共20余项功能模块的设计与实现逻辑。资源为单文件DOC格式全文约5.87MB含中英文摘要、目录、技术综述、系统架构图、功能模块说明及关键词结构规范、术语准确可直接用于毕业答辩参考或课程设计复用。目前已有216人下载学习是少有的兼顾技术深度与业务完整性的宠物主题毕设范例。1. 这不是又一篇“毕业设计模板”而是一套能真正在本地跑通、带权限分级、连宠物绝育记录都存得进数据库的 SpringBoot Vue 宠物管理系统落地笔记你搜“SpringBootVue宠物管理系统论文.doc”大概率是被某高校课程设计要求卡住了要交一份带可运行代码、有数据库表结构、含前后端交互逻辑、还能在答辩时现场演示增删改查的完整系统——但网上90%的所谓“源码”要么只有静态页面要么后端接口全报404要么Vue项目 npm run serve 直接报错“找不到vue-router4”。这篇不是论文代写也不是PPT美化指南它是我帮某高校信息学院三位同学从零搭起、部署到学生自购云服务器、支撑了三场线上答辩的真实复盘。核心就一件事用最精简但无断点的技术链SpringBoot 2.7.18 Vue 2.6.14 Element UI MySQL 8.0把「宠物档案」「主人信息」「就诊记录」「疫苗提醒」四个业务域串成闭环且每个模块都有真实字段约束比如“绝育状态”必须是枚举值“疫苗有效期”自动计算剩余天数。适合两类人一是大三刚学完Java Web和Vue基础、需要两周内交付可演示系统的同学二是想快速验证一个“小而全”全栈架构是否可行的初阶工程师。别怕“论文.doc”这个后缀——我们先跑起来再补文档。2. 搭建最小可运行骨架SpringBoot 后端初始化与 Vue 前端工程创建2.1 用 Spring Initializr 初始化后端工程不选 Lombok不选 DevTools很多同学第一步就翻车用 IDEA 内置的 Spring Initializr 创建项目时勾选了 Lombok 和 Spring Boot DevTools结果在同学电脑上编译报错“cannot find symbol Data”。这不是玄学是 JDK 版本兼容问题。我一般会放弃图形化向导直接用官方脚手架命令行生成curl https://start.spring.io/starter.zip \ -d dependenciesweb,jdbc,validation,mysql \ -d javaVersion1.8 \ -d packagingjar \ -d namepet-manager-backend \ -o pet-manager-backend.zip提示javaVersion1.8是硬性要求——某高校机房统一装的 JDK 1.8而 SpringBoot 3.x 要求 JDK 17强行升级会导致 Tomcat 启动失败。dependenciesweb,jdbc,validation,mysql四个依赖覆盖了 Web 接口、数据库连接、参数校验、MySQL 驱动全部刚需一个不多一个不少。解压后导入 IDEA立刻修改pom.xml中的spring-boot.version为2.7.18这是 SpringBoot 2.x 最终稳定版对 JDK 1.8 兼容性最好。接着在application.yml中配置数据库spring: datasource: url: jdbc:mysql://localhost:3306/pet_manager?useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver jpa: hibernate: ddl-auto: update show-sql: true properties: hibernate: format_sql: true注意ddl-auto: update—— 这不是生产环境做法但对课程设计极其友好你改了实体类字段重启服务表结构自动同步省去手动写 SQL 的时间。serverTimezoneAsia/Shanghai必加否则时间字段全乱码。2.2 Vue 2.6.14 脚手架创建与 Element UI 集成Vue 3 太新很多老教程的插件不兼容Vue 2.7 又开始兼容 Composition API反而增加理解成本。课程设计场景下Vue 2.6.14 Vue Router 3.5.3 Axios 0.21.4 是最稳组合。用 Vue CLI 3 创建npm install -g vue/cli3.12.1 vue create pet-manager-frontend # 选择 Manually select features → 勾选 Router, Vuex, CSS Pre-processors (Sass) # Use history mode for router? → N避免部署到子路径时 404 # Pick a CSS pre-processor → Sass # Where do you prefer placing config for Babel, ESLint, etc.? → In package.json安装 Element UI注意版本npm install element-ui2.15.14 --save在main.js中全局引入import Vue from vue import App from ./App.vue import router from ./router import store from ./store import ElementUI from element-ui import element-ui/lib/theme-chalk/index.css Vue.use(ElementUI) // 必须在 new Vue() 之前 new Vue({ router, store, render: h h(App) }).$mount(#app)关键细节element-ui2.15.14是最后一个支持 Vue 2.6 的稳定版。若装latest会因 Vue 3 的响应式 API 报错 “Cannot read property ‘_c’ of undefined”。2.3 前后端联调第一关跨域与代理配置Vue 开发服务器默认跑在http://localhost:8080SpringBoot 默认http://localhost:8081浏览器直接请求会触发 CORS。不要在后端加CrossOrigin注解——那是给单个接口打补丁治标不治本。正确做法是在 Vue 项目根目录vue.config.js中配代理module.exports { devServer: { proxy: { /api: { target: http://localhost:8081, changeOrigin: true, pathRewrite: { ^/api: } } } } }这样前端所有以/api/xxx开头的请求开发时会被代理到http://localhost:8081/xxx而生产部署时Nginx 反向代理只需改一处 location 配置无需动代码。3. 核心业务建模宠物、主人、就诊、疫苗四张表的设计与 JPA 实体映射3.1 数据库表结构设计MySQL 8.0课程设计最容易被导师挑刺的是字段设计不合理。比如“宠物品种”不能是 varchar(255) 任填而应建字典表“绝育状态”不能用 0/1 整型而要用 ENUM 或 tinyint 带注释。以下是经三次答辩打磨后的四张核心表表名字段说明约束t_pet宠物主表idbigint PK,namevarchar(50) NOT NULL,speciesenum(cat,dog,rabbit) NOT NULL,breedvarchar(100),gendertinyint COMMENT 0:公,1:母,sterilizedtinyint COMMENT 0:未绝育,1:已绝育,birth_datedate,owner_idbigint FKowner_id外键关联t_owner.idt_owner主人信息idbigint PK,namevarchar(50) NOT NULL,phonechar(11) UNIQUE,addressvarchar(200)phone强制唯一避免同一主人重复录入t_medical_record就诊记录idbigint PK,pet_idbigint NOT NULL,visit_datedatetime NOT NULL,diagnosistext,treatmenttext,doctor_namevarchar(50)pet_id外键visit_date精确到分钟方便按时间轴展示t_vaccine疫苗记录idbigint PK,pet_idbigint NOT NULL,vaccine_namevarchar(100) NOT NULL,injection_datedate NOT NULL,expire_datedate NOT NULL,next_due_datedate GENERATED ALWAYS AS (DATE_ADD(expire_date, INTERVAL -30 DAY)) STOREDnext_due_date是计算列到期前30天提醒注意t_vaccine.next_due_date使用 MySQL 8.0 的生成列GENERATED ALWAYS AS避免在 Java 层计算日期逻辑出错。t_pet.sterilized用 tinyint 而非 boolean因为 MySQL 的 BOOLEAN 实际是 TINYINT(1)语义更清晰。3.2 JPA 实体类编写避开 Hibernate 延迟加载陷阱很多同学实体类一写完Pet对象里getOwner()返回 null查半天发现是ManyToOne(fetch FetchType.LAZY)导致。课程设计不追求性能极致直接设为 EAGER 更稳妥// Pet.java Entity Table(name t_pet) public class Pet { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; Column(name name, nullable false, length 50) private String name; Enumerated(EnumType.STRING) Column(name species, nullable false) private Species species; // 自定义枚举CAT, DOG, RABBIT Column(name sterilized, nullable false, columnDefinition TINYINT COMMENT 0:未绝育,1:已绝育) private Integer sterilized; ManyToOne(fetch FetchType.EAGER) // 关键避免 owner 为 null JoinColumn(name owner_id, nullable false) private Owner owner; // getter/setter 省略 } // Owner.java Entity Table(name t_owner) public class Owner { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; Column(name name, nullable false, length 50) private String name; Column(name phone, unique true, length 11) private String phone; OneToMany(mappedBy owner, fetch FetchType.EAGER) // 反向也设 EAGER private ListPet pets new ArrayList(); // getter/setter 省略 }Enumerated(EnumType.STRING)让 species 存 cat 而非 0数据库可读性强columnDefinition直接写 COMMENT导出 SQL 时注释不丢。3.3 MyBatis-Plus 替代原生 JPA不这里 JPA 更轻量有同学问“为什么不用 MyBatis-Plus它分页和条件构造器更爽。”——在四张表、CRUD 为主的场景下JPA 的JpaRepository已足够petRepository.findAll()、petRepository.save(pet)、petRepository.findById(id)三行代码搞定 80% 操作。MyBatis-Plus 要写 XML 或Select注解还要配PageHelper对课程设计是冗余复杂度。真正需要 MyBatis 的场景是多表复杂关联查询、动态 SQL、或已有成熟 SQL 需复用。本项目暂不需要。4. 前端核心页面实现用 Element UI 组件快速搭建宠物档案管理页4.1 路由配置与菜单权限控制伪权限课程设计通常不要求 RBAC但导师会问“管理员和普通用户看到的菜单一样吗”——我们用最简方式模拟在router/index.js中加 meta 字段const routes [ { path: /login, name: Login, component: () import(/views/Login.vue) }, { path: /dashboard, name: Dashboard, component: () import(/views/Dashboard.vue), meta: { requiresAuth: true } }, { path: /pets, name: PetList, component: () import(/views/pet/PetList.vue), meta: { requiresAuth: true, role: admin } // 仅 admin 可见 }, { path: /owners, name: OwnerList, component: () import(/views/owner/OwnerList.vue), meta: { requiresAuth: true, role: admin } } ]在App.vue的导航守卫中判断router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next(/login) } else if (to.meta.role admin) { // 模拟本地存储一个 admin 标识 const userRole localStorage.getItem(role) || user if (userRole ! admin) { next(/dashboard) // 非 admin 强制跳首页 } else { next() } } else { next() } })这不是真权限但答辩时能说清“权限控制思路”且代码量极小。4.2 宠物列表页Element Table 分页 搜索框三件套PetList.vue是最高频页面。用el-table展示数据el-pagination控制分页el-inputel-button做搜索template div classpet-list el-card classbox-card div slotheader classclearfix span宠物档案管理/span el-button stylefloat: right; padding: 3px 0 typetext clickhandleAdd新增宠物/el-button /div !-- 搜索栏 -- div classsearch-bar el-input v-modelsearchParams.name placeholder请输入宠物姓名 stylewidth: 200px; margin-right: 10px;/el-input el-select v-modelsearchParams.species placeholder请选择物种 stylewidth: 120px; margin-right: 10px; el-option label猫 valuecat/el-option el-option label狗 valuedog/el-option /el-select el-button typeprimary clickfetchPets搜索/el-button el-button clickresetSearch重置/el-button /div !-- 表格 -- el-table :datapetList stripe stylewidth: 100% :heighttableHeight el-table-column propname label宠物姓名 width120/el-table-column el-table-column propspecies label物种 width100 template slot-scopescope el-tag sizemini :typescope.row.species cat ? danger : success {{ scope.row.species cat ? 猫 : 狗 }} /el-tag /template /el-table-column el-table-column propowner.name label主人姓名 width120/el-table-column el-table-column propowner.phone label主人电话 width130/el-table-column el-table-column propsterilized label绝育状态 width100 template slot-scopescope {{ scope.row.sterilized 1 ? ✅ 已绝育 : ❌ 未绝育 }} /template /el-table-column el-table-column propbirthDate label出生日期 width120/el-table-column el-table-column fixedright label操作 width180 template slot-scopescope el-button typetext sizesmall clickhandleEdit(scope.row)编辑/el-button el-button typetext sizesmall clickhandleDelete(scope.row.id)删除/el-button /template /el-table-column /el-table !-- 分页 -- div classpagination el-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-pagepageInfo.currentPage :page-sizes[10, 20, 50] :page-sizepageInfo.pageSize layouttotal, sizes, prev, pager, next, jumper :totalpageInfo.total /el-pagination /div /el-card /div /template script import { getPetList, deletePet } from /api/pet export default { name: PetList, data() { return { searchParams: { name: , species: }, petList: [], pageInfo: { currentPage: 1, pageSize: 10, total: 0 }, tableHeight: document.documentElement.clientHeight - 300 // 动态表格高度 } }, created() { this.fetchPets() }, methods: { fetchPets() { const params { ...this.searchParams, page: this.pageInfo.currentPage, size: this.pageInfo.pageSize } getPetList(params).then(res { this.petList res.data.list this.pageInfo.total res.data.total }) }, handleSizeChange(val) { this.pageInfo.pageSize val this.fetchPets() }, handleCurrentChange(val) { this.pageInfo.currentPage val this.fetchPets() }, resetSearch() { this.searchParams { name: , species: } this.fetchPets() }, handleAdd() { this.$router.push(/pet/add) }, handleEdit(row) { this.$router.push(/pet/edit/${row.id}) }, handleDelete(id) { this.$confirm(此操作将永久删除该宠物是否继续, 提示, { confirmButtonText: 确定, cancelButtonText: 取消, type: warning }).then(() { deletePet(id).then(() { this.$message.success(删除成功) this.fetchPets() }) }) } } } /script关键点el-table的:height绑定tableHeight让表格在不同屏幕下自适应高度propowner.name直接取关联对象字段依赖后端返回的嵌套 JSON删除用this.$confirm弹窗二次确认符合用户习惯搜索参数params透传到 API 层后端用RequestParam接收。4.3 宠物新增/编辑页表单校验与日期组件联动PetForm.vue是另一个高频页面。重点解决两个痛点1“出生日期”不能大于今天2“绝育状态”为 1 时“绝育日期”字段才显示并必填。template el-form :modelform :rulesrules refformRef label-width100px classpet-form el-form-item label宠物姓名 propname el-input v-modelform.name placeholder请输入宠物姓名/el-input /el-form-item el-form-item label物种 propspecies el-radio-group v-modelform.species el-radio labelcat 猫/el-radio el-radio labeldog 狗/el-radio /el-form-item el-form-item label出生日期 propbirthDate el-date-picker v-modelform.birthDate typedate placeholder选择出生日期 :picker-optionspickerOptions /el-date-picker /el-form-item el-form-item label绝育状态 propsterilized el-radio-group v-modelform.sterilized el-radio :label0❌ 未绝育/el-radio el-radio :label1✅ 已绝育/el-radio /el-form-item !-- 绝育日期条件显示 -- el-form-item label绝育日期 v-ifform.sterilized 1 propsterilizationDate el-date-picker v-modelform.sterilizationDate typedate placeholder选择绝育日期 :picker-optionspickerOptions /el-date-picker /el-form-item el-form-item el-button typeprimary clicksubmitForm保存/el-button el-button clickcancel取消/el-button /el-form-item /el-form /template script export default { name: PetForm, props: { isEdit: Boolean, petData: Object }, data() { return { form: { name: , species: cat, birthDate: , sterilized: 0, sterilizationDate: }, rules: { name: [{ required: true, message: 请输入宠物姓名, trigger: blur }], species: [{ required: true, message: 请选择物种, trigger: change }], birthDate: [{ required: true, message: 请选择出生日期, trigger: change }], sterilizationDate: [ { required: true, message: 请选择绝育日期, trigger: change } ] }, pickerOptions: { disabledDate(time) { return time.getTime() Date.now(); // 禁用今天之后的日期 } } } }, created() { if (this.isEdit this.petData) { this.form { ...this.petData } // 若是编辑且 sterilized 为 1则 sterilizationDate 必须存在 if (this.form.sterilized 1 !this.form.sterilizationDate) { this.form.sterilizationDate this.form.birthDate // 默认同出生日 } } }, methods: { submitForm() { this.$refs.formRef.validate(valid { if (valid) { // 提交逻辑调用 API if (this.isEdit) { this.$emit(update, this.form) } else { this.$emit(create, this.form) } } }) }, cancel() { this.$router.push(/pets) } } } /scriptpickerOptions.disabledDate确保出生日期不能填未来v-ifform.sterilized 1控制绝育日期字段显隐this.$emit将表单数据抛给父组件处理符合 Vue 单向数据流原则。5. 避坑指南课程设计中最常踩的 4 个血泪坑及解决方案5.1 现象Vue 页面空白控制台报错 “You are using the runtime-only build of Vue”原因vue-cli3.12.1创建的项目默认使用vue.runtime.esm.js运行时构建但vue-template-compiler版本与vue不匹配。常见于手动升级过 Vue 版本或复制了别人的node_modules。解决检查package.json中vue和vue-template-compiler版本是否完全一致如都是2.6.14删除node_modules和package-lock.json执行npm install重新安装若仍报错在vue.config.js中强制指定module.exports { configureWebpack: { resolve: { alias: { vue$: vue/dist/vue.esm.js // 显式指向完整构建 } } } }5.2 现象SpringBoot 启动成功但访问/api/pets返回 404原因Controller 类没加RestController或方法没加RequestMapping或SpringBootApplication所在类不在包扫描根路径下。解决确认 Controller 类上有RestController不是Controller确认方法上有GetMapping(/pets)或RequestMapping(value /pets, method RequestMethod.GET)确认Application.java在com.example.petmanager包下而 Controller 在com.example.petmanager.controller下即 Controller 包名是 Application 包名的子包终极排查法在Application.java的main方法里加一行System.out.println(Component scan base packages: Arrays.toString(context.getBeanFactory().getBeanDefinitionNames()));启动时看是否扫到了你的 Controller Bean。5.3 现象MySQL 插入中文乱码日志显示 “???”原因MySQL 服务端、数据库、表、连接 URL 四层编码不统一。尤其容易忽略serverTimezone和characterEncoding。解决登录 MySQL执行SHOW VARIABLES LIKE character_set%; SHOW VARIABLES LIKE collation%;确保character_set_server和collation_server是utf8mb4创建数据库时指定CREATE DATABASE pet_manager CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;application.yml中 JDBC URL 补全url: jdbc:mysql://localhost:3306/pet_manager?useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltruecharacterEncodingutf8mb4useUnicodetrue缺一不可。5.4 现象Element UI 表格中propowner.name渲染为空但后端返回 JSON 里有数据原因JPA 默认懒加载LAZYPet对象的owner字段在序列化时未初始化Jackson 序列化器跳过 null 字段。解决方案一推荐如 3.2 节所述将ManyToOne的fetch改为EAGER方案二在Pet实体类上加JsonIgnoreProperties({hibernateLazyInitializer, handler})但这会丢失所有关联对象方案三进阶用JsonManagedReference/JsonBackReference控制双向序列化但课程设计没必要增加复杂度。6. 让答辩老师眼前一亮的三个细节技巧疫苗到期自动提醒、PDF 导出、本地部署打包6.1 疫苗到期前30天自动高亮前端计算不依赖后端导师最爱问“系统怎么提醒主人打疫苗” 很多人答“后台定时任务发短信”太重。其实用前端计算更轻量、更直观。在VaccineList.vue的表格列中加一列el-table-column propnextDueDate label下次接种提醒 width150 template slot-scopescope span :class{ text-danger: isSoon(scope.row.nextDueDate), text-success: !isSoon(scope.row.nextDueDate) } {{ scope.row.nextDueDate | formatDate }} /span /template /el-table-column配套 JS 方法methods: { isSoon(dateStr) { if (!dateStr) return false const due new Date(dateStr) const today new Date() const diffTime due.getTime() - today.getTime() const diffDays Math.ceil(diffTime / (1000 * 60 * 60 * 24)) return diffDays 30 diffDays 0 // 30天内且未过期 } }, filters: { formatDate(dateStr) { if (!dateStr) return - const d new Date(dateStr) return ${d.getFullYear()}-${(d.getMonth() 1).toString().padStart(2, 0)}-${d.getDate().toString().padStart(2, 0)} } }CSS 加样式.text-danger { color: #f56c6c; font-weight: bold; } .text-success { color: #67c23a; }效果表格中“下次接种提醒”列30天内变红加粗过期变灰一目了然。这比口头说“我们有提醒功能”有力十倍。6.2 用 jsPDF html2canvas 实现宠物档案 PDF 导出不依赖后端很多同学以为 PDF 导出必须后端生成其实纯前端就能做。在PetDetail.vue加一个按钮el-button typeprimary clickexportToPDF iconel-icon-download导出PDF/el-buttonJS 方法import html2canvas from html2canvas import jsPDF from jspdf export default { // ...其他代码 methods: { exportToPDF() { const element this.$refs.petCard // 指向 el-card 的 ref html2canvas(element).then(canvas { const imgData canvas.toDataURL(image/png) const pdf new jsPDF(p, mm, a4) const imgWidth 210 // A4宽度 mm const pageHeight 297 const imgHeight (canvas.height * imgWidth) / canvas.width let heightLeft imgHeight let position 0 pdf.addImage(imgData, PNG, 0, position, imgWidth, imgHeight) heightLeft - pageHeight while (heightLeft 0) { position heightLeft - imgHeight pdf.addPage() pdf.addImage(imgData, PNG, 0, position, imgWidth, imgHeight) heightLeft - pageHeight } pdf.save(宠物档案_${this.pet.name}.pdf) }) } } }注意html2canvas无法渲染跨域图片、某些 CSS3 属性如 filter、iframe。所以宠物照片建议用本地 base64 或同域资源。导出的是当前页面可视区域快照适合档案页这种静态内容。6.3 本地打包部署Vue 打包后如何让 SpringBoot 静态托管课程设计最后一步把 Vue 打包文件扔进 SpringBoot用http://localhost:8081一站式访问。步骤如下在 Vue 项目根目录vue.config.js中配置module.exports { outputDir: ../pet-manager-backend/src/main/resources/static, // 打包到后端 static 目录 publicPath: ./ // 静态资源相对路径 }执行npm run buildVue 会自动把dist文件夹内容复制到pet-manager-backend/src/main/resources/static修改 SpringBoot 的application.yml关闭 Thymeleaf如果用了确保静态资源生效spring: resources: static-locations: classpath:/static/,classpath:/public/,classpath:/resources/启动 SpringBoot访问http://localhost:8081即可看到 Vue 页面所有 API 请求自动走/api/xxx代理到后端控制器。这就是真正的“一体化部署”。答辩时演示只启动一个 Java 进程前后端全跑通。比“前端开一个服务、后端开一个服务、再配 Nginx”简洁太多。我带过的三届学生里凡是把疫苗提醒高亮、PDF 导出、一体化部署这三个点在现场演示出来的答辩分数基本都在 90 分以上。不是因为技术多难而是它们直击“这个系统真的能用吗”的本质疑问。你不需要把所有功能都做完美但一定要有 12 个让人记住的细节——就像宠物档案 PDF 上印着“生成时间2024-06-15 14:22”比任何 PPT 文字都有说服力。希望帮到你。本文还有配套的精品资源点击获取