1. 项目概述与技术栈选型这套在线教育系统源码基于当前主流技术栈构建采用前后端分离架构。后端使用SpringBoot 2框架提供RESTful API服务前端采用Vue3组合式API开发管理界面数据持久层选用MyBatis-Plus增强ORM框架数据库采用MySQL 8.0版本。整套系统源码包含完整的前后端工程文件、数据库脚本以及详细部署文档。技术栈版本经过严格验证SpringBoot 2.7.x与MyBatis-Plus 3.5.3完美兼容Vue3.2 Element Plus 2.3.x支持TypeScriptJDK11推荐Amazon Corretto 11MySQL 8.0.28必须启用utf8mb4字符集注意实际开发中发现SpringBoot 2.7.x与MyBatis-Plus 3.5.17存在事务注解兼容问题建议锁定版本为3.5.32. 系统核心模块解析2.1 课程管理模块实现采用RBAC权限模型控制课程CRUD操作核心接口包括RestController RequestMapping(/course) public class CourseController { Autowired private CourseService courseService; PostMapping PreAuthorize(hasRole(TEACHER)) public Result createCourse(Valid RequestBody CourseDTO dto) { return courseService.createCourse(dto); } GetMapping(/{id}) public Result getCourseDetail(PathVariable Long id) { return courseService.getCourseDetail(id); } }前端采用Vue3的setup语法糖实现响应式表单const formState reactive({ courseName: , coverImage: , price: 0, description: }) const submitForm async () { try { await createCourseAPI(formState) message.success(创建成功) } catch (err) { message.error(err.message) } }2.2 视频点播模块设计采用阿里云OSS存储视频文件关键配置项# application.yml aliyun: oss: endpoint: oss-cn-hangzhou.aliyuncs.com accessKeyId: ${ACCESS_KEY} accessKeySecret: ${SECRET} bucketName: edu-video-bucket callbackUrl: /api/video/callback前端使用vue-video-player组件实现HLS播放template video-player :optionsplayerOptions readyonPlayerReady / /template script setup const playerOptions { autoplay: false, controls: true, sources: [{ type: application/x-mpegURL, src: props.videoUrl }] } /script3. 关键技术实现细节3.1 JWT认证方案优化采用双Token机制accessToken refreshToken增强安全性public class JwtTokenUtil { // accessToken有效期2小时 private static final long ACCESS_EXPIRE 7200; // refreshToken有效期7天 private static final long REFRESH_EXPIRE 604800; public String generateAccessToken(UserDetails user) { return Jwts.builder() .setSubject(user.getUsername()) .setExpiration(new Date(System.currentTimeMillis() ACCESS_EXPIRE * 1000)) .signWith(SignatureAlgorithm.HS512, secret) .compact(); } }前端axios拦截器处理Token刷新// 响应拦截器 instance.interceptors.response.use(response { return response }, async error { const originalRequest error.config if (error.response.status 401 !originalRequest._retry) { originalRequest._retry true const newToken await refreshToken() store.commit(updateToken, newToken) return instance(originalRequest) } return Promise.reject(error) })3.2 高性能分页查询MyBatis-Plus分页优化方案// 配置分页插件 Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL){ Override public void optimizeCount(IPage? page, MappedStatement ms) { // 禁用count查询优化 } }); return interceptor; } // 实际查询 PageCourseVO page new Page(current, size); courseMapper.selectPageWithTeacher(page, queryWrapper);经验当单表数据量超过100万时建议使用基于游标的分页方式替代传统LIMIT分页4. 部署与运维实践4.1 生产环境部署方案推荐使用Docker Compose编排服务# backend/Dockerfile FROM amazoncorretto:11 COPY target/edu-system.jar /app.jar ENTRYPOINT [java,-jar,/app.jar]# docker-compose.yml version: 3.8 services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: ${DB_PASSWORD} volumes: - mysql_data:/var/lib/mysql backend: build: ./backend ports: - 8080:8080 depends_on: - mysql4.2 性能监控配置集成SpringBoot Actuator Prometheus!-- pom.xml -- dependency groupIdio.micrometer/groupId artifactIdmicrometer-registry-prometheus/artifactId /dependency# application.properties management.endpoints.web.exposure.includehealth,metrics,prometheus management.metrics.export.prometheus.enabledtrue前端使用ECharts展示监控数据const initChart () { const chart echarts.init(domRef.value) chart.setOption({ xAxis: { type: category }, yAxis: { type: value }, series: [{ data: props.metrics, type: line }] }) }5. 开发环境搭建指南5.1 后端开发环境安装JDK11并配置环境变量# 验证安装 java -version初始化Maven依赖mvn clean install -DskipTests配置IDEIntelliJ IDEA推荐插件Lombok PluginMyBatisXSpring Assistant5.2 前端开发环境安装Node.js 16nvm install 16安装依赖npm installVSCode推荐插件VolarVue3官方支持ESLintPrettier6. 常见问题解决方案6.1 跨域问题处理SpringBoot配置CORSConfiguration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(*) .maxAge(3600); } }6.2 MyBatis-Plus字段映射问题实体类注解配置示例Data TableName(edu_course) public class Course { TableId(type IdType.AUTO) private Long id; TableField(course_name) private String name; TableField(exist false) private ListChapter chapters; }6.3 Vue3响应式数据丢失使用toRefs保持响应式const state reactive({ courses: [], loading: false }) return { ...toRefs(state), fetchData }7. 扩展功能建议微信小程序端接入使用uni-app框架兼容多端实现扫码登录功能直播功能集成阿里云直播SDK弹幕互动实现智能推荐算法基于用户行为的协同过滤课程相似度计算这套系统在实际教学机构部署后平均响应时间控制在300ms以内支持并发用户数500。特别需要注意的是MySQL8.0默认的caching_sha2_password认证方式需要JDBC连接字符串添加allowPublicKeyRetrievaltrue参数这是很多开发者容易忽略的配置细节。 
长河君 · 2026/8/11 2:13:49 · 阅读 1.2k SpringBoot+Vue3在线教育系统开发实战
1. 项目概述与技术栈选型这套在线教育系统源码基于当前主流技术栈构建采用前后端分离架构。后端使用SpringBoot 2框架提供RESTful API服务前端采用Vue3组合式API开发管理界面数据持久层选用MyBatis-Plus增强ORM框架数据库采用MySQL 8.0版本。整套系统源码包含完整的前后端工程文件、数据库脚本以及详细部署文档。技术栈版本经过严格验证SpringBoot 2.7.x与MyBatis-Plus 3.5.3完美兼容Vue3.2 Element Plus 2.3.x支持TypeScriptJDK11推荐Amazon Corretto 11MySQL 8.0.28必须启用utf8mb4字符集注意实际开发中发现SpringBoot 2.7.x与MyBatis-Plus 3.5.17存在事务注解兼容问题建议锁定版本为3.5.32. 系统核心模块解析2.1 课程管理模块实现采用RBAC权限模型控制课程CRUD操作核心接口包括RestController RequestMapping(/course) public class CourseController { Autowired private CourseService courseService; PostMapping PreAuthorize(hasRole(TEACHER)) public Result createCourse(Valid RequestBody CourseDTO dto) { return courseService.createCourse(dto); } GetMapping(/{id}) public Result getCourseDetail(PathVariable Long id) { return courseService.getCourseDetail(id); } }前端采用Vue3的setup语法糖实现响应式表单const formState reactive({ courseName: , coverImage: , price: 0, description: }) const submitForm async () { try { await createCourseAPI(formState) message.success(创建成功) } catch (err) { message.error(err.message) } }2.2 视频点播模块设计采用阿里云OSS存储视频文件关键配置项# application.yml aliyun: oss: endpoint: oss-cn-hangzhou.aliyuncs.com accessKeyId: ${ACCESS_KEY} accessKeySecret: ${SECRET} bucketName: edu-video-bucket callbackUrl: /api/video/callback前端使用vue-video-player组件实现HLS播放template video-player :optionsplayerOptions readyonPlayerReady / /template script setup const playerOptions { autoplay: false, controls: true, sources: [{ type: application/x-mpegURL, src: props.videoUrl }] } /script3. 关键技术实现细节3.1 JWT认证方案优化采用双Token机制accessToken refreshToken增强安全性public class JwtTokenUtil { // accessToken有效期2小时 private static final long ACCESS_EXPIRE 7200; // refreshToken有效期7天 private static final long REFRESH_EXPIRE 604800; public String generateAccessToken(UserDetails user) { return Jwts.builder() .setSubject(user.getUsername()) .setExpiration(new Date(System.currentTimeMillis() ACCESS_EXPIRE * 1000)) .signWith(SignatureAlgorithm.HS512, secret) .compact(); } }前端axios拦截器处理Token刷新// 响应拦截器 instance.interceptors.response.use(response { return response }, async error { const originalRequest error.config if (error.response.status 401 !originalRequest._retry) { originalRequest._retry true const newToken await refreshToken() store.commit(updateToken, newToken) return instance(originalRequest) } return Promise.reject(error) })3.2 高性能分页查询MyBatis-Plus分页优化方案// 配置分页插件 Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL){ Override public void optimizeCount(IPage? page, MappedStatement ms) { // 禁用count查询优化 } }); return interceptor; } // 实际查询 PageCourseVO page new Page(current, size); courseMapper.selectPageWithTeacher(page, queryWrapper);经验当单表数据量超过100万时建议使用基于游标的分页方式替代传统LIMIT分页4. 部署与运维实践4.1 生产环境部署方案推荐使用Docker Compose编排服务# backend/Dockerfile FROM amazoncorretto:11 COPY target/edu-system.jar /app.jar ENTRYPOINT [java,-jar,/app.jar]# docker-compose.yml version: 3.8 services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: ${DB_PASSWORD} volumes: - mysql_data:/var/lib/mysql backend: build: ./backend ports: - 8080:8080 depends_on: - mysql4.2 性能监控配置集成SpringBoot Actuator Prometheus!-- pom.xml -- dependency groupIdio.micrometer/groupId artifactIdmicrometer-registry-prometheus/artifactId /dependency# application.properties management.endpoints.web.exposure.includehealth,metrics,prometheus management.metrics.export.prometheus.enabledtrue前端使用ECharts展示监控数据const initChart () { const chart echarts.init(domRef.value) chart.setOption({ xAxis: { type: category }, yAxis: { type: value }, series: [{ data: props.metrics, type: line }] }) }5. 开发环境搭建指南5.1 后端开发环境安装JDK11并配置环境变量# 验证安装 java -version初始化Maven依赖mvn clean install -DskipTests配置IDEIntelliJ IDEA推荐插件Lombok PluginMyBatisXSpring Assistant5.2 前端开发环境安装Node.js 16nvm install 16安装依赖npm installVSCode推荐插件VolarVue3官方支持ESLintPrettier6. 常见问题解决方案6.1 跨域问题处理SpringBoot配置CORSConfiguration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(*) .maxAge(3600); } }6.2 MyBatis-Plus字段映射问题实体类注解配置示例Data TableName(edu_course) public class Course { TableId(type IdType.AUTO) private Long id; TableField(course_name) private String name; TableField(exist false) private ListChapter chapters; }6.3 Vue3响应式数据丢失使用toRefs保持响应式const state reactive({ courses: [], loading: false }) return { ...toRefs(state), fetchData }7. 扩展功能建议微信小程序端接入使用uni-app框架兼容多端实现扫码登录功能直播功能集成阿里云直播SDK弹幕互动实现智能推荐算法基于用户行为的协同过滤课程相似度计算这套系统在实际教学机构部署后平均响应时间控制在300ms以内支持并发用户数500。特别需要注意的是MySQL8.0默认的caching_sha2_password认证方式需要JDBC连接字符串添加allowPublicKeyRetrievaltrue参数这是很多开发者容易忽略的配置细节。