如果你是一名计算机专业的学生或者正在准备求职简历那么“学生选课系统”这个项目你一定不陌生。它几乎是每个Java开发者简历上的“标配”也是课程设计、毕业设计的经典选题。然而一个残酷的现实是很多同学花费数周搭建的系统要么功能残缺、界面简陋要么代码混乱、难以二次开发最终只能沦为简历上苍白的一行字经不起面试官的深入追问。今天要讨论的不是又一个简单的“增删改查”Demo。我们真正要解决的是如何在1小时内获得一个架构清晰、前后端分离、功能完整、可直接运行的SpringBootVue学生选课系统。这听起来像营销口号但背后的价值在于让你跳过繁琐的环境搭建和基础CRUD编码直接聚焦于业务逻辑理解、代码结构学习和项目亮点挖掘从而将宝贵的时间投入到技术深度的提升上。本文将带你从零开始手把手部署并剖析这个“开箱即用”的项目。我们不仅会跑通它更会深入其内部拆解SpringBoot如何优雅地处理Web请求、管理事务Vue前端如何与后端交互以及整个项目的工程化设计。最终你将得到的不仅是一个能运行的“毕设/简历项目”更是一套可以举一反三、用于构建其他管理系统的可复用技术框架和最佳实践。1. 为什么你需要一个“开箱即用”的选课系统在深入代码之前我们必须先明确这个项目的核心价值。对于学生和初级开发者而言自己从零搭建一个系统面临诸多挑战环境配置陷阱Node.js、NPM、Maven、MySQL版本兼容性问题层出不穷可能半天时间都耗在“为什么跑不起来”上。架构选择困难是选择JSP、Thymeleaf还是前后端分离路由、状态管理、API设计该如何开始代码质量参差自己写的代码往往缺乏工程化规范包结构混乱没有分层后续扩展和维护困难。功能完整性缺失容易只实现核心的选课逻辑忽略用户管理、权限控制、数据校验、异常处理等生产级必备功能。时间成本高昂从需求分析、数据库设计到前后端编码、调试、部署完整流程可能耗费数周挤压了学习核心技术的时间。因此一个经过打磨的、完整的开源项目源码其价值远超过它本身的功能。它为你提供了一个高起点的学习样板。你可以快速获得成就感1小时内看到成果建立正向反馈。学习最佳实践观察成熟的包结构、代码分层Controller, Service, Mapper、RESTful API设计。调试与修改在运行的基础上修改业务逻辑比凭空编写更容易理解数据流动。准备面试你可以清晰地说出这个项目的技术栈、架构设计、遇到的难点和解决方案。接下来我们就将这个价值落地开始实战。2. 项目核心架构与技术栈解析本项目采用经典且主流的前后端分离架构这是目前企业级Web开发的标配。后端 (Backend):框架: Spring Boot 2.x。它简化了Spring应用的初始搭建和开发过程提供了自动配置、起步依赖等强大功能。持久层: MyBatis-Plus。这是对MyBatis的增强工具在提供CRUD基础功能的同时保留了MyBatis的灵活性能极大减少单表操作的SQL编写。数据库: MySQL 5.7/8.0。关系型数据库用于存储学生、课程、教师、选课记录等数据。项目管理: Maven。用于依赖管理和项目构建。前端 (Frontend):框架: Vue 2.x。渐进式JavaScript框架易于上手生态丰富是前后端分离前端的主流选择之一。构建工具: Vue CLI。标准化的Vue项目脚手架集成了Webpack、Babel等现代化前端工具链。UI组件库: Element UI。基于Vue 2.0的桌面端组件库提供了丰富的按钮、表单、表格、弹窗等组件能快速构建出美观的界面。HTTP客户端: Axios。基于Promise的HTTP库用于浏览器和Node.js中发起API请求。前后端交互:协议: HTTP/HTTPS。数据格式: RESTful API风格使用JSON进行数据交换。跨域处理: 后端通过配置CORS跨源资源共享允许前端跨域请求。系统核心功能模块:用户认证与权限学生、教师、管理员登录与角色控制。学生管理学生信息的增删改查。课程管理课程的发布、修改、查询包含任课教师、容量等信息。选课管理学生进行选课、退课系统处理选课冲突时间冲突、容量已满、学分限制等业务规则。信息查询学生查询已选课程、成绩教师查询所授课程及选课学生。理解了这个架构你就知道了数据是如何从Vue页面发起请求经过SpringBoot的Controller接收由Service处理业务逻辑通过MyBatis-Plus与数据库交互最后再将结果返回给前端渲染的完整链路。3. 环境准备与项目获取在开始之前请确保你的开发环境已就绪。3.1 基础环境清单JDK: 版本 1.8 或 11推荐8。安装后配置JAVA_HOME环境变量。MySQL: 版本 5.7 或 8.0。安装并启动MySQL服务记住root密码。Node.js: 版本 12.x 或 14.x与Vue CLI 4.x兼容。安装后会自带npm包管理器。开发工具:后端IDE: IntelliJ IDEA (推荐) 或 Eclipse。前端IDE: Visual Studio Code (推荐) 或 WebStorm。项目管理:Maven: 通常IDEA已内置也可独立安装。Vue CLI: 通过npm全局安装npm install -g vue/cli。3.2 获取项目源码你可以从常见的开源代码托管平台如Gitee或GitHub搜索“springboot vue 选课系统”找到相关项目。为了演示我们假设你已经下载或克隆了一个标准的项目其目录结构通常如下student-course-system/ ├── backend/ # SpringBoot后端项目 │ ├── src/ │ ├── pom.xml │ └── ... ├── frontend/ # Vue前端项目 │ ├── public/ │ ├── src/ │ ├── package.json │ └── ... └── database/ # SQL数据库脚本 └── init.sql重要提示请务必使用来源可靠、近期有维护的源码。老旧项目可能依赖过时的库导致无法运行。4. 数据库初始化后端应用依赖数据库所以我们首先创建数据库并导入表结构。登录MySQL使用命令行或MySQL客户端如Navicat、MySQL Workbench以root用户登录。mysql -u root -p创建数据库执行以下SQL语句创建一个名为student_course的数据库字符集建议使用utf8mb4以支持完整UTF-8包括表情符号。CREATE DATABASE IF NOT EXISTS student_course DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE student_course;导入数据表运行项目database/目录下的init.sql脚本。这个脚本通常包含了所有必要的建表语句和初始测试数据如管理员账号、样例课程等。命令行方式在init.sql文件所在目录mysql -u root -p student_course init.sql客户端工具在GUI工具中直接打开并执行该SQL文件。导入成功后你可以查看数据库应该会有student学生表、teacher教师表、course课程表、sc选课表、user用户表等核心表。5. 后端SpringBoot项目配置与启动后端是整个系统的引擎我们需要配置数据库连接并启动SpringBoot应用。5.1 修改数据库配置打开backend/src/main/resources/目录下的application.yml或application.properties文件。这是SpringBoot的核心配置文件。你需要修改datasource相关配置使其指向你刚创建的数据库。请务必将密码your_password替换成你MySQL root用户的真实密码。# application.yml 示例 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver # 注意如果使用MySQL 5.x驱动可能是 com.mysql.jdbc.Driver url: jdbc:mysql://localhost:3306/student_course?useUnicodetruecharacterEncodingutf-8useSSLfalseserverTimezoneAsia/Shanghai username: root password: your_password # 这里一定要改 # JPA配置如果用了JPA否则可能没有 jpa: hibernate: ddl-auto: none # 设置为none或validate避免启动时自动修改表结构 show-sql: true # 开发时开启方便看生成的SQL # MyBatis-Plus配置 mybatis-plus: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.example.system.entity configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 控制台打印SQL调试用5.2 启动后端项目使用IntelliJ IDEA打开backend文件夹。等待Maven自动下载依赖右下角进度条。找到主启动类通常命名为XxxApplication.java例如CourseSystemApplication.java其类上会有SpringBootApplication注解。右键点击这个类选择Run ‘XxxApplication‘。观察控制台日志如果没有报错并看到类似Tomcat started on port(s): 8080或Started XxxApplication in 5.123 seconds的信息说明后端启动成功。常见启动问题排查java.net.ConnectException: Connection refusedMySQL服务未启动。Access denied for user ‘root‘‘localhost‘数据库用户名或密码错误。Unknown database ‘student_course‘数据库未创建。端口8080被占用可以在application.yml中修改server.port属性。6. 前端Vue项目配置与启动后端API服务就绪后我们来启动前端界面。6.1 安装依赖使用VS Code或命令行进入frontend目录。首先安装项目所需的所有npm包。cd frontend npm install这个过程会读取package.json文件下载Vue、Element UI、Axios等依赖到node_modules文件夹。网络状况会影响速度请耐心等待。6.2 配置API代理关键步骤在开发环境下前端运行在独立的服务器如localhost:8081而后端运行在localhost:8080这涉及跨域问题。Vue CLI提供了代理功能来解决。打开frontend/vue.config.js文件如果没有则创建。添加以下配置module.exports { devServer: { port: 8081, // 前端开发服务器端口可自定义 proxy: { /api: { // 以‘/api’开头的请求会被代理 target: http://localhost:8080, // 后端API地址 changeOrigin: true, // 改变请求头中的host为目标地址的host pathRewrite: { ^/api: // 重写路径去掉请求路径中的‘/api’前缀 } } } } }这意味着当前端请求/api/student/list时Vue开发服务器会将其代理到http://localhost:8080/student/list。6.3 启动前端项目在frontend目录下运行npm run serve成功启动后控制台会输出App running at:信息通常为http://localhost:8081。用浏览器打开这个地址你应该能看到登录界面。7. 系统功能演示与核心代码走读系统成功运行后我们以“学生选课”这个核心业务流程为例走读一遍前后端代码理解其实现。7.1 前端选课页面与请求发起假设选课页面组件是CourseSelection.vue。其核心部分可能包含模板 (Template): 使用Element UI的表格(el-table)展示可选课程列表包含课程名、教师、时间、容量、已选人数等信息以及一个“选课”按钮。脚本 (Script): 在Vue组件的methods中定义选课函数。template div el-table :datacourseList el-table-column propcourseName label课程名/el-table-column el-table-column propteacherName label教师/el-table-column el-table-column label操作 template slot-scopescope el-button clickselectCourse(scope.row.id) typeprimary sizesmall选课/el-button /template /el-table-column /el-table /div /template script import axios from axios; export default { data() { return { courseList: [] // 课程列表数据 }; }, created() { this.fetchCourses(); // 组件创建时加载课程列表 }, methods: { fetchCourses() { axios.get(/api/course/list) // 调用后端API .then(response { this.courseList response.data.data; }) .catch(error { console.error(获取课程列表失败:, error); this.$message.error(加载课程失败); }); }, selectCourse(courseId) { axios.post(/api/selection/select, { courseId: courseId }) // 发送选课请求 .then(response { if (response.data.code 200) { this.$message.success(选课成功); this.fetchCourses(); // 刷新列表 } else { this.$message.error(response.data.msg); // 显示后端返回的错误信息如“课程已满”、“时间冲突” } }) .catch(error { console.error(选课请求失败:, error); this.$message.error(网络错误选课失败); }); } } }; /script关键点axios发起异步HTTP请求。/api前缀的请求被代理到后端。根据后端返回的code和msg处理成功或失败情况给予用户反馈。7.2 后端选课API与业务逻辑后端接收选课请求处理复杂的业务规则。Controller层 (SelectionController.java)接收请求调用服务。RestController RequestMapping(/selection) public class SelectionController { Autowired private SelectionService selectionService; PostMapping(/select) public Result selectCourse(RequestBody SelectionDTO selectionDTO) { // SelectionDTO 包含 courseId, studentId (可从当前登录用户token中获取) try { selectionService.selectCourse(selectionDTO); return Result.success(选课成功); } catch (BusinessException e) { // 捕获自定义业务异常如“课程容量已满”、“学分超限” return Result.error(e.getMessage()); } catch (Exception e) { return Result.error(系统异常选课失败); } } }Service层 (SelectionServiceImpl.java)实现核心业务逻辑。这里是真正的价值所在。Service public class SelectionServiceImpl implements SelectionService { Autowired private CourseMapper courseMapper; Autowired private SelectionMapper selectionMapper; Transactional(rollbackFor Exception.class) // 声明式事务确保数据一致性 Override public void selectCourse(SelectionDTO dto) throws BusinessException { // 1. 校验课程是否存在且可选 Course course courseMapper.selectById(dto.getCourseId()); if (course null) { throw new BusinessException(课程不存在); } if (course.getSelected() course.getCapacity()) { throw new BusinessException(课程容量已满); } // 2. 校验学生是否已选此课防止重复选课 LambdaQueryWrapperSelection queryWrapper new LambdaQueryWrapper(); queryWrapper.eq(Selection::getStudentId, dto.getStudentId()) .eq(Selection::getCourseId, dto.getCourseId()); if (selectionMapper.selectCount(queryWrapper) 0) { throw new BusinessException(已选过该课程); } // 3. 校验时间冲突需要查询该学生已选课程的时间 ListCourse selectedCourses courseMapper.getSelectedCoursesByStudent(dto.getStudentId()); for (Course selected : selectedCourses) { if (isTimeConflict(course, selected)) { throw new BusinessException(与已选课程 [ selected.getName() ] 时间冲突); } } // 4. 校验学分上限业务规则 int totalCredits calculateTotalCredits(dto.getStudentId()); if (totalCredits course.getCredit() MAX_CREDITS_PER_SEMESTER) { throw new BusinessException(本学期所选课程总学分已超过上限); } // 5. 所有校验通过执行选课操作 Selection selection new Selection(); selection.setStudentId(dto.getStudentId()); selection.setCourseId(dto.getCourseId()); selection.setSelectTime(new Date()); selectionMapper.insert(selection); // 6. 更新课程的已选人数需要原子操作避免并发问题 courseMapper.incrementSelected(course.getId()); } // ... 其他辅助方法 (isTimeConflict, calculateTotalCredits) }关键点Transactional确保选课和更新课程人数两个操作在一个事务中要么都成功要么都回滚。业务校验这是选课系统的核心包括容量、重复、时间冲突、学分限制等。异常处理使用自定义的BusinessException将业务错误清晰地返回给前端。MyBatis-Plus使用LambdaQueryWrapper构建查询条件代码更简洁。Mapper层与SQLMyBatis-Plus的Mapper接口通常很简单复杂SQL写在XML中。// SelectionMapper.java public interface SelectionMapper extends BaseMapperSelection { // 继承BaseMapper即拥有了基本的CRUD方法 }!-- CourseMapper.xml 中定义 incrementSelected -- update idincrementSelected UPDATE course SET selected selected 1 WHERE id #{id} AND selected capacity /update这个UPDATE语句使用了AND selected capacity条件是一种在数据库层面防止超选的乐观锁思路比在Java代码中查询再更新更安全。通过这个流程你看到了一个完整的“请求-响应-业务处理-数据持久化”闭环以及如何在代码中体现严谨的业务规则。8. 项目部署与打包开发完成后需要将项目打包部署到生产或演示环境。8.1 后端打包在backend目录下使用Maven命令打包为可执行的JAR文件。mvn clean package -DskipTests打包成功后在target/目录下会生成一个xxx-0.0.1-SNAPSHOT.jar文件。你可以使用以下命令运行java -jar xxx-0.0.1-SNAPSHOT.jar生产环境建议使用nohup或systemd将应用作为服务运行并配置好application-prod.yml中的数据库连接生产库地址、密码、日志路径等。8.2 前端打包在frontend目录下运行构建命令生成静态资源。npm run build此命令会在项目根目录下生成一个dist文件夹里面是压缩优化后的HTML、CSS、JavaScript文件。8.3 前后端整合部署有两种常见方式分离部署将前端dist文件夹内的文件部署到Nginx或Apache等Web服务器上。后端JAR包单独运行在服务器上。前端需要修改API请求地址指向后端服务器的公网IP/域名和端口不再需要开发环境的代理配置。合并部署将前端dist文件夹的内容复制到SpringBoot项目的src/main/resources/static/目录下。然后打包后端这样JAR包就同时包含了前端资源和后端服务。访问时直接访问SpringBoot应用的端口即可。这种方式更简单适合小型项目。9. 常见问题与排查指南在搭建和运行过程中你可能会遇到以下问题问题现象可能原因排查方式解决方案前端npm install失败网络错误npm源访问慢或被墙检查网络使用npm config get registry查看源切换为国内镜像源如淘宝源npm config set registry https://registry.npmmirror.com前端运行npm run serve后页面空白或报JS错误依赖版本冲突或未正确安装查看浏览器控制台(Console)报错信息删除node_modules和package-lock.json后重装1. 删除node_modules和package-lock.json2. 重新执行npm install3. 确保Node.js版本符合要求后端启动时报Failed to configure a DataSource数据库连接配置错误检查application.yml中的url,username,password1. 确认数据库服务已启动2. 确认数据库名、用户名、密码正确3. 确认MySQL驱动版本与数据库版本匹配前端访问后端API报404代理配置错误或后端接口路径不对1. 检查vue.config.js中的proxy配置2. 直接在浏览器访问http://localhost:8080/api/xxx看后端是否响应3. 查看后端Controller的RequestMapping路径1. 确保代理目标target正确2. 确保后端对应接口存在且已启动3. 重启前端开发服务器登录失败提示“用户不存在”或“密码错误”数据库初始数据未导入或密码加密方式不匹配1. 检查user表是否有初始用户数据2. 查看后端密码校验逻辑通常是MD5或BCrypt加密1. 确认已成功执行init.sql2. 对比数据库中的密码密文与代码中生成的密文是否一致选课操作成功但页面数据没刷新前端请求成功后的回调函数未更新视图数据查看浏览器网络(Network)选项卡确认API返回成功检查Vue组件中then回调是否更新了data在selectCourse方法的then回调中重新调用fetchCourses()或直接操作courseList数组10. 从项目源码中学到的工程化最佳实践这个项目不仅提供了功能更展示了许多值得学习的工程实践清晰的分层架构Controller控制层、Service业务层、Mapper数据访问层、Entity实体层。各司其职代码可读性和可维护性高。统一的响应封装使用Result类统一封装API返回格式code,msg,data便于前端处理。全局异常处理使用ControllerAdvice和ExceptionHandler创建全局异常处理器将系统异常和业务异常转化为友好的JSON响应避免将堆栈信息暴露给用户。MyBatis-Plus的高效使用使用LambdaQueryWrapper避免SQL字符串硬编码。继承BaseMapper获得通用CRUD方法。复杂SQL写在XML中实现灵活的查询。事务管理在Service方法上使用Transactional注解保证业务操作的原子性。前端组件化Vue的组件化开发将页面拆分为可复用的组件如Header.vue,Sidebar.vue,CourseTable.vue。API集中管理好的实践是将所有Axios请求封装在一个单独的api目录下的JS文件中而不是散落在各个组件里。配置分离使用application-dev.yml和application-prod.yml区分开发和生产环境配置。11. 如何将这个项目变成你的“简历亮点”仅仅能运行项目是不够的。要让它为你的简历和面试加分你需要深入理解而非照搬弄清楚每行代码的作用特别是业务校验、事务、异常处理等关键部分。能说出为什么这么设计。进行二次开发在现有基础上增加新功能例如添加权限控制使用Spring Security或Shiro实现更细粒度的角色权限如学生只能选课教师只能管理自己的课程。加入缓存使用Redis缓存热门课程列表减轻数据库压力。实现文件上传允许教师上传课程大纲或资料。添加日志审计记录关键操作登录、选课、删课的日志。编写单元测试为Service层的关键方法编写JUnit测试。优化与重构检查并优化慢SQL。前端组件是否可进一步抽象代码中是否有重复逻辑可以抽取部署上线尝试使用Docker容器化部署或购买一台最便宜的云服务器将项目部署到公网可访问。这个过程本身就是一个极佳的学习经历。通过以上步骤这个“1小时搭建”的项目就从一个简单的可运行代码转变为你深入理解SpringBootVue全栈开发、掌握企业级编码规范、并具备一定系统设计和问题解决能力的有力证明。记住项目的深度和你的思考远比项目本身的名字更重要。 
长河君 · 2026/9/2 10:42:29 · 阅读 1.2k 1小时搭建SpringBoot+Vue学生选课系统：从零部署到源码解析
如果你是一名计算机专业的学生或者正在准备求职简历那么“学生选课系统”这个项目你一定不陌生。它几乎是每个Java开发者简历上的“标配”也是课程设计、毕业设计的经典选题。然而一个残酷的现实是很多同学花费数周搭建的系统要么功能残缺、界面简陋要么代码混乱、难以二次开发最终只能沦为简历上苍白的一行字经不起面试官的深入追问。今天要讨论的不是又一个简单的“增删改查”Demo。我们真正要解决的是如何在1小时内获得一个架构清晰、前后端分离、功能完整、可直接运行的SpringBootVue学生选课系统。这听起来像营销口号但背后的价值在于让你跳过繁琐的环境搭建和基础CRUD编码直接聚焦于业务逻辑理解、代码结构学习和项目亮点挖掘从而将宝贵的时间投入到技术深度的提升上。本文将带你从零开始手把手部署并剖析这个“开箱即用”的项目。我们不仅会跑通它更会深入其内部拆解SpringBoot如何优雅地处理Web请求、管理事务Vue前端如何与后端交互以及整个项目的工程化设计。最终你将得到的不仅是一个能运行的“毕设/简历项目”更是一套可以举一反三、用于构建其他管理系统的可复用技术框架和最佳实践。1. 为什么你需要一个“开箱即用”的选课系统在深入代码之前我们必须先明确这个项目的核心价值。对于学生和初级开发者而言自己从零搭建一个系统面临诸多挑战环境配置陷阱Node.js、NPM、Maven、MySQL版本兼容性问题层出不穷可能半天时间都耗在“为什么跑不起来”上。架构选择困难是选择JSP、Thymeleaf还是前后端分离路由、状态管理、API设计该如何开始代码质量参差自己写的代码往往缺乏工程化规范包结构混乱没有分层后续扩展和维护困难。功能完整性缺失容易只实现核心的选课逻辑忽略用户管理、权限控制、数据校验、异常处理等生产级必备功能。时间成本高昂从需求分析、数据库设计到前后端编码、调试、部署完整流程可能耗费数周挤压了学习核心技术的时间。因此一个经过打磨的、完整的开源项目源码其价值远超过它本身的功能。它为你提供了一个高起点的学习样板。你可以快速获得成就感1小时内看到成果建立正向反馈。学习最佳实践观察成熟的包结构、代码分层Controller, Service, Mapper、RESTful API设计。调试与修改在运行的基础上修改业务逻辑比凭空编写更容易理解数据流动。准备面试你可以清晰地说出这个项目的技术栈、架构设计、遇到的难点和解决方案。接下来我们就将这个价值落地开始实战。2. 项目核心架构与技术栈解析本项目采用经典且主流的前后端分离架构这是目前企业级Web开发的标配。后端 (Backend):框架: Spring Boot 2.x。它简化了Spring应用的初始搭建和开发过程提供了自动配置、起步依赖等强大功能。持久层: MyBatis-Plus。这是对MyBatis的增强工具在提供CRUD基础功能的同时保留了MyBatis的灵活性能极大减少单表操作的SQL编写。数据库: MySQL 5.7/8.0。关系型数据库用于存储学生、课程、教师、选课记录等数据。项目管理: Maven。用于依赖管理和项目构建。前端 (Frontend):框架: Vue 2.x。渐进式JavaScript框架易于上手生态丰富是前后端分离前端的主流选择之一。构建工具: Vue CLI。标准化的Vue项目脚手架集成了Webpack、Babel等现代化前端工具链。UI组件库: Element UI。基于Vue 2.0的桌面端组件库提供了丰富的按钮、表单、表格、弹窗等组件能快速构建出美观的界面。HTTP客户端: Axios。基于Promise的HTTP库用于浏览器和Node.js中发起API请求。前后端交互:协议: HTTP/HTTPS。数据格式: RESTful API风格使用JSON进行数据交换。跨域处理: 后端通过配置CORS跨源资源共享允许前端跨域请求。系统核心功能模块:用户认证与权限学生、教师、管理员登录与角色控制。学生管理学生信息的增删改查。课程管理课程的发布、修改、查询包含任课教师、容量等信息。选课管理学生进行选课、退课系统处理选课冲突时间冲突、容量已满、学分限制等业务规则。信息查询学生查询已选课程、成绩教师查询所授课程及选课学生。理解了这个架构你就知道了数据是如何从Vue页面发起请求经过SpringBoot的Controller接收由Service处理业务逻辑通过MyBatis-Plus与数据库交互最后再将结果返回给前端渲染的完整链路。3. 环境准备与项目获取在开始之前请确保你的开发环境已就绪。3.1 基础环境清单JDK: 版本 1.8 或 11推荐8。安装后配置JAVA_HOME环境变量。MySQL: 版本 5.7 或 8.0。安装并启动MySQL服务记住root密码。Node.js: 版本 12.x 或 14.x与Vue CLI 4.x兼容。安装后会自带npm包管理器。开发工具:后端IDE: IntelliJ IDEA (推荐) 或 Eclipse。前端IDE: Visual Studio Code (推荐) 或 WebStorm。项目管理:Maven: 通常IDEA已内置也可独立安装。Vue CLI: 通过npm全局安装npm install -g vue/cli。3.2 获取项目源码你可以从常见的开源代码托管平台如Gitee或GitHub搜索“springboot vue 选课系统”找到相关项目。为了演示我们假设你已经下载或克隆了一个标准的项目其目录结构通常如下student-course-system/ ├── backend/ # SpringBoot后端项目 │ ├── src/ │ ├── pom.xml │ └── ... ├── frontend/ # Vue前端项目 │ ├── public/ │ ├── src/ │ ├── package.json │ └── ... └── database/ # SQL数据库脚本 └── init.sql重要提示请务必使用来源可靠、近期有维护的源码。老旧项目可能依赖过时的库导致无法运行。4. 数据库初始化后端应用依赖数据库所以我们首先创建数据库并导入表结构。登录MySQL使用命令行或MySQL客户端如Navicat、MySQL Workbench以root用户登录。mysql -u root -p创建数据库执行以下SQL语句创建一个名为student_course的数据库字符集建议使用utf8mb4以支持完整UTF-8包括表情符号。CREATE DATABASE IF NOT EXISTS student_course DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE student_course;导入数据表运行项目database/目录下的init.sql脚本。这个脚本通常包含了所有必要的建表语句和初始测试数据如管理员账号、样例课程等。命令行方式在init.sql文件所在目录mysql -u root -p student_course init.sql客户端工具在GUI工具中直接打开并执行该SQL文件。导入成功后你可以查看数据库应该会有student学生表、teacher教师表、course课程表、sc选课表、user用户表等核心表。5. 后端SpringBoot项目配置与启动后端是整个系统的引擎我们需要配置数据库连接并启动SpringBoot应用。5.1 修改数据库配置打开backend/src/main/resources/目录下的application.yml或application.properties文件。这是SpringBoot的核心配置文件。你需要修改datasource相关配置使其指向你刚创建的数据库。请务必将密码your_password替换成你MySQL root用户的真实密码。# application.yml 示例 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver # 注意如果使用MySQL 5.x驱动可能是 com.mysql.jdbc.Driver url: jdbc:mysql://localhost:3306/student_course?useUnicodetruecharacterEncodingutf-8useSSLfalseserverTimezoneAsia/Shanghai username: root password: your_password # 这里一定要改 # JPA配置如果用了JPA否则可能没有 jpa: hibernate: ddl-auto: none # 设置为none或validate避免启动时自动修改表结构 show-sql: true # 开发时开启方便看生成的SQL # MyBatis-Plus配置 mybatis-plus: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.example.system.entity configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 控制台打印SQL调试用5.2 启动后端项目使用IntelliJ IDEA打开backend文件夹。等待Maven自动下载依赖右下角进度条。找到主启动类通常命名为XxxApplication.java例如CourseSystemApplication.java其类上会有SpringBootApplication注解。右键点击这个类选择Run ‘XxxApplication‘。观察控制台日志如果没有报错并看到类似Tomcat started on port(s): 8080或Started XxxApplication in 5.123 seconds的信息说明后端启动成功。常见启动问题排查java.net.ConnectException: Connection refusedMySQL服务未启动。Access denied for user ‘root‘‘localhost‘数据库用户名或密码错误。Unknown database ‘student_course‘数据库未创建。端口8080被占用可以在application.yml中修改server.port属性。6. 前端Vue项目配置与启动后端API服务就绪后我们来启动前端界面。6.1 安装依赖使用VS Code或命令行进入frontend目录。首先安装项目所需的所有npm包。cd frontend npm install这个过程会读取package.json文件下载Vue、Element UI、Axios等依赖到node_modules文件夹。网络状况会影响速度请耐心等待。6.2 配置API代理关键步骤在开发环境下前端运行在独立的服务器如localhost:8081而后端运行在localhost:8080这涉及跨域问题。Vue CLI提供了代理功能来解决。打开frontend/vue.config.js文件如果没有则创建。添加以下配置module.exports { devServer: { port: 8081, // 前端开发服务器端口可自定义 proxy: { /api: { // 以‘/api’开头的请求会被代理 target: http://localhost:8080, // 后端API地址 changeOrigin: true, // 改变请求头中的host为目标地址的host pathRewrite: { ^/api: // 重写路径去掉请求路径中的‘/api’前缀 } } } } }这意味着当前端请求/api/student/list时Vue开发服务器会将其代理到http://localhost:8080/student/list。6.3 启动前端项目在frontend目录下运行npm run serve成功启动后控制台会输出App running at:信息通常为http://localhost:8081。用浏览器打开这个地址你应该能看到登录界面。7. 系统功能演示与核心代码走读系统成功运行后我们以“学生选课”这个核心业务流程为例走读一遍前后端代码理解其实现。7.1 前端选课页面与请求发起假设选课页面组件是CourseSelection.vue。其核心部分可能包含模板 (Template): 使用Element UI的表格(el-table)展示可选课程列表包含课程名、教师、时间、容量、已选人数等信息以及一个“选课”按钮。脚本 (Script): 在Vue组件的methods中定义选课函数。template div el-table :datacourseList el-table-column propcourseName label课程名/el-table-column el-table-column propteacherName label教师/el-table-column el-table-column label操作 template slot-scopescope el-button clickselectCourse(scope.row.id) typeprimary sizesmall选课/el-button /template /el-table-column /el-table /div /template script import axios from axios; export default { data() { return { courseList: [] // 课程列表数据 }; }, created() { this.fetchCourses(); // 组件创建时加载课程列表 }, methods: { fetchCourses() { axios.get(/api/course/list) // 调用后端API .then(response { this.courseList response.data.data; }) .catch(error { console.error(获取课程列表失败:, error); this.$message.error(加载课程失败); }); }, selectCourse(courseId) { axios.post(/api/selection/select, { courseId: courseId }) // 发送选课请求 .then(response { if (response.data.code 200) { this.$message.success(选课成功); this.fetchCourses(); // 刷新列表 } else { this.$message.error(response.data.msg); // 显示后端返回的错误信息如“课程已满”、“时间冲突” } }) .catch(error { console.error(选课请求失败:, error); this.$message.error(网络错误选课失败); }); } } }; /script关键点axios发起异步HTTP请求。/api前缀的请求被代理到后端。根据后端返回的code和msg处理成功或失败情况给予用户反馈。7.2 后端选课API与业务逻辑后端接收选课请求处理复杂的业务规则。Controller层 (SelectionController.java)接收请求调用服务。RestController RequestMapping(/selection) public class SelectionController { Autowired private SelectionService selectionService; PostMapping(/select) public Result selectCourse(RequestBody SelectionDTO selectionDTO) { // SelectionDTO 包含 courseId, studentId (可从当前登录用户token中获取) try { selectionService.selectCourse(selectionDTO); return Result.success(选课成功); } catch (BusinessException e) { // 捕获自定义业务异常如“课程容量已满”、“学分超限” return Result.error(e.getMessage()); } catch (Exception e) { return Result.error(系统异常选课失败); } } }Service层 (SelectionServiceImpl.java)实现核心业务逻辑。这里是真正的价值所在。Service public class SelectionServiceImpl implements SelectionService { Autowired private CourseMapper courseMapper; Autowired private SelectionMapper selectionMapper; Transactional(rollbackFor Exception.class) // 声明式事务确保数据一致性 Override public void selectCourse(SelectionDTO dto) throws BusinessException { // 1. 校验课程是否存在且可选 Course course courseMapper.selectById(dto.getCourseId()); if (course null) { throw new BusinessException(课程不存在); } if (course.getSelected() course.getCapacity()) { throw new BusinessException(课程容量已满); } // 2. 校验学生是否已选此课防止重复选课 LambdaQueryWrapperSelection queryWrapper new LambdaQueryWrapper(); queryWrapper.eq(Selection::getStudentId, dto.getStudentId()) .eq(Selection::getCourseId, dto.getCourseId()); if (selectionMapper.selectCount(queryWrapper) 0) { throw new BusinessException(已选过该课程); } // 3. 校验时间冲突需要查询该学生已选课程的时间 ListCourse selectedCourses courseMapper.getSelectedCoursesByStudent(dto.getStudentId()); for (Course selected : selectedCourses) { if (isTimeConflict(course, selected)) { throw new BusinessException(与已选课程 [ selected.getName() ] 时间冲突); } } // 4. 校验学分上限业务规则 int totalCredits calculateTotalCredits(dto.getStudentId()); if (totalCredits course.getCredit() MAX_CREDITS_PER_SEMESTER) { throw new BusinessException(本学期所选课程总学分已超过上限); } // 5. 所有校验通过执行选课操作 Selection selection new Selection(); selection.setStudentId(dto.getStudentId()); selection.setCourseId(dto.getCourseId()); selection.setSelectTime(new Date()); selectionMapper.insert(selection); // 6. 更新课程的已选人数需要原子操作避免并发问题 courseMapper.incrementSelected(course.getId()); } // ... 其他辅助方法 (isTimeConflict, calculateTotalCredits) }关键点Transactional确保选课和更新课程人数两个操作在一个事务中要么都成功要么都回滚。业务校验这是选课系统的核心包括容量、重复、时间冲突、学分限制等。异常处理使用自定义的BusinessException将业务错误清晰地返回给前端。MyBatis-Plus使用LambdaQueryWrapper构建查询条件代码更简洁。Mapper层与SQLMyBatis-Plus的Mapper接口通常很简单复杂SQL写在XML中。// SelectionMapper.java public interface SelectionMapper extends BaseMapperSelection { // 继承BaseMapper即拥有了基本的CRUD方法 }!-- CourseMapper.xml 中定义 incrementSelected -- update idincrementSelected UPDATE course SET selected selected 1 WHERE id #{id} AND selected capacity /update这个UPDATE语句使用了AND selected capacity条件是一种在数据库层面防止超选的乐观锁思路比在Java代码中查询再更新更安全。通过这个流程你看到了一个完整的“请求-响应-业务处理-数据持久化”闭环以及如何在代码中体现严谨的业务规则。8. 项目部署与打包开发完成后需要将项目打包部署到生产或演示环境。8.1 后端打包在backend目录下使用Maven命令打包为可执行的JAR文件。mvn clean package -DskipTests打包成功后在target/目录下会生成一个xxx-0.0.1-SNAPSHOT.jar文件。你可以使用以下命令运行java -jar xxx-0.0.1-SNAPSHOT.jar生产环境建议使用nohup或systemd将应用作为服务运行并配置好application-prod.yml中的数据库连接生产库地址、密码、日志路径等。8.2 前端打包在frontend目录下运行构建命令生成静态资源。npm run build此命令会在项目根目录下生成一个dist文件夹里面是压缩优化后的HTML、CSS、JavaScript文件。8.3 前后端整合部署有两种常见方式分离部署将前端dist文件夹内的文件部署到Nginx或Apache等Web服务器上。后端JAR包单独运行在服务器上。前端需要修改API请求地址指向后端服务器的公网IP/域名和端口不再需要开发环境的代理配置。合并部署将前端dist文件夹的内容复制到SpringBoot项目的src/main/resources/static/目录下。然后打包后端这样JAR包就同时包含了前端资源和后端服务。访问时直接访问SpringBoot应用的端口即可。这种方式更简单适合小型项目。9. 常见问题与排查指南在搭建和运行过程中你可能会遇到以下问题问题现象可能原因排查方式解决方案前端npm install失败网络错误npm源访问慢或被墙检查网络使用npm config get registry查看源切换为国内镜像源如淘宝源npm config set registry https://registry.npmmirror.com前端运行npm run serve后页面空白或报JS错误依赖版本冲突或未正确安装查看浏览器控制台(Console)报错信息删除node_modules和package-lock.json后重装1. 删除node_modules和package-lock.json2. 重新执行npm install3. 确保Node.js版本符合要求后端启动时报Failed to configure a DataSource数据库连接配置错误检查application.yml中的url,username,password1. 确认数据库服务已启动2. 确认数据库名、用户名、密码正确3. 确认MySQL驱动版本与数据库版本匹配前端访问后端API报404代理配置错误或后端接口路径不对1. 检查vue.config.js中的proxy配置2. 直接在浏览器访问http://localhost:8080/api/xxx看后端是否响应3. 查看后端Controller的RequestMapping路径1. 确保代理目标target正确2. 确保后端对应接口存在且已启动3. 重启前端开发服务器登录失败提示“用户不存在”或“密码错误”数据库初始数据未导入或密码加密方式不匹配1. 检查user表是否有初始用户数据2. 查看后端密码校验逻辑通常是MD5或BCrypt加密1. 确认已成功执行init.sql2. 对比数据库中的密码密文与代码中生成的密文是否一致选课操作成功但页面数据没刷新前端请求成功后的回调函数未更新视图数据查看浏览器网络(Network)选项卡确认API返回成功检查Vue组件中then回调是否更新了data在selectCourse方法的then回调中重新调用fetchCourses()或直接操作courseList数组10. 从项目源码中学到的工程化最佳实践这个项目不仅提供了功能更展示了许多值得学习的工程实践清晰的分层架构Controller控制层、Service业务层、Mapper数据访问层、Entity实体层。各司其职代码可读性和可维护性高。统一的响应封装使用Result类统一封装API返回格式code,msg,data便于前端处理。全局异常处理使用ControllerAdvice和ExceptionHandler创建全局异常处理器将系统异常和业务异常转化为友好的JSON响应避免将堆栈信息暴露给用户。MyBatis-Plus的高效使用使用LambdaQueryWrapper避免SQL字符串硬编码。继承BaseMapper获得通用CRUD方法。复杂SQL写在XML中实现灵活的查询。事务管理在Service方法上使用Transactional注解保证业务操作的原子性。前端组件化Vue的组件化开发将页面拆分为可复用的组件如Header.vue,Sidebar.vue,CourseTable.vue。API集中管理好的实践是将所有Axios请求封装在一个单独的api目录下的JS文件中而不是散落在各个组件里。配置分离使用application-dev.yml和application-prod.yml区分开发和生产环境配置。11. 如何将这个项目变成你的“简历亮点”仅仅能运行项目是不够的。要让它为你的简历和面试加分你需要深入理解而非照搬弄清楚每行代码的作用特别是业务校验、事务、异常处理等关键部分。能说出为什么这么设计。进行二次开发在现有基础上增加新功能例如添加权限控制使用Spring Security或Shiro实现更细粒度的角色权限如学生只能选课教师只能管理自己的课程。加入缓存使用Redis缓存热门课程列表减轻数据库压力。实现文件上传允许教师上传课程大纲或资料。添加日志审计记录关键操作登录、选课、删课的日志。编写单元测试为Service层的关键方法编写JUnit测试。优化与重构检查并优化慢SQL。前端组件是否可进一步抽象代码中是否有重复逻辑可以抽取部署上线尝试使用Docker容器化部署或购买一台最便宜的云服务器将项目部署到公网可访问。这个过程本身就是一个极佳的学习经历。通过以上步骤这个“1小时搭建”的项目就从一个简单的可运行代码转变为你深入理解SpringBootVue全栈开发、掌握企业级编码规范、并具备一定系统设计和问题解决能力的有力证明。记住项目的深度和你的思考远比项目本身的名字更重要。