SpringBoot+Vue实战：智慧校园管理系统从0到部署全流程解析

如果你最近正在找毕业设计题目，或者是被分配了“智慧校园管理系统”这种经典课题但还没想清楚怎么下手，这篇文章应该能帮你省下一部分试探时间。我自己的课题就是这个，从选题、数据库设计、写代码，到打包部署、写报告、准备答辩，前后扎扎实实做了三周多。中间踩过不少应届生都会碰到的坑，也积累了一套还比较顺手的流程。下面我按当时做项目的真实顺序，把整个智慧校园管理系统拆开讲一遍，包括用SpringBoot和Vue怎么分工、数据库表怎么划分、前后端联调时怎么处理跨域、最后怎么把Vue打包进SpringBoot，以及答辩时老师最爱问的那几个问题怎么答。

这篇内容适合三类人：第一，正在为毕业设计发愁的计算机专业学生；第二，想快速搭一个基础版校园管理后台的初级开发者；第三，想了解一个完整JavaWeb项目从0到交付包含哪些环节的同学。全程都是可落地的方案，不是空讲概念。

1. 选题前的需求盘点：智慧校园系统到底该做哪些模块

1.1 毕设选题最容易踩的雷：功能越多越好

很多人在选题时都喜欢往大了写，智慧校园管理系统一听就是一个大筐，于是把什么“人脸识别”“智能推荐选课”“物联网设备监控”全塞进来。结果往往是一样都没做透，数据库设计得乱七八糟，答辩时被老师一问就露馅。我当时的做法很简单：先把“智慧校园”这个题目缩小到一个自己能完全驾驭的范围。管理系统和智慧校园相比，听起来没那么激进，但实现起来有一条完整闭环：管理员能维护数据，老师能录入与查询，学生能登录查看。只要这一圈能跑通，所有基础技术点都覆盖了。

我做这个题目之前，先列了一个需求盘点清单，包括用户角色、每个角色想解决的问题、需要用到的数据表。这个清单控住了整个项目的规模。后面写报告时，需求分析部分也直接从这个清单扩充出来，反而省了不少事。

1.2 我最终锁定的六个核心模块

综合工作量与展示效果，我最后保留了六个模块：

• 系统管理：登录、用户维护、角色分配、菜单权限。
• 学生管理：学生基本信息的增删改查、班级筛选、关键字搜索。
• 教师管理：教师信息维护、按学院筛选。
• 课程管理：课程信息、开课学期、任课教师关联，以及学生选课关系。
• 成绩管理：老师录入成绩，学生查看成绩，按课程查询。
• 考勤管理：上课考勤记录，按日期和课程维度统计出勤率。
• 通知公告：管理员发布公告，前端轮播展示最新几条。

实际上六个模块加一个公告，规模已经不小了。每个模块至少对应两张以上数据库表，加起来正好构成一个完整的管理系统。更关键的是，这六个模块全部使用同一种后端CRUD加前端表格的方案实现，熟练之后工作量可以线性叠加，不会出现某种模块突然需要新框架的尴尬情况。

1.3 一份“不做清单”，比需求分析更重要

做毕设时，“不做什么”和“要做什么”同样重要。我给自己列了一个明确的不做清单：

• 不做小程序端或App端，只做Web端；
• 不做复杂权限框架，只做基于角色的菜单过滤；
• 不做消息秒推，公告使用页面刷新获取；
• 不做大数据量的性能优化，最多单表几万条。

这份清单让我在开发期间没有陷入“这个功能要不要加”的纠结。一旦有人说“能不能把宿舍管理也加进去”，我就拿清单出来挡回去。答辩时老师通常会问“你觉得系统有哪些不足”，我就可以直接回答：“我明确限制了校园移动端和实时通信的范围，因为那会带来额外的推送与安全复杂度”，这比支支吾吾说“还有很多地方需要完善”要可信得多。

2. 技术栈选择逻辑与数据库设计：SpringBoot、Vue与MySQL怎么互相配合

2.1 后端的选型理由与MyBatis-Plus的实际便利

