SpringBoot+Vue+MySQL在线课程管理系统毕业设计实战解析

1. 毕业设计选这个题，我是怎么想的

做毕业设计的时候，说实话我纠结了挺长时间。一开始想做个简单的博客系统，后来觉得知识点太单薄，答辩的时候没什么可讲的。又想过做电商类项目，但商品、订单、支付这一套东西，涉及到的业务逻辑太多，光是支付回调就能折腾半个月，而且很多同学的选题都集中在电商上，答辩撞车严重。

最后我选了“在线课程管理系统”这个方向，核心组合就是大家耳熟能详的 SpringBoot + Vue + MySQL。选择这个题目，有几个实打实的好处：

第一，业务完整度够。一个课程管理系统不是简单的增删改查，它包含用户注册登录、课程分类展示、课程详情、视频课时播放、选课记录、后台管理、公告发布等多个模块，既有前台面向学生的展示逻辑，也有后台面向管理员的维护逻辑。这套东西做下来，前端、后端、数据库全都覆盖到了，知识点非常全面。

第二，技术栈主流。SpringBoot 是 Java 后端开发的事实标准，Vue 是国内前端使用率最高的框架之一，MySQL 更是几乎所有项目都绕不开的关系型数据库。用这套组合做毕设，面试的时候被问到项目经验，能聊的东西非常多，也符合企业对初级开发者的技能要求。

第三，可扩展性强。做完基础版之后，如果你想让项目更有亮点，可以往里面加 Redis 缓存、ElasticSearch 搜索、微信扫码登录、在线支付等进阶功能。哪怕不加，现有的系统已经足够支撑一篇结构完整的毕业论文。

这篇文章，我就把整个项目的完整设计和实操过程拆开来讲，从技术选型、数据库设计到前后端核心代码、打包部署、常见问题排查，一步不落地分享出来。不管你是零基础还是有一定经验的在校生，跟着这条线走下来，都能把它做成一个能跑、能演示、能答辩的项目。

2. 技术选型：为什么要锁定 SpringBoot + Vue + MySQL

2.1 后端：SpringBoot 到底解决了什么问题

很多同学大一学过 SSM（Spring + SpringMVC + MyBatis），上手做项目的时候会发现配置特别繁琐。要写 Spring 的配置文件、SpringMVC 的配置文件，还要在各种 XML 里配置包扫描、视图解析器、数据库连接池。光是搭一个能跑起来的环境，就能劝退一批人。

SpringBoot 最大的贡献，就是把这些繁琐的配置全部自动化了。它基于“约定优于配置”的思想，把常用的依赖组合、自动配置逻辑全部封装好，你只需要引入对应的 starter，写少量配置，就能快速启动一个 Web 服务。

以 MySQL 数据库连接 为例，在 SSM 项目里，你需要在 XML 中配置数据源、SqlSessionFactory、事务管理器等一堆东西。而 SpringBoot 项目里，只需要在 application.yml 中写好连接信息，引入 spring-boot-starter-web、mybatis-plus-boot-starter、mysql-connector-java 这三个依赖，然后直接写 Mapper 接口和注解 SQL，项目就能跑起来。

我选择 SpringBoot 作为后端，还有一个重要原因：它内置了 Tomcat。本地开发不需要单独装 Tomcat 或者配置外部容器，执行主方法就能启动 Web 服务，部署的时候打成 jar 包，服务器上有 JDK 就能直接运行。这个特性对于毕设的部署演示环节简直太友好。

2.2 前端：Vue 为什么比传统页面开发更适合这种项目

如果这个课程管理系统用传统的 JSP 或者 Thymeleaf 模板引擎来写，前后端代码会高度耦合，页面切换全靠刷新，用户体验也比较生硬。而且 JSP 技术现在企业里用得已经很少了，面试的时候谈这个，技术上也不占优势。

Vue 的优势在于它是一套完整的渐进式前端框架。用 Vue 开发，页面的数据渲染、路由切换、状态管理都更加清晰：

• vue-router 负责前端路由，实现多页面应用的无刷新跳转
• axios 负责前后端接口通信，通过封装拦截器统一处理 Token 和异常
• element-ui 或 element-plus 提供现成的 UI 组件，表格、表单、弹窗、分页这些通用功能不需要自己造轮子
• 组件化的开发模式，让课程列表、课程详情、视频播放器、后台管理表格都可以拆成独立组件分别维护

