1. 项目概述与技术选型1.1 这个选课系统到底是什么如果你在高校教务、实验室或者校园信息化相关的工作里泡过一段时间对“选课系统”三个字绝对不会陌生。每到选课季教务系统被挤爆、学生熬夜刷页面、老师吐槽录入成绩麻烦这些场景几乎是标配。这套“学生网上选课系统”就是从这类真实需求里提炼出来的一个完整前后端分离项目。后端用SpringBoot前端用Vue数据库用MySQL三者组合在一起实现了从学生登录、浏览课程、选课退课到教师开课、录入成绩再到管理员统一管理的完整闭环。换句话说这不是一个只做了“登录CRUD”的玩具项目而是一个业务逻辑闭环、权限分级明确、可以直接当课程设计或者毕业设计底座来用的系统。标题里那句“可直接运行”是重点。很多开源项目源码拿到手先得折腾三天环境这个项目的目标是把依赖、配置、初始化数据都捋顺让你在本地把MySQL装好、导入SQL脚本、后端起服务、前端装依赖就能跑起来看到登录页面。适合谁看三类人准备做毕业设计的学生刚接触SpringBootVue全栈开发的初学者以及学校里需要快速搭一套选课演示系统的老师或教务人员。1.2 为什么是SpringBoot Vue MySQL这个组合这套组合在目前的校园开发场景里属于绝对的“标准答案”。先说后端SpringBoot最核心的价值是“约定优于配置”你把依赖扔进pom.xml写几个注解一个能跑的Web服务就起来了省去了一堆XML配置的琐碎事尤其适合业务逻辑不算极端复杂但需要快速交付的教学管理系统。再配合Spring Data JPA或者MyBatis操作MySQLCRUD代码量能压缩得非常可观。前端选Vue而不是传统的JSP或者Thymeleaf模板道理也很简单。选课系统天然有“多角色、多页面、状态变化频繁”的特征。学生在课程列表和已选课程之间切来切去教师在不同班级的成绩录入页面之间跳转这种交互密集的场景用Vue的组件化开发和响应式数据绑定体验比整页刷新好一个档次。Vue Router负责页面跳转Vuex或Pinia负责存放用户登录状态每个角色看到什么页面、能调什么接口在前端路由守卫里就可以先拦一道。MySQL则是这类系统的稳妥之选。选课数据的核心是课程表、学生表、选课关系表这种结构化数据用关系型数据库管理最自然事务支持也成熟。特别是“选课”这个过程牵涉到名额扣减、选课记录插入、课程表更新必须保证要么全成功要么全失败MySQL的InnoDB事务在这里就是安全绳。1.3 系统解决的核心业务痛点选课系统表面上是“选课”实际背后至少压着三个业务痛点。第一是高峰期的并发压力每到选课开放时间大量学生同时提交选课请求如果后端接口不做事务和并发控制就会出现选了同一门课最后一个名额、结果两个人都显示选课成功的尴尬。第二是角色权限混乱学生能改成绩、教师能改课表这种事在管理混乱的系统里真发生过所以后端必须有一套清晰的JWT鉴权 角色校验逻辑。第三是选课规则管理什么时候开始选课、什么时候退课截止、每学期最多选几门这些参数最好集中在数据库里配置而不是写死在代码中。这个项目的价值就在于用一套清晰、经典的实现把这些痛点都处理掉了而且处理方式比较规整适合学习。下面我就按后端、前端、数据库、启动部署、排坑经验这几个维度把这套系统拆开揉碎讲一遍。2. 后端核心设计与关键实现2.1 SpringBoot项目结构与分层思路后端拿到手先看包结构。不要小看这个很多初学者项目跑不起来或者改不动根源是包结构混乱、职责不清。这套系统的后端我建议保持经典的四层结构com.example.course ├── controller // 接收前端请求返回统一结果 ├── service // 业务逻辑层选课、退课、成绩录入的核心逻辑都在这 ├── dao / mapper // 数据访问层操作MySQL表 ├── entity / pojo // 实体类对应数据库里的表 ├── config // 配置类比如跨域、拦截器 ├── common // 统一返回体、异常处理、工具类 └── security // JWT登录鉴权相关controller层只负责做三件事接收参数、调用service、把返回值包装成统一格式。最忌讳的是把SQL拼接或者复杂业务判断写在controller里一旦角色一多、规则一变那个类就会膨胀到没法维护。service层是这套系统的重头戏选课事务、退课逻辑、成绩校验全在这里。你去看优秀源码service里通常会有Service注解配合Transactional保证多表操作在一个事务里完成。2.2 数据库表设计五张核心表撑起整个业务选课系统数据库设计不复杂但表关系要想清楚。我见过不少半成品把学生选的课程直接塞在一个字符串字段里用逗号分隔这种设计后面统计、退课、查冲突全是灾难。正确的做法是一张中间关系表。核心表至少要这么几张用户表user存放学生、教师、管理员三种角色的登录账号密码。字段至少包括id、username、passwordBCrypt加密后的密文、role角色标识、real_name。不建议把角色分散在多个表里一个角色字段维护起来最省事反正后续session和JWT里都要存。课程表course课程基本信息。包括课程编号、课程名称、授课教师关联用户表、上课时间、上课地点、总容量、已选人数、学分、开课学期。选课表student_course学生和课程的中间关系表。字段包括id、student_id、course_id、选课时间、成绩。这里必须加联合唯一索引防止同一学生对同一课程重复提交选课记录。学期表可选的如果你希望系统支持“不同学期不同课表”课程表建立时关联学期id会更灵活升级版本中建议加上。一个常见的坑是“已选人数”字段的设计。很多项目直接在course表里存一个selected_count每次选课就1退课就-1。这样确实直观但并发更新时极易脏读。后面我讲选课逻辑时细说这个问题。2.3 选课接口的事务与并发控制选课是整系统最核心也最容易写崩的接口。先看常规操作流程前端提交一个courseId后端先查询课程有没有剩余名额如果有插入一条选课记录然后更新课程的已选人数。三段操作每一段都可能出问题。生产级项目里选课并发控制常见的手法有几种。这系统里用的是其中最直白也最适合教学的一种——数据库行锁 事务。在事务里先对课程表的这一行加锁查询同时校验课程是否存在、是否在选课时间段内、名额是否已满、学生是否已经选过这门课、学期总学分是否超限。校验全部通过插入选课记录并更新已选人数事务提交锁释放。这样即使一百个学生同时选最后两个名额数据库中重排的加锁查询也会把请求逐个排队处理不会超发。伪代码逻辑大致长这样Transactional public boolean selectCourse(Long studentId, Long courseId) { // 悲观锁查询锁住这一行课程记录 Course course courseMapper.selectByIdForUpdate(courseId); if (course null) { throw new BizException(课程不存在); } if (course.getSelectedCount() course.getCapacity()) { throw new BizException(选课名额已满); } // 检查学生是否已选 if (studentCourseMapper.exists(studentId, courseId)) { throw new BizException(不能重复选课); } // 插入选课记录更新已选人数 studentCourseMapper.insert(studentId, courseId); courseMapper.increaseSelectedCount(courseId); return true; }代码层面要提醒一句selectByIdForUpdate这个方法名看着简单但它要求整个方法必须在事务里执行而且查询索引必须能命中主键或唯一索引否则会把整表锁住并发性能直接拉垮。课程表的id和course_code都要建索引这一条不能省。2.4 JWT登录鉴权与角色权限控制多角色系统最忌讳前端“隐藏按钮”当权限控制。隐藏按钮只是用户体验层面的东西懂开发的人改一下前端代码照样能请求后端接口。真正的权限必须在后端接口上把关。这套系统用的是JWT方案。用户登录成功后端签发一个token里面包含userId、角色、过期时间用秘钥签名后返回给前端。前端把token存在本地每次请求头里带Authorization: Bearer token。后端写一个拦截器或过滤器先校验token有效性和过期时间再从token里取出角色判断该角色是否有权限调用当前接口。比如成绩录入操作PreAuthorize(hasRole(TEACHER)) PostMapping(/score) public Result? enterScore(RequestBody ScoreDto dto) { return Result.success(scoreService.enterScore(dto)); }如果你用的是Spring Security加JWT的集成方案直接在接口方法上标注权限注解就行非常清爽。角色校验必须做两件事一是校验角色二是校验资源归属。教师A只能录入教师A授课班级的成绩不能越权改其他教师的课程成绩。资源归属校验必须在后端判断不能只靠前端传一个courseId就无脑更新。3. 前端Vue实现要点3.1 环境配置Node版本、cli和vite的选择前端这块我不只一次在群里看到有人照着老教程敲vue create结果因为Node版本太高或者脚手架版本对不上项目根本创建不了直接卡在第一步。如果你的项目是基于Vue 2 Vue CLI的安装依赖时注意Node 18以上环境可能会报Error: error:0308010C:digital envelope routines::unsupported这个经典错误这是OpenSSL版本导致的哈希算法不兼容。临时方案是把Node版本切回16或者设置环境变量NODE_OPTIONS--openssl-legacy-provider但这只是治标。这套选课系统如果前端是用Vue 3实现的那强烈建议直接用Vite作为构建工具。Vite启动速度快热更新体验好对ES Modules原生支持配置也远比Webpack简单。项目拿到手后先看根目录有没有vite.config.js有的话说明是Vite工程执行顺序是npm install npm run dev依赖下载慢的问题建议先配置npm淘宝镜像或者干脆用pnpm速度快不少。另外强调一句npm install报错很多时候不是代码问题是网速和镜像问题换镜像源能解决一半的“启动失败”。3.2 路由设计三种角色三套页面路由是前端骨架。登录后根据用户角色跳转到不同的首页布局。学生端有课程列表、我的选课、成绩查询教师端有我的课程、成绩录入、选课名单管理员端有用户管理、课程管理、选课管理。Vue Router里用动态权限路由是常见方案。登录成功后后端返回当前用户角色前端根据角色用router.addRoutes动态挂载对应页面路由。更简单的方案是用全局前置守卫判断router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (!token to.path ! /login) { next(/login) return } if (token to.path /login) { next(/) return } next() })同时菜单在侧边栏里也是根据角色过滤。学生看不到“成绩录入”菜单教师看不到“用户管理”菜单。这一步配合后端接口鉴权双重保险。3.3 与后端交互Axios封装与统一响应处理实际开发中前后端沟通靠的是Axios。但项目中每一个页面组件里都直接写axios.get(/api/...)是很业余的做法。一定要封装一个统一的请求模块比如utils/request.js把baseURL、请求拦截器、响应拦截器都收敛到一起。请求拦截器统一塞tokenservice.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer token } return config })响应拦截器统一处理业务码和后端返回的数据结构。这里尤其要注意后端接口返回的JSON格式必须前后端约定好比如统一为{code: 200, message: success, data: {...}}。前端在拦截器里判断code如果不是200统一弹错误提示而不是让每个页面组件里写重复的if (res.code ! 200)。一个常见的坑是跨域。本地开发时Vite默认地址在5173端口后端在8080端口直接请求会触达跨域限制。解决方式一般两种后端配CORS允许跨域或者前端在vite.config.js里配代理。我更推荐前端代理的方式开发时完全不需要后端配合而且线上部署时可以做到前后端同域省掉跨域隐患。server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }3.4 选课页面交互的细节处理选课页面就是整个系统的门面交互做不好整个系统的第一印象分就掉下来。页面布局上一般是课程筛选区加课程列表区。筛选区至少要有课程名称搜索、学分筛选、上课地点或者上课时间的筛选条件数据量大了之后前端最好用分页组件搭配后端的PageHelper或Pageable分页查询而不是一次性全量加载几千门课。选课按钮的状态要跟课程实时名额联动。已满的课程按钮置灰已选的课程显示“已选”并禁用按钮。这里有个细节前端展示的已选人数是“响应式的实时数据”学生在选课前看到余量3点击选课后后端可能返回“选课失败名额已满”。处理方式前端点击按钮后立即进入loading状态防重复点击拿到结果后无论成功与否都用最新数据刷新当前课程列表。那种连续点了十几次最后弹出一堆重复请求的体验就是没做按钮防抖。4. 数据库配置与本地启动全流程4.1 MySQL安装与版本选择这套系统用MySQL我先说版本问题。MySQL 5.7和8.0的安装步骤、默认配置、密码插件都不一样。如果你照着视频教程装务必先确认视频里用的是哪个版本。MySQL 8.0默认的认证插件是caching_sha2_password而一些老项目的数据库连接驱动或者Java版本不兼容这个认证方式连接时会直接报Public Key Retrieval is not allowed。如果遇到解决办法是在JDBC连接串的URL上加上allowPublicKeyRetrievaltrueuseSSLfalse参数。MySQL 5.7的mysql_native_password就省心很多很多老SpringBoot项目跑不起来就是栽在这两个版本差异上。Windows上安装MySQL的流程就不逐项展开了核心提醒是安装时勾选“开发默认”配置项设置好root密码字符集选utf8mb4。utf8mb4对标的是完整的Unicode支持能兼容emoji和一些特殊字符教学项目里统一用utf8mb4不会错。4.2 初始化数据库与导入SQL脚本项目拿到手数据库目录下一般会带一个course_system.sql文件这就是整个系统的建表语句加测试数据开箱即用的关键节点。先在命令行里登录MySQLmysql -u root -p创建数据库时特别注意编码CREATE DATABASE course_system DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;然后切换并导入SQLuse course_system; source course_system.sql;导入完毕后show tables;检查一下表是否建齐再select * from user;确认有初始账号。没有初始化数据登录页面就是死路一条所以这一步别偷懒跳过。如果SQL文件里带了管理员和测试学生的INSERT语句先看一眼用户名和密码的加密方式——BCrypt密文是$2a$开头的可以直接用。4.3 后端启动修改数据源配置是关键后端项目导入IDE之后找application.yml把数据库连接改成你自己的配置spring: datasource: url: jdbc:mysql://localhost:3306/course_system?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalse username: root password: 你自己的密码 driver-class-name: com.mysql.cj.jdbc.Driver这里serverTimezone参数很容易忽略。MySQL 8.0之后的驱动默认要求设置时区不设置会报The server time zone value Öйú±ê׼ʱ¼ä is unrecognized这个让人摸不着头脑的错误。直接用Asia/Shanghai稳。SpringBoot版本方面如果你拿到的是2.x版本的项目确保用JDK 8或11。千万别手滑装了JDK 17还跑SpringBoot 2.1的老项目虽然能起来但各种兼容性问题会让人怀疑人生。如果项目是SpringBoot 3.x那Java 17是硬性要求。打包发布的话用Maven执行mvn clean package java -jar target/course-system-0.0.1-SNAPSHOT.jar后端启动成功的标志是控制台出现Tomcat started on port(s): 8080看到这行字心里就有底了。4.4 前端启动依赖装完就能跑前端项目根目录会有package.json。启动顺序先npm install再npm run dev。Vite项目默认端口5173启动成功后控制台会打印本地访问地址。如果你启动的是Vue CLI项目就是压缩包里的package.json如果依赖的是vue/cli-service那说明是Webpack工程端口默认8080。这时候如果后端也是8080就会冲突需要在vue.config.js里把devServer端口改成8081或者让后端换端口。前后端联调时用我前面说的proxy代理方案前端请求/api前缀的接口全部转发到后端。这样前端代码里不需要写死http://localhost:8080这种地址以后部署到服务器上改代理配置就行代码一行不用动。5. 常见问题与排查技巧实录5.1 SpringBoot版本过高的坑“springboot版本太高”这个话题在技术社区里热度一直很高核心症状是下载的源码基于SpringBoot 2.x但项目新建时IDEA默认或你自己下载的依赖里引了SpringBoot 3.x的核心依赖。SpringBoot 3.x最大的变化有两条一是Java版本最低要求17二是javax.servlet包迁移到了jakarta.servlet。老项目里的import javax.servlet.http.HttpServletRequest在SpringBoot 3.x下全部编译报错。还有一个配置差异SpringBoot 3.x使用spring.mvc.pathmatch.matching-strategy的默认值变成path_pattern_parser跟SpringFox的Swagger配置会有冲突导致应用启动直接失败。我的建议是拿到一个源码项目先别急着开工改代码先看pom.xml里的parent标签或者dependencies里的spring-boot-starter-parent版本号然后确认自己本地的JDK版本匹配。如果代码是2.x的JDK是1.8的那就老老实实用2.x版本不要盲目追新。5.2 Vue依赖安装与编译经典报错前端项目最常见的几个报错我按出现频率排个序。第一个是上面提到的Error: error:0308010C:digital envelope routines::unsupportedNode 17以上版本跑Webpack 4项目时的公开处刑。解决办法有几种降Node版本、升级Webpack、或者加NODE_OPTIONS--openssl-legacy-provider启动参数。但对一个别人写的项目最省心的是找一个Node 16的LTS版本配合用。第二个是Failed to load tsconfig vue/tsconfig/tsconfig.web.json。这个是Vue 3 TypeScript项目的经典问题用了vue/tsconfig扩展包但本地依赖没装上或者版本和vue-tsc不匹配。解决方案是删掉node_modules和package-lock.json然后重新安装依赖。如果还不行看看是不是npm版本太老、解析不了workspace的依赖关系。第三个是npm install装到一半卡死或者报ETIMEDOUT。基本不用怀疑就是网络问题。换镜像源或者用yarn老版本、cnpm都能绕过。用淘宝镜像时配置一下npm config set registry https://registry.npmmirror.com5.3 MySQL连接与数据中文乱码问题项目启动后能跑但一操作数据就报错或者中文显示成问号十有八九是编码问题。新建数据库时漏了DEFAULT CHARACTER SET utf8mb4表里就是默认的latin1。排查方式就是登录MySQL看一眼SHOW CREATE TABLE student;如果建表语句里编码不是utf8mb4只需要重建表或用ALTER TABLE转换。另外后端JDBC连接串里的characterEncodingutf8也别忘了两端编码一致才能保证数据落地无乱码。MySQL 8.0连接报Public Key Retrieval is not allowed的具体解决方式就是改连接串在url末尾追加allowPublicKeyRetrievaltrue。这个问题源于8.0默认的caching_sha2_password认证插件需要请求RSA公钥来加密密码传输客户端默认不允许这个请求所以直接把开关打开就行。这个参数设置后问题立即消失屡试不爽。5.4 端口占用与启动失败速查手册最后整理一个高频错误排查清单直接分享给大家症状可能原因解决方式后端启动报Port 8080 was already in use端口被其他程序占用netstat -ano | findstr 8080找到PID后结束进程或改后端端口前端启动报Port 5173 was already in use端口被占用Vite会默认换端口但如果被防火墙阻断也会异常手动指定端口加--port参数后端启动时控制台报无法连接MySQL数据源配置错误或MySQL未启动优先检查application.yml里的用户名密码、地址端口然后用mysql -u root -p验证能不能登录登录后列表页白屏前端接口调用失败网络请求404F12打开开发者工具看Network面板确认/api请求是否被代理到后端选课请求一直转圈后端事务死锁或者慢SQL看后端日志排查锁等待或使用Spring Boot Actuator的/actuator/health确认服务状态前端提示跨域请求被拦截后端CORS未配置后端加CrossOrigin或全局CorsFilter或前端配置代理5.5 直接运行的终极检查清单标题里写了“可直接运行”但“直接运行”也有前置条件。我建议拿到压缩包后按这个顺序过一遍看README或项目说明文档里的环境要求确认JDK版本、Node版本、MySQL版本三个大前提满足。启动MySQL创建数据库导入SQL文件检查核心表和数据。后端改数据源配置启动看到Tomcat端口号后再进行下一步。前端装依赖启动开发服务浏览器访问Vite给的地址。用初始账号登录试着走一遍“选课→退课→教师录入成绩→学生查成绩”的完整链路。把这条链路走通了系统的可信度就验证完成了。这条链路里任何一步卡住优先翻上面那张排查表。6. 项目扩展与实际落地思考6.1 从课程设计到生产环境的差距如果你是用这个项目交课程设计或者开题报告当前版本已经够用了。但如果你想把它往真实生产环境推差距还是明显的。第一是缓存。选课高峰期如果几千人同时刷新课程列表每次都打MySQL数据库数据库压力会非常大。正常做法是引入Redis缓存课程列表热点数据选课名额扣减也优先基于Redis原子操作再异步同步到MySQL。但教学项目里引入Redis会把复杂度拉高一个台阶所有要看你的目标是“交作业”还是“上线真用”。第二是消息队列。高并发选课场景下选课请求先进队列削峰后端消费者慢慢排队处理选课这样能大幅减少数据库的并发冲击。引入RabbitMQ或者RocketMQ后端架构的“成色”会明显不一样这部分对想冲刺高分毕业设计的同学来说可以认真琢磨。第三是日志与监控。后端现在如果只有控制台输出上线后排查问题就要靠人肉翻日志生产环境必须接logback配置日志滚动收集错误日志到日志平台再配一套Spring Boot Admin或者Prometheus监控。6.2 选课策略的灵活配置现在的选课逻辑是“先到先得”这是最简单也最常见的规则。但真实高校往往需要抽签模式——“预选阶段先都提交过了截止时间统一抽签分配”。如果要支持抽签模式后端需要加一个定时任务在选课截止后统一处理候选列表用随机算法或权重算法决定最终入选名单并给落选学生发消息通知。这个改动虽然表面看只是把“立即成功”改成“异步等待”但整个接口的交互设计、状态流转、数据库表字段都要跟着调整。另外还有“选课时间冲突检测”。现在的课程表设计里只有“星期几第几节”如果同时间段选了多门课系统应该在提交时就检测并提示。实现方式不复杂查出学生所有已选课程时间和待选课程比对但需要课程表里把上课时间改成结构化字段。这是很多开源选课系统没有做好的点也是让简历项目出彩的一个切入点。6.3 给你接手这个项目的三点建议第一拿到代码先别急着启动先把数据库ER图梳理一遍。我习惯的做法是画个简单的表关系图把user、course、student_course三张主表的关系捋清再去看代码顿时通透很多。上来就闷头启动运行是能跑通但面试官问你“这个表为什么这么设计”的时候就容易卡壳。第二选一个你最爱抱怨的点改造成亮点。最典型的给选课接口写一段并发压力测试用JMeter模拟50个线程同时选最后一门课把数据跑出超卖问题再贴上你修复后的对比结果。这种“发现问题→解决问题”的过程比代码本身更值钱。第三前后端分离的项目部署时别只会在本地起服务。学习用Docker把MySQL、后端、前端分别打包成镜像用docker-compose up -d一键拉起完整环境这对后续找工作聊项目时的表达加分非常明显。7. 写在最后的个人经验分享这套选课系统我实际跑过好几遍每次都会发现不同细节问题过程中最大的感受是源码本身其实不难难的是“读懂别人思路”和“在别人的代码里精确改需求”。我自己接手一个开源的全栈项目会是这样一个路径先数据库建模表结构关系梳理业务再后端接口全量过一遍明白每个接口在干什么再快速浏览前端路由和页面组件最后才动手改代码。这个顺序能帮你快速嫁接别人的代码成为自己的能力。如果你能从头到尾把选课事务、JWT逻辑、动态路由这三个点给别人讲明白这套系统的价值就彻底吃透了。最后再分享一个小技巧。接这种项目的时候建立一个本地环境变量配置文件比如application-local.yml只放你自己机器的数据源密码和个性化配置。这样不管换机器还是换环境都不用反复去改主配置文件。既能保护隐私也能避免误操作改动核心配置后项目起不来这个习惯从这套选课系统开始养成后面做任何全栈项目都用得上。