后端我选择了SpringBoot 2.7搭配JDK8，这个组合在2025年看来虽然不新，但异常稳定。毕设答辩现场最怕的是环境兼容问题，JDK8和SpringBoot 2.7几乎能跑在各学校机房的老机器上，不会出现“你的电脑调用了Java 17的新特性，换了电脑就起不来”的情况。

ORM框架我用的是MyBatis-Plus，而不是原生MyBatis或Spring Data JPA。原因是这颗题确认时我就知道，大部分查询都是单表CRUD、分页、条件筛选这三件事。MyBatis-Plus的BaseMapper自带增删改查，和实体类关联后，不需要写任何XML就能完成80%的基础操作。拿学生管理举例，只需要这样：

public interface StudentInfoMapper extends BaseMapper<StudentInfo> { }

Service层直接调用studentInfoMapper.selectPage(page, wrapper)就能分页查询。等到后期需要多表关联（比如查学生选课列表），再单独写SQL，这种由简到繁的节奏非常适合毕设这种有时间限制的项目。

数据库连接池我用的Druid，没什么特别原因，就是控制台能看到SQL监控，答辩演示时打开监控页能直观地证明“系统对数据库操作有监控”，这算一个很小的加分项。

2.2 前端Vue技术选型：为什么不用最新的

前端框架我选了Vue2搭配Element-UI，而不是Vue3加Element Plus。理由很现实：网上已有的校园管理系统参考代码里，Vue2方案最成熟，踩坑资料也多。学校给的机器可能没有外网，Vue2配合webpack能离线构建，而Vue3生态里部分工具链要求较新版本Node，容易在部署阶段出问题。

Vue工程的结构按常规分：views目录放页面，router目录定义路由，api目录统一存放接口请求，utils目录放登录态和Axios封装。因为后端接口是统一前缀/api，所以我给Axios设置了baseURL和拦截器，每次请求自动附带token。这属于所有管理系统都能通用的部分，在这里不再赘述，但有一个经验值得单独说：前端不要每个页面都写Axios，一定要有一个统一的request.js，不然后期改请求头会改到你怀疑人生。

我前端代码里也用到了Vue插槽。比较典型的是在通知公告列表和表格操作列中，Element-UI用插槽插入“编辑”“删除”按钮：

<el-table-column label="操作" width="180"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button> </template> </el-table-column>

这个插槽的应用场景非常普遍，在答辩时如果老师问“你对Vue理解到什么程度”，可以拿这个作为例子，说明自己知道作用域插槽可以让外部控制表格按钮的行为。

2.3 数据库表设计：13张表背后的业务关系拆解

数据库是这类管理系统的核心。我选用MySQL 8.0，字符集设置为utf8mb4，不然录入中文容易变成问号。表的数量最终是13张，下面这张表把每张表的职责梳理得很清楚：

这张表的核心是用户、角色、菜单三张表组成的权限骨架。用户表不直接和菜单表挂钩，通过用户角色表和角色菜单表形成多对多关系，这样才能让一个管理员账号和一个学生账号登录后看到完全不同的菜单。学生信息和用户表通过user_id关联，避免重复存储登录名和密码。

当初设计时我纠结过要不要做成绩字段直接挂在课程学生表上。后来确认这种方式最简单：一条course_student记录代表一次选课关系，score字段记录最终成绩，查某门课成绩时只需按course_id筛选。如果单独再做一张成绩表，纯属多此一举。

2.4 用实体类反推建表SQL的快捷办法

这套项目里我用了一个能节省约三分之一数据库设计时间的方法：先写Java实体类，再让MyBatis-Plus根据实体类生成建表SQL。MyBatis-Plus官方文档里提供了生成器，也能直接用IDEA的JPA Buddy插件。不过我当时用的是最土但最可控的方式——根据实体类手写SQL。

比如学生信息实体类里有一个private String studentNo;字段，我就在建表语句里写student_no varchar(20) DEFAULT NULL。这个方法看似原始，但是能让字段类型和Java类型保持严格一致。后来我写项目报告时，把每个实体类和SQL字段的对应关系放进附录里，导师说这个表很直观。这也回应了很多同学问的“MyBatis-Plus怎么根据Java实体类生成建表SQL”，答案其实分两层：用生成器是自动方案，手动对应是兜底方案，毕设建议用手动兜底，至少你完全理解每张表为什么长这样。