对于在线课程管理系统这种前后端分离架构的项目，Vue 是非常合适的表现层方案。而且 Vue 的上手曲线相对平缓，如果你之前没有系统学过前端，花一周时间看一遍官方文档，再照着项目敲一遍，基本就能应付大部分页面的开发需求。

2.3 数据库：MySQL 在课程系统里的定位

在线课程管理系统涉及的数据其实是比较典型的业务数据，包括用户的账号信息、课程的基础信息、课程分类、课程章节与课时、选课记录、公告等。这些数据之间存在明确的关系，例如一个课程下包含多个章节，每个章节下有多个课时，一个用户可以选修多门课程。

MySQL 作为一个成熟的关系型数据库，处理这种结构化数据有天然优势：

• 表结构清晰，主外键关系明确，方便维护数据一致性
• 支持 SQL 查询和联合查询，可以方便地统计选课人数、课程数量等
• 事务机制可以保证选课、添加课时这类操作的原子性
• 索引机制能够有效提升查询效率，在数据量增大的情况下依然能保持较好的性能

对于毕设项目来说，MySQL 的体量和功能刚刚够用，不轻也不重。配合 Navicat 或者 MySQL Workbench 这类图形化工具，建表、导数据、调试 SQL 都非常直观。

3. 需求分析：在线课程管理系统到底要做什么

3.1 用户角色与权限：学生、教师、管理员三种身份

任何一个系统，第一步都要搞清楚使用者是谁。在线课程管理系统包含三个角色，它们的权限差异非常大。

学生是最主要的使用者。学生登录后可以浏览课程列表、查看课程详情、选择课程进行学习、播放课程视频、发表课程评论、修改个人资料。学生不能管理课程内容，也不能进入后台管理页面。

教师是课程内容的维护者。教师登录后可以创建课程、维护课程的章节结构、上传课时视频、修改课程介绍和封面。需要注意的是，教师只能管理和自己相关的课程，不能查看和操作其他教师的课程。

管理员负责整个系统的运营和维护。管理员可以管理所有角色，包括禁用违规用户、删除不良课程、发布系统公告、查看平台数据统计等。

在技术实现上，我采用的是 JWT（JSON Web Token）配合拦截器进行权限验证。用户登录成功后，后端生成一个 Token，里面封装了用户 ID、用户名、角色信息。前端在请求头中携带 Token，后端通过拦截器解析 Token 并校验角色权限，如果访问了超出权限范围的接口，直接返回 403 状态码。

3.2 核心业务流程：从课程发布到在线学习

整个系统的核心流程分成两条线：管理线和学习线。

管理人员或教师经过认证后，发布课程的流程是：创建课程信息 -> 维护课程分类 -> 添加章节 -> 在章节下添加课时 -> 上传课时视频和课程简介。一套操作下来，课程才算完整。

学生的使用流程是：注册账号 -> 登录系统 -> 浏览课程列表 -> 点击查看课程详情 -> 选课 -> 进入章节列表 -> 点击课时播放视频 -> 完成学习。

在这个流程里，有一个关键的业务规则值得强调：学生必须先选课，才能查看和播放课时。也就是说，没有选课时，课程详情页只展示课程封面、简介、章节列表和选课人数，课时视频是锁住的。选课成功后，课时解锁，学生才能正常观看视频。

这个规则的实现并不复杂，数据库里加一张选课表，记录学生 ID 和课程 ID。查询课时列表时，先判断当前用户是否已经选过这门课。如果已选，接口返回可播放的视频地址；如果未选，返回课程锁定状态，前端展示锁定的图标。

3.3 视频播放：课程系统的技术难点所在

在线课程系统比普通的管理系统多一个关键需求：视频播放。

我当时第一个想到的是直接插入视频链接，用 HTML 的 video 标签来播放。但很快发现这种方式有明显问题：视频文件过大时加载慢、拖动进度条卡顿、手机端兼容性差。

这里需要引入一个概念：视频切片。简单说，把一个完整的视频文件按时间切分成很多小的分片，比如每 10 秒一个切片，然后生成一份索引文件。播放器先加载索引文件，再按顺序加载视频分片。这样播放时只需要加载当前需要播放的那一小段内容，既能快速启动，也能根据用户拖动进度快速切换对应分片，视频加载压力会小很多。

