简介基于 Java Spring Boot Vue MySQL 的前后端分离教务管理系统面向计算机相关专业学生可直接用于课程设计、期末大作业或毕业设计参考。系统涵盖学生信息、课程安排、成绩管理、教师信息与登录认证等核心模块并已完成严格调试配套源码、数据库脚本和论文文档下载后按说明配置即可运行。包内共 584 个文件压缩包约 46.99MB以 Java 后端源码123 个、Vue 前端组件93 个、SVG/PNG/JPG 图标与界面素材、SQL 数据库脚本、XML/JS/CSS 配置文件及项目构建脚本为主另有快捷启动脚本和说明文档目录结构清晰便于二次开发与学习。目前已有 81 人学习/下载适合需要完整可运行教务系统项目、快速理解前后端交互及数据库设计的用户。从内容预览可见项目内置构建/运行批处理脚本、Vue 页面备份文件及核心布局组件便于对比修改、恢复默认界面结合论文与PPT展示文档能帮助使用者掌握从环境搭建到功能实现的全过程具有较高实用与参考价值。1. 基于 javaspringbootvuemysql 的教务管理系统这份资源包里到底有什么毕业设计选管理系统是绝大多数计算机专业学生最稳的一条路。“基于 javaspringbootvuemysql 的教务管理系统”这份资源包把前端、后端、数据库脚本和一篇能直接改的论文打包在了一起解压后看到的不是零散代码而是一条完整的教务管理业务线学生信息维护、教师信息管理、课程安排、成绩录入与查询。它适合两类人一类是时间紧、想快速把项目跑通并完成答辩的大四学生另一类是准备从完整源码里学习前后端分离开发套路的初级工程师。下面我从代码结构、运行步骤、论文写作和踩坑记录四个角度把这份资源彻底拆开。2. 项目技术栈拆解Spring Boot Vue MySQL 这套组合是怎么把教务管理跑起来的把压缩包解压之后我一般不会急着点运行先把目录结构扫一遍。这份资源里的代码分成两个大块backend 是 Spring Boot 后端frontend 是 Vue 前端另外还有一个 .sql 数据库脚本和一篇论文。整个项目是典型的前后端分离架构前端只负责页面渲染和请求发送后端只负责接口和业务逻辑中间用 JSON 报文通信。这一章把这三块的技术细节拆开讲清楚后面你改代码、写论文、答辩的时候都用得上。2.1 后端分层Controller-Service-Mapper 三层结构就是毕设提名的关键Spring Boot 项目的目录一般长这样backend/src/main/java/com/example/school ├── controller │ ├── AuthController.java │ ├── StudentController.java │ ├── TeacherController.java │ ├── CourseController.java │ └── ScoreController.java ├── service │ ├── StudentService.java │ └── impl/StudentServiceImpl.java ├── mapper │ ├── StudentMapper.java │ └── ... ├── entity │ ├── Student.java │ ├── Teacher.java │ ├── Course.java │ └── Score.java └── config ├── CorsConfig.java └── WebConfig.javacontroller 层只做两件事接收 HTTP 请求、把结果包成 JSON 返回service 层写具体业务规则例如“录入成绩时分数必须校验在 0 到 100 之间”mapper 层负责把 Java 对象映射成 SQL 语句组织数据库访问。这套三层结构从 Spring MVC 时代一直延续到今天Spring Boot 只是把配置文件变短了骨架并没有变。答辩时评委问“项目怎么分层的”你按 controller、service、mapper 三层讲再补一句“controller 不做业务、service 不碰 SQL”基本上就不会被追问。具体接口这块学生管理模块的 Controller 一般是这样写的RestController RequestMapping(/api/student) public class StudentController { Autowired private StudentService studentService; GetMapping(/list) public Result list(RequestParam(defaultValue 1) Integer page, RequestParam(defaultValue 10) Integer size) { return Result.ok(studentService.selectByPage(page, size)); } PostMapping(/add) public Result add(RequestBody Student student) { studentService.saveStudent(student); return Result.ok(); } }代码里的 RestController 表示所有方法返回值直接写成 JSON不再拼字符串页面RequestMapping(“/api/student”) 统一了当前类的接口前缀避免每个方法都写一遍路径GetMapping 对应查询、PostMapping 对应新增这是最直观的 HTTP 语义。Result.ok 是一个静态方法把 code、msg、data 三段结构塞进同一个响应体前端拿到之后统一判断 code 是否为 200再决定渲染数据还是弹错误提示。很多毕设都会写这样一个 Result 包装类你改代码的时候不要轻易删删掉之后前端所有请求都要跟着改。还有一个小细节值得看service 层往往会写接口加 impl 实现类两个文件比如 StudentService 和 StudentServiceImpl这在很多毕设里会被当成凑代码量但答辩时老师如果问“为什么要分接口和实现”你可以回答“为了让业务逻辑能单独做单元测试、也方便切换实现方式”这个答案比“大家都这么写”好得多。2.2 前端链路Vue 路由、Axios 请求和页面状态是怎么串起来的前端这一侧用的是 Vue配合 Vue Router 做页面切换Axios 发 HTTP 请求UI 部分用 Element UI 这类组件库把表格和表单快速拼出来。路由配置一般长这样// frontend/src/router/index.js import Vue from vue import Router from vue-router Vue.use(Router) const routes [ { path: /login, component: () import(../views/Login.vue) }, { path: /dashboard, component: () import(../views/Dashboard.vue) }, { path: /student, component: () import(../views/StudentList.vue) }, { path: /course, component: () import(../views/CourseList.vue) }, { path: /score, component: () import(../views/ScoreList.vue) } ] export default new Router({ routes })这里的 routes 数组定义了 URL 和页面组件的对应关系访问 http://localhost:5173/student 时Vue 会把 StudentList.vue 渲染到页面。登录成功后一般用 router.push(‘/dashboard’) 完成跳转而访问需要登录的页面时路由守卫会去 localStorage 找 token找不到就重定向回 /login。教务系统的菜单栏也靠路由配置生成新增一个页面就等于往 routes 里加一条记录再把菜单配置项同步一下。接口请求的封装是另一个关键点// frontend/src/utils/request.js import axios from axios const service axios.create({ baseURL: /api, timeout: 10000 }) service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer token } return config }) export default service创建 axios 实例时指定 baseURL 为 /api这样每个请求方法里只要写 /student/listaxios 会自动拼成 /api/student/list。请求拦截器在每次发出请求前把 localStorage 里的 token 塞进请求头后端用这个 token 判断当前登录用户是谁这是“当前用户只能操作自己有权限的数据”的实现基础。Element UI 的 el-table 再把返回的 data 数组直接绑定到表格上增删改按钮调用对应的 service 方法后刷新表格整条页面链路就闭合了登录 - 拿 token - 请求接口 - 表格渲染。2.3 数据模型核心表的设计和关联关系教务管理系统的核心数据表往往不止五张但最关键的通常是这几张表名主要字段作用userid, username, password, role登录账号与角色区分studentid, student_no, name, class_name, phone学生基础信息teacherid, teacher_no, name, title, phone教师基础信息courseid, course_name, teacher_id, credit, capacity课程信息和对口教师scoreid, student_id, course_id, score选课关系与成绩student、course、score 三张表之间是经典的多对多关系一个学生可以选多门课一门课也可以被多个学生选所以用 score 这张中间表把两边关联起来score 表里的 student_id 和 course_id 就是外键。实际开发里我一般建议用逻辑外键不在表结构里写 FOREIGN KEY 约束因为物理外键在导入数据和删除记录时容易报错而逻辑外键只要在代码里正确传参效果完全一样排查起来也更快。还需要特别留意的是 .sql 文件里的初始化数据。资源包自带的 sql 脚本通常会建好数据库和表再插入一批演示数据比如 admin / 123456 这个管理员账号几个学生、几门课程。这样项目第一次启动之后就能直接登录、直接看到页面效果。如果你导入后登录一直失败优先去 user 表里确认账号数据到底有没有初始化进去这是最常见的登录失败原因别先怀疑代码。3. 全流程复现把这份源码在你自己的电脑上跑起来先让项目跑起来再读代码是我一直以来的原则。很多同学拿到源码第一步是打开 Controller 从头看看两三次也看不出门道反而挫败感很强。换个顺序先把运行环境准备好把数据库导进去把前后端都启动起来看到页面里出现真实数据之后再去读代码这时候每一行代码都对应得上页面上的操作理解速度快很多。这一章就按照这个顺序把复现步骤走一遍。3.1 环境准备JDK / Maven / Node / MySQL 的版本搭配运行前先确认环境我一般会把版本固定在下面这个组合上组件推荐版本注意事项JDK1.88u202 及以后别用 17老框架兼容性差Maven3.6.3 或 3.8.x配置 aliyun 镜像加快依赖下载Node16.x 或 18.x太新的 Node 会让老项目构建报错MySQL5.7 或 8.0字符集统一用 utf8mb4检查命令用下面这一组java -version mvn -version node -v mysql --version四条命令分别输出版本号任何一个输不出来先装对应软件再做下一步。JDK 有一个高频坑如果项目代码里用了 javax 开头的老包需要的是 JDK 8你要是直接装成 17启动阶段基本会直接报 NoClassDefFoundError代码还没看就要先折腾环境。Maven 装完之后记得去 settings.xml 里把镜像源加上不然第一次执行 mvn install 能等二十多分钟IDE 里也尽量指定本机的 Maven 安装目录不要用集成自带的版本内置版本有时会和项目配置不匹配。提示不同组件之间没有强绑定关系但建议先按上面表格的组合来这是这套前后端分离项目最省事的搭配后续再升版本也不冲突。3.2 数据库导入命令行和 Navicat 两种做法把压缩包里后缀为 .sql 的数据库脚本放在一个没有中文路径的目录下打开终端执行mysql -u root -p --default-character-setutf8mb4 db_school.sql回车之后输入 MySQL 的 root 密码脚本会自动建库、建表、插入演示数据。加 --default-character-setutf8mb4 是因为很多旧脚本默认用 latin1不指定字符集会挂中文出现 1366 错误码基本就是字符集问题。如果你习惯用 Navicat也可以右键连接选择“运行 SQL 文件”在弹窗里保持 utf8mb4 编码两种方式没有本质区别。导入完成后确认数据库已经生成再打开后端项目里的 src/main/resources/application.yml重点检查这些配置配置项默认值示例你要做的事spring.datasource.urljdbc:mysql://localhost:3306/school_db?useUnicodetruecharacterEncodingutf8把 school_db 换成实际库名spring.datasource.usernameroot改成你本机用户名spring.datasource.password123456改成你本机密码server.port8080端口被占用时再改这一节最重要的经验是先导入数据库再启动代码不要反过来。很多同学直接启动后端报错之后才想起来数据库没导白白浪费一轮排查。如果你之前在写别的项目时用过 MyBatis-Plus会发现实体类可以直接生成建表 SQL但这份资源不一定用到那个能力导入脚本仍然是最快的路径。3.3 后端启动装依赖、跑 main 方法、看启动日志后端用 IDEA 打开 backend 目录等右下角 Maven 依赖加载进度条消失后在项目启动主类上右键 Run。如果更习惯命令行也可以cd backend mvn clean install -DskipTests mvn spring-boot:run第一次执行 mvn 会下载大量依赖几分钟到十几分钟不等这是正常的看到进度条转完之前不要按 CtrlC。日志里出现 “Tomcat started on port(s): 8080” 这一行说明后端已经起来了。想验证就把浏览器打开 http://localhost:8080/api/student/list能返回一段 JSON 而不是报错页面就说明接口可用。如果看到 “Port 8080 was already in use”说明 8080 被别的程序占了。解决办法是去 application.yml 里把 server.port 改成 8081 或 9090改完之后前端代理配置里的 target 也要同步改到新端口。启动之后别急着关控制台后端日志是接口排错的第一现场接口一旦返回 500优先在日志里搜 Exception 关键字往下翻几行就能看到是 SQL 写错还是空指针比对着代码猜快得多。3.4 前端启动安装依赖、配置代理、打开页面后端起来之后再启动前端。前端项目一般叫 frontend / web 这类名字打开后先做两件事换 npm 镜像源、安装依赖npm config set registry https://registry.npmmirror.com cd frontend npm install npm run devnpm install 卡住或者报 “ETIMEDOUT”基本都是源的问题先换源再重装大概率能过。npm run dev 启动成功后终端会打印本地访问地址Vite 项目默认是 http://localhost:5173老 Vue CLI 项目则是 localhost:8080。这时访问前端页面如果页面能打开但接口数据加载不出来多半是跨域问题。需要在 vite.config.js 或 vue.config.js 里配一个 proxy// vite.config.js export default defineConfig({ server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })这段配置的意思是把所有以 /api 开头的请求转发到 8080 端口的后端服务前端发出的是 /api/student/list后端实际收到的是 http://localhost:8080/api/student/list。这样前端页面和后端接口通过代理连起来浏览器层面就不存在跨域问题了。全部启动后用 admin / 123456 登录一次能看到学生列表和课程列表这整套资源就算真正在你本机跑起来了。如果想把前端打包后塞进 Spring Boot 一起部署npm run build 之后把 dist 目录里的文件复制到 backend/src/main/resources/static 下面启动后端就能直接访问页面毕设现场演示为了省事很多同学会这么干。4. 论文与答辩把已经跑通的系统写成拿高分的毕设文档跑通只是第一步对很多同学来说写论文和准备答辩才是真正花时间的地方。这篇论文资源可以直接用但直接用之前要先做一次“对齐”把论文里的章节标题、图编号、测试数据都跟本机实际跑出来的结果核对一遍避免答辩时被问到“这个页面在哪”却找不到对应位置。4.1 论文结构与项目对应关系绝大多数本科毕设论文是五到七章对照到这套教务管理系统大概是下面这个结构论文章节要写的内容从项目里取什么素材第一章 绪论背景、意义、现状教务管理信息化的趋势第二章 相关技术Spring Boot、Vue、MySQL 特点把选型理由讲清楚第三章 需求分析功能需求与非功能需求模块清单加用例图第四章 系统设计总体架构、功能设计、数据库设计架构图、功能模块图、E-R 图第五章 系统实现核心页面与核心代码讲解截图加关键代码片段第六章 系统测试测试用例、测试结果、结论功能测试加响应时间记录写第二章技术介绍的时候不要直接抄教科书要跟本项目挂钩。比如写“Spring Boot 的自动配置降低了项目搭建成本本系统通过 starter-web 模块构建 REST 接口”这句话既提到了技术又落到了项目上。写第四章数据库设计的时候把 2.3 节里的表结构转成 E-R 图student、course、score 三张表作为实体连线标出多对多关系再给它编一个“图 4-1 系统 E-R 图”的标题这部分就成立了。论文里贴的代码不用多挑 Controller 层的一个接口、Mapper 层的一个 SQL 方法各贴一段配两行文字讲清调用链路就行。如果初稿写出来只有六七千字导师说太单薄你可以把“系统实现”这一章拆开每个功能模块写成一小节例如“学生管理模块实现”“课程管理模块实现”“成绩管理模块实现”每一节里配一张页面截图和一段核心代码再写几步操作说明整篇论文的字数会自然上来而且结构并不虚。查重方面把框架模板里的大段介绍换成自己的表述尤其注意把 Spring Boot、Vue 这类技术名词的语境换成本项目的实际情况而不是复制模板原文。4.2 测试数据组织与答辩演示路径很多毕业论文的系统测试章节只放一张功能测试表其实可以做得更实。把登录、学生增删改查、课程列表、成绩录入几个模块分别建一条测试用例每条用例写操作步骤、预期结果、实际结果、是否通过。执行的时候直接用浏览器操作本机跑起来的项目再用 F12 的 Network 面板记录接口响应时间和状态码。五六个用例就能撑起一整章答辩的时候讲起来也有真实数据支撑。答辩演示的重点是“演示不出错”而不是讲得多深。按照这个演示路径走八分钟以内可以完整讲完先用管理员账号登录打开学生管理页演示添加、修改、删除三个操作再切到课程管理页展示课程列表和教师下拉框里的数据最后进成绩管理录一条成绩并当场刷新页面验证。整个过程不切换页面、不重新启动后端出错的概率就会很低。评委大概率会问下面几类问题提前把答案整理好为什么选 Spring Boot 而不是普通 SSM回答要点是 Spring Boot 内置 Tomcat、自动配置、减少 XML 配置但底层仍然是 Spring MVC MyBatis本质没有变。前后端分离与不分离的区别是什么前端独立开发独立部署两边通过 JSON 交互只要接口不变任何一端的改动不影响另一端。数据库为什么这么设计回到 student、course、score 三张表的多对多关系讲清楚用中间表的原因再说明为什么用逻辑外键。密码是怎么保存的如果原项目没有加密答辩前把密码改成 MD5 加密再入库至少不要在表里存明文密码。其中“为什么不加密密码”是很多项目被问倒的地方建议动手把这个点补上具体做法可以参照第六章里的改造思路。5. 避坑与排查复现这套教务管理系统时遇到的具体问题源码本身能跑通但“能跑通”和“在你机器上跑通”是两回事。复现这套教务管理系统出错点基本都不在 Java 代码的逻辑上而在运行环境和配置。下面六条是我接手这种带数据库的毕设资源时整理出来的踩坑记录每一条都按现象、原因、解决三步走你遇到同类问题直接对号入座。语气上提前说一句下面每条写的现象是当时碰到的原文不一定和你屏幕上的报错一模一样重点看日志关键字别死扣整行报错。5.1 数据库导入报错 1366 或 1067现象执行 mysql db_school.sql 时终端连续报 1366 Incorrect string value或者 1067 Invalid default value导入中断。原因sql 脚本里表结构的字符集不是 utf8mb4或者导入命令没有指定字符集中文数据写入失败。解决命令行里加上 --default-character-setutf8mb4 重新导入如果仍然报错用文本编辑器打开 sql 脚本把 CREATE TABLE 语句里的 CHARSETutf8 全局替换成 CHARSETutf8mb4再导一次。我那次是直接改了脚本之后再用 Navicat 去刷新表结构中文数据就正常了。5.2 npm install 卡住或者报 ETIMEDOUT现象npm install 停在某个包进度不动最后超时中断终端出现 ETIMEDOUT 或 ECONNREFUSED。原因npm 默认官方源在国外国内网络访问不稳定。解决先执行 npm config set registry https://registry.npmmirror.com再用 npm cache clean --force 清缓存然后重新 npm install。如果某个包反复装不上大概率是包版本和 Node 版本不兼容把 Node 切回 16 或 18 再试基本能过。还有一次是项目里旧版本 node-sass 在编译报错信息特别长这时候别去翻前面的报错直接搜索 node-sass 对应 Node 版本用环境变量把编译版本固定住就行。5.3 后端启动报端口被占用现象启动后端不到两秒就报 Port 8080 was already in use日志以 START ERROR 结尾。原因本机某个进程占用了 8080 端口常见的是另一个 Java 进程或者代理工具。解决一条路是找出占用进程并结束它另一条路是改 application.yml 里的 server.port 为 8081同时把前端 proxy 的 target 同步改成 http://localhost:8081。这里最容易漏掉的是改完前端配置后忘记重启 npm run dev导致页面继续请求旧端口。5.4 前端页面打不开接口数据现象页面能显示登录也能进去但列表区域一直转圈或者空白F12 面板里一片红色请求错误。原因前后端没打通。要么后端没启动要么请求被跨域拦截。解决先在浏览器直接访问 http://localhost:8080/api/student/list能返回 JSON 就说明后端没问题再去检查前端代理配置是否指向正确端口。注意改完 vite.config.js 之后必须重启 dev server代理配置不会热更新。我犯过一次蠢改了 proxytarget 忘了重启盯着页面看了十分钟最后换成重新 npm run dev 一瞬间就通了纯属浪费生命。5.5 项目自带数据库配置连不上 MySQL现象启动后端时日志最后一段提示 Failed to configure a Datasource或者 Access denied for user ‘root’。原因application.yml 里的数据库密码和本机实际密码不一致或者数据库名字不存在。解决打开 application.yml把 datasource 的 url、username、password 三项改成真实值。改完重启后端再在浏览器直接访问接口确认是否恢复。如果是 MySQL 8.0驱动版本也要是 8.x 的 mysql-connector-java旧驱动连新库会报 class 错误。另外如果你的 MySQL 恰好是 5.7.44密码加密规则和 8.0 不同驱动版本也别乱换按项目自带的版本走最稳。5.6 刷新页面路由 404现象登录进入 dashboard 后在地址栏直接按回车刷新页面报 404。原因Vue Router 用的 history 模式在本地开发时 dev server 能兜底但如果打包后部署到静态服务器上服务器找不到 /student 这个物理路径。解决本地开发阶段把 router 模式从 history 改成 hash地址栏会变成 #/student刷新不会再 404如果要部署到服务器还需要给 Nginx 配置 try_files 回退到 index.html这一步做好了打包产物放到什么静态服务上都不会有刷新问题。6. 再进一步把毕设项目升级成能写进简历的作品6.1 给系统加一个最简单的角色权限校验教务系统答辩时最容易被问倒的问题是权限控制。如果原项目没有细化到角色粒度可以加一个拦截器按登录用户的角色做强制校验代码量不大但演示效果很好// com/example/school/config/AuthInterceptor.java public class AuthInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { Object role request.getSession().getAttribute(role); String path request.getRequestURI(); if (path.startsWith(/api/admin/) !admin.equals(role)) { response.setStatus(403); return false; } return true; } }再在 WebConfig 里把这个拦截器注册到接口路径上Configuration public class WebConfig implements WebMvcConfigurer { Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(new AuthInterceptor()) .addPathPatterns(/api/**) .excludePathPatterns(/api/auth/login, /api/student/list); } }这样 admin 开头的接口只能由管理员角色访问学生账号访问会被返回 403答辩时演示对比一下比“系统没有权限控制”好太多。如果时间充裕还可以把普通用户和教师的菜单显示也做区分这样既是“能用”也是“可演示”的作品。6.2 用 Postman 和浏览器 F12 做一次完整验证测试章节是论文字数的重要来源也是面试时能拿出来讲的东西。用 Postman 打开登录接口填好用户名密码看返回的 JSON 里有没有 token再打开学生列表接口带上 token 请求一次看数据是否正常返回。每次请求的响应时间在 Postman 右下角直接可见把这些数字写进论文测试章节比“系统运行稳定”这句空话有说服力。浏览器 F12 的 Network 面板同理刷新页面能看到每一条请求的状态码、耗时、响应内容截图放进论文里就是现成的测试材料如果某条请求失败顺着红色请求去查后端日志这是排查问题的第一入口。从那以后我每次接手一个带数据库的毕设资源都会先让自己把 sql 脚本导入、改数据源、启动前后端这整套流程走完再谈改代码和写论文。先跑起来再改对最后才是做成加分项。希望这份教务管理系统也能帮你把毕设这一步走稳希望帮到你。本文还有配套的精品资源点击获取