SpringBoot+Vue框架程序设计|教务管理系统的设计与实现(功能演示+说明文档)
引言
高校教务工作覆盖课程发布、学生选课、教师授课、成绩录入、公告通知等多个环节。传统处理方式往往依赖表格、纸质通知或线下沟通,数据分散在不同人员手中,管理员需要反复汇总,教师难以及时看到选课学生,学生也需要在多个渠道确认课程和成绩信息。
本项目围绕“教务管理系统”这一典型毕业设计课题展开,使用 Spring Boot 提供后端接口,使用 Vue 构建后台交互界面,使用 MySQL 保存业务数据。系统的目标不是堆叠复杂功能,而是把教务流程中最常见、最核心的角色协作跑通:管理员维护基础数据,学生完成课程选择,教师查看选课情况并录入成绩,最终让学生能够查看自己的学习结果。
从演示效果看,系统采用统一后台布局,左侧菜单根据登录身份动态切换,页面以表单、列表、详情和分页操作为主,适合课程设计、毕业设计答辩和 Java Web 项目学习参考。
系统概述
本系统面向管理员、教师、学生三类用户。管理员负责维护通知公告、课程、教师、学生和成绩等基础数据;教师负责查看公告、查看自己课程下的学生、录入和维护成绩,同时可以更新个人资料;学生负责查看公告、浏览课程、在线选课、查看个人选课和个人成绩。
主要业务链路为:管理员维护课程与人员信息,学生登录后查看课程并提交选课,教师在“我的学生”或成绩管理页面根据选课记录录入成绩,学生再在“我的成绩”页面查看结果。系统通过会话存储记录当前账号和角色,前端菜单据此展示对应功能,后端接口按业务模块拆分,整体结构清晰,适合学习前后端分离项目的完整开发过程。
技术架构
系统服务端采用 Spring Boot 2.5.3,运行环境为 Java 1.8;数据访问层使用 MyBatis Spring Boot Starter 2.2.0,数据库为 MySQL。前端采用 Vue 3.2.13,配合 Vue Router、Vuex、Element Plus、Axios、ECharts 和 WangEditor 完成页面路由、表单表格、接口调用、图表和富文本编辑。
| 层次 | 技术选型 | 说明 |
|---|---|---|
| 表现层 | Vue 3.2.13、Element Plus、Axios | 实现登录、菜单、列表、表单、详情、分页和角色页面切换 |
| 业务层 | Spring Boot 2.5.3、Java 1.8 | 提供管理员、教师、学生、课程、公告、选课、成绩等 REST 风格接口 |
| 数据层 | MySQL、MyBatis 2.2.0 | 通过 Mapper 接口和 XML SQL 完成业务表的增删改查 |
后端服务端口为 8088,上下文路径为 /academicaffairsmanagementsystem。前端请求统一指向本地后端的 /api 业务前缀,接口响应包含 code、msg、resdata、count 和 totalPage 字段,便于前端统一处理分页和操作结果。
核心功能说明
通知公告管理
管理员进入“通知公告管理”后,可以新增、查询、编辑、删除和查看公告详情。添加页面包含标题输入框和富文本编辑器,适合发布考试安排、课程调整、实习通知等较长内容;提交后,后端保存公告标题、内容和发布时间,教师与学生可在公告列表中查看。

课程管理
课程是教务系统的核心基础数据。管理员在课程管理页面可以按课程名称、类型、任课教师进行检索,列表展示课程名称、类型、任课教师、上课教室、上课时间、所修学分和课程描述,并提供详情、编辑、删除操作。学生端的课程列表复用这些数据,为在线选课提供来源。

学生注册与学生资料
系统包含学生信息采集与维护能力,字段覆盖学号、登录凭据、姓名、性别、联系方式、入学日期、专业、班级、备注和注册时间。管理员可以在学生管理页面维护学生数据,学生本人也可以在个人中心修改基础资料。

在线选课
学生登录后进入“在线选课管理”,可以在课程列表中选择课程,并在“我的选课”页面查看已选记录。系统记录课程、学生和选课时间,页面提供详情与取消选课操作。教师端可以查看与自己课程相关的学生记录,为成绩录入做准备。

教师个人中心
教师角色除了处理成绩,还可以在个人中心维护本人资料。页面展示教师工号、姓名、性别、联系方式、电子邮箱、学历、专业和备注等字段,提交后通过教师接口更新数据库。这个模块体现了系统对不同角色自助维护的支持。

成绩录入与维护
教师在成绩管理中根据学生选课记录录入成绩。添加成绩页面会展示课程、学生和选课时间,教师填写成绩后提交,后端保存选课编号、课程、学生、分数、任课教师和录入时间。管理员也可以统一查询和维护成绩数据,学生端则只查看自己的成绩。

数据库设计
系统数据库包含 7 张核心业务表,结构紧贴教务流程。
- admin:管理员表,保存管理员账号、密码和身份字段,用于管理员登录。
- teacher:教师表,保存教师工号、姓名、性别、联系方式、邮箱、学历、专业、备注和注册时间。
- student:学生表,保存学号、姓名、性别、联系方式、入学日期、专业、班级、备注和注册时间。
- notice:通知公告表,保存公告标题、公告内容和发布时间。
- course:课程表,保存课程名称、类型、任课教师、教室、上课时间、学分和课程描述。
- onlinecousel:在线选课表,保存课程编号、学生学号和选课时间,是学生与课程之间的关系记录。
- achievement:成绩表,保存选课编号、课程编号、学生学号、成绩、任课教师和录入时间。
数据库表之间的关系比较直观:课程表提供可选课程,学生表提供选课主体,在线选课表记录学生与课程的对应关系,成绩表再基于选课记录保存分数。这种设计便于列表查询、详情展示和按角色过滤数据。
界面与交互展示
系统界面以后台管理风格为主,左侧为深色菜单,右侧为业务内容区域。管理员菜单包含通知公告、学生、教师、课程、成绩和系统管理;教师菜单包含通知公告、成绩管理和个人中心;学生菜单包含通知公告、在线选课、成绩和个人中心。
登录入口支持按角色进入系统,进入后台后再由路由守卫和会话数据控制访问。个人中心中的修改密码页面要求输入原密码、新密码和确认密码,适合在部署后提醒用户及时更换默认演示口令。

部署与运行要点
运行环境建议使用 JDK 1.8、Maven 3.x、Node.js、npm、MySQL 5.7 或 MySQL 8.x。部署时先创建数据库 academicaffairsmanagementsystem,再导入 db 目录下的 SQL 脚本初始化表结构和演示数据。
后端进入 academicaffairsmanagementsystem-server 目录,检查 application.yml 中的数据库地址、用户名、密码和上传目录配置,然后执行 mvn spring-boot:run 启动服务。前端进入 academicaffairsmanagementsystem-web 目录,首次运行执行 npm install,开发环境执行 npm run serve,浏览器访问 Vue 开发服务地址即可进入系统。生产环境请修改默认管理员、教师和学生账号密码,不要沿用演示环境配置。
总结
这个教务管理系统覆盖了 Java Web 毕业设计中常见的完整链路:角色登录、菜单权限、基础数据维护、在线选课、成绩录入、个人中心、文件接口和数据库持久化。项目结构较清晰,后端按 Controller、Service、Mapper、Model 分层,前端按路由和业务页面组织,适合用于学习 Spring Boot、Vue、MyBatis 和 MySQL 的前后端分离开发。
后续如果继续扩展,可以增加课表冲突检测、选课人数限制、成绩统计图表、公告附件、消息提醒、操作日志和移动端页面,让系统更贴近真实教务平台。
更多推荐
所有评论(0)