在实操中，我采用了 HLS 协议（HTTP Live Streaming），实际项目中接触到的课程视频通常已经由资源中心转换成了 m3u8 格式。m3u8 是 HLS 协议中的索引文件格式，里面记录的是视频分片的地址和播放顺序。前端播放器加载 m3u8 文件后，就能按顺序拉取视频分片进行播放。

在这个项目中，视频存储我采用的方案是：视频文件统一存放在服务器的指定目录下，m3u8 文件和对应的 ts 视频分片也放在该目录下，数据库只存储视频的访问路径。前端页面通过拼接后端返回的完整地址来播放视频。在后端接口层面，只需要把文件存放在 SpringBoot 配置的静态资源目录中，然后配置资源映射，这样播放器就能通过 URL 直接访问到视频文件。

另一种方案是把视频上传到云存储服务，然后通过服务商提供的转码功能生成 m3u8 格式，直接拿播放地址来用。这种方案省事，但涉及第三方服务和费用，对于毕设来说，还是本地存储更可控、更好演示。

4. 数据库设计：表怎么建才能不返工

4.1 核心表结构与字段设计思路

数据库设计是项目的地基。设计得不好，后面写代码、联调接口的时候，改表结构会牵扯到一大片代码。我这个课程系统总共设计了六张核心表。

用户表（sys_user）：存储所有角色的账号信息。核心字段有用户 ID、用户名、密码、昵称、头像、角色类型（0 管理员、1 教师、2 学生）、手机号、邮箱、创建时间、状态。注意密码一定不要明文存储，我使用的是 BCrypt 加密方式，加密后的密码是不可逆的，哪怕数据库泄露，也不会直接暴露用户密码。

课程分类表（course_category）：存储课程所属的分类，比如 Java 开发、前端开发、数据库、人工智能等。字段包括分类 ID、分类名称、父级分类 ID、排序号。

课程信息表（course_info）：存储课程的基本信息和课程状态。核心字段有课程 ID、课程名称、课程封面图地址、课程简介、所属分类 ID、讲师 ID（关联用户表）、课程价格（如果有收费课程）、课程状态（0 草稿、1 已发布、2 已下架）、创建时间、更新时间。

章节表（course_chapter）：存储课程下的章节信息。字段有章节 ID、课程 ID、章节名称、排序号。一个课程会有多个章节，通过课程 ID 进行关联。

课时表（course_lesson）：存储章节下的具体课时信息。字段有时课 ID、章节 ID、课时名称、视频地址、视频时长、排序号、是否免费试看。课时表是视频播放的载体，多个课时通过章节 ID 关联到同一个章节下。

选课记录表（user_course）：存储学生选课的信息。字段有选课 ID、学生 ID、课程 ID、选课时间、学习进度。这张表就承载了“学生选课后才能观看课时”的业务规则。

整个表结构的主线逻辑是：分类 1 对多 课程，课程 1 对多 章节，章节 1 对多 课时，用户多对多 课程通过选课表关联。

4.2 关键索引设计与 SQL 示例

良好的索引设计能极大提升查询效率。我在课程列表分页查询和选课记录查询中，加了几个必要的索引：

sql复制-- 课程信息表：按分类查询时，分类 ID 字段需要索引
ALTER TABLE course_info ADD INDEX idx_category_id (category_id);

-- 选课记录表：按学生查选课列表时，学生 ID 是查询条件
ALTER TABLE user_course ADD INDEX idx_student_id (student_id);

-- 选课记录表：联合索引，防止同一学生重复选同一课程
ALTER TABLE user_course ADD UNIQUE INDEX uk_student_course (student_id, course_id);

这里补充讲一个实践中的细节：联合索引中的唯一索引，不仅能提升查询效率，还能在数据库层面防止用户重复选课。就算代码里漏掉了校验，数据库也会抛出重复插入的异常，起到双保险的作用。

4.3 初始化数据的必要性

设计完表结构之后，一定要往里插入测试数据。很多同学直接把表建好就开始写后端代码，结果页面做好之后没有数据显示，又要回头造数据，效率非常低。

我建议把建表脚本和数据初始化脚本分开，写成两个 SQL 文件。数据初始化脚本里包含一个管理员账号、一个教师账号、两个学生账号、几条课程分类、几门课程及对应的章节课时。这样项目部署到新环境时，执行一下初始化脚本，系统就有基础数据可以演示了。

