简介本资源为基于BS架构的校园后勤服务管理系统毕业设计源码包面向计算机相关专业需要完成毕业设计的学生及Java初学者。项目采用前后端分离方案前端使用Vue.js配合ElementUI构建界面后端基于Java语言与SpringBoot框架通过MyBatis操作MySQL数据源开发工具支持IDEA或EclipseJDK版本要求1.8以上并附有配套论文文档便于读者理解系统设计思路与实现过程。压缩包共1122个文件约46.09MB其中217个Java源文件承载后端业务逻辑117个Vue组件与161个JS脚本构成前端交互层另有96个HTML页面、52个CSS样式及大量图片、字体等静态资源同时包含SQL脚本、yml配置与bat启动脚本目录结构完整清晰。目前已有84人学习下载。读者可获取完整的登录管理等模块实现、数据库设计方案以及论文参考适合作为毕业设计模板或SpringBoot与Vue整合练手项目帮助快速搭建开发环境并理解前后端协作流程。1. 校园后勤服务管理系统从选题到跑通一个 Java 毕业设计的完整落地路径每年一到毕设季计算机专业的学生就会面临同一个灵魂拷问选什么题目既能体现技术栈又能在有限时间内跑通、写出论文、通过答辩「基于 BS 的校园后勤服务管理系统」几乎是出现频率最高的选题之一而配上vue SpringBoot这套前后端分离组合基本就是当下 Java 毕业设计的主流模板。这个标题背后对应的是一套真实可交付的系统前端用 Vue 做管理界面后端用 SpringBoot 提供 REST 接口数据库存报修工单、宿舍信息、食堂采购、物资领用这些后勤数据浏览器直接访问不需要装客户端。它适合正在找毕设题目的本科生也适合想用一个完整项目补齐 SpringBoot 实战经验的自学者。接下来我会按「技术选型为什么这么定 → 数据库和接口怎么设计 → 前后端怎么联调 → 部署和论文怎么写」的顺序把这条路径拆开讲清楚让你拿到标题就能动手而不是对着空白 IDE 发呆。2. 技术选型与工程骨架为什么是 Vue SpringBoot 而不是 JSP2.1 前后端分离在毕设场景下的真实收益很多同学一开始会纠结用 JSP 或者 Thymeleaf 做服务端渲染不是更简单吗确实如果只是做一个增删改查的课程作业Thymeleaf 能省掉跨域、Token 传递、前端路由这些环节。但毕设和课程作业的区别在于答辩老师会看你的技术栈是否匹配当前企业主流。Vue SpringBoot 的前后端分离架构前端负责页面渲染和交互后端只返回 JSON 数据两边通过 HTTP 接口通信。这样做的好处是职责清晰后端改接口不影响前端页面结构前端换皮肤不用动 Java 代码。从实际开发体验来说Vue 的组件化让「报修列表」「宿舍分配」「物资库存」这些模块可以拆成独立文件每个.vue文件里 template、script、style 三块分明改一个模块不会牵连其他页面。SpringBoot 这边一个RestController就能把一组接口暴露出去配合 MyBatis-Plus 或者 JPA单表 CRUD 几乎不用写 SQL。对于毕设这种功能点固定、时间有限的项目这套组合的投入产出比是最高的。还有一个容易被忽略的点论文里写技术选型章节时前后端分离架构可以展开的内容更多。你可以写接口规范、跨域处理、Token 鉴权、前后端联调流程这些都是实打实的技术细节比「用 JSP 因为简单」有说服力得多。2.2 后端工程骨架的搭建命令与依赖说明先建 SpringBoot 工程。我一般直接用 Spring Initializr 生成骨架也可以用 Maven 命令手动建。下面是pom.xml里必须有的核心依赖版本号根据你本地 JDK 选JDK 8 配 SpringBoot 2.7.xJDK 17 配 SpringBoot 3.x。!-- pom.xml 核心依赖 -- dependencies !-- Web 层提供 REST 接口和内置 Tomcat -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- 持久层MyBatis-Plus 简化单表 CRUD -- dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency !-- MySQL 驱动 -- dependency groupIdcom.mysql/groupId artifactIdmysql-connector-j/artifactId scoperuntime/scope /dependency !-- Lombok省掉 getter/setter -- dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency !-- JWT登录鉴权 -- dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-api/artifactId version0.11.5/version /dependency /dependencies这段依赖里spring-boot-starter-web是核心它把 Tomcat、Spring MVC、Jackson 全部打包进来启动类跑起来就是一个独立服务。MyBatis-Plus 的作用是让你继承BaseMapperT之后selectById、insert、updateById这些方法直接可用不用为每张表写 XML。JWT 用来做登录态前端登录成功后拿到 Token后续请求放在 Header 里后端写一个拦截器统一校验。配置文件application.yml里要改三个地方数据库连接、MyBatis-Plus 的 mapper 扫描路径、服务端口。数据库名建议就叫campus_logistics字符集用utf8mb4否则中文物资名称会乱码。server: port: 8081 # 避免和前端 8080 冲突 spring: datasource: url: jdbc:mysql://localhost:3306/campus_logistics?useUnicodetruecharacterEncodingutf8mb4serverTimezoneAsia/Shanghai username: root password: 你的密码 driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true # 数据库 snake_case 自动映射 Java camelCasemap-underscore-to-camel-case这个配置一定要开。数据库字段叫create_time实体类里写createTime开了这个就不用每个字段加TableField注解省很多事。2.3 前端 Vue 工程的初始化与目录约定前端用 Vue CLI 或者 Vite 建都行Vite 启动更快但 Vue CLI 的资料更多遇到问题好搜。我一般用 Vue CLI 建命令如下# 全局安装脚手架如果还没装 npm install -g vue/cli # 创建项目选择 Vue 2 或 Vue 3 都行毕设推荐 Vue 2 Element UI组件库成熟 vue create campus-logistics-frontend # 进入目录后安装核心依赖 cd campus-logistics-frontend npm install axios element-ui vue-router vuex --save装完之后目录结构建议这样组织src/api放所有接口请求函数src/views放页面组件src/router配路由src/store管登录态。axios要做一层封装统一加 Token、统一处理 401 跳登录。这个封装文件通常叫request.js放在src/utils下。// src/utils/request.js import axios from axios import { Message } from element-ui import router from /router const service axios.create({ baseURL: http://localhost:8081, // 后端地址 timeout: 10000 }) // 请求拦截器每个请求自动带 Token service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config }) // 响应拦截器统一处理错误码 service.interceptors.response.use( response response.data, error { if (error.response error.response.status 401) { Message.error(登录已过期请重新登录) router.push(/login) } return Promise.reject(error) } ) export default service这段代码的关键在于两个拦截器。请求拦截器负责把 Token 塞进 Header响应拦截器负责在 Token 失效时统一跳转登录页不用在每个页面里写一遍判断。baseURL指向后端 8081 端口前端自己跑在 8080跨域问题在后端用CrossOrigin注解或者全局配置解决。3. 数据库设计与核心接口后勤业务的数据模型怎么落3.1 五张核心表的结构与字段说明校园后勤系统听起来功能多但拆开看就是几个核心实体用户、报修工单、宿舍、物资、食堂采购。毕设不需要把每张表都设计得特别复杂但主外键关系要清楚答辩时老师会看你的 ER 图。表名用途关键字段关联关系sys_user用户表id, username, password, role, phone被工单、领用记录引用repair_order报修工单id, user_id, dorm_id, content, status, create_timeuser_id 关联用户dorm_id 关联宿舍dorm_info宿舍信息id, building_no, room_no, capacity, occupied被工单、住宿记录引用material物资库存id, name, stock, unit, warn_stock被领用记录引用material_record物资领用记录id, material_id, user_id, count, apply_time关联物资和用户repair_order的status字段用整数表示状态0 待处理、1 处理中、2 已完成。这样前端可以根据状态显示不同颜色的标签后端查询时也方便按状态筛选。material表里的warn_stock是库存预警值当stock小于这个数时前端首页要弹提醒这是后勤系统里比较实用的一个功能点论文里可以单独写一节。建表 SQL 我一般直接写在resources/sql/init.sql里方便换电脑时一键初始化。注意create_time用datetime类型默认值CURRENT_TIMESTAMP这样插入数据不用手动传时间。CREATE TABLE repair_order ( id int NOT NULL AUTO_INCREMENT, user_id int NOT NULL COMMENT 报修人, dorm_id int NOT NULL COMMENT 宿舍, content varchar(500) NOT NULL COMMENT 报修内容, status tinyint DEFAULT 0 COMMENT 0待处理 1处理中 2已完成, create_time datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_user (user_id), KEY idx_status (status) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;索引加在user_id和status上因为最常用的查询就是「查某个学生的报修记录」和「查所有待处理工单」。数据量小的时候索引看不出效果但论文里写一句「针对高频查询字段建立索引」答辩时是个加分项。3.2 报修工单接口的完整实现后端接口按业务模块分 Controller报修模块就叫RepairOrderController。下面是一个完整的「提交报修 查询我的工单 管理员处理工单」三段式实现。RestController RequestMapping(/api/repair) public class RepairOrderController { Autowired private RepairOrderService repairOrderService; // 学生提交报修 PostMapping(/submit) public Result submit(RequestBody RepairOrder order) { order.setStatus(0); // 默认待处理 order.setCreateTime(new Date()); repairOrderService.save(order); return Result.success(提交成功); } // 查询当前用户的工单列表 GetMapping(/my) public Result myOrders(RequestParam Integer userId) { QueryWrapperRepairOrder wrapper new QueryWrapper(); wrapper.eq(user_id, userId).orderByDesc(create_time); return Result.success(repairOrderService.list(wrapper)); } // 管理员更新工单状态 PutMapping(/status) public Result updateStatus(RequestParam Integer id, RequestParam Integer status) { RepairOrder order new RepairOrder(); order.setId(id); order.setStatus(status); repairOrderService.updateById(order); return Result.success(状态已更新); } }Result是自定义的统一返回体包含code、msg、data三个字段前端根据code判断成功失败。QueryWrapper是 MyBatis-Plus 的条件构造器eq是等值查询orderByDesc按时间倒序这样最新的工单排在最前面。updateById只会更新实体里非 null 的字段所以这里只 set 了 id 和 status不会把其他字段覆盖成空。前端调用时submit对应表单提交my对应学生端列表页status对应管理员端的「处理」按钮。三个接口覆盖了报修流程的完整闭环论文里的「功能实现」章节可以直接拿这三个接口展开写。3.3 物资库存预警的定时任务实现物资库存预警是后勤系统里比较有亮点的功能。思路是每天凌晨跑一次定时任务扫描material表把stock warn_stock的记录查出来生成一条通知或者直接在前端首页红点提示。SpringBoot 开定时任务只需要两个注解。Component public class StockWarnTask { Autowired private MaterialService materialService; // 每天凌晨 1 点执行 Scheduled(cron 0 0 1 * * ?) public void checkStock() { QueryWrapperMaterial wrapper new QueryWrapper(); wrapper.apply(stock warn_stock); // 库存低于预警值 ListMaterial warnList materialService.list(wrapper); if (!warnList.isEmpty()) { // 实际项目中这里可以发邮件或站内信毕设里打印日志即可 System.out.println(库存预警 warnList.size() 种物资不足); } } }启动类上要加EnableScheduling注解否则Scheduled不生效。cron表达式0 0 1 * * ?表示每天 1 点整执行秒 分 时 日 月 周。wrapper.apply里写的是原生 SQL 片段适合这种字段间比较的场景。这个功能代码量不大但能让你的系统看起来不只是增删改查论文里可以放在「系统特色功能」一节。4. 前后端联调与部署从本地跑通到打包交付4.1 跨域问题的三种解法与选择建议前后端分离第一个拦路虎就是跨域。前端 8080后端 8081浏览器同源策略会拦截请求。常见解法有三种后端加CrossOrigin注解、后端配全局跨域、前端配代理。我一般推荐开发阶段用前端代理生产环境用 Nginx 反向代理这样后端代码干净。前端代理在vue.config.js里配// vue.config.js module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, // 后端地址 changeOrigin: true, // 允许跨域 pathRewrite: { ^/api: /api } // 路径不重写后端接口本身带 /api } } } }配完之后前端request.js里的baseURL改成空字符串所有请求走相对路径/api/repair/submit代理会自动转发到 8081。这样浏览器看到的是同源请求不会有跨域报错。changeOrigin: true的作用是把请求头里的 Host 改成目标地址有些后端框架会校验 Host不开这个可能被拒。如果后端已经写了CrossOrigin前端代理可以不加但生产环境部署时还是建议用 Nginx 统一处理因为那时候前端是静态文件后端是 jar 包两个端口不一样跨域依然存在。4.2 打包部署的完整命令流程毕设交付时老师通常要求你能演示系统跑起来。最稳妥的方式是打成 jar 包前端打成静态文件用 Nginx 托管前端并反向代理后端接口。后端打包# 在项目根目录执行跳过测试加快打包 mvn clean package -DskipTests # 打包完成后 target 目录下会生成 xxx.jar java -jar target/campus-logistics-0.0.1-SNAPSHOT.jar --spring.profiles.activeprod前端打包npm run build # 生成 dist 目录里面是 index.html 和 static 文件夹Nginx 配置示例server { listen 80; server_name localhost; # 前端静态文件 location / { root /usr/share/nginx/html/dist; try_files $uri $uri/ /index.html; # Vue 路由 history 模式必须加 } # 后端接口反向代理 location /api/ { proxy_pass http://127.0.0.1:8081/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }try_files那行是给 Vue Router 的 history 模式用的不加的话刷新页面会 404。proxy_pass末尾的/api/要和 location 保持一致否则路径会拼接错误。这套配置跑通之后浏览器直接访问http://localhost就能看到系统后端接口也能正常调用。4.3 论文里技术章节的写法建议毕设论文和纯技术文档不一样它需要体现你的设计思路和实现过程。技术章节我建议按「需求分析 → 数据库设计 → 接口设计 → 前端实现 → 测试」来组织。需求分析里画用例图数据库设计里贴 ER 图和表结构接口设计里用表格列出 URL、方法、参数、返回值前端实现里贴关键页面截图和核心代码片段。不要大段贴代码论文查重会查代码。正确做法是贴关键几行然后用自己的话解释逻辑。比如报修工单的状态流转你可以写「工单创建时状态为 0管理员接单后更新为 1处理完成后更新为 2前端根据状态值渲染不同颜色的标签」。这样既体现了实现细节又不会被查重标红。测试章节可以写功能测试和接口测试。功能测试就是手动点一遍每个页面记录预期结果和实际结果。接口测试用 Postman 发请求截图保存响应。这两部分加起来能凑够一章而且都是真实做过的内容写起来不心虚。5. 避坑与排查那些让我熬夜的报错和修复5.1 数据库连接报Public Key Retrieval is not allowed现象SpringBoot 启动时报com.mysql.cj.jdbc.exceptions.CommunicationsException: Public Key Retrieval is not allowed数据库连不上。原因MySQL 8 默认使用caching_sha2_password认证插件JDBC 驱动在连接时需要获取公钥但默认不允许。解决在 JDBC URL 后面加allowPublicKeyRetrievaltrue完整 URL 变成jdbc:mysql://localhost:3306/campus_logistics?allowPublicKeyRetrievaltrueuseSSLfalseserverTimezoneAsia/Shanghai。useSSLfalse也建议加上本地开发不需要 SSL不加会有警告。5.2 前端请求返回 401 但 Token 明明传了现象登录成功后后续请求全部返回 401检查 Header 发现 Token 确实带上了。原因后端拦截器校验 Token 时从 Header 里取的 key 和前端设置的 key 不一致。前端写的是config.headers[Authorization] token后端可能取的是request.getHeader(token)。解决统一前后端的 Header key。我一般用Authorization后端拦截器里request.getHeader(Authorization)取值。另外注意 Token 要不要加Bearer前缀如果加了后端解析时要去掉。这个坑很隐蔽因为浏览器 Network 面板里能看到 Header 有值但后端就是取不到排查时容易怀疑 JWT 工具类。5.3 MyBatis-Plus 查询返回字段全是 null现象调用list()查询返回的记录数对但每个对象的字段都是 null。原因数据库字段是create_time实体类属性是createTime但没开驼峰映射或者实体类没加TableName注解导致表名对不上。解决检查application.yml里map-underscore-to-camel-case: true是否配置。如果表名和实体类名不一致比如表叫sys_user类叫User要在实体类上加TableName(sys_user)。还有一个容易忽略的点实体类必须有无参构造方法和 getter/setterLombok 的Data注解要加对。5.4 Vue 路由刷新后页面空白现象开发环境正常打包部署后从首页点进子页面正常但直接刷新子页面 URL 就变成空白页。原因Vue Router 默认是 hash 模式URL 带#刷新不会请求服务器。如果改成了 history 模式刷新时浏览器会向服务器请求/repair/list这个路径Nginx 找不到对应文件就返回 404。解决Nginx 配置里加try_files $uri $uri/ /index.html;把所有找不到的路径都指向index.html由前端路由接管。如果不想改 Nginx就把路由模式改回 hash 模式URL 会带#但刷新不会 404。毕设演示建议用 hash 模式省事。5.5 打包后静态资源 404现象npm run build之后dist目录部署到 Nginx页面能打开但 CSS 和 JS 全部 404。原因Vue CLI 默认打包路径是绝对路径/如果部署在子目录下比如http://localhost/logistics/资源路径就对不上。解决在vue.config.js里设置publicPath: ./改成相对路径。这样打包后的index.html引用资源用./static/...不管部署在哪个目录都能找到。改完记得重新npm run build。6. 让系统在答辩时多拿十分的两个进阶技巧第一个技巧是给系统加一个数据看板。后勤系统的数据看板不需要多复杂用 ECharts 画三个图就够了报修工单按状态分布的饼图、近七天报修数量的折线图、物资库存低于预警值的柱状图。后端加一个/api/dashboard/stats接口返回聚合数据前端用 ECharts 渲染。这个功能代码量不大但答辩演示时视觉效果很好老师会觉得你的系统有「管理驾驶舱」的感觉。// DashboardController 聚合统计 GetMapping(/stats) public Result stats() { MapString, Object data new HashMap(); // 工单状态分布 data.put(orderStatus, repairOrderService.countByStatus()); // 近七天报修趋势 data.put(weeklyTrend, repairOrderService.countByDay()); // 库存预警列表 data.put(stockWarn, materialService.listWarn()); return Result.success(data); }第二个技巧是准备一份「演示脚本」。答辩演示时间通常只有 5 到 8 分钟不要现场随便点。提前写好流程先登录管理员账号展示数据看板然后切到报修管理处理一条工单再切到物资管理展示库存预警最后用学生账号提交一条新报修回到管理员账号看到新工单。这条流程覆盖了系统的主要功能而且有动态数据变化比静态截图有说服力。我自己的习惯是演示前把数据库重置到初始状态确保每次演示的数据一致。另外准备一个 Postman 集合万一前端出问题可以直接用接口演示后端功能不至于卡在现场。这些准备花不了多少时间但能让你在答辩时从容很多。希望帮到你。本文还有配套的精品资源点击获取 Vue+SpringBoot校园后勤管理系统：Java毕业设计完整落地指南
简介本资源为基于BS架构的校园后勤服务管理系统毕业设计源码包面向计算机相关专业需要完成毕业设计的学生及Java初学者。项目采用前后端分离方案前端使用Vue.js配合ElementUI构建界面后端基于Java语言与SpringBoot框架通过MyBatis操作MySQL数据源开发工具支持IDEA或EclipseJDK版本要求1.8以上并附有配套论文文档便于读者理解系统设计思路与实现过程。压缩包共1122个文件约46.09MB其中217个Java源文件承载后端业务逻辑117个Vue组件与161个JS脚本构成前端交互层另有96个HTML页面、52个CSS样式及大量图片、字体等静态资源同时包含SQL脚本、yml配置与bat启动脚本目录结构完整清晰。目前已有84人学习下载。读者可获取完整的登录管理等模块实现、数据库设计方案以及论文参考适合作为毕业设计模板或SpringBoot与Vue整合练手项目帮助快速搭建开发环境并理解前后端协作流程。1. 校园后勤服务管理系统从选题到跑通一个 Java 毕业设计的完整落地路径每年一到毕设季计算机专业的学生就会面临同一个灵魂拷问选什么题目既能体现技术栈又能在有限时间内跑通、写出论文、通过答辩「基于 BS 的校园后勤服务管理系统」几乎是出现频率最高的选题之一而配上vue SpringBoot这套前后端分离组合基本就是当下 Java 毕业设计的主流模板。这个标题背后对应的是一套真实可交付的系统前端用 Vue 做管理界面后端用 SpringBoot 提供 REST 接口数据库存报修工单、宿舍信息、食堂采购、物资领用这些后勤数据浏览器直接访问不需要装客户端。它适合正在找毕设题目的本科生也适合想用一个完整项目补齐 SpringBoot 实战经验的自学者。接下来我会按「技术选型为什么这么定 → 数据库和接口怎么设计 → 前后端怎么联调 → 部署和论文怎么写」的顺序把这条路径拆开讲清楚让你拿到标题就能动手而不是对着空白 IDE 发呆。2. 技术选型与工程骨架为什么是 Vue SpringBoot 而不是 JSP2.1 前后端分离在毕设场景下的真实收益很多同学一开始会纠结用 JSP 或者 Thymeleaf 做服务端渲染不是更简单吗确实如果只是做一个增删改查的课程作业Thymeleaf 能省掉跨域、Token 传递、前端路由这些环节。但毕设和课程作业的区别在于答辩老师会看你的技术栈是否匹配当前企业主流。Vue SpringBoot 的前后端分离架构前端负责页面渲染和交互后端只返回 JSON 数据两边通过 HTTP 接口通信。这样做的好处是职责清晰后端改接口不影响前端页面结构前端换皮肤不用动 Java 代码。从实际开发体验来说Vue 的组件化让「报修列表」「宿舍分配」「物资库存」这些模块可以拆成独立文件每个.vue文件里 template、script、style 三块分明改一个模块不会牵连其他页面。SpringBoot 这边一个RestController就能把一组接口暴露出去配合 MyBatis-Plus 或者 JPA单表 CRUD 几乎不用写 SQL。对于毕设这种功能点固定、时间有限的项目这套组合的投入产出比是最高的。还有一个容易被忽略的点论文里写技术选型章节时前后端分离架构可以展开的内容更多。你可以写接口规范、跨域处理、Token 鉴权、前后端联调流程这些都是实打实的技术细节比「用 JSP 因为简单」有说服力得多。2.2 后端工程骨架的搭建命令与依赖说明先建 SpringBoot 工程。我一般直接用 Spring Initializr 生成骨架也可以用 Maven 命令手动建。下面是pom.xml里必须有的核心依赖版本号根据你本地 JDK 选JDK 8 配 SpringBoot 2.7.xJDK 17 配 SpringBoot 3.x。!-- pom.xml 核心依赖 -- dependencies !-- Web 层提供 REST 接口和内置 Tomcat -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- 持久层MyBatis-Plus 简化单表 CRUD -- dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency !-- MySQL 驱动 -- dependency groupIdcom.mysql/groupId artifactIdmysql-connector-j/artifactId scoperuntime/scope /dependency !-- Lombok省掉 getter/setter -- dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency !-- JWT登录鉴权 -- dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-api/artifactId version0.11.5/version /dependency /dependencies这段依赖里spring-boot-starter-web是核心它把 Tomcat、Spring MVC、Jackson 全部打包进来启动类跑起来就是一个独立服务。MyBatis-Plus 的作用是让你继承BaseMapperT之后selectById、insert、updateById这些方法直接可用不用为每张表写 XML。JWT 用来做登录态前端登录成功后拿到 Token后续请求放在 Header 里后端写一个拦截器统一校验。配置文件application.yml里要改三个地方数据库连接、MyBatis-Plus 的 mapper 扫描路径、服务端口。数据库名建议就叫campus_logistics字符集用utf8mb4否则中文物资名称会乱码。server: port: 8081 # 避免和前端 8080 冲突 spring: datasource: url: jdbc:mysql://localhost:3306/campus_logistics?useUnicodetruecharacterEncodingutf8mb4serverTimezoneAsia/Shanghai username: root password: 你的密码 driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true # 数据库 snake_case 自动映射 Java camelCasemap-underscore-to-camel-case这个配置一定要开。数据库字段叫create_time实体类里写createTime开了这个就不用每个字段加TableField注解省很多事。2.3 前端 Vue 工程的初始化与目录约定前端用 Vue CLI 或者 Vite 建都行Vite 启动更快但 Vue CLI 的资料更多遇到问题好搜。我一般用 Vue CLI 建命令如下# 全局安装脚手架如果还没装 npm install -g vue/cli # 创建项目选择 Vue 2 或 Vue 3 都行毕设推荐 Vue 2 Element UI组件库成熟 vue create campus-logistics-frontend # 进入目录后安装核心依赖 cd campus-logistics-frontend npm install axios element-ui vue-router vuex --save装完之后目录结构建议这样组织src/api放所有接口请求函数src/views放页面组件src/router配路由src/store管登录态。axios要做一层封装统一加 Token、统一处理 401 跳登录。这个封装文件通常叫request.js放在src/utils下。// src/utils/request.js import axios from axios import { Message } from element-ui import router from /router const service axios.create({ baseURL: http://localhost:8081, // 后端地址 timeout: 10000 }) // 请求拦截器每个请求自动带 Token service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config }) // 响应拦截器统一处理错误码 service.interceptors.response.use( response response.data, error { if (error.response error.response.status 401) { Message.error(登录已过期请重新登录) router.push(/login) } return Promise.reject(error) } ) export default service这段代码的关键在于两个拦截器。请求拦截器负责把 Token 塞进 Header响应拦截器负责在 Token 失效时统一跳转登录页不用在每个页面里写一遍判断。baseURL指向后端 8081 端口前端自己跑在 8080跨域问题在后端用CrossOrigin注解或者全局配置解决。3. 数据库设计与核心接口后勤业务的数据模型怎么落3.1 五张核心表的结构与字段说明校园后勤系统听起来功能多但拆开看就是几个核心实体用户、报修工单、宿舍、物资、食堂采购。毕设不需要把每张表都设计得特别复杂但主外键关系要清楚答辩时老师会看你的 ER 图。表名用途关键字段关联关系sys_user用户表id, username, password, role, phone被工单、领用记录引用repair_order报修工单id, user_id, dorm_id, content, status, create_timeuser_id 关联用户dorm_id 关联宿舍dorm_info宿舍信息id, building_no, room_no, capacity, occupied被工单、住宿记录引用material物资库存id, name, stock, unit, warn_stock被领用记录引用material_record物资领用记录id, material_id, user_id, count, apply_time关联物资和用户repair_order的status字段用整数表示状态0 待处理、1 处理中、2 已完成。这样前端可以根据状态显示不同颜色的标签后端查询时也方便按状态筛选。material表里的warn_stock是库存预警值当stock小于这个数时前端首页要弹提醒这是后勤系统里比较实用的一个功能点论文里可以单独写一节。建表 SQL 我一般直接写在resources/sql/init.sql里方便换电脑时一键初始化。注意create_time用datetime类型默认值CURRENT_TIMESTAMP这样插入数据不用手动传时间。CREATE TABLE repair_order ( id int NOT NULL AUTO_INCREMENT, user_id int NOT NULL COMMENT 报修人, dorm_id int NOT NULL COMMENT 宿舍, content varchar(500) NOT NULL COMMENT 报修内容, status tinyint DEFAULT 0 COMMENT 0待处理 1处理中 2已完成, create_time datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_user (user_id), KEY idx_status (status) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;索引加在user_id和status上因为最常用的查询就是「查某个学生的报修记录」和「查所有待处理工单」。数据量小的时候索引看不出效果但论文里写一句「针对高频查询字段建立索引」答辩时是个加分项。3.2 报修工单接口的完整实现后端接口按业务模块分 Controller报修模块就叫RepairOrderController。下面是一个完整的「提交报修 查询我的工单 管理员处理工单」三段式实现。RestController RequestMapping(/api/repair) public class RepairOrderController { Autowired private RepairOrderService repairOrderService; // 学生提交报修 PostMapping(/submit) public Result submit(RequestBody RepairOrder order) { order.setStatus(0); // 默认待处理 order.setCreateTime(new Date()); repairOrderService.save(order); return Result.success(提交成功); } // 查询当前用户的工单列表 GetMapping(/my) public Result myOrders(RequestParam Integer userId) { QueryWrapperRepairOrder wrapper new QueryWrapper(); wrapper.eq(user_id, userId).orderByDesc(create_time); return Result.success(repairOrderService.list(wrapper)); } // 管理员更新工单状态 PutMapping(/status) public Result updateStatus(RequestParam Integer id, RequestParam Integer status) { RepairOrder order new RepairOrder(); order.setId(id); order.setStatus(status); repairOrderService.updateById(order); return Result.success(状态已更新); } }Result是自定义的统一返回体包含code、msg、data三个字段前端根据code判断成功失败。QueryWrapper是 MyBatis-Plus 的条件构造器eq是等值查询orderByDesc按时间倒序这样最新的工单排在最前面。updateById只会更新实体里非 null 的字段所以这里只 set 了 id 和 status不会把其他字段覆盖成空。前端调用时submit对应表单提交my对应学生端列表页status对应管理员端的「处理」按钮。三个接口覆盖了报修流程的完整闭环论文里的「功能实现」章节可以直接拿这三个接口展开写。3.3 物资库存预警的定时任务实现物资库存预警是后勤系统里比较有亮点的功能。思路是每天凌晨跑一次定时任务扫描material表把stock warn_stock的记录查出来生成一条通知或者直接在前端首页红点提示。SpringBoot 开定时任务只需要两个注解。Component public class StockWarnTask { Autowired private MaterialService materialService; // 每天凌晨 1 点执行 Scheduled(cron 0 0 1 * * ?) public void checkStock() { QueryWrapperMaterial wrapper new QueryWrapper(); wrapper.apply(stock warn_stock); // 库存低于预警值 ListMaterial warnList materialService.list(wrapper); if (!warnList.isEmpty()) { // 实际项目中这里可以发邮件或站内信毕设里打印日志即可 System.out.println(库存预警 warnList.size() 种物资不足); } } }启动类上要加EnableScheduling注解否则Scheduled不生效。cron表达式0 0 1 * * ?表示每天 1 点整执行秒 分 时 日 月 周。wrapper.apply里写的是原生 SQL 片段适合这种字段间比较的场景。这个功能代码量不大但能让你的系统看起来不只是增删改查论文里可以放在「系统特色功能」一节。4. 前后端联调与部署从本地跑通到打包交付4.1 跨域问题的三种解法与选择建议前后端分离第一个拦路虎就是跨域。前端 8080后端 8081浏览器同源策略会拦截请求。常见解法有三种后端加CrossOrigin注解、后端配全局跨域、前端配代理。我一般推荐开发阶段用前端代理生产环境用 Nginx 反向代理这样后端代码干净。前端代理在vue.config.js里配// vue.config.js module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, // 后端地址 changeOrigin: true, // 允许跨域 pathRewrite: { ^/api: /api } // 路径不重写后端接口本身带 /api } } } }配完之后前端request.js里的baseURL改成空字符串所有请求走相对路径/api/repair/submit代理会自动转发到 8081。这样浏览器看到的是同源请求不会有跨域报错。changeOrigin: true的作用是把请求头里的 Host 改成目标地址有些后端框架会校验 Host不开这个可能被拒。如果后端已经写了CrossOrigin前端代理可以不加但生产环境部署时还是建议用 Nginx 统一处理因为那时候前端是静态文件后端是 jar 包两个端口不一样跨域依然存在。4.2 打包部署的完整命令流程毕设交付时老师通常要求你能演示系统跑起来。最稳妥的方式是打成 jar 包前端打成静态文件用 Nginx 托管前端并反向代理后端接口。后端打包# 在项目根目录执行跳过测试加快打包 mvn clean package -DskipTests # 打包完成后 target 目录下会生成 xxx.jar java -jar target/campus-logistics-0.0.1-SNAPSHOT.jar --spring.profiles.activeprod前端打包npm run build # 生成 dist 目录里面是 index.html 和 static 文件夹Nginx 配置示例server { listen 80; server_name localhost; # 前端静态文件 location / { root /usr/share/nginx/html/dist; try_files $uri $uri/ /index.html; # Vue 路由 history 模式必须加 } # 后端接口反向代理 location /api/ { proxy_pass http://127.0.0.1:8081/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }try_files那行是给 Vue Router 的 history 模式用的不加的话刷新页面会 404。proxy_pass末尾的/api/要和 location 保持一致否则路径会拼接错误。这套配置跑通之后浏览器直接访问http://localhost就能看到系统后端接口也能正常调用。4.3 论文里技术章节的写法建议毕设论文和纯技术文档不一样它需要体现你的设计思路和实现过程。技术章节我建议按「需求分析 → 数据库设计 → 接口设计 → 前端实现 → 测试」来组织。需求分析里画用例图数据库设计里贴 ER 图和表结构接口设计里用表格列出 URL、方法、参数、返回值前端实现里贴关键页面截图和核心代码片段。不要大段贴代码论文查重会查代码。正确做法是贴关键几行然后用自己的话解释逻辑。比如报修工单的状态流转你可以写「工单创建时状态为 0管理员接单后更新为 1处理完成后更新为 2前端根据状态值渲染不同颜色的标签」。这样既体现了实现细节又不会被查重标红。测试章节可以写功能测试和接口测试。功能测试就是手动点一遍每个页面记录预期结果和实际结果。接口测试用 Postman 发请求截图保存响应。这两部分加起来能凑够一章而且都是真实做过的内容写起来不心虚。5. 避坑与排查那些让我熬夜的报错和修复5.1 数据库连接报Public Key Retrieval is not allowed现象SpringBoot 启动时报com.mysql.cj.jdbc.exceptions.CommunicationsException: Public Key Retrieval is not allowed数据库连不上。原因MySQL 8 默认使用caching_sha2_password认证插件JDBC 驱动在连接时需要获取公钥但默认不允许。解决在 JDBC URL 后面加allowPublicKeyRetrievaltrue完整 URL 变成jdbc:mysql://localhost:3306/campus_logistics?allowPublicKeyRetrievaltrueuseSSLfalseserverTimezoneAsia/Shanghai。useSSLfalse也建议加上本地开发不需要 SSL不加会有警告。5.2 前端请求返回 401 但 Token 明明传了现象登录成功后后续请求全部返回 401检查 Header 发现 Token 确实带上了。原因后端拦截器校验 Token 时从 Header 里取的 key 和前端设置的 key 不一致。前端写的是config.headers[Authorization] token后端可能取的是request.getHeader(token)。解决统一前后端的 Header key。我一般用Authorization后端拦截器里request.getHeader(Authorization)取值。另外注意 Token 要不要加Bearer前缀如果加了后端解析时要去掉。这个坑很隐蔽因为浏览器 Network 面板里能看到 Header 有值但后端就是取不到排查时容易怀疑 JWT 工具类。5.3 MyBatis-Plus 查询返回字段全是 null现象调用list()查询返回的记录数对但每个对象的字段都是 null。原因数据库字段是create_time实体类属性是createTime但没开驼峰映射或者实体类没加TableName注解导致表名对不上。解决检查application.yml里map-underscore-to-camel-case: true是否配置。如果表名和实体类名不一致比如表叫sys_user类叫User要在实体类上加TableName(sys_user)。还有一个容易忽略的点实体类必须有无参构造方法和 getter/setterLombok 的Data注解要加对。5.4 Vue 路由刷新后页面空白现象开发环境正常打包部署后从首页点进子页面正常但直接刷新子页面 URL 就变成空白页。原因Vue Router 默认是 hash 模式URL 带#刷新不会请求服务器。如果改成了 history 模式刷新时浏览器会向服务器请求/repair/list这个路径Nginx 找不到对应文件就返回 404。解决Nginx 配置里加try_files $uri $uri/ /index.html;把所有找不到的路径都指向index.html由前端路由接管。如果不想改 Nginx就把路由模式改回 hash 模式URL 会带#但刷新不会 404。毕设演示建议用 hash 模式省事。5.5 打包后静态资源 404现象npm run build之后dist目录部署到 Nginx页面能打开但 CSS 和 JS 全部 404。原因Vue CLI 默认打包路径是绝对路径/如果部署在子目录下比如http://localhost/logistics/资源路径就对不上。解决在vue.config.js里设置publicPath: ./改成相对路径。这样打包后的index.html引用资源用./static/...不管部署在哪个目录都能找到。改完记得重新npm run build。6. 让系统在答辩时多拿十分的两个进阶技巧第一个技巧是给系统加一个数据看板。后勤系统的数据看板不需要多复杂用 ECharts 画三个图就够了报修工单按状态分布的饼图、近七天报修数量的折线图、物资库存低于预警值的柱状图。后端加一个/api/dashboard/stats接口返回聚合数据前端用 ECharts 渲染。这个功能代码量不大但答辩演示时视觉效果很好老师会觉得你的系统有「管理驾驶舱」的感觉。// DashboardController 聚合统计 GetMapping(/stats) public Result stats() { MapString, Object data new HashMap(); // 工单状态分布 data.put(orderStatus, repairOrderService.countByStatus()); // 近七天报修趋势 data.put(weeklyTrend, repairOrderService.countByDay()); // 库存预警列表 data.put(stockWarn, materialService.listWarn()); return Result.success(data); }第二个技巧是准备一份「演示脚本」。答辩演示时间通常只有 5 到 8 分钟不要现场随便点。提前写好流程先登录管理员账号展示数据看板然后切到报修管理处理一条工单再切到物资管理展示库存预警最后用学生账号提交一条新报修回到管理员账号看到新工单。这条流程覆盖了系统的主要功能而且有动态数据变化比静态截图有说服力。我自己的习惯是演示前把数据库重置到初始状态确保每次演示的数据一致。另外准备一个 Postman 集合万一前端出问题可以直接用接口演示后端功能不至于卡在现场。这些准备花不了多少时间但能让你在答辩时从容很多。希望帮到你。本文还有配套的精品资源点击获取