佚格麻瓜1. 项目概述
这个基于SSM+Vue的学生选课系统是一个典型的毕业设计项目，采用了当前企业级开发中最流行的前后端分离架构。前端使用Vue.js框架，后端采用Spring+SpringMVC+MyBatis（SSM）技术栈，实现了从学生选课、教师管理到教务排课的全流程信息化管理。
我在实际开发过程中发现，这类系统虽然功能看似简单，但要真正做好需要考虑很多细节问题。比如选课冲突检测、课表可视化展示、权限精细控制等，都是需要特别注意的技术难点。下面我就从系统设计到具体实现，分享一些实战经验和避坑指南。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术选型与架构设计
2.1 为什么选择SSM+Vue组合
SSM框架作为JavaEE开发的"黄金组合"，具有成熟稳定、社区资源丰富的特点。Spring的IoC和AOP特性让系统更易维护，MyBatis的灵活性适合处理复杂的选课业务逻辑。而Vue.js的响应式特性和组件化开发模式，特别适合构建交互复杂的选课界面。
注意：不建议初学者直接使用SpringBoot，虽然配置简单但会隐藏很多原理细节。用传统SSM框架搭建更能理解底层机制。
2.2 系统架构图解
code复制前端层：Vue2.x + ElementUI + Axios
↑↓ HTTP/JSON
应用层：SpringMVC + 自定义业务逻辑
↑↓
持久层：MyBatis + MySQL
↑↓
数据层：MySQL 8.0
这种分层架构保证了系统的可扩展性。我在项目中还加入了Redis缓存选课结果，有效缓解了选课高峰期的数据库压力。
3. 核心功能实现细节
3.1 选课冲突检测实现
选课系统的核心难点在于时间冲突检测。我的解决方案是在数据库层面建立课程时间模型：
sql复制CREATE TABLE `course_schedule` (
`id` int NOT NULL AUTO_INCREMENT,
`course_id` int NOT NULL,
`week_day` tinyint NOT NULL COMMENT '1-7表示周一到周日',
`start_section` tinyint NOT NULL COMMENT '第几节课开始',
`section_count` tinyint NOT NULL COMMENT '持续几节课',
PRIMARY KEY (`id`),
KEY `idx_course` (`course_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
在选课业务逻辑中，通过MyBatis编写冲突检测SQL：
xml复制<select id="checkConflict" resultType="int">
SELECT COUNT(*) FROM course_schedule a
JOIN student_course b ON a.course_id = b.course_id
WHERE b.student_id = #{studentId}
AND a.week_day = #{weekDay}
AND (
(#{startSection} BETWEEN a.start_section AND a.start_section + a.section_count - 1)
OR
(#{startSection} + #{sectionCount} - 1 BETWEEN a.start_section AND a.start_section + a.section_count - 1)
)
</select>
3.2 Vue前端关键代码
使用Vue的Composition API实现选课车功能：
javascript复制// 选课车Store
const cartStore = reactive({
courses: [],
addCourse(course) {
if(this.courses.some(item => item.id === course.id)) {
ElMessage.warning('该课程已在选课车中')
return
}
this.courses.push(course)
},
removeCourse(id) {
this.courses = this.courses.filter(item => item.id !== id)
}
})
// 冲突检测方法
const checkConflict = async (course) => {
const res = await axios.post('/api/course/check', {
studentId: userStore.id,
courseId: course.id
})
return res.data.hasConflict
}
4. 开发中的典型问题与解决方案
4.1 跨域问题处理
前后端分离开发时一定会遇到跨域问题。建议在后端配置全局CORS过滤器：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowCredentials(true)
.maxAge(3600);
}
}
重要：生产环境一定要替换allowedOrigins("*")为具体的域名，避免安全风险。
4.2 选课超卖问题
使用数据库乐观锁解决选课超卖：
java复制@Transactional
public boolean selectCourse(int studentId, int courseId) {
// 1. 检查课程余量
Course course = courseMapper.selectForUpdate(courseId);
if(course.getRemain() <= 0) {
return false;
}
// 2. 扣减余量
int affected = courseMapper.updateRemain(
courseId,
course.getRemain() - 1,
course.getVersion()
);
if(affected == 0) {
throw new OptimisticLockingFailureException("选课冲突，请重试");
}
// 3. 创建选课记录
StudentCourse sc = new StudentCourse();
sc.setStudentId(studentId);
sc.setCourseId(courseId);
studentCourseMapper.insert(sc);
return true;
}
5. 项目部署与优化建议
5.1 前端部署要点
使用Nginx部署Vue项目时，要注意配置路由history模式：
nginx复制server {
listen 80;
server_name yourdomain.com;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
}
}
5.2 性能优化方案
- 课程列表缓存：使用Redis缓存热门课程
- 静态资源CDN加速：将图片等静态资源上传至CDN
- 数据库读写分离：查询走从库，写入走主库
- 前端组件懒加载：使用Vue的异步组件
javascript复制const CourseList = () => import('./components/CourseList.vue')
6. 毕业设计答辩技巧
- 重点展示技术难点解决方案（如冲突检测算法）
- 准备系统架构图和ER图
- 演示时要模拟高并发场景（可用JMeter测试）
- 提前准备常见问题回答：
- 为什么选择SSM而不是SpringBoot？
- 如何保证选课数据的准确性？
- 系统能支持多少并发用户？
我在实际开发中最大的体会是：选课系统看似简单，但要考虑的业务边界条件非常多。建议开发时先画出完整的流程图，明确各种异常情况的处理方式，这会大大减少后期的调试时间。