密码字段注意要填 BCrypt 加密后的值，不要直接写明文。后端的注册接口会自动做加密处理，但初始化脚本里的数据是直接插入数据库的，所以要先通过在线 BCrypt 生成器把密码转成加密串，再写进脚本里。

5. 后端实操：SpringBoot 核心代码怎么敲

5.1 项目初始化和依赖配置

我使用的是 IDEA 开发工具，创建项目时直接选择 Spring Initializr。这里有一个值得注意的地方：SpringBoot 的版本选择不能盲目追新。我刚开始用的是 SpringBoot 3.x 版本，结果发现它要求 JDK 17 以上，而且部分第三方依赖还没有完全兼容，折腾了很久。后来老老实实换成了 SpringBoot 2.7.x + JDK 8，开发过程顺畅多了。

推荐的 pom.xml 核心依赖如下：

xml复制<dependencies>
    <!-- Web 开发支持 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!-- MyBatis Plus 框架 -->
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
        <version>3.5.2</version>
    </dependency>

    <!-- MySQL 驱动 -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>

    <!-- JWT 认证 -->
    <dependency>
        <groupId>io.jsonwebtoken</groupId>
        <artifactId>jjwt</artifactId>
        <version>0.9.1</version>
    </dependency>

    <!-- 密码加密工具 -->
    <dependency>
        <groupId>org.springframework.security</groupId>
        <artifactId>spring-security-crypto</artifactId>
    </dependency>

    <!-- Lombok 简化实体类代码 -->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
</dependencies>

对应的 application.yml 配置如下。如果服务器配置了公网 IP，把 localhost 换成对应 IP 即可：

yaml复制server:
  port: 8080

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/course_system?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
  servlet:
    multipart:
      max-file-size: 200MB
      max-request-size: 200MB

# 自定义配置
course:
  jwt:
    secret: my-secret-key-for-course-system
    expire-hours: 24
  upload:
    path: /data/course-video/

5.2 登录认证：JWT 的完整实现

登录接口是系统的入口，也是安全的第一个保障。用户提交用户名和密码后，后端先通过用户名查询用户信息，再用 BCryptPasswordEncoder 校验密码是否一致。校验通过后，生成 JWT Token 并返回给前端。

生成 Token 的核心代码如下：

java复制public String generateToken(Long userId, String username, Integer role) {
    return Jwts.builder()
            .setSubject(username)
            .claim("userId", userId)
            .claim("role", role)
            .setIssuedAt(new Date())
            .setExpiration(new Date(System.currentTimeMillis() + expireHours * 3600 * 1000))
            .signWith(SignatureAlgorithm.HS256, secretKey)
            .compact();
}

拦截器的核心逻辑是：从请求头的 Authorization 字段中取出 Token，尝试解析。如果解析失败或 Token 已过期，直接返回 401 状态码；如果解析成功，将用户 ID 和角色信息放入请求上下文，供后续接口使用。

这里分享一个我踩过的坑：JWT 的 HS256 签名算法，在 jjwt 0.9.1 版本中要求密钥长度不能少于 256 位。我第一次随便写了几个字符做密钥，结果启动时报错 WeakKeyException。后来换成一长串随机字符串，问题就解决了。

5.3 课程分页查询接口

课程列表页是学生使用最频繁的页面，后端需要实现分页查询和条件筛选。我使用 MyBatis Plus 提供的分页插件，查询条件包括课程名称、分类 ID、发布状态。

核心代码：

java复制@Override
public IPage<CourseVO> getCoursePage(CourseQuery query) {
    // 构建查询条件
    LambdaQueryWrapper<CourseInfo> wrapper = new LambdaQueryWrapper<>();
    wrapper.eq(CourseInfo::getStatus, 1); // 只查已发布的课程
    if (StringUtils.hasText(query.getCourseName())) {
        wrapper.like(CourseInfo::getCourseName, query.getCourseName());
    }
    if (query.getCategoryId() != null) {
        wrapper.eq(CourseInfo::getCategoryId, query.getCategoryId());
    }
    wrapper.orderByDesc(CourseInfo::getCreateTime);

    // 分页查询
    Page<CourseInfo> page = new Page<>(query.getPageNum(), query.getPageSize());
    IPage<CourseInfo> result = courseInfoMapper.selectPage(page, wrapper);

    // 转换成前端需要的 VO 对象
    return result.convert(course -> {
        CourseVO vo = new CourseVO();
        BeanUtils.copyProperties(course, vo);
        // 查询学这门课的人数
        vo.setStudentCount(userCourseMapper.selectCount(
            new LambdaQueryWrapper<UserCourse>()
                .eq(UserCourse::getCourseId, course.getId())));
        return vo;
    });
}