数据库初始化脚本我单独整理成一个init.sql，包含建库、建表、插入演示数据和视图。部署时只需在MySQL里执行一次这个脚本，整个系统就能跑起来。这也是交付物里“数据库”部分的底气：不看代码，光靠这个脚本+表结构说明，别人也能把所有表结构还原出来。

3. 编码阶段全流程复盘：从SpringBoot空项目到Vue页面全通

3.1 后端分层结构与管理端的登录鉴权

后端工程结构我按经典的controller、service、mapper、entity四层拆分。Controller负责接收请求，Service负责业务逻辑，Mapper负责数据库操作，Entity对应数据表。不要在这时候硬套设计模式，分层清晰对毕设来说已经足够了。

登录鉴权是第一个难点。我没有用SpringSecurity，因为它的配置对新手来说太深，短时间内搞不清过滤链顺序。我用的是Interceptor加JWT（JSON Web Token）方案：用户成功登录后生成一个带过期时间的token，前端每次请求在Header里带上token这个字段，后端写一个拦截器统一验证。逻辑链路如下：

1. 用户提交用户名密码；
2. 后端查询sys_user表，校验密码；
3. 校验通过后生成JWT，返回给前端；
4. 前端把token存进localStorage；
5. 前端Axios拦截器在请求头里塞token；
6. 后端拦截器放行带有效token的请求。

拦截器只注册在需要登录的路径上，而/api/user/login和/api/notices这类接口不需要拦截。这种自己做鉴权的方式虽然不如SpringSecurity严谨，但能把原理讲明白。答辩时被问“权限怎么控制”，我可以直接画出这个流程，而不是背官方文档。

3.2 Vue路由、状态管理与接口调用的基础框架

Vue2项目里的路由是常规模式，routers数组中配置各个页面路径。这里有一个毕设里特别常见的坑：路由模式到底用history还是hash。为了和SpringBoot打包部署配合，我选择了hash模式，也就是路由路径里带一个#。因为在后端不额外配置路由转发的情况下，只有hash模式能让静态资源在刷新时保持稳定。如果非要用history模式，必须在SpringBoot里配置Controller将未知路径转发到index.html，当年我在这上面吃过亏，后面部署章节会详细说。

状态管理我没有引入Vuex，因为系统共享状态只有当前用户信息和一个菜单列表，用localStorage加一个简单的store文件足够。我当时的做法是写一个store.js，里面暴露getUserInfo()和setUserInfo()，所有页面从这里面读当前登录者。实际上，这也贴合毕设不做过度设计的定位。

接口调用统一走api目录，例如学生管理接口：

export function getStudentPage(data) { return request({ url: '/api/student/page', method: 'post', data }) }

页面里的表格只需要在mounted里调用该方法，返回的数据渲染到Element-UI表格。整个前端没有什么高深代码，但胜在规范统一。

3.3 成绩查询与考勤统计这类查询是怎么写出来的

这类管理系统中，最能体现数据库能力的不是单表增删改查，而是带条件的分页查询与统计报表。以成绩查询为例，前端传入课程名、学生姓名和当前页，后端需要用三条表做关联查询：

SELECT cs.id, s.student_no, s.name AS student_name, c.course_name, cs.score FROM course_student cs LEFT JOIN student_info s ON cs.student_id = s.id LEFT JOIN course_info c ON cs.course_id = c.id WHERE c.course_name LIKE CONCAT('%', #{courseName}, '%') AND s.name LIKE CONCAT('%', #{studentName}, '%') ORDER BY cs.id DESC LIMIT #{offset}, #{pageSize}

考勤统计类似，核心是按课程分组统计各状态的数量。用一条GROUP BY加SUM即可：

SELECT c.course_name, COUNT(*) AS total_count, SUM(CASE WHEN a.status = 1 THEN 1 ELSE 0 END) AS normal_count, SUM(CASE WHEN a.status = 2 THEN 1 ELSE 0 END) AS absent_count FROM attendance_info a LEFT JOIN course_info c ON a.course_id = c.id GROUP BY c.id, c.course_name

这两段SQL建议提前在Navicat里跑过，确保结果没问题再粘到Mapper XML里。答辩时有学生被老师要求现场写一条多表查询，能写出来绝对比只说“框架已经封装好了”强得多。

3.4 前后端联调时跨域问题的处理

开发阶段前端跑在8080端口，后端跑在8081端口，前端请求/api路径时必然遇到跨域。我先在后端写一个全局CORS配置，允许来自http://localhost:8080的请求：

@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOriginPatterns("*") .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowedHeaders("*") .allowCredentials(true); } }

