尧图网站建设 
简介这份资源是面向计算机相关专业学生与Java初学者的一套学生选课系统毕业设计完整源码采用SpringBootMyBatis后端与Vue前端的前后端分离架构数据库使用MySQL 5.7可帮助读者完成课程设计或毕业设计选题并作为Java全栈开发的实践案例。压缩包共126个文件约3.83MB以97个Java源文件为核心辅以bat启动脚本、js与css前端资源、xml与yml配置、sql初始化脚本以及docx说明文档、doc开题报告和ppt答辩材料覆盖从代码到文档的完整交付内容。系统实现管理员管理专业、教师、学生与课程教师审核选课并录入成绩学生选课与查询成绩等完整流程配套说明文档与数据库脚本便于部署运行。目前已有61人学习适合需要完整赛题方案、可运行项目与论文素材的读者参考借鉴。1. 从一份能跑起来的选课系统源码说起这套 SpringBootVue 全栈项目到底值不值得拆如果你正在搜 java 毕业设计、springboot 课程设计源码大概率已经被一堆“只有后端没有前端”“数据库对不上”“跑起来报 404”的压缩包坑过。这份学生选课系统源码springbootvuemysql说明文档LW属于少见的“三件套齐全”类型后端 SpringBoot MyBatis前端 Vue 前后端分离数据库 MySQL 5.7外加一份 .doc 说明文档和开题报告。它解决的不是“教你写代码”而是给你一套能本地跑通、能对着改、能直接拿去答辩的完整工程。适合谁一是 Java 基础刚学完、需要真实项目练手的学生二是被毕业设计卡住、想找一份结构清晰可二次开发的从业者。下面我按“能不能跑 → 怎么跑 → 坑在哪 → 怎么改”的顺序把这份资源拆开讲。2. 环境与目录结构先看清 1-install.bat 到 3-run.bat 这条启动链2.1 技术栈版本锁定与选型理由这套项目的技术栈是典型的“稳字优先”组合不是追新而是为了兼容性和资料丰富度。后端 Java SpringBoot MyBatisJDK 锁定 1.8数据库 MySQL 5.7构建工具 Maven 3.3前端 Vue 2 系从 chunk-vendors 和 app 的 hash 命名能看出是 Vue CLI 打包产物。为什么不用 SpringBoot 3 或 JDK 17因为 SpringBoot 3 要求 JDK 17 起步而大量毕业设计环境、学校机房、老旧笔记本还停留在 JDK 8强行升级只会让“跑不起来”变成常态。MySQL 5.7 同理8.0 的认证插件和驱动类名变化会让不少新手在连接阶段就翻车。组件版本说明JDK1.8编译与运行基准别用 17/21SpringBoot2.x 系与 JDK8 匹配启动类注解为标准 SpringBootApplicationMyBatis3.xXML 映射 注解混用SQL 可读性强MySQL5.7驱动 com.mysql.jdbc.DriverMaven3.3依赖管理pom.xml 为入口Vue2.x前端独立工程npm 安装依赖选型理由很直接这套组合的教程、报错解决方案、面试题覆盖度最高。你遇到问题时搜索引擎能给出的有效答案远多于新版本组合。对于毕业设计这种“时间紧、要交付”的场景稳定比先进重要。2.2 目录里那几个 bat 和配置文件到底管什么拿到压缩包解压后根目录会看到 1-install.bat、2-run.bat、3-build.bat、mvnw.cmd、.classpath、.factorypath 这些文件。很多人直接双击 3-build.bat 然后一脸懵其实顺序是有讲究的。# 1-install.bat 常见内容安装前端依赖或初始化环境 # 典型逻辑以实际文件为准 cd frontend npm install cd .. # 2-run.bat 常见内容启动后端服务 mvn spring-boot:run # 3-build.bat 常见内容打包前端或整体构建 cd frontend npm run build cd .. mvn clean package逻辑说明1-install 负责“把依赖拉下来”2-run 负责“把服务跑起来”3-build 负责“把前端编译成静态资源再打后端包”。参数上mvn spring-boot:run 默认读取 application.yml 里的端口常见 8080前端 dev server 常见 8081 或 8082。如果你先跑 3-build 再跑 2-run前端可能还没 install直接报模块找不到。提示bat 文件用记事本打开先看一遍内容别盲目双击。不同人打包时脚本内容可能被改过以实际内容为准。.classpath 和 .factorypath 是 Eclipse 的项目配置文件说明作者主力开发环境可能是 Eclipse。用 IDEA 打开时这两个文件可以忽略IDEA 会自己识别 Maven 结构。mvnw.cmd 是 Maven Wrapper作用是让你不装 Maven 也能构建但前提是网络能拉到 wrapper 指定的 Maven 版本。2.3 数据库导入与连接配置的对应关系db.sql 是数据库初始化脚本包含建表和初始数据。导入步骤不复杂但连接配置必须和你的本地环境对齐。-- 在 Navicat 或命令行中执行 db.sql CREATE DATABASE IF NOT EXISTS course_selection DEFAULT CHARSET utf8mb4; USE course_selection; -- 后续为建表语句与 INSERT 初始数据导入后打开后端工程的 application.yml 或 application.properties核对四项数据库名、用户名、密码、端口。spring: datasource: url: jdbc:mysql://localhost:3306/course_selection?useUnicodetruecharacterEncodingutf8useSSLfalse username: root password: 你的密码 driver-class-name: com.mysql.jdbc.Driver参数说明useSSLfalse 在 MySQL 5.7 本地环境建议加上否则可能报 SSL 连接警告甚至失败characterEncodingutf8 防止中文乱码driver-class-name 在 5.7 下用 com.mysql.jdbc.Driver如果你误装了 8.0 驱动类名要改成 com.mysql.cj.jdbc.Driver否则启动直接抛异常。数据库名要和 db.sql 里 CREATE DATABASE 的名字一致不一致就手动改配置别去改 SQL 文件。3. 后端接口与业务逻辑管理员、教师、学生三条角色链怎么串3.1 角色权限与核心表结构这套系统的业务主线是三条角色链管理员管基础数据专业、教师、学生、课程教师管教学动作查学生、查课程、审核选课、打分学生管选课和查成绩。对应到数据库核心表通常包括用户表、角色表、专业表、教师表、学生表、课程表、选课表、成绩表。选课表是枢纽它连接学生和课程同时承载“审核状态”字段。表名常见命名作用关键字段student学生信息id, name, major_idteacher教师信息id, name, titlecourse课程信息id, name, teacher_id, capacitycourse_selection选课记录id, student_id, course_id, statusscore成绩记录id, selection_id, scorestatus 字段是教师审核的落点常见值 0 待审核、1 通过、2 驳回。成绩表可以独立也可以并在选课表里看作者设计。理解这张关系图后面改功能才不会牵一发动全身。3.2 一个典型接口的请求链路以“学生选课”为例从前端点击到数据库写入链路是Vue 组件发 axios 请求 → Controller 接收 → Service 处理业务判断容量、是否重复选→ Mapper 执行 SQL → 返回结果。后端 Controller 常见写法RestController RequestMapping(/api/selection) public class SelectionController { Autowired private SelectionService selectionService; // 学生选课接口 PostMapping(/add) public Result add(RequestBody SelectionDTO dto) { // dto 包含 studentId 和 courseId return selectionService.addSelection(dto); } }逻辑说明RestController 返回 JSONRequestBody 把前端 JSON 映射成 DTO。Service 层要做三件事查课程容量是否已满、查该学生是否已选过这门课、写入选课记录并设 status0。参数上studentId 一般从登录态里取而不是前端传但毕业设计项目为了简单常直接传这也是后面可以优化的点。Service public class SelectionServiceImpl implements SelectionService { Autowired private SelectionMapper selectionMapper; Override public Result addSelection(SelectionDTO dto) { // 1. 检查是否重复选课 int count selectionMapper.countByStudentAndCourse(dto.getStudentId(), dto.getCourseId()); if (count 0) { return Result.error(已选过该课程); } // 2. 检查容量 Course course selectionMapper.getCourseById(dto.getCourseId()); if (course.getSelected() course.getCapacity()) { return Result.error(课程已满); } // 3. 写入 selectionMapper.insert(dto); return Result.success(); } }这段代码是业务核心参数含义countByStudentAndCourse 防重复getCourseById 拿容量insert 落库。失败时看什么如果返回“已选过”但数据库没有记录检查 SQL 的 where 条件是否写错字段如果容量判断永远不触发检查 selected 字段有没有在选课时自增。3.3 教师审核与成绩录入的实现要点教师端两个动作审核选课和录入成绩。审核本质是 update status 字段成绩录入是 insert 或 update 成绩表。常见坑是审核后学生端没刷新因为前端没重新拉列表。后端接口本身简单PostMapping(/audit) public Result audit(RequestBody AuditDTO dto) { // dto: selectionId, status selectionMapper.updateStatus(dto.getSelectionId(), dto.getStatus()); return Result.success(); }参数说明status 传 1 通过、2 驳回。成绩录入时要注意只有审核通过的选课才能打分所以 Service 里要先查 status 是否为 1。如果跳过这步会出现“未审核也能打分”的逻辑漏洞答辩时容易被问住。4. 前端 Vue 工程与前后端联调npm 装依赖到跨域那点事4.1 前端依赖安装与启动前端是独立 Vue 工程目录里能看到 app.541519f5.css、chunk-vendors.0fdd4e14.css 这类打包产物说明作者已经 build 过。你要二次开发得进前端源码目录常见 frontend 或 vue 目录重新装依赖。# 进入前端目录 cd frontend # 安装依赖建议用淘宝源或官方源 npm install # 本地启动开发服务器 npm run serve逻辑说明npm install 读取 package.json 拉取依赖node_modules 生成后 npm run serve 启动 dev server。参数上serve 脚本在 package.json 的 scripts 里定义常见端口 8080 或 8081。如果 install 卡住先换源npm config set registry https://registry.npmmirror.com。如果 serve 报 node-sass 编译错误多半是 Node 版本太高降到 14 或 16 再试。4.2 跨域与接口代理配置前后端分离最常翻车的就是跨域。前端跑在 8081后端跑在 8080浏览器直接请求会拦。Vue CLI 项目一般在 vue.config.js 里配 proxy。module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true, pathRewrite: { ^/api: /api } } } } }逻辑说明所有以 /api 开头的请求被代理到后端 8080changeOrigin 让后端看到的是同源请求。参数上pathRewrite 看后端接口是否带 /api 前缀带就不重写不带就重写掉。如果配了代理还报 404先确认后端接口路径和前端请求路径是否完全一致大小写都算。4.3 登录态与角色菜单的联动前端登录后一般把用户信息和角色存 localStorage 或 Vuex然后根据角色渲染不同菜单。学生看到选课和成绩教师看到审核和打分管理员看到基础数据管理。常见问题是刷新后菜单丢失因为状态没持久化。解决方式是把角色写进 localStorage路由守卫里读取判断。// 路由守卫示例 router.beforeEach((to, from, next) { const role localStorage.getItem(role); if (to.meta.requiresAuth !role) { next(/login); } else { next(); } });参数说明to.meta.requiresAuth 在路由配置里标记哪些页面需要登录。这段逻辑不复杂但漏了就会出现“不登录也能进主页”的尴尬答辩演示时很致命。5. 避坑与排查从 JDK 版本到 MySQL 驱动的 5 个血泪记录5.1 启动报 Unsupported major.minor version现象mvn spring-boot:run 或 java -jar 启动时抛 Unsupported major.minor version 52.0 或 61.0。原因编译用的 JDK 和运行用的 JDK 版本不一致52 对应 JDK861 对应 JDK17。解决统一用 JDK1.8检查 IDEA 的 Project Structure 和 Maven 的 compiler 插件配置确保 source 和 target 都是 1.8。5.2 数据库连接报 Access denied 或 Unknown database现象启动时连不上数据库报 Access denied for user 或 Unknown database。原因application.yml 里的用户名、密码、数据库名和本地实际不一致。解决先用 Navicat 或命令行确认能登录再逐字核对配置。密码里有特殊字符要加引号数据库名大小写敏感的环境要完全一致。5.3 前端 npm install 卡在 node-sass现象npm install 长时间卡住或报 node-sass 编译失败。原因node-sass 对 Node 版本敏感高版本 Node 不兼容旧版 node-sass。解决降 Node 到 14/16或把 node-sass 换成 sassdart-sass。换之前先看 package.json 里锁的版本别盲目改。5.4 接口 404 但后端日志无请求现象前端请求报 404后端控制台没有任何日志。原因请求根本没到后端被前端代理或路径问题拦了。解决打开浏览器 F12 看 Network 里请求的真实 URL对比 vue.config.js 的 proxy 和后端 Controller 的 RequestMapping确认前缀是否匹配。5.5 中文乱码从数据库到页面现象课程名或学生姓名显示为问号或乱码。原因数据库字符集、连接 URL 字符集、前端页面编码三者不一致。解决数据库建库用 utf8mb4连接 URL 加 characterEncodingutf8前端 index.html 声明 charsetutf-8。三处都对齐乱码基本消失。6. 二次开发与答辩加分把选课系统改成你自己的东西6.1 最小改动清单换皮、加字段、改逻辑直接拿原项目答辩风险在于“撞车”。最小改动从三处入手一是换前端主题色和标题改 App.vue 和全局样式二是给课程表加字段比如加“上课时间”“学分”同步改实体类、Mapper XML、前端表单三是改业务规则比如把“先到先得”改成“按绩点排序”在 Service 层加排序逻辑。这三步做完项目就有了你的痕迹。6.2 用 Postman 验证接口再动前端改后端时别急着开前端先用 Postman 或 Apifox 把接口跑通。以选课接口为例构造 JSON body{ studentId: 1, courseId: 3 }发送到 http://localhost:8080/api/selection/add看返回码和返回体。接口通了再动前端能省掉一半排查时间。这个习惯我每次改后端都强制走一遍因为前后端同时改出问题你根本不知道是哪边的锅。6.3 答辩演示的稳定化技巧答辩现场最怕环境问题。提前做三件事一是把数据库导出成 SQL 随身带换机器能快速恢复二是把前端 build 成静态资源塞进后端 static 目录只启动一个服务减少端口冲突三是准备一份接口文档或说明文档的截图老师问“这个功能怎么实现的”时能直接指。说明文档和开题报告别只当摆设里面写的设计思路就是你答辩的话术来源。6.4 从这套源码能延伸学什么这套项目的价值不止于交付。你可以顺着它学 MyBatis 的 XML 映射怎么写动态 SQL学 Vue 的组件通信和路由守卫学 Maven 的多模块拆分。如果想加亮点可以引入 Redis 缓存课程容量、用 Spring Security 替换手写登录态、把选课逻辑改成乐观锁防超卖。这些延伸不需要全做挑一个做深答辩时就是加分项。希望帮到你。本文还有配套的精品资源点击获取 SpringBoot+Vue学生选课系统源码：从环境搭建到二次开发全解析
简介这份资源是面向计算机相关专业学生与Java初学者的一套学生选课系统毕业设计完整源码采用SpringBootMyBatis后端与Vue前端的前后端分离架构数据库使用MySQL 5.7可帮助读者完成课程设计或毕业设计选题并作为Java全栈开发的实践案例。压缩包共126个文件约3.83MB以97个Java源文件为核心辅以bat启动脚本、js与css前端资源、xml与yml配置、sql初始化脚本以及docx说明文档、doc开题报告和ppt答辩材料覆盖从代码到文档的完整交付内容。系统实现管理员管理专业、教师、学生与课程教师审核选课并录入成绩学生选课与查询成绩等完整流程配套说明文档与数据库脚本便于部署运行。目前已有61人学习适合需要完整赛题方案、可运行项目与论文素材的读者参考借鉴。1. 从一份能跑起来的选课系统源码说起这套 SpringBootVue 全栈项目到底值不值得拆如果你正在搜 java 毕业设计、springboot 课程设计源码大概率已经被一堆“只有后端没有前端”“数据库对不上”“跑起来报 404”的压缩包坑过。这份学生选课系统源码springbootvuemysql说明文档LW属于少见的“三件套齐全”类型后端 SpringBoot MyBatis前端 Vue 前后端分离数据库 MySQL 5.7外加一份 .doc 说明文档和开题报告。它解决的不是“教你写代码”而是给你一套能本地跑通、能对着改、能直接拿去答辩的完整工程。适合谁一是 Java 基础刚学完、需要真实项目练手的学生二是被毕业设计卡住、想找一份结构清晰可二次开发的从业者。下面我按“能不能跑 → 怎么跑 → 坑在哪 → 怎么改”的顺序把这份资源拆开讲。2. 环境与目录结构先看清 1-install.bat 到 3-run.bat 这条启动链2.1 技术栈版本锁定与选型理由这套项目的技术栈是典型的“稳字优先”组合不是追新而是为了兼容性和资料丰富度。后端 Java SpringBoot MyBatisJDK 锁定 1.8数据库 MySQL 5.7构建工具 Maven 3.3前端 Vue 2 系从 chunk-vendors 和 app 的 hash 命名能看出是 Vue CLI 打包产物。为什么不用 SpringBoot 3 或 JDK 17因为 SpringBoot 3 要求 JDK 17 起步而大量毕业设计环境、学校机房、老旧笔记本还停留在 JDK 8强行升级只会让“跑不起来”变成常态。MySQL 5.7 同理8.0 的认证插件和驱动类名变化会让不少新手在连接阶段就翻车。组件版本说明JDK1.8编译与运行基准别用 17/21SpringBoot2.x 系与 JDK8 匹配启动类注解为标准 SpringBootApplicationMyBatis3.xXML 映射 注解混用SQL 可读性强MySQL5.7驱动 com.mysql.jdbc.DriverMaven3.3依赖管理pom.xml 为入口Vue2.x前端独立工程npm 安装依赖选型理由很直接这套组合的教程、报错解决方案、面试题覆盖度最高。你遇到问题时搜索引擎能给出的有效答案远多于新版本组合。对于毕业设计这种“时间紧、要交付”的场景稳定比先进重要。2.2 目录里那几个 bat 和配置文件到底管什么拿到压缩包解压后根目录会看到 1-install.bat、2-run.bat、3-build.bat、mvnw.cmd、.classpath、.factorypath 这些文件。很多人直接双击 3-build.bat 然后一脸懵其实顺序是有讲究的。# 1-install.bat 常见内容安装前端依赖或初始化环境 # 典型逻辑以实际文件为准 cd frontend npm install cd .. # 2-run.bat 常见内容启动后端服务 mvn spring-boot:run # 3-build.bat 常见内容打包前端或整体构建 cd frontend npm run build cd .. mvn clean package逻辑说明1-install 负责“把依赖拉下来”2-run 负责“把服务跑起来”3-build 负责“把前端编译成静态资源再打后端包”。参数上mvn spring-boot:run 默认读取 application.yml 里的端口常见 8080前端 dev server 常见 8081 或 8082。如果你先跑 3-build 再跑 2-run前端可能还没 install直接报模块找不到。提示bat 文件用记事本打开先看一遍内容别盲目双击。不同人打包时脚本内容可能被改过以实际内容为准。.classpath 和 .factorypath 是 Eclipse 的项目配置文件说明作者主力开发环境可能是 Eclipse。用 IDEA 打开时这两个文件可以忽略IDEA 会自己识别 Maven 结构。mvnw.cmd 是 Maven Wrapper作用是让你不装 Maven 也能构建但前提是网络能拉到 wrapper 指定的 Maven 版本。2.3 数据库导入与连接配置的对应关系db.sql 是数据库初始化脚本包含建表和初始数据。导入步骤不复杂但连接配置必须和你的本地环境对齐。-- 在 Navicat 或命令行中执行 db.sql CREATE DATABASE IF NOT EXISTS course_selection DEFAULT CHARSET utf8mb4; USE course_selection; -- 后续为建表语句与 INSERT 初始数据导入后打开后端工程的 application.yml 或 application.properties核对四项数据库名、用户名、密码、端口。spring: datasource: url: jdbc:mysql://localhost:3306/course_selection?useUnicodetruecharacterEncodingutf8useSSLfalse username: root password: 你的密码 driver-class-name: com.mysql.jdbc.Driver参数说明useSSLfalse 在 MySQL 5.7 本地环境建议加上否则可能报 SSL 连接警告甚至失败characterEncodingutf8 防止中文乱码driver-class-name 在 5.7 下用 com.mysql.jdbc.Driver如果你误装了 8.0 驱动类名要改成 com.mysql.cj.jdbc.Driver否则启动直接抛异常。数据库名要和 db.sql 里 CREATE DATABASE 的名字一致不一致就手动改配置别去改 SQL 文件。3. 后端接口与业务逻辑管理员、教师、学生三条角色链怎么串3.1 角色权限与核心表结构这套系统的业务主线是三条角色链管理员管基础数据专业、教师、学生、课程教师管教学动作查学生、查课程、审核选课、打分学生管选课和查成绩。对应到数据库核心表通常包括用户表、角色表、专业表、教师表、学生表、课程表、选课表、成绩表。选课表是枢纽它连接学生和课程同时承载“审核状态”字段。表名常见命名作用关键字段student学生信息id, name, major_idteacher教师信息id, name, titlecourse课程信息id, name, teacher_id, capacitycourse_selection选课记录id, student_id, course_id, statusscore成绩记录id, selection_id, scorestatus 字段是教师审核的落点常见值 0 待审核、1 通过、2 驳回。成绩表可以独立也可以并在选课表里看作者设计。理解这张关系图后面改功能才不会牵一发动全身。3.2 一个典型接口的请求链路以“学生选课”为例从前端点击到数据库写入链路是Vue 组件发 axios 请求 → Controller 接收 → Service 处理业务判断容量、是否重复选→ Mapper 执行 SQL → 返回结果。后端 Controller 常见写法RestController RequestMapping(/api/selection) public class SelectionController { Autowired private SelectionService selectionService; // 学生选课接口 PostMapping(/add) public Result add(RequestBody SelectionDTO dto) { // dto 包含 studentId 和 courseId return selectionService.addSelection(dto); } }逻辑说明RestController 返回 JSONRequestBody 把前端 JSON 映射成 DTO。Service 层要做三件事查课程容量是否已满、查该学生是否已选过这门课、写入选课记录并设 status0。参数上studentId 一般从登录态里取而不是前端传但毕业设计项目为了简单常直接传这也是后面可以优化的点。Service public class SelectionServiceImpl implements SelectionService { Autowired private SelectionMapper selectionMapper; Override public Result addSelection(SelectionDTO dto) { // 1. 检查是否重复选课 int count selectionMapper.countByStudentAndCourse(dto.getStudentId(), dto.getCourseId()); if (count 0) { return Result.error(已选过该课程); } // 2. 检查容量 Course course selectionMapper.getCourseById(dto.getCourseId()); if (course.getSelected() course.getCapacity()) { return Result.error(课程已满); } // 3. 写入 selectionMapper.insert(dto); return Result.success(); } }这段代码是业务核心参数含义countByStudentAndCourse 防重复getCourseById 拿容量insert 落库。失败时看什么如果返回“已选过”但数据库没有记录检查 SQL 的 where 条件是否写错字段如果容量判断永远不触发检查 selected 字段有没有在选课时自增。3.3 教师审核与成绩录入的实现要点教师端两个动作审核选课和录入成绩。审核本质是 update status 字段成绩录入是 insert 或 update 成绩表。常见坑是审核后学生端没刷新因为前端没重新拉列表。后端接口本身简单PostMapping(/audit) public Result audit(RequestBody AuditDTO dto) { // dto: selectionId, status selectionMapper.updateStatus(dto.getSelectionId(), dto.getStatus()); return Result.success(); }参数说明status 传 1 通过、2 驳回。成绩录入时要注意只有审核通过的选课才能打分所以 Service 里要先查 status 是否为 1。如果跳过这步会出现“未审核也能打分”的逻辑漏洞答辩时容易被问住。4. 前端 Vue 工程与前后端联调npm 装依赖到跨域那点事4.1 前端依赖安装与启动前端是独立 Vue 工程目录里能看到 app.541519f5.css、chunk-vendors.0fdd4e14.css 这类打包产物说明作者已经 build 过。你要二次开发得进前端源码目录常见 frontend 或 vue 目录重新装依赖。# 进入前端目录 cd frontend # 安装依赖建议用淘宝源或官方源 npm install # 本地启动开发服务器 npm run serve逻辑说明npm install 读取 package.json 拉取依赖node_modules 生成后 npm run serve 启动 dev server。参数上serve 脚本在 package.json 的 scripts 里定义常见端口 8080 或 8081。如果 install 卡住先换源npm config set registry https://registry.npmmirror.com。如果 serve 报 node-sass 编译错误多半是 Node 版本太高降到 14 或 16 再试。4.2 跨域与接口代理配置前后端分离最常翻车的就是跨域。前端跑在 8081后端跑在 8080浏览器直接请求会拦。Vue CLI 项目一般在 vue.config.js 里配 proxy。module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true, pathRewrite: { ^/api: /api } } } } }逻辑说明所有以 /api 开头的请求被代理到后端 8080changeOrigin 让后端看到的是同源请求。参数上pathRewrite 看后端接口是否带 /api 前缀带就不重写不带就重写掉。如果配了代理还报 404先确认后端接口路径和前端请求路径是否完全一致大小写都算。4.3 登录态与角色菜单的联动前端登录后一般把用户信息和角色存 localStorage 或 Vuex然后根据角色渲染不同菜单。学生看到选课和成绩教师看到审核和打分管理员看到基础数据管理。常见问题是刷新后菜单丢失因为状态没持久化。解决方式是把角色写进 localStorage路由守卫里读取判断。// 路由守卫示例 router.beforeEach((to, from, next) { const role localStorage.getItem(role); if (to.meta.requiresAuth !role) { next(/login); } else { next(); } });参数说明to.meta.requiresAuth 在路由配置里标记哪些页面需要登录。这段逻辑不复杂但漏了就会出现“不登录也能进主页”的尴尬答辩演示时很致命。5. 避坑与排查从 JDK 版本到 MySQL 驱动的 5 个血泪记录5.1 启动报 Unsupported major.minor version现象mvn spring-boot:run 或 java -jar 启动时抛 Unsupported major.minor version 52.0 或 61.0。原因编译用的 JDK 和运行用的 JDK 版本不一致52 对应 JDK861 对应 JDK17。解决统一用 JDK1.8检查 IDEA 的 Project Structure 和 Maven 的 compiler 插件配置确保 source 和 target 都是 1.8。5.2 数据库连接报 Access denied 或 Unknown database现象启动时连不上数据库报 Access denied for user 或 Unknown database。原因application.yml 里的用户名、密码、数据库名和本地实际不一致。解决先用 Navicat 或命令行确认能登录再逐字核对配置。密码里有特殊字符要加引号数据库名大小写敏感的环境要完全一致。5.3 前端 npm install 卡在 node-sass现象npm install 长时间卡住或报 node-sass 编译失败。原因node-sass 对 Node 版本敏感高版本 Node 不兼容旧版 node-sass。解决降 Node 到 14/16或把 node-sass 换成 sassdart-sass。换之前先看 package.json 里锁的版本别盲目改。5.4 接口 404 但后端日志无请求现象前端请求报 404后端控制台没有任何日志。原因请求根本没到后端被前端代理或路径问题拦了。解决打开浏览器 F12 看 Network 里请求的真实 URL对比 vue.config.js 的 proxy 和后端 Controller 的 RequestMapping确认前缀是否匹配。5.5 中文乱码从数据库到页面现象课程名或学生姓名显示为问号或乱码。原因数据库字符集、连接 URL 字符集、前端页面编码三者不一致。解决数据库建库用 utf8mb4连接 URL 加 characterEncodingutf8前端 index.html 声明 charsetutf-8。三处都对齐乱码基本消失。6. 二次开发与答辩加分把选课系统改成你自己的东西6.1 最小改动清单换皮、加字段、改逻辑直接拿原项目答辩风险在于“撞车”。最小改动从三处入手一是换前端主题色和标题改 App.vue 和全局样式二是给课程表加字段比如加“上课时间”“学分”同步改实体类、Mapper XML、前端表单三是改业务规则比如把“先到先得”改成“按绩点排序”在 Service 层加排序逻辑。这三步做完项目就有了你的痕迹。6.2 用 Postman 验证接口再动前端改后端时别急着开前端先用 Postman 或 Apifox 把接口跑通。以选课接口为例构造 JSON body{ studentId: 1, courseId: 3 }发送到 http://localhost:8080/api/selection/add看返回码和返回体。接口通了再动前端能省掉一半排查时间。这个习惯我每次改后端都强制走一遍因为前后端同时改出问题你根本不知道是哪边的锅。6.3 答辩演示的稳定化技巧答辩现场最怕环境问题。提前做三件事一是把数据库导出成 SQL 随身带换机器能快速恢复二是把前端 build 成静态资源塞进后端 static 目录只启动一个服务减少端口冲突三是准备一份接口文档或说明文档的截图老师问“这个功能怎么实现的”时能直接指。说明文档和开题报告别只当摆设里面写的设计思路就是你答辩的话术来源。6.4 从这套源码能延伸学什么这套项目的价值不止于交付。你可以顺着它学 MyBatis 的 XML 映射怎么写动态 SQL学 Vue 的组件通信和路由守卫学 Maven 的多模块拆分。如果想加亮点可以引入 Redis 缓存课程容量、用 Spring Security 替换手写登录态、把选课逻辑改成乐观锁防超卖。这些延伸不需要全做挑一个做深答辩时就是加分项。希望帮到你。本文还有配套的精品资源点击获取