5.4 课时视频接口与访问控制

课时视频是学习的最终落点，这个接口会有严格的权限判断。学生 A 想看课程 B 的视频，后端要先判断 A 是否选了 B 这门课，如果没选，就返回无权限信息。

接口逻辑：

java复制@GetMapping("/lesson/{lessonId}/play")
public Result getLessonPlayUrl(@PathVariable Long lessonId, HttpServletRequest request) {
    // 1. 获取当前登录用户
    Long userId = getCurrentUserId(request);

    // 2. 查询课时信息
    CourseLesson lesson = courseLessonMapper.selectById(lessonId);
    if (lesson == null) {
        return Result.error("课时不存在");
    }

    // 3. 查询这个课时所属的课程
    CourseChapter chapter = courseChapterMapper.selectById(lesson.getChapterId());
    CourseInfo course = courseInfoMapper.selectById(chapter.getCourseId());

    // 4. 判断用户是否选课或是否为课程教师
    boolean hasPermission = checkPermission(userId, course);
    if (!hasPermission) {
        return Result.error(403, "请先选课再观看视频");
    }

    // 5. 返回视频播放地址
    return Result.success(buildVideoUrl(lesson.getVideoPath()));
}

5.5 统一返回结果与全局异常处理

为了让前后端接口约定清晰，我封装了一个统一返回对象 Result，包含状态码、提示信息和数据三个字段。所有接口的返回值都是这个结构。

全局异常处理用 @RestControllerAdvice 注解实现，把参数校验异常、业务异常、未知异常分别拦截，统一规范错误信息。这样后端抛出异常时不会直接把堆栈输出到前端，而是返回一段友好的错误提示。

6. 前端实操：Vue 页面开发与联调要点

6.1 Vue 项目的初始化和环境准备

前端项目我使用的是 Vue 2 + Element UI 组合，这个组合非常稳定，配套的教程也多。创建项目时，需要先在本地安装 Node.js 环境。

这里提一句环境配置的流程：从官网下载 Node.js 安装包后直接安装，安装完成后系统会自动带出 npm 命令。然后用命令 npm install -g @vue/cli 安装 Vue 脚手架。新建项目时，终端执行 vue create course-frontend，选择默认配置即可。

需要注意的是，npm 默认的下载源在某些网络环境下速度会比较慢。可以换成国内镜像源来解决。执行 npm config set registry https://registry.npmmirror.com 然后再安装依赖，速度会有明显改善。

依赖安装命令：

bash复制npm install axios vue-router@3 element-ui

6.2 axios 拦截器封装

axios 是前后端联调的核心工具。我在项目里封装了一次，把所有请求和响应统一处理，避免每个页面都重复写获取 Token 和错误提示的逻辑。

javascript复制import axios from 'axios'
import { Message } from 'element-ui'
import router from '@/router'

const request = axios.create({
  baseURL: '/api',
  timeout: 15000
})

// 请求拦截器:统一携带 Token
request.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = token
  }
  return config
})

// 响应拦截器:统一处理异常
request.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    if (error.response && error.response.status) {
      const status = error.response.status
      if (status === 401) {
        Message.error('登录已过期，请重新登录')
        localStorage.removeItem('token')
        router.push('/login')
      } else if (status === 403) {
        Message.error('没有权限执行此操作')
      } else {
        Message.error(error.response.data.message || '请求失败')
      }
    } else {
      Message.error('网络异常，请稍后重试')
    }
    return Promise.reject(error)
  }
)

export default request

6.3 路由与导航守卫

路由部分，我使用 vue-router 的嵌套路由实现了前台页面和后台页面的分开管理。页面结构大致是：

• /login 登录页面
• / 首页布局，包含导航栏和内容区域
  • /course/list 课程列表页
  • /course/detail/:id 课程详情页
  • /course/learn/:courseId 课程学习页，包含章节课时列表和视频播放器
  • /user/profile 个人中心