然后在Vue开发服务器里配置代理，让请求看起来是同源的：

proxy: { '/api': { target: 'http://localhost:8081', changeOrigin: true } }

这两个配置同时存在时，要特别小心allowedOriginPatterns("*")和allowCredentials(true)的组合。如果只填*加allowCredentials(true)，浏览器会拒绝携带cookie的请求。我当时的token是放在请求头里的，所以把跨域策略调成允许任意来源并放行请求头，问题就解决了。

4. 部署与验收：把系统从localhost搬到服务器上的完整过程

4.1 写部署文档时最容易忽视的环境差异

程序写好后，我花了不少时间在部署上。很多同学的程序只有在自己电脑上能跑，换一台机器就崩，问题基本出在环境配置不一致。我在部署文档里把环境版本全列出来：JDK8、Maven 3.6.3、Node 16、MySQL 8.0，并且每个版本都给了安装验证命令。比如Java环境，直接执行java -version看版本；MySQL环境，执行mysql --version确认。

部署分两种路径：一种是直接用IDEA运行后端和用npm run serve跑前端，适合开发演示；另一种是打包成可执行产物，适合答辩现场或放到服务器上。我建议至少准备第二种路径，因为答辩机房通常不会给你装完整的IDE。

4.2 Vue打包进SpringBoot的两种实操方式

这是整个部署环节的核心。题目里特别写了“前端打包放进SpringBoot”，我也确实踩过这个坑。先说最简单的第一种方式：把Vue构建产物放到SpringBoot的src/main/resources/static目录下，再打成一个jar包。

具体操作分三步：

1. 修改Vue配置文件vue.config.js，设置publicPath: './'，这样打包出来的资源路径是相对路径，放进SpringBoot后不会因为目录层级出问题；
2. 执行npm run build，生成dist目录，把里面的所有文件复制到resources/static；
3. 后端将前端静态资源访问路径排除在拦截器之外，然后执行mvn clean package打jar包。

启动jar包后，访问http://localhost:8081就能直接看到页面，登录后调用/api接口，前后端完全在一起。

第二种方式是使用history路由时配置转发。如果前端路由用了history模式，用户在页面内点击跳转没问题，但直接刷新子页面会出现404。解决方案是在SpringBoot里加一个简单的转发规则：

@Controller public class ViewController { @RequestMapping(value = {"/", "/login", "/home", "/student", "/course", "/attendance"}) public String index() { return "forward:/index.html"; } }

这种方式需要把所有前端路由路径都列出来，否则每次新增路由都要改配置。所以我还是推荐直接用hash模式打包进jar包，省心得多。

4.3 演示数据的准备与测试报告记录方法

部署完成后，千万别忘了准备演示数据。我专门写了一段初始化SQL，插入了三个角色各两个账号、十几名学生、几门课程和几十条考勤记录。数据要尽量真实，课程名称写“Java程序设计”而不是“课程1”，老师名字写“王老师”而不是“teacher1”。答辩时演示界面的第一印象，数据真实度占了很大比重。

测试报告也在这时候一起整理。我按照功能模块分别写测试用例，每个用例包含编号、前置条件、操作步骤、预期结果和实际结果。例如“学生管理-分页查询”用例：输入学生姓名“张”，点击查询，预期结果是表格展示两位姓张的同学，实际结果一致。这类测试报告不用很复杂，但要让老师看出你确实跑过系统。我还在测试报告后面附了三个异常情况的处理记录：输入框不填写直接点查询、删除不存在的数据、密码错误登录，这比只测正常流程更有说服力。

5. 报告和答辩：程序以外的那一大半分数怎么保住

