每年到了毕业季总有一批同学为Java Web毕设发愁。很多人的需求其实很一致要一套技术栈够主流、功能看得过去、能跑通前后端联调、最好带数据库脚本和接口文档的完整项目。我这次整理的SpringBootVue大学生迎新系统平台就是把毕设完整项目这件事一次性铺开——它不是一个只放了一堆Controller的骨架工程而是把新生报到从登记、缴费到宿舍分配的整个业务闭环都做了。项目源码、SQL脚本、接口文档三件套齐全照着跑起来再改改能省下大量自己从零搭框架的时间。这套系统的定位很明确面向高校迎新场景的管理后台加学生端页面。管理员可以维护新生信息、发布迎新公告、分配宿舍、记录缴费状态学生可以在系统里登记自己的报到信息、查询宿舍安排和缴费情况。对于想靠毕设展示前后端分离 权限控制 业务CRUD 统计分析能力的同学来说覆盖面刚刚好。下面我就从设计思路、核心模块、数据库、接口联调、问题排查这几个维度把整个项目掰开来讲。1. 项目整体设计与思路拆解1.1 技术选型为什么是SpringBoot Vue接触过几个类似项目之后你会发现Java Web毕设的技术选型无非就那么几类纯JSP/Servlet的老古董、SpringMVC加模板引擎、以及SpringBoot前后端分离。我之所以推荐SpringBoot Vue不是因为跟风而是它有实打实的好处。SpringBoot的作用是帮你把SSM框架里繁琐的配置全部收进起步依赖里。以前写SSM光一个spring-context.xml、applicationContext.xml就能绕晕人现在一个SpringBootApplication注解加spring-boot-starter-web依赖内嵌Tomcat就能直接跑。搭配MyBatis Plus操作数据库单表CRUD连SQL都不用写这对毕设项目的开发效率提升非常明显。Vue这边采用Vue 2 Element UI的开发方式组件化写法让页面搭建速度远快于传统JSP拼标签。表单校验、表格分页、弹窗确认这些高频操作Element UI已经封装好了。我见过很多人纠结要不要上Vue 3就毕设场景来说Vue 2的生态资料更成熟你遇到的大多数坑在网上都能搜到答案。前后端分离还有一个隐藏的好处答辩时你能把接口联调流程讲得很清楚。前端通过Axios向后端发请求后端返回JSON数据双方约定好返回格式各改各的互不干扰这本身就是一个值得讲解的技术亮点。1.2 项目模块划分与角色设计迎新系统平台的核心业务是围绕新生报到展开的。系统设计了两类角色管理员和新生。管理员是在校务人员负责配置迎新信息、处理报到流程中的各种审批新生是使用主体登录后填写信息、查看结果。这两类角色天然决定了功能模块的划分方式。管理员端的模块包括登录鉴权、个人中心、新生信息管理、迎新公告管理、宿舍管理、宿舍分配、缴费记录管理、报到统计。新生端的模块则简化为登录注册、信息登记、报到状态查看、宿舍查询、缴费查询、公告查看。从业务流上看整条线是这样的管理员提前导入或录入新生名单学生拿到初始账号后登录系统先完善个人信息联系方式、家庭住址、到校时间、陪同人数等然后确认缴费状态最后查看系统分配的宿舍信息。管理员那边在看到学生完成信息登记后可以为其分配宿舍并维护该学生的报到进度。模块不能贪多。很多毕设项目败在功能列表很唬人实际质量全欠费。这个项目每张表、每个接口都能对应到真实的迎新动作业务链路是完整的而不是东拼西凑的Demo堆砌。1.3 项目目录结构与分层设计良好的目录结构不仅是代码整洁的体现更是答辩时能给评委看的加分项。后端采用经典的四层架构com.example.welcome ├── controller/ # 请求入口参数接收与校验 ├── service/ # 业务逻辑层 │ └── impl/ # 接口实现类 ├── mapper/ # MyBatis Plus数据访问层 ├── entity/ # 数据库实体类 ├── dto/ # 数据传输对象如登录参数、分页参数 ├── vo/ # 视图对象如统计数据返回 ├── config/ # 跨域、MyBatis Plus分页、拦截器配置 ├── common/ # 统一返回结果、异常处理、工具类 └── WeclomeApplication.java前端同样保持清晰模块划分src ├── api/ # 封装的axios请求接口 ├── router/ # 路由配置 ├── views/ # 页面组件 │ ├── admin/ # 管理员端页面 │ ├── student/ # 新生端页面 │ └── login/ # 登录页 ├── components/ # 公共组件 └── utils/ # request.js等请求封装我见过不少毕设项目把几百行业务代码全塞进Controller里这后面改起来极度痛苦。分层设计的价值不在于显得专业而在于出了问题能快速定位。比如分页查询报错你只需要看Mapper层的SQL业务逻辑判断错误就去Service层找。这种可维护性在改代码应对答辩追问时特别重要。2. 核心功能模块与业务逻辑解析2.1 登录鉴权与用户体系登录是系统的第一道门也是体现技术含量的地方。这个项目采用JWTJSON Web Token做无状态鉴权登录成功后后端签发一个token前端存到本地之后每次请求都在请求头里带上Authorization: token后端拦截器校验通过才放行。JWT相比Session方案的优势在于不用维护服务端会话天然适合前后端分离部署。我在处理用户体系时把管理员和学生统一放进了sys_user表用role字段区分身份。登录接口只认账号密码查出用户后根据角色返回不同的菜单权限。学生账号可以由管理员在新生录入时批量生成初始密码统一为身份证后六位首次登录时提示修改。这里有一个实操细节拦截器里校验token时不要把写死的接口路径全部拦住。比如登录接口、注册接口、验证码接口必须放行否则前端第一次请求就会被401挡在门外。我用的是SpringBoot拦截器加excludePathPatterns把/api/auth/login、/api/auth/register等路径排除掉其余接口统一校验。前端配合Vue Router的路由守卫在跳转页面前判断本地有没有token没有就强制跳回登录页两边都做了控制才不会出现页面能打开但数据全报错的尴尬状况。线上项目的密码不能明文保存我用BCrypt加密存储这个点答辩时也很能打。BCrypt每次加密的结果都不一样但校验时能正确匹配比MD5加盐更安全也更省心。2.2 新生信息登记与报到流程新生报到流程是这个系统的业务主轴。我把它设计成一张student_info表关联用户表的userId字段包含学号、姓名、性别、身份证号、联系方式、家庭住址、到校时间、陪同人数、报到状态等。业务逻辑上有一个状态机思路新生从登录开始报到状态依次经历未登记 - 已登记 - 已报到三个状态。新生提交信息登记表单后记录状态为已登记管理员核对信息无误后在报到确认页面点击确认报到状态变为已报到。这个状态字段别看简单它串起了整个系统的所有操作——只有已登记的学生才能被分配宿舍只有已报到的学生才能看到最终的报到回执。实现时我采用了前端表达、后端守门的思路。前端通过Element UI的表单校验保证必填项和格式后端在Service层再次校验学号唯一性、身份证格式、手机号格式。前后端双重校验的目的是防止有人绕过前端直接调用接口写脏数据。后端我用了Validated注解配合自定义校验类拦截非法参数并返回明确的错误信息而不是笼统地抛出500。2.3 宿舍管理与分配逻辑宿舍分配是最能体现业务设计能力的一个模块。宿舍数据单独建了一张dormitory表记录楼栋、楼层、房间号、床位总数、已住人数学生的分配结果记录在dorm_assignment表一个学生只对应一条分配记录。分配逻辑上我采用的是管理员手动分配加系统自动校验剩余床位的方案。管理员在新生列表页点击分配宿舍弹窗列出可选宿舍系统实时计算出每个宿舍的剩余床位床位总数减已住人数只剩0个床位的宿舍自动置灰不可选。选定后调用分配接口后端做一次超卖校验——更新前再次查询宿舍已住人数如果已满则拒绝分配防止并发操作下出现一间宿舍实际住了超过床位数的学生。这个查询后再更新的做法严格来说在并发量高时仍有条件竞争风险更稳妥的方案是使用数据库的乐观锁版本号或悲观锁select for update。但作为毕设项目我建议至少把超卖校验讲清楚然后再补充生产环境会加锁处理评委一听就知道你想过这个问题。缴费记录被我设计成与宿舍相关联宿舍分配完成后生成对应的缴费记录包含项目名称住宿费、金额、状态未缴/已缴。这样学生端和个人缴费查询就能串起来业务闭环又完整了一步。2.4 公告发布与报到统计公告模块本质上是一个轻量级的CMS功能。管理员发布迎新公告包括标题、内容、发布时间、是否置顶新生端首页按照时间倒序展示公告列表。这个模块虽然简单但它是完整系统的必要组成部分——没有公告新生怎么知道报到要带什么材料报到统计模块则负责给管理员提供一个数据总览的看板。我用ECharts做了两个核心图表一是各学院报到人数柱状图二是报到状态占比饼图。后端提供统计接口比如按学院分组统计总人数和已报到人数按状态分组统计各状态数量。前端拿到JSON数据后交给ECharts渲染。统计接口的SQL要注意它是典型的分组聚合查询用MyBatis Plus的QueryWrapper做聚合不如直接写XML里的SQL清晰。我在统计相关的Mapper接口上直接用了ListMapString, Object作为返回类型配合自定义SQLSELECT college, COUNT(*) AS total, SUM(CASE WHEN status 3 THEN 1 ELSE 0 END) AS reported FROM student_info GROUP BY college;这里有一个小坑MyBatis返回Map时字段名会变成数据库列名比如total、reported前端访问时别用驼峰写法。我在VO层面统一做了字段映射保证前后端字段风格一致。3. 数据库设计与SQL脚本要点3.1 核心表结构一览数据库设计是这套源码里SQL脚本的核心内容。整个项目一共设计了七张核心表我把表结构和用途整理成了下面的表格方便你在阅读SQL脚本时快速对应表名用途核心字段sys_user系统用户表管理员/学生id, username, password, role, statusstudent_info新生信息表id, user_id, student_no, name, gender, id_card, phone, address, college, arrive_time, statusdormitory宿舍表id, building, floor, room_no, bed_count, used_countdorm_assignment宿舍分配表id, student_id, dorm_id, assign_timepayment缴费记录表id, student_id, item_name, amount, status, pay_timenotice公告表id, title, content, is_top, create_timesys_log操作日志表id, user_id, operation, method, params, create_time需要说明的是sys_user表把管理员和学生放在同一张表里靠role字段区分这样可以复用登录逻辑避免了写两套账号体系的冗余。如果你更倾向把学生资料和学生账号拆开也不是不行只是登录时要多一次关联查询。3.2 关键表关系与外键处理从表关系上看student_info是业务核心表它的user_id关联sys_user.iddorm_assignment的student_id关联student_info.idpayment的student_id同样关联student_info.id。这是一个非常典型的一主多从结构一个学生有且仅有一条信息记录但可以有多次缴费记录住宿费、代办费等。关于外键我个人的建议是表设计时标明逻辑外键关系但建表SQL里不强制加物理外键约束。原因很实在——加了物理外键之后删除顺序一旦不对就会报错被打断而实际开发和测试时MyBatis Plus的Service层已经控制了关联逻辑。答辩时你可以主动解释为保证写入性能和升级便利采用逻辑外键由应用层维护关联完整性这比支支吾吾说不清为什么不加外键要强得多。SQL脚本里我还写了一段初始化数据包括一个管理员账号admin/admin123密码已被BCrypt加密、若干条测试学生账号、几间宿舍、几条公告。这些初始化数据非常重要没有它们你启动项目后登录进去就是一片空白。我在脚本里都加了注释你把脚本导入MySQL后不用做任何额外操作直接用admin账号登录即可。3.3 SQL脚本执行方式和常见坑拿到SQL脚本后很多人直接在Navicat里拖进去双击执行。这个方式95%情况下没问题但要注意几点执行前确认数据库版本。项目用的是MySQL 5.7以上如果你的MySQL版本是8.0一些默认排序规则和时区行为会有差异。比如8.0默认的utf8mb4_0900_ai_ci排序规则而5.7常用utf8mb4_general_ci脚本里统一指定字符集就能避免乱码。脚本执行时最好以整个文件为单位执行不要复制粘贴到命令行逐行跑。脚本里有DROP TABLE IF EXISTS开头的清理语句逐行跑容易漏掉。我见过同学把SQL脚本在命令行里手动执行结果漏跑了建库语句SpringBoot连接数据库直接报Unknown database。在SpringBoot项目中如果你不想手动导入SQL也可以在application.yml里配置自动初始化spring: datasource: url: jdbc:mysql://localhost:3306/welcome_system?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 sql: init: mode: always schema-locations: classpath:sql/init.sql把SQL脚本放在resources/sql/init.sql下每次应用启动时就会自动执行。但注意mode不能一直设为always否则重启时表会被DROP重建你后来自行添加的测试数据就全没了。调试阶段可以开正式演示前记得改回never或手动导入。3.4 索引设计的一点心得这几张表的索引我建议至少建这么几个student_info表的user_id建唯一索引一个学生账号只对应一条信息记录、student_no建唯一索引dorm_assignment表的student_id建唯一索引一个学生只有一条在住分配payment表的student_id建普通索引、status建普通索引按状态查询缴费清单很频繁notice表的is_top加普通索引。索引不是越多越好尤其是毕设这种数据量很小的项目加索引的意义更多在于展示你有数据库优化的意识。答辩时被问到你这张表查询为什么快你能说出这里有唯一索引覆盖查询条件就很加分。4. 接口文档与前后端联调实操4.1 统一接口返回格式与分页约定前后端分离最怕的就是各写各的前端等着data数组后端却把数据塞在result里。所以我从后端设计一开始就定了统一的返回格式所有接口都遵循Result这个结构{ code: 200, msg: 操作成功, data: {} }code为200表示成功401表示未认证403表示无权限500表示服务端异常。前端在Axios响应拦截器里统一判断code不等于200就弹出错误提示不需要每个页面都重复写错误处理逻辑。这样不仅代码干净联调时也会少很多为什么这个接口数据拿不到的困惑。分页查询是列表页面的核心。我统一使用分页参数pageNum页码从1开始、pageSize每页条数分页响应结构固定为{ records: [ { id: 1, studentNo: 2024001 } ], total: 56, size: 10, current: 1 }前端表格组件直接绑定records作为数据源total用于分页组件的总数显示。和MyBatis Plus的IPage结构一致这样在Service层调用分页查询后直接赋值给VO返回不需要额外做字段转换。4.2 接口文档的编写方法与内容接口文档我建议用Markdown或Word编写但结构要固定方便别人查阅。一个完整的接口文档条目至少包含这些部分接口地址、请求方式GET/POST/PUT/DELETE、请求参数参数名、类型、是否必填、说明、返回示例、错误码说明。以登录接口为例参数名类型必填说明usernameString是账号passwordString是密码BCrypt加密接口地址POST /api/auth/login返回示例{ code: 200, msg: 登录成功, data: { token: eyJhbGciOiJIUzI1NiJ9..., role: admin, username: admin } }我见过一些人写接口文档每个接口之间粘贴复制、格式混乱这其实是在给自己挖坑。答辩时评委如果翻阅你的接口文档第一印象会大打折扣。每写完一个接口就认真补文档项目完成后整套文档就是你的产品说明书。4.3 前端请求封装与token处理前端Axios请求封装是所有页面数据交互的基石。我建议在src/utils/request.js里统一创建Axios实例设置基础URL和超时时间然后在请求拦截器里做token注入import axios from axios const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization token } return config }) request.interceptors.response.use( response { const res response.data if (res.code 200) { return res } else if (res.code 401) { localStorage.removeItem(token) window.location.href /login return Promise.reject(new Error(登录已过期)) } else { return Promise.reject(new Error(res.msg)) } }, error { return Promise.reject(error) } ) export default request每个接口模块再单独建文件比如src/api/student.js里导出一个获取分页列表方法import request from /utils/request export function getStudentList(params) { return request({ url: /admin/student/list, method: get, params }) }这样一来页面里不需要关心token怎么传、错误怎么弹只需要调用API方法即可。前后端联调时只要你接口文档里的路径和参数定义清楚前端页面很快就能跑通。4.4 前后端分离下的跨域处理前后端分离开发时前端默认运行在localhost:8080Vue开发服务器后端运行在localhost:8081两者端口不同就直接触发跨域问题。浏览器会拦截后端响应控制台报CORS error而接口本身其实是通的。处理方式有两种第一种在后端写一个CorsConfig允许指定来源的请求跨域Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } }第二种是前端在vue.config.js里配置代理把/api开头的请求转发到后端地址module.exports { devServer: { proxy: { /api: { target: http://localhost:8081, changeOrigin: true } } } }这两种方式我建议开发阶段用前端代理部署时用Nginx反代后端跨域配置只作为兜底。前后端分离项目上线后一般是让Nginx统一接收外部请求静态资源由Nginx服务/api路径反代到后端服务这样浏览器只和同源端口通信不存在跨域问题。部署阶段Nginx配置如下server { listen 80; client_max_body_size 10m; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8081; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }try_files $uri $uri/ /index.html这行是Vue路由history模式必需的否则刷新前端页面会404这一点特别容易踩坑。5. 常见问题与排查技巧实录5.1 跨域配置失效跨域是最常见的前后端分离问题。如果你后端已经配置了CorsConfig前端仍然报跨域先查看请求是不是被拦截器拦截了。有些拦截器逻辑会在进入Controller之前直接返回401而401响应头里没有Access-Control-Allow-Origin浏览器就会把错误描述成跨域。所以排查跨域要从响应是否到达浏览器入手而不是只看前端控制台。如果在后端配置里用了allowedOrigins(*)在SpringBoot 2.4以上的版本中会直接报错因为允许的来源不能同时配置为*并且allowCredentials(true)。要把allowedOrigins改成allowedOriginPatterns(*)这个坑我当初也踩了很久。5.2 MyBatis Plus分页插件不生效MyBatis Plus的分页查询需要先配置分页插件否则传入Page对象后SQL不会拼接LIMIT查出来的记录是全量数据。配置方式是在配置类里注册一个MybatisPlusInterceptorConfiguration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }如果你分页查询的结果集中total一直是0或返回全量数据基本就是没配这个插件。另外确认你的Mapper接口继承的是BaseMapperTService方法里使用的是IPage返回类型这两个细节缺一不可。5.3 数据库时间字段的时区问题连接MySQL时如果URL里不指定serverTimezoneSpringBoot会报Server returns invalid timezone的异常或者时间的读写相差8小时。解决方法是给JDBC URL显式加上serverTimezoneAsia/Shanghai如下图所示jdbc:mysql://localhost:3306/welcome_system?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai还有一点如果你前后端都部署好了但页面上时间总是差8小时要同时检查后端JSON序列化时的时间格式化。建议在application.yml里统一配置spring: jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT85.4 Vue项目启动失败或构建超时Vue项目在npm install阶段最常见的坑是node-sass安装失败或Electron相关依赖下载超时。这个项目如果用的是node-sass你可以直接替换成dart-sass即sass包安装更稳定且API基本兼容。如果是依赖下载太慢就把npm源切到国内镜像npm config set registry https://registry.npmmirror.com还有比较特殊的情况从别人那儿拷来的前端项目直接npm run dev报出一堆语法错误这多半是Node版本和你用的Vue CLI版本不匹配。Vue 2 Element UI项目建议使用Node 14到Node 16之间的版本太新或太旧都容易踩坑。实在不行可以删除node_modules和package-lock.json后重新安装依赖。5.5 登录接口返回但前端跳转失效登录成功后前端需要根据role字段跳转到不同页面管理员跳到/admin/dashboard学生跳到/student/home。常见问题是登录成功后页面一直停留在登录页或者跳转后马上被路由守卫拦回。这种时候首先要看路由守卫是不是从localStorage读取token的时机出了问题。登录接口返回token后必须先localStorage.setItem(token, token)再执行router.push否则守卫判断时token还没存进去就会认为未登录而拦下跳转。其次如果学生和管理员的菜单权限不一致检查路由的meta信息或动态路由是否配置了对应的角色判断。接口文档的重要性在这个排查过程中体现得很明显——如果接口文档写清楚了返回字段前端照着对接这种数据有了但页面跳不过去的问题就能快速定位到路由层而不是接口层。5.6 部署后用IP访问但页面样式丢失本地开发一切正常部署到服务器后打开页面只有HTML没有CSS和JS这是静态资源路径问题。如果前端构建后的index.html里引用的资源路径是以/assets开头的绝对路径而你的应用不是部署在域名根路径下资源就会404。解决方法是把vue.config.js里的publicPath改为相对路径module.exports { publicPath: ./ }然后再重新npm run build。用相对路径之后只要你的index.html和assets目录在同一级无论部署在哪个子路径下都能正常加载。6. 一些可以继续扩展的方向如果你拿到这套系统后不满足于跑通我再补充几个可以低成本改造的点让项目从毕设合格变成答辩亮点。第一个是引入Redis做验证码和token的存储。现在的JWT是纯无状态的token生成后无法主动过期但如果配合Redis可以把token存进去并设置过期时间用户退出时删除key就能实现真正的强制下线。这个改进涉及的知识面广——Redis、拦截器、缓存一致性——讲起来很有料但它也会增加搭建成本建议有把握再做。第二个是增加导入导出功能。用EasyExcel给新生信息模块加一个Excel批量导入再给缴费记录加一个导出报表按钮。高校迎新场景中Excel导入是管理员的刚需这个功能对业务真实度的提升非常明显。第三个是把登录时的图形验证码加上。直接用Hutool工具类的CaptchaUtil就能生成验证码图片把验证码答案放到Redis并设置5分钟过期。这个功能虽然简单但能堵住答辩时你的系统安全性怎么保证的提问。其实做毕设这件事框架搭起来并不难难的是把业务跑通、把坑踩完、把闭环讲清楚。这套SpringBootVue迎新系统项目我从架构设计讲到数据库、再从接口联调讲到部署排查核心目标就是让你拿到后不仅能跑起来还能在答辩时把每个决定背后的原因说出来。代码可以复制理解不能复制——你亲自走一遍这个流程收获的绝不仅仅是一个项目而已。 每年到了毕业季总有一批同学为Java Web毕设发愁。很多人的需求其实很一致要一套技术栈够主流、功能看得过去、能跑通前后端联调、最好带数据库脚本和接口文档的完整项目。我这次整理的SpringBootVue大学生迎新系统平台就是把毕设完整项目这件事一次性铺开——它不是一个只放了一堆Controller的骨架工程而是把新生报到从登记、缴费到宿舍分配的整个业务闭环都做了。项目源码、SQL脚本、接口文档三件套齐全照着跑起来再改改能省下大量自己从零搭框架的时间。这套系统的定位很明确面向高校迎新场景的管理后台加学生端页面。管理员可以维护新生信息、发布迎新公告、分配宿舍、记录缴费状态学生可以在系统里登记自己的报到信息、查询宿舍安排和缴费情况。对于想靠毕设展示前后端分离 权限控制 业务CRUD 统计分析能力的同学来说覆盖面刚刚好。下面我就从设计思路、核心模块、数据库、接口联调、问题排查这几个维度把整个项目掰开来讲。1. 项目整体设计与思路拆解1.1 技术选型为什么是SpringBoot Vue接触过几个类似项目之后你会发现Java Web毕设的技术选型无非就那么几类纯JSP/Servlet的老古董、SpringMVC加模板引擎、以及SpringBoot前后端分离。我之所以推荐SpringBoot Vue不是因为跟风而是它有实打实的好处。SpringBoot的作用是帮你把SSM框架里繁琐的配置全部收进起步依赖里。以前写SSM光一个spring-context.xml、applicationContext.xml就能绕晕人现在一个SpringBootApplication注解加spring-boot-starter-web依赖内嵌Tomcat就能直接跑。搭配MyBatis Plus操作数据库单表CRUD连SQL都不用写这对毕设项目的开发效率提升非常明显。Vue这边采用Vue 2 Element UI的开发方式组件化写法让页面搭建速度远快于传统JSP拼标签。表单校验、表格分页、弹窗确认这些高频操作Element UI已经封装好了。我见过很多人纠结要不要上Vue 3就毕设场景来说Vue 2的生态资料更成熟你遇到的大多数坑在网上都能搜到答案。前后端分离还有一个隐藏的好处答辩时你能把接口联调流程讲得很清楚。前端通过Axios向后端发请求后端返回JSON数据双方约定好返回格式各改各的互不干扰这本身就是一个值得讲解的技术亮点。1.2 项目模块划分与角色设计迎新系统平台的核心业务是围绕新生报到展开的。系统设计了两类角色管理员和新生。管理员是在校务人员负责配置迎新信息、处理报到流程中的各种审批新生是使用主体登录后填写信息、查看结果。这两类角色天然决定了功能模块的划分方式。管理员端的模块包括登录鉴权、个人中心、新生信息管理、迎新公告管理、宿舍管理、宿舍分配、缴费记录管理、报到统计。新生端的模块则简化为登录注册、信息登记、报到状态查看、宿舍查询、缴费查询、公告查看。从业务流上看整条线是这样的管理员提前导入或录入新生名单学生拿到初始账号后登录系统先完善个人信息联系方式、家庭住址、到校时间、陪同人数等然后确认缴费状态最后查看系统分配的宿舍信息。管理员那边在看到学生完成信息登记后可以为其分配宿舍并维护该学生的报到进度。模块不能贪多。很多毕设项目败在功能列表很唬人实际质量全欠费。这个项目每张表、每个接口都能对应到真实的迎新动作业务链路是完整的而不是东拼西凑的Demo堆砌。1.3 项目目录结构与分层设计良好的目录结构不仅是代码整洁的体现更是答辩时能给评委看的加分项。后端采用经典的四层架构com.example.welcome ├── controller/ # 请求入口参数接收与校验 ├── service/ # 业务逻辑层 │ └── impl/ # 接口实现类 ├── mapper/ # MyBatis Plus数据访问层 ├── entity/ # 数据库实体类 ├── dto/ # 数据传输对象如登录参数、分页参数 ├── vo/ # 视图对象如统计数据返回 ├── config/ # 跨域、MyBatis Plus分页、拦截器配置 ├── common/ # 统一返回结果、异常处理、工具类 └── WeclomeApplication.java前端同样保持清晰模块划分src ├── api/ # 封装的axios请求接口 ├── router/ # 路由配置 ├── views/ # 页面组件 │ ├── admin/ # 管理员端页面 │ ├── student/ # 新生端页面 │ └── login/ # 登录页 ├── components/ # 公共组件 └── utils/ # request.js等请求封装我见过不少毕设项目把几百行业务代码全塞进Controller里这后面改起来极度痛苦。分层设计的价值不在于显得专业而在于出了问题能快速定位。比如分页查询报错你只需要看Mapper层的SQL业务逻辑判断错误就去Service层找。这种可维护性在改代码应对答辩追问时特别重要。2. 核心功能模块与业务逻辑解析2.1 登录鉴权与用户体系登录是系统的第一道门也是体现技术含量的地方。这个项目采用JWTJSON Web Token做无状态鉴权登录成功后后端签发一个token前端存到本地之后每次请求都在请求头里带上Authorization: token后端拦截器校验通过才放行。JWT相比Session方案的优势在于不用维护服务端会话天然适合前后端分离部署。我在处理用户体系时把管理员和学生统一放进了sys_user表用role字段区分身份。登录接口只认账号密码查出用户后根据角色返回不同的菜单权限。学生账号可以由管理员在新生录入时批量生成初始密码统一为身份证后六位首次登录时提示修改。这里有一个实操细节拦截器里校验token时不要把写死的接口路径全部拦住。比如登录接口、注册接口、验证码接口必须放行否则前端第一次请求就会被401挡在门外。我用的是SpringBoot拦截器加excludePathPatterns把/api/auth/login、/api/auth/register等路径排除掉其余接口统一校验。前端配合Vue Router的路由守卫在跳转页面前判断本地有没有token没有就强制跳回登录页两边都做了控制才不会出现页面能打开但数据全报错的尴尬状况。线上项目的密码不能明文保存我用BCrypt加密存储这个点答辩时也很能打。BCrypt每次加密的结果都不一样但校验时能正确匹配比MD5加盐更安全也更省心。2.2 新生信息登记与报到流程新生报到流程是这个系统的业务主轴。我把它设计成一张student_info表关联用户表的userId字段包含学号、姓名、性别、身份证号、联系方式、家庭住址、到校时间、陪同人数、报到状态等。业务逻辑上有一个状态机思路新生从登录开始报到状态依次经历未登记 - 已登记 - 已报到三个状态。新生提交信息登记表单后记录状态为已登记管理员核对信息无误后在报到确认页面点击确认报到状态变为已报到。这个状态字段别看简单它串起了整个系统的所有操作——只有已登记的学生才能被分配宿舍只有已报到的学生才能看到最终的报到回执。实现时我采用了前端表达、后端守门的思路。前端通过Element UI的表单校验保证必填项和格式后端在Service层再次校验学号唯一性、身份证格式、手机号格式。前后端双重校验的目的是防止有人绕过前端直接调用接口写脏数据。后端我用了Validated注解配合自定义校验类拦截非法参数并返回明确的错误信息而不是笼统地抛出500。2.3 宿舍管理与分配逻辑宿舍分配是最能体现业务设计能力的一个模块。宿舍数据单独建了一张dormitory表记录楼栋、楼层、房间号、床位总数、已住人数学生的分配结果记录在dorm_assignment表一个学生只对应一条分配记录。分配逻辑上我采用的是管理员手动分配加系统自动校验剩余床位的方案。管理员在新生列表页点击分配宿舍弹窗列出可选宿舍系统实时计算出每个宿舍的剩余床位床位总数减已住人数只剩0个床位的宿舍自动置灰不可选。选定后调用分配接口后端做一次超卖校验——更新前再次查询宿舍已住人数如果已满则拒绝分配防止并发操作下出现一间宿舍实际住了超过床位数的学生。这个查询后再更新的做法严格来说在并发量高时仍有条件竞争风险更稳妥的方案是使用数据库的乐观锁版本号或悲观锁select for update。但作为毕设项目我建议至少把超卖校验讲清楚然后再补充生产环境会加锁处理评委一听就知道你想过这个问题。缴费记录被我设计成与宿舍相关联宿舍分配完成后生成对应的缴费记录包含项目名称住宿费、金额、状态未缴/已缴。这样学生端和个人缴费查询就能串起来业务闭环又完整了一步。2.4 公告发布与报到统计公告模块本质上是一个轻量级的CMS功能。管理员发布迎新公告包括标题、内容、发布时间、是否置顶新生端首页按照时间倒序展示公告列表。这个模块虽然简单但它是完整系统的必要组成部分——没有公告新生怎么知道报到要带什么材料报到统计模块则负责给管理员提供一个数据总览的看板。我用ECharts做了两个核心图表一是各学院报到人数柱状图二是报到状态占比饼图。后端提供统计接口比如按学院分组统计总人数和已报到人数按状态分组统计各状态数量。前端拿到JSON数据后交给ECharts渲染。统计接口的SQL要注意它是典型的分组聚合查询用MyBatis Plus的QueryWrapper做聚合不如直接写XML里的SQL清晰。我在统计相关的Mapper接口上直接用了ListMapString, Object作为返回类型配合自定义SQLSELECT college, COUNT(*) AS total, SUM(CASE WHEN status 3 THEN 1 ELSE 0 END) AS reported FROM student_info GROUP BY college;这里有一个小坑MyBatis返回Map时字段名会变成数据库列名比如total、reported前端访问时别用驼峰写法。我在VO层面统一做了字段映射保证前后端字段风格一致。3. 数据库设计与SQL脚本要点3.1 核心表结构一览数据库设计是这套源码里SQL脚本的核心内容。整个项目一共设计了七张核心表我把表结构和用途整理成了下面的表格方便你在阅读SQL脚本时快速对应表名用途核心字段sys_user系统用户表管理员/学生id, username, password, role, statusstudent_info新生信息表id, user_id, student_no, name, gender, id_card, phone, address, college, arrive_time, statusdormitory宿舍表id, building, floor, room_no, bed_count, used_countdorm_assignment宿舍分配表id, student_id, dorm_id, assign_timepayment缴费记录表id, student_id, item_name, amount, status, pay_timenotice公告表id, title, content, is_top, create_timesys_log操作日志表id, user_id, operation, method, params, create_time需要说明的是sys_user表把管理员和学生放在同一张表里靠role字段区分这样可以复用登录逻辑避免了写两套账号体系的冗余。如果你更倾向把学生资料和学生账号拆开也不是不行只是登录时要多一次关联查询。3.2 关键表关系与外键处理从表关系上看student_info是业务核心表它的user_id关联sys_user.iddorm_assignment的student_id关联student_info.idpayment的student_id同样关联student_info.id。这是一个非常典型的一主多从结构一个学生有且仅有一条信息记录但可以有多次缴费记录住宿费、代办费等。关于外键我个人的建议是表设计时标明逻辑外键关系但建表SQL里不强制加物理外键约束。原因很实在——加了物理外键之后删除顺序一旦不对就会报错被打断而实际开发和测试时MyBatis Plus的Service层已经控制了关联逻辑。答辩时你可以主动解释为保证写入性能和升级便利采用逻辑外键由应用层维护关联完整性这比支支吾吾说不清为什么不加外键要强得多。SQL脚本里我还写了一段初始化数据包括一个管理员账号admin/admin123密码已被BCrypt加密、若干条测试学生账号、几间宿舍、几条公告。这些初始化数据非常重要没有它们你启动项目后登录进去就是一片空白。我在脚本里都加了注释你把脚本导入MySQL后不用做任何额外操作直接用admin账号登录即可。3.3 SQL脚本执行方式和常见坑拿到SQL脚本后很多人直接在Navicat里拖进去双击执行。这个方式95%情况下没问题但要注意几点执行前确认数据库版本。项目用的是MySQL 5.7以上如果你的MySQL版本是8.0一些默认排序规则和时区行为会有差异。比如8.0默认的utf8mb4_0900_ai_ci排序规则而5.7常用utf8mb4_general_ci脚本里统一指定字符集就能避免乱码。脚本执行时最好以整个文件为单位执行不要复制粘贴到命令行逐行跑。脚本里有DROP TABLE IF EXISTS开头的清理语句逐行跑容易漏掉。我见过同学把SQL脚本在命令行里手动执行结果漏跑了建库语句SpringBoot连接数据库直接报Unknown database。在SpringBoot项目中如果你不想手动导入SQL也可以在application.yml里配置自动初始化spring: datasource: url: jdbc:mysql://localhost:3306/welcome_system?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 sql: init: mode: always schema-locations: classpath:sql/init.sql把SQL脚本放在resources/sql/init.sql下每次应用启动时就会自动执行。但注意mode不能一直设为always否则重启时表会被DROP重建你后来自行添加的测试数据就全没了。调试阶段可以开正式演示前记得改回never或手动导入。3.4 索引设计的一点心得这几张表的索引我建议至少建这么几个student_info表的user_id建唯一索引一个学生账号只对应一条信息记录、student_no建唯一索引dorm_assignment表的student_id建唯一索引一个学生只有一条在住分配payment表的student_id建普通索引、status建普通索引按状态查询缴费清单很频繁notice表的is_top加普通索引。索引不是越多越好尤其是毕设这种数据量很小的项目加索引的意义更多在于展示你有数据库优化的意识。答辩时被问到你这张表查询为什么快你能说出这里有唯一索引覆盖查询条件就很加分。4. 接口文档与前后端联调实操4.1 统一接口返回格式与分页约定前后端分离最怕的就是各写各的前端等着data数组后端却把数据塞在result里。所以我从后端设计一开始就定了统一的返回格式所有接口都遵循Result这个结构{ code: 200, msg: 操作成功, data: {} }code为200表示成功401表示未认证403表示无权限500表示服务端异常。前端在Axios响应拦截器里统一判断code不等于200就弹出错误提示不需要每个页面都重复写错误处理逻辑。这样不仅代码干净联调时也会少很多为什么这个接口数据拿不到的困惑。分页查询是列表页面的核心。我统一使用分页参数pageNum页码从1开始、pageSize每页条数分页响应结构固定为{ records: [ { id: 1, studentNo: 2024001 } ], total: 56, size: 10, current: 1 }前端表格组件直接绑定records作为数据源total用于分页组件的总数显示。和MyBatis Plus的IPage结构一致这样在Service层调用分页查询后直接赋值给VO返回不需要额外做字段转换。4.2 接口文档的编写方法与内容接口文档我建议用Markdown或Word编写但结构要固定方便别人查阅。一个完整的接口文档条目至少包含这些部分接口地址、请求方式GET/POST/PUT/DELETE、请求参数参数名、类型、是否必填、说明、返回示例、错误码说明。以登录接口为例参数名类型必填说明usernameString是账号passwordString是密码BCrypt加密接口地址POST /api/auth/login返回示例{ code: 200, msg: 登录成功, data: { token: eyJhbGciOiJIUzI1NiJ9..., role: admin, username: admin } }我见过一些人写接口文档每个接口之间粘贴复制、格式混乱这其实是在给自己挖坑。答辩时评委如果翻阅你的接口文档第一印象会大打折扣。每写完一个接口就认真补文档项目完成后整套文档就是你的产品说明书。4.3 前端请求封装与token处理前端Axios请求封装是所有页面数据交互的基石。我建议在src/utils/request.js里统一创建Axios实例设置基础URL和超时时间然后在请求拦截器里做token注入import axios from axios const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization token } return config }) request.interceptors.response.use( response { const res response.data if (res.code 200) { return res } else if (res.code 401) { localStorage.removeItem(token) window.location.href /login return Promise.reject(new Error(登录已过期)) } else { return Promise.reject(new Error(res.msg)) } }, error { return Promise.reject(error) } ) export default request每个接口模块再单独建文件比如src/api/student.js里导出一个获取分页列表方法import request from /utils/request export function getStudentList(params) { return request({ url: /admin/student/list, method: get, params }) }这样一来页面里不需要关心token怎么传、错误怎么弹只需要调用API方法即可。前后端联调时只要你接口文档里的路径和参数定义清楚前端页面很快就能跑通。4.4 前后端分离下的跨域处理前后端分离开发时前端默认运行在localhost:8080Vue开发服务器后端运行在localhost:8081两者端口不同就直接触发跨域问题。浏览器会拦截后端响应控制台报CORS error而接口本身其实是通的。处理方式有两种第一种在后端写一个CorsConfig允许指定来源的请求跨域Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } }第二种是前端在vue.config.js里配置代理把/api开头的请求转发到后端地址module.exports { devServer: { proxy: { /api: { target: http://localhost:8081, changeOrigin: true } } } }这两种方式我建议开发阶段用前端代理部署时用Nginx反代后端跨域配置只作为兜底。前后端分离项目上线后一般是让Nginx统一接收外部请求静态资源由Nginx服务/api路径反代到后端服务这样浏览器只和同源端口通信不存在跨域问题。部署阶段Nginx配置如下server { listen 80; client_max_body_size 10m; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:8081; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }try_files $uri $uri/ /index.html这行是Vue路由history模式必需的否则刷新前端页面会404这一点特别容易踩坑。5. 常见问题与排查技巧实录5.1 跨域配置失效跨域是最常见的前后端分离问题。如果你后端已经配置了CorsConfig前端仍然报跨域先查看请求是不是被拦截器拦截了。有些拦截器逻辑会在进入Controller之前直接返回401而401响应头里没有Access-Control-Allow-Origin浏览器就会把错误描述成跨域。所以排查跨域要从响应是否到达浏览器入手而不是只看前端控制台。如果在后端配置里用了allowedOrigins(*)在SpringBoot 2.4以上的版本中会直接报错因为允许的来源不能同时配置为*并且allowCredentials(true)。要把allowedOrigins改成allowedOriginPatterns(*)这个坑我当初也踩了很久。5.2 MyBatis Plus分页插件不生效MyBatis Plus的分页查询需要先配置分页插件否则传入Page对象后SQL不会拼接LIMIT查出来的记录是全量数据。配置方式是在配置类里注册一个MybatisPlusInterceptorConfiguration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }如果你分页查询的结果集中total一直是0或返回全量数据基本就是没配这个插件。另外确认你的Mapper接口继承的是BaseMapperTService方法里使用的是IPage返回类型这两个细节缺一不可。5.3 数据库时间字段的时区问题连接MySQL时如果URL里不指定serverTimezoneSpringBoot会报Server returns invalid timezone的异常或者时间的读写相差8小时。解决方法是给JDBC URL显式加上serverTimezoneAsia/Shanghai如下图所示jdbc:mysql://localhost:3306/welcome_system?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai还有一点如果你前后端都部署好了但页面上时间总是差8小时要同时检查后端JSON序列化时的时间格式化。建议在application.yml里统一配置spring: jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT85.4 Vue项目启动失败或构建超时Vue项目在npm install阶段最常见的坑是node-sass安装失败或Electron相关依赖下载超时。这个项目如果用的是node-sass你可以直接替换成dart-sass即sass包安装更稳定且API基本兼容。如果是依赖下载太慢就把npm源切到国内镜像npm config set registry https://registry.npmmirror.com还有比较特殊的情况从别人那儿拷来的前端项目直接npm run dev报出一堆语法错误这多半是Node版本和你用的Vue CLI版本不匹配。Vue 2 Element UI项目建议使用Node 14到Node 16之间的版本太新或太旧都容易踩坑。实在不行可以删除node_modules和package-lock.json后重新安装依赖。5.5 登录接口返回但前端跳转失效登录成功后前端需要根据role字段跳转到不同页面管理员跳到/admin/dashboard学生跳到/student/home。常见问题是登录成功后页面一直停留在登录页或者跳转后马上被路由守卫拦回。这种时候首先要看路由守卫是不是从localStorage读取token的时机出了问题。登录接口返回token后必须先localStorage.setItem(token, token)再执行router.push否则守卫判断时token还没存进去就会认为未登录而拦下跳转。其次如果学生和管理员的菜单权限不一致检查路由的meta信息或动态路由是否配置了对应的角色判断。接口文档的重要性在这个排查过程中体现得很明显——如果接口文档写清楚了返回字段前端照着对接这种数据有了但页面跳不过去的问题就能快速定位到路由层而不是接口层。5.6 部署后用IP访问但页面样式丢失本地开发一切正常部署到服务器后打开页面只有HTML没有CSS和JS这是静态资源路径问题。如果前端构建后的index.html里引用的资源路径是以/assets开头的绝对路径而你的应用不是部署在域名根路径下资源就会404。解决方法是把vue.config.js里的publicPath改为相对路径module.exports { publicPath: ./ }然后再重新npm run build。用相对路径之后只要你的index.html和assets目录在同一级无论部署在哪个子路径下都能正常加载。6. 一些可以继续扩展的方向如果你拿到这套系统后不满足于跑通我再补充几个可以低成本改造的点让项目从毕设合格变成答辩亮点。第一个是引入Redis做验证码和token的存储。现在的JWT是纯无状态的token生成后无法主动过期但如果配合Redis可以把token存进去并设置过期时间用户退出时删除key就能实现真正的强制下线。这个改进涉及的知识面广——Redis、拦截器、缓存一致性——讲起来很有料但它也会增加搭建成本建议有把握再做。第二个是增加导入导出功能。用EasyExcel给新生信息模块加一个Excel批量导入再给缴费记录加一个导出报表按钮。高校迎新场景中Excel导入是管理员的刚需这个功能对业务真实度的提升非常明显。第三个是把登录时的图形验证码加上。直接用Hutool工具类的CaptchaUtil就能生成验证码图片把验证码答案放到Redis并设置5分钟过期。这个功能虽然简单但能堵住答辩时你的系统安全性怎么保证的提问。其实做毕设这件事框架搭起来并不难难的是把业务跑通、把坑踩完、把闭环讲清楚。这套SpringBootVue迎新系统项目我从架构设计讲到数据库、再从接口联调讲到部署排查核心目标就是让你拿到后不仅能跑起来还能在答辩时把每个决定背后的原因说出来。代码可以复制理解不能复制——你亲自走一遍这个流程收获的绝不仅仅是一个项目而已。 