• /admin 后台管理布局，只有管理员和教师可以访问
  • /admin/course 课程管理页
  • /admin/lesson 课时管理页
  • /admin/user 用户管理页

导航守卫在 router.beforeEach 中实现，核心逻辑是判断页面是否需要登录权限。如果用户没有 Token 又想访问受保护页面，直接跳转登录页。后台管理页面还会校验角色。

javascript复制router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  const role = localStorage.getItem('role')

  if (to.meta.requiresAuth && !token) {
    next('/login')
    return
  }

  if (to.meta.requiresAdmin && role !== '0' && role !== '1') {
    next('/')
    return
  }

  next()
})

6.4 视频播放组件的实现

视频播放是前端最有技术含量的部分。如果课时视频是 mp4 格式，直接使用 HTML 的 video 标签就能播放。但如果是 m3u8 格式的切片视频，就需要额外处理。

我这里使用了 video.js 播放器，配合 videojs-http-streaming 来支持 m3u8 播放。装依赖包之后，在组件里初始化的示例如下：

javascript复制import videojs from 'video.js'
import 'video.js/dist/video-js.css'

export default {
  name: 'VideoPlayer',
  props: {
    videoUrl: { type: String, required: true }
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, {
      controls: true,
      autoplay: false,
      preload: 'auto',
      fluid: true,
      sources: [{
        src: this.videoUrl,
        type: 'application/x-mpegURL'
      }]
    }, () => {
      console.log('播放器初始化完成')
    })
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  }
}

这里要特别提醒一个常见问题：application/x-mpegURL 是 m3u8 格式的标准 MIME 类型，如果写错了，播放器会报格式不支持的错误。我在开发时开始写成了 application/vnd.apple.mpegurl，部分浏览器也能识别，但为了统一兼容，还是建议用 application/x-mpegURL。

6.5 Vue 打包后布局异常的排查经验

前端开发完成后，执行 npm run build 会生成 dist 静态目录。部署到服务器上之后，比较容易出现的一个问题是：页面样式丢失或者资源加载 404。

这个问题的根源在于，Vue 项目打包时默认使用的是绝对路径，如果部署在 Nginx 的二级路径下，资源定位就会出错。解决办法是在项目根目录的 vue.config.js 中，把 publicPath 改为 './'：

javascript复制const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './',
  lintOnSave: false,
  devServer: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

这样打包出来的 index.html 会使用相对路径加载 JS 和 CSS 文件，不管部署在 Nginx 根路径还是子路径下，都能正常显示。这个问题是很多同学容易忽略的地方，提前处理好能省掉不少麻烦。

7. 打包部署：让项目在别的电脑上也能跑起来

7.1 环境要求对照表

部署整套项目前，先说明运行环境的要求：

7.2 后端打包与启动

后端打包在 IDEA 右侧的 Maven 面板中执行 clean 然后 package。打包成功后，在 target 目录下找到一个 jar 包，就是这个项目的产物。

将这个 jar 包上传到服务器，执行以下命令启动：

bash复制java -jar course-system.jar

如果是远程服务器部署，推荐使用 nohup 后台启动方式：

bash复制nohup java -jar course-system.jar > course-system.log 2>&1 &

启动成功后，可以在浏览器访问 http://服务器IP:8080，如果看到 SpringBoot 默认的欢迎页或者项目的接口返回数据，说明后端启动正常。

7.3 前端构建与 Nginx 配置

前端在本地执行 npm run build 生成 dist 目录，直接将整个 dist 目录里的内容上传到服务器上的某个目录，比如 /usr/share/nginx/html。

然后修改 Nginx 配置。这里面最关键的是静态资源服务和接口反向代理两个配置：

nginx复制server {
    listen       80;
    server_name  your-domain-or-ip;

    # 前端静态资源
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;  # 防止刷新时404
    }

    # 后端接口反向代理
    location /api/ {
        proxy_pass http://localhost:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 课程视频静态资源映射
    location /video/ {
        alias /data/course-video/;
        types {
            application/x-mpegURL m3u8;
            video/mp2t ts;
        }
    }
}