5.1 项目报告的逻辑主线：从问题到验证

写报告最忌讳把整个开发过程的流水账写进去。我当时的报告用了六章，主线是从“发现问题—分析问题—设计系统—实现系统—测试系统”一路贯通。需求分析对应发现问题，技术选型和数据库设计对应分析问题，系统设计对应设计解决方案，功能实现对应落地，测试对应验证。

这里有一个很实用的写作技巧：每个功能模块的截图下面，必须配一段“实现思路说明”，而不是只放截图。比如成绩管理的截图下，我写的就是“本模块采用三表关联查询方案，学生信息表、选课关系表与课程信息表通过外键id关联，在Mapper层编写动态SQL实现条件组合查询”。导师看到这种说明，会觉得你真懂，而不是贴图凑页数。

摘要部分建议放在最后写，因为写摘要时你对整个项目已经有了完整认识。摘要要控制在三百字内，清楚说明系统背景、技术栈、核心模块和最终成果。关键词直接写：智慧校园、SpringBoot、Vue、MySQL、管理系统。

5.2 答辩PPT的每一页该放什么

答辩PPT控制在10页以内，每页一个主题。我当时的结构是：

• 第1页：题目、姓名、指导老师；
• 第2页：背景与意义，放一张简单的建设现状问题图；
• 第3页：系统功能结构图，展示六大模块；
• 第4页：技术架构图，浏览器、Vue、SpringBoot、MySQL四层结构；
• 第5页：数据库设计，放核心表的实体关系简图；
• 第6页：核心页面演示截图，每个页面一句话说明；
• 第7页：重点难点分析，包括登录鉴权与多表查询实现思路；
• 第8页：系统测试，放测试用例表；
• 第9页：总结与展望，包括系统的不足与改进方向；
• 第10页：致谢。

这里面技术架构图和功能结构图我用的是画图工具手绘的矩形连线图，没有用复杂图表。现场演示才是重点。我演示时准备了一条固定链路：管理员登录进首页，打开学生管理新增一条数据，再去课程管理选课，最后到成绩管理录入分数，整套动作一分钟内完成，演示完刚好进入老师提问环节。

5.3 我预演时被老师追问的5个问题

在正式答辩前我做了一次组内预演，被问到的几个问题很有代表性，这里整理出来：

1. 为什么选择这个题目？答：校园管理目前存在信息分散、查询效率不高的问题，智慧校园管理系统能整合学生、教师、课程、成绩和考勤数据，是信息化建设的基础模块。技术上也适合用SpringBoot和Vue实现。
2. 系统权限是怎么控制的？答：数据库设计了用户表、角色表和菜单表，后端使用JWT生成登录令牌，拦截器校验请求头中的token，再根据角色查询可访问菜单，实现不同角色看到不同页面。
3. 多表查询做过哪些？答：成绩查询需要关联学生表、课程表和选课表；考勤统计需要关联考勤表和课程表，并分组聚合。
4. 如果并发访问怎么办？答：本项目面向校园内部管理，并发量不大，所以采用MySQL行级锁配合Druid连接池即可。如果要提升并发，可以在网关层做限流，并将热点数据缓存到Redis。
5. 项目的不足是什么？答：没有做移动端适配，没有使用Redis缓存，权限令牌没有做刷新机制。这些是后续可以改进的方向。

第五个问题不是白送的。主动说出不足，再给出改进方向，老师基本不会追问下去。如果你非说“系统没有不足之处”，反而会招来更多尖锐的问题。

整个项目从选型到交付，最磨人的阶段并不是写代码，而是把每个模块之间关系理顺、把数据库表设计好、把部署文档写好。我在完成这套系统之后，最大的体会是：毕设题目越“经典”越容易落地，关键是你得先给自己划一条清晰的边界。智慧校园管理系统本身不代表什么高深技术，但它能完整串联起Java、Vue、SpringBoot和MySQL这四个核心工具，只要坚持谁都能做出来。最后再分享一个我自己在答辩前才补上的小技巧：把初始化SQL里的管理员密码改成123456，并把这句“默认密码”写进部署文档，老师现场测试登录时不会卡在密码输入，这个细节很能提升使用体验。