SpringBoot + MySQL + JWT 实现前后端分离的在线教育视频点播平台

《基于 SpringBoot MySQL JWT 的前后端分离在线教育视频点播平台》✅ 前后端分离✅ JWT 鉴权✅ 视频点播✅ 权限分级✅ 技术栈主流面试也能打一、选题背景论文可直接用随着互联网教育的快速发展传统线下教学模式存在以下局限教学资源受时间空间限制课程缺乏统一管理学习进度难以追踪权限管理混乱资源易泄露本系统基于SpringBoot MySQL JWT实现✅ 前后端分离架构✅ 安全认证与权限控制✅ 视频课程在线点播✅ 学习进度记录具有较强的实用价值和推广前景。二、技术架构前端Vue / React ↓ Axios JWT SpringBoot后端 ├── 用户模块 ├── 课程模块 ├── 视频点播模块 ├── 权限模块JWT └── 学习记录模块 ↓ MySQL持久化存储技术作用SpringBoot快速开发MyBatisORMMySQL数据存储JWT无状态鉴权Spring Security可选权限控制Vue Axios前端交互视频存储本地 / 云存储OSS / COS三、系统角色设计1️⃣ 管理员用户管理课程管理视频上传与审核数据统计2️⃣ 教师发布课程上传教学视频查看学生学习进度3️⃣ 学生注册 / 登录浏览课程在线播放视频查看学习记录四、核心业务流程答辩必画用户注册 / 登录 ↓ 获取 JWT Token ↓ 携带 Token 请求接口 ↓ 浏览课程列表 ↓ 选择课程 → 在线播放视频 ↓ 记录学习进度五、数据库设计核心表1️⃣ 用户表userCREATE TABLE user ( id BIGINT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) UNIQUE, password VARCHAR(100), real_name VARCHAR(50), role VARCHAR(20) DEFAULT STUDENT );2️⃣ 课程表courseCREATE TABLE course ( id BIGINT PRIMARY KEY AUTO_INCREMENT, title VARCHAR(100), description TEXT, cover_url VARCHAR(200), teacher_id BIGINT, status INT DEFAULT 1, create_time DATETIME );3️⃣ 视频表videoCREATE TABLE video ( id BIGINT PRIMARY KEY AUTO_INCREMENT, course_id BIGINT, title VARCHAR(100), video_url VARCHAR(300), duration INT COMMENT 秒, sort INT );4️⃣ 学习记录表learning_recordCREATE TABLE learning_record ( id BIGINT PRIMARY KEY AUTO_INCREMENT, user_id BIGINT, video_id BIGINT, progress INT COMMENT 播放进度(秒), finished TINYINT DEFAULT 0, update_time DATETIME );六、JWT 鉴权核心实现⭐重点1️⃣ 引入依赖dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt/artifactId version0.11.5/version /dependency2️⃣ JWT 工具类Component public class JwtUtil { private final String SECRET edu-platform-secret-key; public String generateToken(Long userId, String role) { return Jwts.builder() .setSubject(String.valueOf(userId)) .claim(role, role) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() 86400000)) .signWith(Keys.hmacShaKeyFor(SECRET.getBytes()), SignatureAlgorithm.HS256) .compact(); } public Claims parseToken(String token) { return Jwts.parserBuilder() .setSigningKey(SECRET.getBytes()) .build() .parseClaimsJws(token) .getBody(); } }3️⃣ 登录接口PostMapping(/login) public RMapString, String login(RequestBody LoginRequest req) { User user userService.login(req.getUsername(), req.getPassword()); if (user null) { return R.fail(用户名或密码错误); } String token jwtUtil.generateToken(user.getId(), user.getRole()); MapString, String data new HashMap(); data.put(token, token); data.put(role, user.getRole()); return R.ok(data); }4️⃣ JWT 拦截器Component public class JwtInterceptor implements HandlerInterceptor { Autowired private JwtUtil jwtUtil; Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) { String authHeader request.getHeader(Authorization); if (authHeader null || !authHeader.startsWith(Bearer )) { response.setStatus(401); return false; } String token authHeader.substring(7); try { Claims claims jwtUtil.parseToken(token); request.setAttribute(userId, claims.getSubject()); request.setAttribute(role, claims.get(role)); return true; } catch (Exception e) { response.setStatus(401); return false; } } }5️⃣ 注册拦截器Configuration public class WebConfig implements WebMvcConfigurer { Autowired private JwtInterceptor jwtInterceptor; Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(jwtInterceptor) .addPathPatterns(/api/**) .excludePathPatterns(/api/user/login, /api/user/register); } }七、视频点播核心实现1️⃣ 课程列表接口GetMapping(/api/course/list) public RListCourse listCourses() { return R.ok(courseService.listPublished()); }2️⃣ 视频播放接口GetMapping(/api/video/play/{id}) public RVideoVO playVideo(PathVariable Long id, HttpServletRequest request) { Long userId (Long) request.getAttribute(userId); Video video videoService.getById(id); if (video null) { return R.fail(视频不存在); } // 记录学习进度 learningService.recordPlay(userId, id); return R.ok(VideoVO.from(video)); }3️⃣ 学习进度记录PostMapping(/api/learning/progress) public RVoid updateProgress(RequestBody ProgressRequest req, HttpServletRequest request) { Long userId (Long) request.getAttribute(userId); learningService.updateProgress(userId, req.getVideoId(), req.getProgress()); return R.ok(); }4️⃣ 学习记录 ServiceTransactional public void recordPlay(Long userId, Long videoId) { LearningRecord record recordMapper.selectByUserAndVideo(userId, videoId); if (record null) { record new LearningRecord(); record.setUserId(userId); record.setVideoId(videoId); record.setProgress(0); record.setFinished(false); recordMapper.insert(record); } recordMapper.updateTime(record.getId()); }八、前端请求示例Vue Axios// 登录 const res await axios.post(/api/user/login, { username: student1, password: 123456 }); localStorage.setItem(token, res.data.token); // 携带 Token 请求课程 axios.get(/api/course/list, { headers: { Authorization: Bearer localStorage.getItem(token) } });九、系统特色⭐答辩亮点✅ 前后端完全分离✅ JWT 无状态鉴权适合分布式部署✅ 视频点播 学习进度跟踪✅ 角色权限分级管理员 / 教师 / 学生✅ RESTful 风格接口✅ 可扩展为微服务 / 接入云点播十、安全防护加分项✅ Token 过期机制✅ 密码加密BCrypt✅ 接口防刷Redis 限流✅ 视频防盗链Token 时效 URL✅ XSS / SQL 注入防护十一、毕设论文结构建议章节内容第1章绪论第2章相关技术SpringBoot、JWT、Vue第3章需求分析第4章系统设计E-R图、架构图第5章系统实现JWT鉴权 视频点播第6章系统测试第7章总结与展望十二、可扩展方向体现工作量✅ 视频弹幕 / 评论✅ 课程付费 订单系统✅ 直播教学WebRTC / RTMP✅ 学习数据分析ECharts✅ 移动端适配 / 小程序✅ 接入阿里云 / 腾讯云点播