try_files 这一行一定要加，否则前端路由在访问 /course/detail/1 这种路径时，Nginx 会误认为是要找这个路径下的真实文件，找不到就返回 404。加上之后，Nginx 会直接把所有路由请求重新导向到 index.html，由 Vue Router 接管。

7.4 MySQL 数据库导入

在目标数据库执行建库语句，然后导入建表 SQL 和初始化数据 SQL：

bash复制mysql -u root -p
CREATE DATABASE course_system DEFAULT CHARACTER SET utf8mb4;
USE course_system;
source /data/sql/course_system_init.sql;

导入成功后，检查一下关键表中是否有初始化数据，确认无误后重新启动后端服务，整个项目就部署完成了。

8. 常见问题排查：都是我用时间和头发换出来的经验

8.1 SpringBoot 版本与依赖冲突

这是新手特别容易踩坑的地方。SpringBoot 的版本和 JDK 版本、第三方依赖版本之间有严格的对应关系。

我的建议是，初学阶段不要追新，直接用 SpringBoot 2.7.x 版本，配套 JDK 8。2.7.x 版本的资料最多、踩坑案例最全，遇到问题也最好解决。如果用 SpringBoot 3.x，要求 JDK 17，同时 MyBatis Plus 需要使用 3.5.4 以上的适配版本，SpringFox 系列的 Swagger 也需要替代方案，每一步都是额外的学习成本。

8.2 前后端联调跨域问题

开发阶段，前端跑在 3000 端口，后端跑在 8080 端口，直接请求大概率报跨域错误。解决方式有两种。

第一种，在前端开发服务器中配置 proxy，把 /api 下的请求都转发到后端，这种方式最推荐，因为最终部署时也走的是同域请求。第二种，在后端添加全局跨域配置类，允许所有来源访问。生产环境不建议放开所有来源，但在开发阶段图省事是可以的。

我建议用方案一配合 vue.config.js 中的 devServer.proxy 配置，这样前端代码里只需要写相对路径 /api/xxx，不管本地还是线上，都能正确请求。

8.3 MySQL 8.0 连接报错

如果是 MySQL 8.0 版本，连接 URL 需要带上时区参数 serverTimezone=Asia/Shanghai，驱动类名要使用 com.mysql.cj.jdbc.Driver。如果不加时区参数，会报 The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized 这类错误。

8.4 视频无法播放或 404

视频 404 的问题，排查顺序是这样：先确认视频文件是否真的放在上传目录中，再确认数据库中的视频路径是否正确，最后确认 Nginx 的静态资源映射和 m3u8 类型配置是否正确。

视频无法播放，页面黑屏，先看浏览器控制台报什么错。如果是 Failed to load resource，说明请求地址有问题；如果是 No compatible source was found，说明播放器没有识别视频格式，优先检查 MIME 类型配置。

8.5 前端打包后图片丢失

打包后图片丢失，基本都跟 publicPath 配置有关。项目中使用到的图片资源，如果存放在 src/assets 目录下，打包时 base64 处理或路径重写都可能导致异常。此时需要检查 publicPath 是否设置为 './'。如果是存放在 public 目录下的静态图片，引用路径需要加上根路径前缀，部署到子目录时要特别注意。

最后说几句我的个人体会

整个项目从零到一做完，前后花了一个半月时间。回头来看，这个过程中对我帮助最大的，不是某个框架的新特性，而是自己一步一步排查问题的过程。特别是视频播放和前端打包这两个环节，遇到的问题在书本上完全找不到标准答案，全靠翻官方文档、搜解决方案、反复测试才最终解决。

作为毕业设计，这个选题能做到什么程度，是因人而异的。基础版，把课程管理、选课、章节学习跑通，已经足够顺利答辩。进阶版，可以加入 Redis 缓存热点课程信息、用 RabbitMQ 处理学习记录异步保存、接入短信验证码登录，这些优化在论文里都能作为亮点重点讲述。

在答辩环节，老师大概率会追问几个问题：同样是课程系统，你的系统有什么特色？你是如何处理视频播放兼容性问题的？你的数据库为什么这样设计？只要你把本文中涉及的权限设计、视频方案选型、数据表关系、索引设计这几个点吃透，每一个问题都能拿出自己的思考过程来回答。

希望这篇文章能帮到正在做毕业设计、或者打算用 SpringBoot + Vue 技术栈练手的朋友。有问题欢迎在评论区留言，我看到都会认真回复。