毕业设计做校园服务平台SpringBootVueMySQL这套组合算是非常经典的选题了。最近好几个学弟学妹在后台问我拿到的源码该怎么跑起来、论文怎么写、部署文档怎么改我想干脆把自己折腾这个项目的过程完整梳理一遍把那些网上教程不会明说的坑、我自己踩过的雷、以及答辩时被老师追问最多的点一次性讲清楚。这篇文章会覆盖整个项目的完整落地链路从环境配置、代码结构、数据库设计、核心功能实现思路到打包部署、二次开发扩展、高频报错排查。不管你是刚拿到项目还是已经改过几版这篇文章都应该能帮你在现有基础上省下不少时间。1. 校园服务平台到底在做什么选题定位与功能边界先说清楚这个项目解决的核心问题校园里的信息相对分散二手交易信息发在群里瞬间被淹没失物招领贴在教学楼公告栏没人看活动报名靠班长手工统计。校园服务平台就是把这类高频场景统一收拢到一个Web应用里让注册用户能发布二手闲置、发布寻物启事、浏览并报名校园活动同时给管理员一个后台来管理用户和内容维持平台秩序。这种选题在答辩时有一个天然优势——需求非常贴近校园生活评审老师容易理解也容易认可。没有那种为什么需要这个系统的灵魂拷问因为痛点就摆在那里。整个项目从零搭建时我给它划分了三条主线学生端注册登录、浏览商品、发布二手、发起失物招领、活动浏览与报名、个人资料维护管理端用户管理、商品审核/下架、失物信息管理、活动发布与管理、数据概览公共能力文件上传、登录拦截、全局异常处理、统一结果返回这个功能集并不过分庞大但每一块都落到具体的CRUD操作和业务规则上用来覆盖毕业设计论文里的需求分析、系统设计、实现与测试章节完全是够用的。技术实现上这个项目走的是主流中的主流路线后端SpringBoot 2.x MyBatis-Plus MySQL简洁但不简陋前端Vue 2 Element-UI Axios Vue Router后台管理系统常规搭配鉴权JWT轻松搞定无状态登录这套组合的优势在于每个环节都有海量的社区资料和踩坑记录。即使你之前没接触过前后端分离搜索引擎基本能解决掉九成问题。有同学问我为什么不选Redis做缓存、不用Spring Cloud那套微服务我的回答是毕业设计的评分标准首先是完成度和能讲清楚技术栈过于复杂反而容易在答辩时被问住。2. 开发环境配置与前后端启动全流程环境问题是我见过导致毕设卡壳的第一大原因而且大多数不是操作难度问题是版本兼容性搞鬼。下面是我实测跑的版本组合照着配最省心软件版本注意事项JDK1.8搭配SpringBoot 2.x最稳妥MySQL8.0连接驱动要配套Navicat16或任意版本用于导入SQL脚本IDEA2021版以后社区版也行不过专业版更顺手Maven3.6以上IDEA自带的也可以Node.js16.x或18.x建议18对Vue2项目兼容性好Vue CLI4.x或5.x用于运行前端服务2.1 后端跑起来的第一个动作不是点运行拿到源码后先做两件事第一用IDEA打开后端根目录等待Maven把依赖全部下载完第二打开application.yml文件把数据库连接串改成你自己的环境。核心配置如下server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/campus_platform?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 你的数据库密码 servlet: multipart: max-file-size: 10MB max-request-size: 10MB mybatis-plus: mapper-locations: classpath*:mapper/*.xml configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl这里重点提一个让无数人栽跟头的点serverTimezoneAsia/Shanghai这一项必须存在。MySQL 8.0驱动如果缺了它大概率直接抛时区异常。另外如果你的MySQL版本是5.7而不是8.0驱动类名要换成com.mysql.jdbc.DriverURL中的cj也要去掉。数据库初始化方面项目通常自带campus_platform.sql文件。当时我用Navicat新建数据库时字符集选的是utf8mb4这不只是为了显示emoji表情头像更重要的是避免商品标题里出现生僻字时导致乱码或者插入失败。导入之后你会看到表结构大概包含这些核心表用户表、二手商品表、失物招领表、活动表、报名表、分类表等。确认配置文件无误后运行启动类里的main方法控制台出现Started CampusPlatformApplication字样说明后端已经启动成功了。后端默认端口是8080启动时如果提示端口被占用检查一下是否有其他Java进程占用。2.2 前端启动的两条命令和代理配置前端工程需要单独开启一个Node服务。在项目根目录找到frontend目录终端依次执行cd frontend npm install npm run servenpm install第一次执行时可能比较慢如果你身处网络环境不太理想的情况建议先配一下镜像源后面会专门说这个问题。启动后默认访问地址是http://localhost:8081。这时候如果直接发起请求浏览器会因跨域问题报错。项目的解决方式是通过vue.config.js里的devServer代理module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } };这样前端请求/api/login时Webpack开发服务会把请求转发到后端8080端口。前端路径统一带/api后端Controller层的RequestMapping不需要带/api前缀这个约定要记清楚后面部署的时候还会用到。3. 后端业务实现的中枢设计3.1 登录鉴权拦截器加注解的方式比Filter更顺手认证授权这个环节很多教学项目喜欢用Filter配合一个放行名单实现。但如果用上了SpringMVC的拦截器你会发现它更灵活——因为拦截器能拿到HandlerMethod可以精确控制到某个方法是否需要登录。项目里的做法是自定义了一个LoginRequired注解加在需要登录才能访问的Controller方法上。拦截器的核心逻辑如下如果处理器不是HandlerMethod直接放行这是为了放行静态资源等非控制器请求检查方法上是否有LoginRequired注解没有的直接放行从请求头取token用JWT解析解析失败返回401状态码解析成功则把用户ID存入ThreadLocal方便Service层随时取用public class LoginInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (!(handler instanceof HandlerMethod)) { return true; } HandlerMethod handlerMethod (HandlerMethod) handler; LoginRequired loginRequired handlerMethod.getMethodAnnotation(LoginRequired.class); if (loginRequired null) { return true; } String token request.getHeader(token); try { Long userId JwtUtil.parseToken(token); UserContext.set(userId); return true; } catch (Exception e) { response.setStatus(401); response.setContentType(application/json;charsetutf-8); response.getWriter().write({\code\:401,\message\:\未登录或登录已过期\}); return false; } } }这种方式的好处非常明显新增一个接口时不需要记得去改白名单配置只要决定在方法上是否加注解就能完成权限控制。登录、注册、商品列表这些公开接口不加注解发布商品、报名活动这些操作加上注解即可。ThreadLocal解决了一个实际问题当前登录用户的信息不用在Controller和Service之间传一堆参数。但要注意请求结束后如果不清理ThreadLocal线程池复用线程时可能拿到别人的用户信息所以afterCompletion里必须调用UserContext.clear()。3.2 统一结果返回与全局异常处理前后端联调中最让人头疼的就是返回格式不一致。一会儿返回{code, message, data}一会儿又直接返回一个数组前端拿到数据后状态判断都写不统一。这个项目从一开始就约定了一套统一返回体public class ResultT { private Integer code; private String message; private T data; public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMessage(操作成功); result.setData(data); return result; } public static T ResultT error(String message) { ResultT result new Result(); result.setCode(500); result.setMessage(message); return result; } }Controller层所有接口都返回这个统一结构。前端Axios拦截器里根据code值判断业务成功与否service.interceptors.response.use( response { const res response.data; if (res.code 200) { return res; } Message.error(res.message || 请求失败); return Promise.reject(new Error(res.message)); }, error { Message.error(error.response?.data?.message || 网络异常); return Promise.reject(error); } );全局异常处理用的RestControllerAdvice把业务异常、参数校验异常、系统异常分别映射到对应的提示信息。这样做的隐藏价值是后端即使抛了空指针这种不友好的异常前端接收到的也不是一堆英文堆栈而是一个可读的系统繁忙请稍后重试。3.3 二手交易模块从表设计到图片落盘二手交易是整个平台核心中的核心。我设计表结构时主要考虑了几个点图片用逗号分隔的路径存到一个字段里这比单独建图片表更符合毕设体量商品状态用tinyint存0表示在售、1表示已售出、2表示已下架加user_id和category两个索引列表查询时体验好不少价格用decimal(10,2)避免浮点数精度问题发布商品的流程是前端先上传图片拿到图片URL然后连同商品表单信息一起提交到后端。图片上传接口接收MultipartFile通过UUID生成文件名按日期存放图片public String uploadFile(MultipartFile file) { String originalFilename file.getOriginalFilename(); String suffix originalFilename.substring(originalFilename.lastIndexOf(.)); String fileName UUID.randomUUID().toString().replace(-, ) suffix; String datePath LocalDate.now().toString().replace(-, /); String fullPath uploadPath / datePath; File dir new File(fullPath); if (!dir.exists()) { dir.mkdirs(); } file.transferTo(new File(fullPath / fileName)); return /upload/ datePath / fileName; }文件保存到本地目录后必须配一个虚拟路径映射才能让前端通过URL访问到图片。项目的配置类里有这样一段Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/upload/**) .addResourceLocations(file: uploadPath); }uploadPath在application.yml里配置比如D:/campus_platform/upload/。这样前端拿到的图片路径是/upload/2024/05/20/xxx.jpg浏览器发起请求时就会被转发到本地磁盘对应位置。面试或者答辩时老师大概率会追问一句如果项目部署到服务器怎么办。我的回答思路是本地存储方案适合单机部署如果把项目放到云服务器上可以把uploadPath指向/home/campus/upload配合Nginx的/upload/别名访问这一步在部署文档里也有说明。3.4 失物招领与活动报名里有几个细化逻辑失物招领和二手交易共享相似的用户发布、公共浏览模型但它多了一个状态字段——信息处于寻找中还是已找到。这两个状态只有发布者自己可以修改所以在更新接口里必须做归属判断public Result updateLostFound(RequestBody LostFound lostFound, RequestAttribute Long userId) { LostFound existing lostFoundMapper.selectById(lostFound.getId()); if (existing null || !existing.getUserId().equals(userId)) { return Result.error(无权操作或失物信息不存在); } lostFoundMapper.updateById(lostFound); return Result.success(); }很多没经验的做法是只判断记录存在忘了校验是否本人操作答辩时很容易被老师一个问题问住我是不是可以修改别人的失物信息活动报名模块的数据库设计用了三张表活动表、用户表、报名表。报名表结构关键在唯一索引CREATE TABLE activity_sign_up ( id bigint(20) NOT NULL AUTO_INCREMENT, activity_id bigint(20) NOT NULL, user_id bigint(20) NOT NULL, create_time datetime NOT NULL, PRIMARY KEY (id), UNIQUE KEY uk_activity_user (activity_id, user_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;报名接口用Transactional开启事务先插入报名记录再更新活动表的sign_up_count字段。这里如果没有事务可能出现报名记录插入成功但人数没加一的不一致状态。把这两步操作放在同一个事务里任何一步失败都会整体回滚。4. 前端页面的组装逻辑与通用组件设计4.1 前端路由的组织结构与登录态控制前端采用Vue Router Element-UI搭建。路由分两类一类是无需登录就能访问的页面比如首页商品列表、登录页、注册页另一类是必须登录才能进入的页面比如个人中心、发布页面、管理后台。路由守卫可以在页面跳转前检查token是否存在router.beforeEach((to, from, next) { const token localStorage.getItem(token); if (to.meta.requiresAuth !token) { next({ path: /login, query: { redirect: to.fullPath } }); } else { next(); } });这里的逻辑简单直接——进入需要登录的页面时如果本地没有token就强制跳回登录页同时记录用户原本想去哪个页面登录成功后再跳回去。体验上比进去之后发现接口报401好很多。4.2 表格页面的三步实现套路后台管理页面很多比如商品管理、用户管理、活动管理。它们整体模式高度相似请求列表数据、渲染到表格、执行删除或修改操作。基于这个规律页面代码可以按三步来走第一步data里定义查询参数和列表数据变量。第二步created生命周期里调用列表接口async fetchList() { const res await listGoods(this.queryInfo); this.goodsList res.data.records; this.total res.data.total; }第三步分页组件切换时重新查询handleSizeChange(val) { this.queryInfo.pageSize val; this.fetchList(); }, handleCurrentChange(val) { this.queryInfo.pageNum val; this.fetchList(); }Element-UI的分页组件自带current-change和size-change事件配合MyBatis-Plus自带的分页插件一个标准管理页面半天就能写完。4.3 文件上传组件的坑与解决前端上传图片用的是Element-UI的el-upload组件。这个组件在非action模式下会默认走内置的ajax上传如果后端处理逻辑不同很容易出现403/404/无法获取文件名等莫名其妙的问题。更稳的做法是关闭el-upload的自动上传拿到选中的文件后手动通过multipart/form-data提交到后端const formData new FormData(); formData.append(file, file); const res await uploadImage(formData);配合on-change事件把文件存储在前端变量里等整个表单一起提交。类似的知识点还有Element-UI表单校验规则的动态配置这些在论文中的系统实现章节里非常容易展开写。5. 从开发到演示打包部署实战5.1 后端打包进jar后端模块打成可执行jar包在IDEA右侧Maven面板直接双击package即可。或者用命令行更稳mvn clean package -Dmaven.test.skiptrue加上-Dmaven.test.skiptrue是为了跳过测试用例否则有些项目里的测试类会导致打包失败。打包成功后在target目录下会生成campus-platform-0.0.1-SNAPSHOT.jar。启动命令java -jar campus-platform-0.0.1-SNAPSHOT.jar如果是Linux服务器建议用nohup后台运行nohup java -jar campus-platform-0.0.1-SNAPSHOT.jar server.log 21 这样把日志输出到server.log方便排查问题。5.2 前端build和后端接口对接前端打包npm run build生成静态文件在dist目录这个目录可以扔到任意静态服务器。很多毕设是直接把前端和后端跑在同一个服务器上然后用Nginx同时代理静态资源和后端接口。核心Nginx配置片段server { listen 80; server_name localhost; location / { root /usr/share/nginx/html/dist; index index.html index.htm; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }try_files $uri $uri/ /index.html;这行千万别漏。Vue在开启History模式后路由是前端管理的如果没有这个配置刷新/goods/1这种子页面时Nginx会直接404。location /api/就是反向代理后端接口的关键。所有前端请求路径以/api开头被Nginx转发到本机的8080端口SpringBoot服务。5.3 论文和部署文档里怎么把这些写清楚部署文档不能只是运行jar包就行。我当时是按下面这个结构组织的老师看完不用来问我他照着操作就能跑起来环境版本要求JDK8、MySQL8、Node18数据库导入步骤创建库、设置字符集、导入SQL后端启动步骤修改配置文件、打包、运行jar前端启动步骤安装依赖、代理配置、启动调试项目生产部署步骤前端build、Nginx配置、后端jar放到服务器账号初始密码说明管理员、普通用户论文里的技术架构部分我画了一张层次分明的系统架构分层图从上到下依次是Vue展示层、Axios请求层、SpringBoot控制层、Service业务层、Mapper数据访问层、MySQL存储层。每一层职责单一描述起来也方便。6. 高频报错排查与二次开发建议6.1 我实际踩过的几个坑直接给你排查顺序问题1数据库连接失败现象启动报Cannot create PoolableConnectionFactory。先别急着怀疑代码按这个顺序排查用Navicat能不能连上数据库如果Navicat也连不上大概率是MySQL服务没启动账号密码是否正确URL里端口和库名是否写对MySQL是否允许远程连接如果是云服务器还要看安全组端口问题2后端启动端口被占用现象启动时提示Port 8080 was already in use。查出占用端口的进程并处理netstat -tunlp | grep 8080 kill -9 进程号问题3npm install卡死或报错多半是网络问题。配置淘宝镜像npm config set registry https://registry.npmmirror.com然后再执行npm install。问题4前端访问接口404这就是路径不一致的老问题。检查三处前端Axios请求路径是否带/api后端Controller的RequestMapping路径是否匹配代理配置的target是否是后端端口。404绝大多数不是后端没写而是路径没对齐。问题5修改了配置但Java代码不生效后端是编译型语言改了代码必须重新构建。有时候改了application.yml只重启还不够要先执行mvn clean再package否则用的还是旧class文件。6.2 答辩前的演示自查清单无论已经把项目改成了什么样演示前请按这个清单过一遍[ ] 确认MySQL已启动数据库能连上[ ] 确认后端进程无残留端口无冲突[ ] 确认前端页面能打开默认账号能登录[ ] 试着用游客身份访问需要登录的页面能否正确跳转[ ] 走一遍发布商品→上传图片→列表可见的完整流程[ ] 之后再看一眼上传图片的路径里文件是否存在这个看起来简单但我真见过有人演示到一半发现图片全部加载不出来的这是因为本地uploadPath配的是绝对路径换了一台电脑运行就定位不到了。如果你要换机器跑项目记得同步改掉application.yml里的上传路径和数据库路径。6.3 想加分可以从哪个方向扩展下面几个方向都是成本低见效快还不容易被答辩老师挑毛病的加评论模块在商品详情页下增加评论列表和输入框评论表关联用户和商品属于外键和级联操作的典型应用论文里好写。用ECharts给后台加数据统计做近7天商品发布量失物招领分类占比图表。视觉效果很加分后端只需要一个聚合查询接口。给重要操作加日志记录登录日志、操作日志用AOP切面统一记录面试聊起来也是加分项。用Redis缓存热点商品列表如果你愿意多花两天时间可以把首页商品列表缓存到Redis里并设置过期时间这也是答辩时的亮眼话题。7. 写在最后的几句大实话一个SpringBootVue的校园服务平台技术难度其实谈不上特别高但恰恰因为这样它非常适合作为毕业设计——你有充足的时间去理解每一行代码为何这样写也有足够的深度让论文有的写。师弟师妹们做这个项目时我最想强调的一点是不要只当一个代码搬运工要把整个系统跑通以后再钻进去改几个自己感兴趣的小功能。当你把为什么用拦截器而不是Filter为什么加事务注解为什么统一返回结构都真正搞明白答辩时那种由内而外的底气是背多少遍稿子都换不来的。最后再分享一个小技巧项目里准备一份README文档把启动步骤、默认账号、模块说明全部写进去。这份文档既能塞进论文附录凑字数未来自己回看项目时也能快速回忆起整个架构。一个认真打磨过细节的毕业生和那些只丢过来一个压缩包的区别往往就在这种地方。
SpringBoot+Vue+MySQL校园服务平台毕设实战：从环境配置到部署答辩全指南
毕业设计做校园服务平台SpringBootVueMySQL这套组合算是非常经典的选题了。最近好几个学弟学妹在后台问我拿到的源码该怎么跑起来、论文怎么写、部署文档怎么改我想干脆把自己折腾这个项目的过程完整梳理一遍把那些网上教程不会明说的坑、我自己踩过的雷、以及答辩时被老师追问最多的点一次性讲清楚。这篇文章会覆盖整个项目的完整落地链路从环境配置、代码结构、数据库设计、核心功能实现思路到打包部署、二次开发扩展、高频报错排查。不管你是刚拿到项目还是已经改过几版这篇文章都应该能帮你在现有基础上省下不少时间。1. 校园服务平台到底在做什么选题定位与功能边界先说清楚这个项目解决的核心问题校园里的信息相对分散二手交易信息发在群里瞬间被淹没失物招领贴在教学楼公告栏没人看活动报名靠班长手工统计。校园服务平台就是把这类高频场景统一收拢到一个Web应用里让注册用户能发布二手闲置、发布寻物启事、浏览并报名校园活动同时给管理员一个后台来管理用户和内容维持平台秩序。这种选题在答辩时有一个天然优势——需求非常贴近校园生活评审老师容易理解也容易认可。没有那种为什么需要这个系统的灵魂拷问因为痛点就摆在那里。整个项目从零搭建时我给它划分了三条主线学生端注册登录、浏览商品、发布二手、发起失物招领、活动浏览与报名、个人资料维护管理端用户管理、商品审核/下架、失物信息管理、活动发布与管理、数据概览公共能力文件上传、登录拦截、全局异常处理、统一结果返回这个功能集并不过分庞大但每一块都落到具体的CRUD操作和业务规则上用来覆盖毕业设计论文里的需求分析、系统设计、实现与测试章节完全是够用的。技术实现上这个项目走的是主流中的主流路线后端SpringBoot 2.x MyBatis-Plus MySQL简洁但不简陋前端Vue 2 Element-UI Axios Vue Router后台管理系统常规搭配鉴权JWT轻松搞定无状态登录这套组合的优势在于每个环节都有海量的社区资料和踩坑记录。即使你之前没接触过前后端分离搜索引擎基本能解决掉九成问题。有同学问我为什么不选Redis做缓存、不用Spring Cloud那套微服务我的回答是毕业设计的评分标准首先是完成度和能讲清楚技术栈过于复杂反而容易在答辩时被问住。2. 开发环境配置与前后端启动全流程环境问题是我见过导致毕设卡壳的第一大原因而且大多数不是操作难度问题是版本兼容性搞鬼。下面是我实测跑的版本组合照着配最省心软件版本注意事项JDK1.8搭配SpringBoot 2.x最稳妥MySQL8.0连接驱动要配套Navicat16或任意版本用于导入SQL脚本IDEA2021版以后社区版也行不过专业版更顺手Maven3.6以上IDEA自带的也可以Node.js16.x或18.x建议18对Vue2项目兼容性好Vue CLI4.x或5.x用于运行前端服务2.1 后端跑起来的第一个动作不是点运行拿到源码后先做两件事第一用IDEA打开后端根目录等待Maven把依赖全部下载完第二打开application.yml文件把数据库连接串改成你自己的环境。核心配置如下server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/campus_platform?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 你的数据库密码 servlet: multipart: max-file-size: 10MB max-request-size: 10MB mybatis-plus: mapper-locations: classpath*:mapper/*.xml configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl这里重点提一个让无数人栽跟头的点serverTimezoneAsia/Shanghai这一项必须存在。MySQL 8.0驱动如果缺了它大概率直接抛时区异常。另外如果你的MySQL版本是5.7而不是8.0驱动类名要换成com.mysql.jdbc.DriverURL中的cj也要去掉。数据库初始化方面项目通常自带campus_platform.sql文件。当时我用Navicat新建数据库时字符集选的是utf8mb4这不只是为了显示emoji表情头像更重要的是避免商品标题里出现生僻字时导致乱码或者插入失败。导入之后你会看到表结构大概包含这些核心表用户表、二手商品表、失物招领表、活动表、报名表、分类表等。确认配置文件无误后运行启动类里的main方法控制台出现Started CampusPlatformApplication字样说明后端已经启动成功了。后端默认端口是8080启动时如果提示端口被占用检查一下是否有其他Java进程占用。2.2 前端启动的两条命令和代理配置前端工程需要单独开启一个Node服务。在项目根目录找到frontend目录终端依次执行cd frontend npm install npm run servenpm install第一次执行时可能比较慢如果你身处网络环境不太理想的情况建议先配一下镜像源后面会专门说这个问题。启动后默认访问地址是http://localhost:8081。这时候如果直接发起请求浏览器会因跨域问题报错。项目的解决方式是通过vue.config.js里的devServer代理module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } };这样前端请求/api/login时Webpack开发服务会把请求转发到后端8080端口。前端路径统一带/api后端Controller层的RequestMapping不需要带/api前缀这个约定要记清楚后面部署的时候还会用到。3. 后端业务实现的中枢设计3.1 登录鉴权拦截器加注解的方式比Filter更顺手认证授权这个环节很多教学项目喜欢用Filter配合一个放行名单实现。但如果用上了SpringMVC的拦截器你会发现它更灵活——因为拦截器能拿到HandlerMethod可以精确控制到某个方法是否需要登录。项目里的做法是自定义了一个LoginRequired注解加在需要登录才能访问的Controller方法上。拦截器的核心逻辑如下如果处理器不是HandlerMethod直接放行这是为了放行静态资源等非控制器请求检查方法上是否有LoginRequired注解没有的直接放行从请求头取token用JWT解析解析失败返回401状态码解析成功则把用户ID存入ThreadLocal方便Service层随时取用public class LoginInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (!(handler instanceof HandlerMethod)) { return true; } HandlerMethod handlerMethod (HandlerMethod) handler; LoginRequired loginRequired handlerMethod.getMethodAnnotation(LoginRequired.class); if (loginRequired null) { return true; } String token request.getHeader(token); try { Long userId JwtUtil.parseToken(token); UserContext.set(userId); return true; } catch (Exception e) { response.setStatus(401); response.setContentType(application/json;charsetutf-8); response.getWriter().write({\code\:401,\message\:\未登录或登录已过期\}); return false; } } }这种方式的好处非常明显新增一个接口时不需要记得去改白名单配置只要决定在方法上是否加注解就能完成权限控制。登录、注册、商品列表这些公开接口不加注解发布商品、报名活动这些操作加上注解即可。ThreadLocal解决了一个实际问题当前登录用户的信息不用在Controller和Service之间传一堆参数。但要注意请求结束后如果不清理ThreadLocal线程池复用线程时可能拿到别人的用户信息所以afterCompletion里必须调用UserContext.clear()。3.2 统一结果返回与全局异常处理前后端联调中最让人头疼的就是返回格式不一致。一会儿返回{code, message, data}一会儿又直接返回一个数组前端拿到数据后状态判断都写不统一。这个项目从一开始就约定了一套统一返回体public class ResultT { private Integer code; private String message; private T data; public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMessage(操作成功); result.setData(data); return result; } public static T ResultT error(String message) { ResultT result new Result(); result.setCode(500); result.setMessage(message); return result; } }Controller层所有接口都返回这个统一结构。前端Axios拦截器里根据code值判断业务成功与否service.interceptors.response.use( response { const res response.data; if (res.code 200) { return res; } Message.error(res.message || 请求失败); return Promise.reject(new Error(res.message)); }, error { Message.error(error.response?.data?.message || 网络异常); return Promise.reject(error); } );全局异常处理用的RestControllerAdvice把业务异常、参数校验异常、系统异常分别映射到对应的提示信息。这样做的隐藏价值是后端即使抛了空指针这种不友好的异常前端接收到的也不是一堆英文堆栈而是一个可读的系统繁忙请稍后重试。3.3 二手交易模块从表设计到图片落盘二手交易是整个平台核心中的核心。我设计表结构时主要考虑了几个点图片用逗号分隔的路径存到一个字段里这比单独建图片表更符合毕设体量商品状态用tinyint存0表示在售、1表示已售出、2表示已下架加user_id和category两个索引列表查询时体验好不少价格用decimal(10,2)避免浮点数精度问题发布商品的流程是前端先上传图片拿到图片URL然后连同商品表单信息一起提交到后端。图片上传接口接收MultipartFile通过UUID生成文件名按日期存放图片public String uploadFile(MultipartFile file) { String originalFilename file.getOriginalFilename(); String suffix originalFilename.substring(originalFilename.lastIndexOf(.)); String fileName UUID.randomUUID().toString().replace(-, ) suffix; String datePath LocalDate.now().toString().replace(-, /); String fullPath uploadPath / datePath; File dir new File(fullPath); if (!dir.exists()) { dir.mkdirs(); } file.transferTo(new File(fullPath / fileName)); return /upload/ datePath / fileName; }文件保存到本地目录后必须配一个虚拟路径映射才能让前端通过URL访问到图片。项目的配置类里有这样一段Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/upload/**) .addResourceLocations(file: uploadPath); }uploadPath在application.yml里配置比如D:/campus_platform/upload/。这样前端拿到的图片路径是/upload/2024/05/20/xxx.jpg浏览器发起请求时就会被转发到本地磁盘对应位置。面试或者答辩时老师大概率会追问一句如果项目部署到服务器怎么办。我的回答思路是本地存储方案适合单机部署如果把项目放到云服务器上可以把uploadPath指向/home/campus/upload配合Nginx的/upload/别名访问这一步在部署文档里也有说明。3.4 失物招领与活动报名里有几个细化逻辑失物招领和二手交易共享相似的用户发布、公共浏览模型但它多了一个状态字段——信息处于寻找中还是已找到。这两个状态只有发布者自己可以修改所以在更新接口里必须做归属判断public Result updateLostFound(RequestBody LostFound lostFound, RequestAttribute Long userId) { LostFound existing lostFoundMapper.selectById(lostFound.getId()); if (existing null || !existing.getUserId().equals(userId)) { return Result.error(无权操作或失物信息不存在); } lostFoundMapper.updateById(lostFound); return Result.success(); }很多没经验的做法是只判断记录存在忘了校验是否本人操作答辩时很容易被老师一个问题问住我是不是可以修改别人的失物信息活动报名模块的数据库设计用了三张表活动表、用户表、报名表。报名表结构关键在唯一索引CREATE TABLE activity_sign_up ( id bigint(20) NOT NULL AUTO_INCREMENT, activity_id bigint(20) NOT NULL, user_id bigint(20) NOT NULL, create_time datetime NOT NULL, PRIMARY KEY (id), UNIQUE KEY uk_activity_user (activity_id, user_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;报名接口用Transactional开启事务先插入报名记录再更新活动表的sign_up_count字段。这里如果没有事务可能出现报名记录插入成功但人数没加一的不一致状态。把这两步操作放在同一个事务里任何一步失败都会整体回滚。4. 前端页面的组装逻辑与通用组件设计4.1 前端路由的组织结构与登录态控制前端采用Vue Router Element-UI搭建。路由分两类一类是无需登录就能访问的页面比如首页商品列表、登录页、注册页另一类是必须登录才能进入的页面比如个人中心、发布页面、管理后台。路由守卫可以在页面跳转前检查token是否存在router.beforeEach((to, from, next) { const token localStorage.getItem(token); if (to.meta.requiresAuth !token) { next({ path: /login, query: { redirect: to.fullPath } }); } else { next(); } });这里的逻辑简单直接——进入需要登录的页面时如果本地没有token就强制跳回登录页同时记录用户原本想去哪个页面登录成功后再跳回去。体验上比进去之后发现接口报401好很多。4.2 表格页面的三步实现套路后台管理页面很多比如商品管理、用户管理、活动管理。它们整体模式高度相似请求列表数据、渲染到表格、执行删除或修改操作。基于这个规律页面代码可以按三步来走第一步data里定义查询参数和列表数据变量。第二步created生命周期里调用列表接口async fetchList() { const res await listGoods(this.queryInfo); this.goodsList res.data.records; this.total res.data.total; }第三步分页组件切换时重新查询handleSizeChange(val) { this.queryInfo.pageSize val; this.fetchList(); }, handleCurrentChange(val) { this.queryInfo.pageNum val; this.fetchList(); }Element-UI的分页组件自带current-change和size-change事件配合MyBatis-Plus自带的分页插件一个标准管理页面半天就能写完。4.3 文件上传组件的坑与解决前端上传图片用的是Element-UI的el-upload组件。这个组件在非action模式下会默认走内置的ajax上传如果后端处理逻辑不同很容易出现403/404/无法获取文件名等莫名其妙的问题。更稳的做法是关闭el-upload的自动上传拿到选中的文件后手动通过multipart/form-data提交到后端const formData new FormData(); formData.append(file, file); const res await uploadImage(formData);配合on-change事件把文件存储在前端变量里等整个表单一起提交。类似的知识点还有Element-UI表单校验规则的动态配置这些在论文中的系统实现章节里非常容易展开写。5. 从开发到演示打包部署实战5.1 后端打包进jar后端模块打成可执行jar包在IDEA右侧Maven面板直接双击package即可。或者用命令行更稳mvn clean package -Dmaven.test.skiptrue加上-Dmaven.test.skiptrue是为了跳过测试用例否则有些项目里的测试类会导致打包失败。打包成功后在target目录下会生成campus-platform-0.0.1-SNAPSHOT.jar。启动命令java -jar campus-platform-0.0.1-SNAPSHOT.jar如果是Linux服务器建议用nohup后台运行nohup java -jar campus-platform-0.0.1-SNAPSHOT.jar server.log 21 这样把日志输出到server.log方便排查问题。5.2 前端build和后端接口对接前端打包npm run build生成静态文件在dist目录这个目录可以扔到任意静态服务器。很多毕设是直接把前端和后端跑在同一个服务器上然后用Nginx同时代理静态资源和后端接口。核心Nginx配置片段server { listen 80; server_name localhost; location / { root /usr/share/nginx/html/dist; index index.html index.htm; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }try_files $uri $uri/ /index.html;这行千万别漏。Vue在开启History模式后路由是前端管理的如果没有这个配置刷新/goods/1这种子页面时Nginx会直接404。location /api/就是反向代理后端接口的关键。所有前端请求路径以/api开头被Nginx转发到本机的8080端口SpringBoot服务。5.3 论文和部署文档里怎么把这些写清楚部署文档不能只是运行jar包就行。我当时是按下面这个结构组织的老师看完不用来问我他照着操作就能跑起来环境版本要求JDK8、MySQL8、Node18数据库导入步骤创建库、设置字符集、导入SQL后端启动步骤修改配置文件、打包、运行jar前端启动步骤安装依赖、代理配置、启动调试项目生产部署步骤前端build、Nginx配置、后端jar放到服务器账号初始密码说明管理员、普通用户论文里的技术架构部分我画了一张层次分明的系统架构分层图从上到下依次是Vue展示层、Axios请求层、SpringBoot控制层、Service业务层、Mapper数据访问层、MySQL存储层。每一层职责单一描述起来也方便。6. 高频报错排查与二次开发建议6.1 我实际踩过的几个坑直接给你排查顺序问题1数据库连接失败现象启动报Cannot create PoolableConnectionFactory。先别急着怀疑代码按这个顺序排查用Navicat能不能连上数据库如果Navicat也连不上大概率是MySQL服务没启动账号密码是否正确URL里端口和库名是否写对MySQL是否允许远程连接如果是云服务器还要看安全组端口问题2后端启动端口被占用现象启动时提示Port 8080 was already in use。查出占用端口的进程并处理netstat -tunlp | grep 8080 kill -9 进程号问题3npm install卡死或报错多半是网络问题。配置淘宝镜像npm config set registry https://registry.npmmirror.com然后再执行npm install。问题4前端访问接口404这就是路径不一致的老问题。检查三处前端Axios请求路径是否带/api后端Controller的RequestMapping路径是否匹配代理配置的target是否是后端端口。404绝大多数不是后端没写而是路径没对齐。问题5修改了配置但Java代码不生效后端是编译型语言改了代码必须重新构建。有时候改了application.yml只重启还不够要先执行mvn clean再package否则用的还是旧class文件。6.2 答辩前的演示自查清单无论已经把项目改成了什么样演示前请按这个清单过一遍[ ] 确认MySQL已启动数据库能连上[ ] 确认后端进程无残留端口无冲突[ ] 确认前端页面能打开默认账号能登录[ ] 试着用游客身份访问需要登录的页面能否正确跳转[ ] 走一遍发布商品→上传图片→列表可见的完整流程[ ] 之后再看一眼上传图片的路径里文件是否存在这个看起来简单但我真见过有人演示到一半发现图片全部加载不出来的这是因为本地uploadPath配的是绝对路径换了一台电脑运行就定位不到了。如果你要换机器跑项目记得同步改掉application.yml里的上传路径和数据库路径。6.3 想加分可以从哪个方向扩展下面几个方向都是成本低见效快还不容易被答辩老师挑毛病的加评论模块在商品详情页下增加评论列表和输入框评论表关联用户和商品属于外键和级联操作的典型应用论文里好写。用ECharts给后台加数据统计做近7天商品发布量失物招领分类占比图表。视觉效果很加分后端只需要一个聚合查询接口。给重要操作加日志记录登录日志、操作日志用AOP切面统一记录面试聊起来也是加分项。用Redis缓存热点商品列表如果你愿意多花两天时间可以把首页商品列表缓存到Redis里并设置过期时间这也是答辩时的亮眼话题。7. 写在最后的几句大实话一个SpringBootVue的校园服务平台技术难度其实谈不上特别高但恰恰因为这样它非常适合作为毕业设计——你有充足的时间去理解每一行代码为何这样写也有足够的深度让论文有的写。师弟师妹们做这个项目时我最想强调的一点是不要只当一个代码搬运工要把整个系统跑通以后再钻进去改几个自己感兴趣的小功能。当你把为什么用拦截器而不是Filter为什么加事务注解为什么统一返回结构都真正搞明白答辩时那种由内而外的底气是背多少遍稿子都换不来的。最后再分享一个小技巧项目里准备一份README文档把启动步骤、默认账号、模块说明全部写进去。这份文档既能塞进论文附录凑字数未来自己回看项目时也能快速回忆起整个架构。一个认真打磨过细节的毕业生和那些只丢过来一个压缩包的区别往往就在这种地方。