企业官网建设流程全解析

1. 需求怎么拆：这个系统到底要做哪些功能

毕业设计拿到“大学生计算机基础网络教学系统”这个题目的时候，大部分人第一反应是“这不就是个网上课表加视频播放页面吗”。真动手做起来才发现，光“网络教学”四个字就能牵扯出课程管理、在线学习、作业闭环、考试评测、师生互动、后台运维一长串事情。在这里我先把需求拆明白，后面写代码才有方向。

先别急着打开IDEA建项目，花半天把题目里的角色和业务场景落实成表格。教学系统的核心角色至少有三个：学生、教师、管理员。学生要能浏览课程、报名课程、看视频资料、下载课件、提交作业、查成绩、参与在线考试；教师要能上传课程资源、发布作业、批改打分、出题组卷、查看学生学情；管理员则是管用户、管全站课程、管公告和数据统计。角色不同，权限不同，页面也不同，这就是后面动态路由和接口权限校验的由来。

把这些功能按模块重新归拢一下，就是系统的基础骨架：用户认证模块、课程管理模块、在线学习模块、作业管理模块、在线考试模块、系统管理模块。每个模块再往下拆，就是一张张数据库表和一个一个接口。我建议你用思维导图画一遍，画完你会发现“网络教学系统”本质上就是一个带视频播放和作业流程的教务管理系统，技术难度没有想象中那么大，真正的工作量在CRUD的细节和前后端联调上。

哪些功能优先做、哪些可以后补，也要提前排序。对毕业设计来说，课程管理、视频学习、作业提交这三块是最核心的，在线考试属于加分项，站内信和聊天功能可以不做，或者做一个简单的问答区就好。核心功能先落地、跑通、录演示视频，其余时间充裕再扩展，这个顺序能保证你不翻车。

还有一点容易被忽略：需求文档要和你最后做的系统严格对应。论文里写了“系统支持在线考试”，结果演示时点开考试模块是空的，答辩老师一旦让你现场走一遍流程，场面会非常尴尬。所以前期需求拆解做得细一点，后面少返工。

2. 技术栈怎么定：为什么偏偏是SpringBoot+Vue+MySQL这三个

题目已经把技术栈限定死了，你要做的不是换框架，而是把这个组合用明白，并且能在答辩时说出“为什么这么选”。这一节我逐个说清楚，顺便把版本和安装环境的坑提前排掉。

2.1 SpringBoot：后端不只是简化配置那么简单

很多教程会把SpringBoot说成“简化Spring配置的框架”，这话对，但不全面。对毕业设计而言，SpringBoot最大的价值是“内置Tomcat、自动装配、生态齐全”这三件事。你不需要手动配置那一大堆XML，引入一个spring-boot-starter-web依赖，写一个@RestController，项目就能跑起来。接口开发效率极高，内置的自动配置也减少了大量样板代码，这对要在几个月内完成从设计到论文全流程的学生来说非常友好。

选版本是第一个要踩的坑。现在官网默认推荐Spring Boot 3.x，它要求JDK 17以上，而很多学校的机房和教材还停留在JDK 8。如果你跟着默认版本走，安装最新版JDK、升级相关依赖，一件件折腾下来很容易心态崩。我的建议是：统一用Spring Boot 2.7.x系列，配JDK 8。你可能会觉得“都用2024年了还用老版本？”，但毕业设计的目的是完整地实现一套系统并讲清楚原理，不是秀版本号。2.7.x既稳定又兼容绝大多数第三方库，网上能搜到的解决方案也最多，出了问题好查。

依赖管理用Maven，不要用Gradle。Maven是国内教学和绝大多数公司的主流选择，仓库镜像源、私服配置、依赖冲突排查这些经验都能直接抄，Gradle虽然快，但遇到问题你大概率身边没人能帮你。

后端结构上，我建议按controller / service / mapper / entity这种经典分层去写。别觉得它老，答辩时老师就爱看这种结构——每一层职责清晰，代码好讲也好维护。另外加一个common或config包放统一返回体、全局异常处理、跨域配置、JWT过滤器，这些基础设施后面每个接口都要用。

2.2 Vue3+Vite：前端工程化该有的样子

前端选型上，Vue几乎不用犹豫。Vue3是现在的主流，组件化和响应式设计让页面开发变得很直观，而且相关的UI库、路由方案、状态管理方案都成熟稳定。新人入门Vue有一条很舒服的路径：先搞懂“数据驱动视图”这个核心概念（也就是数据变了页面自动更新），再学组件通信（父传子、子传父、跨组件通信），最后看路由。只要这三件事通了，写页面就是拼积木。

搭建方式我强烈推荐Vite，不是Vue CLI。Vite启动速度是秒级，热更新也快，调试体验比Webpack时代好太多。你只需要执行npm create vue@latest就能生成一个基于Vite的Vue3项目，选上Router和Pinia这两个选项，脚手架会自动把路由和状态管理配好。如果是第一次接触，可先跑起来一个默认工程，浏览器出现Vue标志那一刻，环境就算通了。

前端UI组件库用Element Plus。这个库的表格、表单、弹窗、分页组件都是现成的，教师端课程管理、学生端作业提交这类后台风格页面几乎不需要自己写复杂样式。你只需要掌握几个高频组件：el-form做表单校验、el-table展示数据、el-pagination做分页、el-upload处理文件上传。这几个组件用熟，教学系统80%的前端页面都能拼出来。

Node.js版本要注意和Vite配套。Vite 4建议Node 14.18+或16+，Vite 5建议Node 18+。你装一个Node 16 LTS或18 LTS一般不会出问题。装好Node之后顺手把npm镜像源换成国内源，执行npm config set registry https://registry.npmmirror.com就行，不然npm install下Element Plus和依赖能卡到你怀疑人生。

2.3 MySQL：数据怎么存才不乱

MySQL是这个系统里最没有争议的选型。它开源、免费、上手快、资料多，对学生项目来说性能绰绰有余。开发环境安装MySQL 8.0版本，下载地址认准官方网站，别去第三方站点下那种带捆绑软件的版本。安装时有几个选项要留意：端口保持3306默认，字符集选utf8mb4，密码认证方式如果遇到工具连接不上，选Legacy或稍后改认证插件。

开发中真正需要注意的不是安装，而是数据库连接配置。连接串里要显式加上useUnicode=true&characterEncoding=utf8和serverTimezone=Asia/Shanghai，第一个保证中文不乱码，第二个保证时间字段不带时区偏差。还要加上useSSL=false，否则新版MySQL驱动默认尝试SSL连接，会报一堆证书警告甚至拒绝连接——这个报错在热词里高频出现，后面我会专门讲。

数据库连接池直接用SpringBoot默认集成的HikariCP就行，它是目前性能最好的连接池，你什么都不用配就能跑。只在application.yml里加两行连接池大小就够：

spring: datasource: url: jdbc:mysql://localhost:3306/teaching_db?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver hikari: maximum-pool-size: 10 minimum-idle: 5

现在你已经把三个大环境盘清楚了。接下来的数据库设计是整套系统的地基，地基没打好的话，写接口时改表结构改得想哭。趁热打铁，直接进库表设计。

3.1 核心表设计与字段说明

库表设计我遵循的原则是：能用一张表绝不分两张，能删掉冗余字段绝不保留。很多学生喜欢把每个模块独立拆五六张表，结果关联查询写得很痛苦、数据还容易不一致。教学系统按业务模块来划分，我给出一个可以直接抄的表结构清单。

先看用户表，命名为sys_user。字段包括id、username、password、real_name、role（用 0 管理员 / 1 教师 / 2 学生 区分）、email、phone、avatar、status、create_time。这里用role一个字段区分角色，而不是建三张用户表，理由是学生的个人信息字段几乎一样，分表只会徒增复杂度，而权限的差异用角色去控制即可。

课程模块是系统核心，拆三张表。course表存课程主信息：id、course_name、course_code、teacher_id（关联用户表）、description、cover_url、status、create_time。chapter表存章节：id、course_id、chapter_title、sort。chapter_resource表存每个章节下的视频和课件：id、chapter_id、resource_name、resource_type（1视频/2文档）、resource_url、duration。为什么要拆三张？因为一个课程有多个章节，一个章节有多个资源，拆开以后课程详情页的数据可以直接通过嵌套查询或者多表联查拿到。

作业与成绩模块同样拆三张。homework表：id、course_id、teacher_id、title、content、deadline、create_time。homework_submission表：id、homework_id、student_id、submit_content、file_url、submit_time。homework_score表：id、submission_id、score、comment、teacher_id。这样设计的好处是：作业是教师发布的静态信息，提交记录是每个学生的动态行为，成绩是教师的评阅结果，三者解耦又可以通过外键层层追溯。

在线考试模块是加分项，酌情设计。可以简化为：exam表（考试基本信息）、exam_question表（题库）、exam_record表（学生作答记录）。题库字段建议用question_type（单选/多选/判断）、question_content、option_a/b/c/d、answer、score这种平铺设计，不要用JSON数组存选项，否则阅卷逻辑会写得很痛苦。

3.2 字段设计里的几个关键细节

字段类型选择上，有几点值得留意。id统一用BIGINT自增主键，不要用INT，因为数据量小的时候看不出来差别，但上生产后一旦超了2的31次方就会出大问题。status、role、type这类状态字段用TINYINT加注释说明含义，不用VARCHAR存“1/2/3”字符串，既省空间又避免脏数据。描述类字段直接用TEXT，但千万不能把大字段和频繁查询的字段混在一起做索引，回表查询会影响性能，这在论文中也能写成技术亮点。

时间字段统一用DATETIME，不要用TIMESTAMP。虽然TIMESTAMP占用空间更小，但它的有效范围到2038年就会溢出，而DATETIME能存的范围更大，且不受时区影响。前端传给后端的时间统一是yyyy-MM-dd HH:mm:ss字符串，后面用LocalDateTime类型接，再配合 Jackson 的spring.jackson.date-format配置，能完美避免时区问题和格式错乱。

密码字段的坑最隐蔽。很多同学直接用明文存，演示时被老师看到数据库里全是真实密码，会直接质疑安全性。正确做法是用BCryptPasswordEncoder加密，它是Spring Security自带的加密器，加密后的字符串是60位随机盐哈希，即使两个用户密码相同，加密结果也不同。你不需要把Spring Security全家桶引进来，只引入spring-security-crypto这一个依赖就能用，代码就两行：

BCryptPasswordEncoder encoder = new BCryptPasswordEncoder(); String encodedPassword = encoder.encode("123456");

还有个细节，凡是需要“是否删除”的业务数据，用逻辑删除而非物理删除。学生误退课、教师误删作业，物理DELETE之后数据就找不回来了，演示时万一误操作就是事故。MyBatis-Plus支持@TableLogic注解实现逻辑删除，你只需要在实体类的deleted字段上打一个注解，所有deleteById操作自动变成UPDATE ... SET deleted = 1，查询时自动过滤掉已删除数据。这个设计放在论文里也是不错的“系统健壮性”亮点。

建表语句写完之后，顺手就往几个表里插入几条测试数据，包括管理员账号 admin、两个教师账号、二十个学生账号、五门课程和对应的章节资源。后面联调阶段，这些假数据能帮你省下大把造数据的时间。

4. 后端实现：登录、课程、作业与上传一个都不能少

环境配好、表建完之后，就进入最出代码量的阶段了。后端代码我按“初始化配置 → 认证授权 → 核心业务 → 安全处理”四条线来讲，每一条都有可以直接抄的模板。

4.1 项目初始化与配置文件模板

用IDEA新建一个Spring Initializr项目，包名建议写成com.university.eteaching这样的结构，清晰好读。pom.xml里除了SpringBoot自带的依赖，你还需要加这几样：MyBatis-Plus（操作数据库）、MySQL驱动、Lombok（简化实体类）、JWT工具（登录令牌）、Hutool（工具类库）、spring-security-crypto（密码加密）。版本号不用手动写，2.7.x系列的SpringBoot已经帮你管理好了大部分兼容性，MyBatis-Plus记得用3.5.x的稳定版。

完整的application.yml我贴一份，你可以直接抄：

server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/teaching_db?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver servlet: multipart: max-file-size: 100MB max-request-size: 200MB mybatis-plus: configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 0

其中map-underscore-to-camel-case负责把数据库的create_time自动映射到实体类的createTime，省掉一堆@Column注解。logic-delete-field对应前面说的逻辑删除。

4.2 登录认证与JWT过滤器的实现思路

登录接口是整个系统第一个要做的接口，也是后面所有接口的守门员。流程是这样：前端把username和password发过来，后端查用户表，用BCrypt校验密码，登录成功之后用JWT生成一个token返回给前端。前端把token存在本地，每次请求带上Authorization请求头，后端写一个过滤器拦截所有请求，解析token、拿到用户ID和角色，放行或者拒绝。

JWT生成的核心代码可以做成一个工具类：

@Component public class JwtUtils { private static final String SECRET = "your-secret-key"; private static final long EXPIRE = 24 * 60 * 60 * 1000L; public String generateToken(Integer userId, String role) { return Jwts.builder() .setSubject(userId.toString()) .claim("role", role) .setExpiration(new Date(System.currentTimeMillis() + EXPIRE)) .signWith(SignatureAlgorithm.HS256, SECRET) .compact(); } public Claims parseToken(String token) { return Jwts.parser().setSigningKey(SECRET).parseClaimsJws(token).getBody(); } }

注意token里的SECRET不要硬编码，放到配置里，答辩时还能说是“密钥外置，降低泄露风险”。过滤器实现OncePerRequestFilter，在doFilterInternal里读取请求头，路径以/api/auth/login开头的放行，其他路径全部校验token。校验通过后，把用户ID放到request.setAttribute("userId", id)，方便controller直接取。

有个细节要提醒：JWT是无状态的，登出功能不好做。毕业设计可以不考虑真正的登出，前端把本地token删掉就算“登出”了。如果你想把方案做得更完整，可以把token存Redis里，登出时删掉Redis记录，但这需要额外引入Redis依赖，演示机器上没有Redis服务时会增加搭建成本，不是必选项。

4.3 MyBatis-Plus分页查询与课程接口

数据库操作层我直接用MyBatis-Plus，它比原生MyBatis省掉无数重复的XML。实体类继承Model或直接标注@TableName注解就可以，基础的增删改查单表操作几乎不用写SQL。课程列表这种天然需要分页查询的接口，MyBatis-Plus的分页插件用起来非常顺：

@Configuration public class MybatisPlusConfig { @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }

然后在Service层写：

Page<Course> pageVo = new Page<>(current, size); LambdaQueryWrapper<Course> wrapper = new LambdaQueryWrapper<>(); wrapper.like(StringUtils.hasText(keyword), Course::getCourseName, keyword) .eq(Course::getStatus, 1) .orderByDesc(Course::getCreateTime); courseService.page(pageVo, wrapper);

LambdaQueryWrapper是MyBatis-Plus最实用的特性，它用Lambda表达式的方式写查询条件，不会因为数据库字段改名而踩字符串硬编码的坑，也是答辩时可以展开讲的一个点。课程列表接口返回的数据结构统一为{ code: 200, data: {...}, message: "success" }这种格式。为了让所有接口返回格式一致，建议写一个Result<T>类：

@Data public class Result<T> { private Integer code; private String message; private T data; public static <T> Result<T> success(T data) { Result<T> r = new Result<>(); r.code = 200; r.message = "success"; r.data = data; return r; } public static <T> Result<T> error(String message) { Result<T> r = new Result<>(); r.code = 500; r.message = message; return r; } }

配套一个全局异常处理器，用@RestControllerAdvice捕获业务异常、参数校验异常和兜底的Exception，这样接口层不用到处写try-catch，代码既整洁又能统一错误提示。

4.4 文件上传与XSS全局过滤

教学系统绕不开“上传文件”这个功能，教师的课程课件、学生的作业附件，都是文件上传。SpringBoot接收文件的接口很简单，用MultipartFile接就行：

@PostMapping("/api/upload") public Result<String> upload(@RequestParam("file") MultipartFile file) throws IOException { String originalFilename = file.getOriginalFilename(); String suffix = originalFilename.substring(originalFilename.lastIndexOf(".")); String newName = UUID.randomUUID() + suffix; file.transferTo(new File(uploadPath, newName)); return Result.success(uploadPath + "/" + newName); }

大量文件本地存储对毕业设计足够，但要注意两点：第一，文件名一定要重命名，直接用用户原始文件名会出现中文乱码和重名覆盖的问题，我用UUID生成新名字，后缀保留，既唯一又安全；第二，设置最大上传大小。在application.yml里把multipart.max-file-size配成100MB就是为了防止学生提交几百MB的视频，导致接口超时。

如果你是计算机专业，还可以把文件存储升级为MinIO，它是一个开源的轻量级对象存储服务，API和阿里云OSS非常像，把上传存储的逻辑从本地换到MinIO，论文里又能多一个“分布式文件存储方案”的亮点。MinIO接入SpringBoot也简单，引入minioJava SDK，配置BUCKET名称，上传接口换成minioClient.putObject即可。

安全方面，XSS攻击的过滤必须做。所谓XSS攻击就是用户提交的内容里包含恶意脚本，比如在评论区传<script>alert('xss')</script>，如果不处理，这段脚本会在其他用户打开页面时执行。热词里提到的“全局过滤器处理上传PDF文件时的XSS攻击”就是这个方向。实现思路是写一个XssFilter，拦截所有POST和PUT请求，读取请求体里的字符串，把<、>、"、'这些特殊字符转义成HTML实体：

public class XssHttpServletRequestWrapper extends HttpServletRequestWrapper { @Override public String getParameter(String name) { String value = super.getParameter(name); return cleanXss(value); } @Override public String[] getParameterValues(String name) { String[] values = super.getParameterValues(name); if (values == null) return null; for (int i = 0; i < values.length; i++) { values[i] = cleanXss(values[i]); } return values; } } private String cleanXss(String value) { if (value == null) return null; return value.replaceAll("<", "&lt;").replaceAll(">", "&gt;"); }

文件上传时，只校验扩展名是不够的，恶意文件可以伪装成.pdf但内部是脚本。稳妥的做法是结合文件大小、文件头魔数、MIME类型三重校验，课程和作业场景下的文件类型白名单，一般只放行pdf、doc、docx、ppt、pptx、jpg、png、mp4这些常规格式。

5. 前端实现：路由、页面与联调

后端搭好接口之后，前端页面的开发就水到渠成了。前端这块我讲几个容易卡住新人的点：项目初始化、路由设计、axios封装、页面组件、以及前后端联调。

5.1 初始化Vue3项目与关键依赖安装

用npm create vue@latest生成项目时，交互终端会问你选哪些功能。TypeScript我建议先不选，毕业设计用JavaScript就够了，TypeScript的类型定义会让新手在写组件时多费很多时间。Router、Pinia这两个勾上，ESLint和Prettier可以选，格式化代码的习惯值得养成。

依赖安装命令如下：

npm install element-plus axios vue-router@4 pinia npm install @element-plus/icons-vue

element-plus/icons-vue是图标库，登录页的账号图标、菜单栏的折叠按钮都要用它。装完之后在main.js里注册Element Plus组件库：

import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import zhCn from 'element-plus/es/locale/lang/zh-cn' import App from './App.vue' const app = createApp(App) app.use(ElementPlus, { locale: zhCn }) app.mount('#app')

5.2 路由设计：静态路由+动态路由+路由守卫

前端路由是很多人一开始容易犯迷糊的地方。教学系统有学生端、教师端、管理端三套界面，不可能所有页面放在同一个导航菜单里，也不可能在登录前就开放所有路由。这里采用“静态路由+动态路由+路由守卫”的组合方案。

静态路由就是/login、/register、/404这三个不需要权限的页面。登录成功后，前端根据后端返回的角色，动态加挂对应的路由表，也就是热词里常说的“动态路由”。比如管理员登录后注册manage/user、manage/course这些页面，学生登录后注册student/course、student/homework。把角色页的路由表写成函数，登录后router.addRoute()动态注入，刷新页面时再判断一次本地缓存的用户角色，重新挂载。

路由守卫的作用是“未登录就跳登录页，已登录就不能回登录页”。核心代码：

router.beforeEach((to, from, next) => { const token = localStorage.getItem('token') const role = localStorage.getItem('role') if (to.path === '/login') { token ? next('/') : next() } else if (!token) { next('/login') } else if (to.meta.roles && !to.meta.roles.includes(role)) { next('/403') } else { next() } })

这段代码写完之后，跨页面跳转的权限控制就全部到位了。越是新手越要先把路由想明白，不然页面写了一大堆，跳来跳去全是404和空白。

5.3 核心页面与axios封装

axios必须封装，不能每个组件直接import axios到处用。封装的时候把baseURL统一设置成/api，在request拦截器里把token塞进请求头，在response拦截器里统一处理业务码。比如后端返回code: 401时自动清理本地token并跳回登录页，这样接口报错不用每个页面单独处理：

service.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers['Authorization'] = token } return config }) service.interceptors.response.use(res => { const code = res.data.code if (code === 200) return res.data.data if (code === 401) { localStorage.clear() router.push('/login') } return Promise.reject(new Error(res.data.message)) })

页面组件方面，课程列表页是典型的“表格+分页+搜索”三段式。el-table绑定数据，el-pagination负责分页，点击搜索按钮重新发请求。有一个组件属性很容易被忽略：el-table的v-loading指令。你初始化数据时loading默认是true，请求回来后改成false，这个细节会让页面体验高级非常多。

视频播放页面是另一个重点，而且和热门问题“vue播放m3u8”直接相关。网络教学系统里的视频很多不是普通MP4，而是以m3u8格式流式播放的。m3u8是一种基于HTTP的流媒体播放列表文件格式，本质是一个索引文件，里面记录了一段段.ts分片文件的地址，播放器按顺序拉取分片、拼接播放。浏览器原生<video>标签不认m3u8格式，但苹果的Safari例外，因此跨浏览器播放m3u8需要依赖 hls.js 或 video.js。在Vue里用 hls.js 播放m3u8的简化思路是：监听video元素的canplay事件，用 Hls 实例绑定视频源：

import Hls from 'hls.js' const videoEl = ref(null) const playM3u8 = (url) => { if (Hls.isSupported()) { const hls = new Hls() hls.loadSource(url) hls.attachMedia(videoEl.value) } else if (videoEl.value.canPlayType('application/vnd.apple.mpegurl')) { videoEl.value.src = url } }

做好了这一步，课程视频的播放体验基本没有障碍了。要注意的是m3u8的地址可能要经过后端拼接，这是为了把完整URL传给前端播放。

5.4 前后端联调：代理配置与跨域排查

启动前端项目默认访问localhost:5173，后端跑在localhost:8080，端口不一样必然触发跨域问题。解决方法有两个：前端代理和后端CORS配置，二者选一即可，同时配置也可能出现重复的跨域头反而报错。我推荐前端代理方案，改动少、开发时最舒心。

在项目根目录的vite.config.js里配置：

server: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } }

这样前端页面里请求/api/user/list，Vite开发服务器会把这个请求转发到后端http://localhost:8080/api/user/list，浏览器角度是同源请求，就不会被跨域拦截。注意，这个代理只在开发环境生效，前端代码部署到服务器后要走Nginx反向代理，原理一样，路径依然是/api开头向后端转发。这一块是很多学生会忽视的：本地跑得好好的，部署到服务器上发现页面能打开但数据全部加载失败，十有八九是把代理配置当成线上配置了。

联调时配合的接口测试工具，推荐用Postman或ApiPost。ApiPost是国产的，界面和文档更适合学生上手。用法上，先把后端的登录接口调通拿到token，再把token填到请求头的Authorization里，逐个测课程、作业、上传等接口。接口测通一个再写前面对应的页面，这样定位问题时非常清晰：同一个问题先判断是后端报错还是前端报错，不用两边瞎猜。

如果你用了Vue的调试工具，就是热词里提到的vue-devtools，那在浏览器里可以直观地看组件状态、路由数据和Pinia里的用户信息。这个插件在Chrome应用商店就能装，调试时打开Vue面板，一眼就能看出登录后用户信息有没有正确写入状态管理。

6. 高频报错与排查：MySQL、依赖、兼容性合集

这一节我把自己做项目时真实踩过的坑按频率排个序，整理成一份排查手册。很多报错你一看就懂，下次遇到直接照着处理就行。

6.1 MySQL安装与连接问题

MySQL相关的报错里，最高频的就是ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock'。遇到这个报错的第一反应不应该是“重新装MySQL”，而是先看MySQL服务有没有启动。在Mac上执行brew services start mysql，在Linux上执行systemctl start mysqld，在Windows上用服务管理器找到MySQL80服务启动，90%的情况服务一起来就好了。如果服务启动了还报错，再检查/tmp/mysql.sock文件是否存在，启动随机目录时socket路径对不上导致的，解决方式是去配置里固定socket=/tmp/mysql.sock，完全不用重装。

第二个高频问题是“Navicat连接不上MySQL 8”。MySQL 8默认的用户认证插件是caching_sha2_password，老版本的图形化客户端不支持这种加密方式。解决办法有两个：一是图形工具换成新版Navicat或DBeaver Community版，二是把root账号的认证插件改回mysql_native_password。为了省事，开发阶段直接执行这条SQL：

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '你的密码'; FLUSH PRIVILEGES;

顺带说一下，如果在连接字符串里看到Public Key Retrieval is not allowed的报错，那是在caching_sha2_password认证下不完整的SSL协商造成的，连接串追加allowPublicKeyRetrieval=true即可。这也就是热词里“mysql ssl连接错误”的经典场景。

第三个是字符集问题。建数据库的时候如果忘了指定utf8mb4，导入数据之后中文全变问号。建库语句统一加字符集：

CREATE DATABASE teaching_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

已经建错的库也不用删，执行ALTER DATABASE teaching_db CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;，再把几张表的字符集也改掉就行。

6.2 npm依赖与前端运行问题

npm install卡住不动是新手最常见的体验。原因大部分是网络问题，镜像源换成国内源即可，前面已经提过。有个细节是换完镜像源要执行npm cache clean --force清一下缓存，再删掉node_modules重装。如果你是在学校机房用内网，部分依赖下载不了，可以用pnpm的--offline模式或者找一个同学拷一份node_modules目录，实测可行。

启动npm run dev之后浏览器打开一片空白，这个问题绝大多数和路由模式或资源路径有关。Vite构建的项目默认将base设置为/，路由用createWebHistory历史模式。如果你部署到服务器某个子路径下，比如http://ip:8080/teaching/，就要在vite.config.js里设置base: '/teaching/'，路由改用createWebHashHistory，否则刷新页面必现404。热词里的“vue路由”“vue路由参数”也经常踩到这一类问题。

还有一个页面能打开但样式全丢的情况。没有在main.js里import 'element-plus/dist/index.css'，Element Plus组件显示成了裸的HTML表格和按钮。对照着检查依赖有没有装全，这个报错能用5秒钟定位。

6.3 SpringBoot版本与第三方库兼容问题

“SpringBoot版本太高”是我最想提醒新人的一个坑。Spring Boot 3.x跟2.x不是简单的版本号提升，它基于Jakarta EE，把大量包名从javax.*改成了jakarta.*，这意味着老版本的第三方库、老教程里的代码几乎全部不能直接用。比如旧版MyBatis-Plus没有适配3.x，你照着网上教程引入之后启动直接报错。我把话说得直白一点：做毕业设计，Spring Boot 2.7.x + JDK 8 是最省心的组合，所有教程、博客里95%的代码示例都能直接跑通。如果已经不小心建了3.x项目，要么整体降级，要么接受折腾全套依赖的代价，二选一。

另一个高频问题，是Maven依赖冲突。典型表现是启动时报ClassNotFoundException或者方法签名不匹配。排查方法是mvn dependency:tree看依赖树，找到重复的旧版本依赖，用exclusion排除掉冲突的那个。例如：

<dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.3.2</version> </dependency>

这个版本同时兼容Spring Boot 2.x场景。如果你在别的第三方包里见到旧版mybatis依赖，加<exclusions>手动排除。

端口冲突也是经典问题。启动SpringBoot时报Port 8080 was already in use，Linux和Mac用lsof -i:8080找出占用进程并kill -9进程号，Windows用netstat -ano | findstr 8080找到PID后在任务管理器结束进程。前端Vite默认5173端口被占用时会自动改5174，MySQL3306被占用的排查思路同理。这套查端口的方法去任何项目里都通用。

后端排查时还有一个容易被忽略的点：修改了Java文件和application.yml后没有重新编译，导致改了配置不生效。IDEA里Ctrl+F9重新构建一次再启动，很多“奇怪”的bug其实都是编译缓存问题。

7. 排期、论文与答辩：让毕设不翻车的最后一步

代码完成之后，毕业设计还有两座山要翻：论文和答辩演示。很多同学技术做得不错，最后在论文结构和答辩演示上栽了跟头，真的很可惜。我最后讲讲这块的实操经验。

排期方面，我给你们一个6周模板：第1周做需求分析和数据库设计，第2到3周完成后端核心接口，第4周完成前端页面和联调，第5周余量缓冲、补齐边缘功能和写论文初稿，第6周准备答辩PPT和演示视频。这个节奏比大多数人预想的要宽松，前提是不要前松后紧——我见过太多同学前期每周都在“研究技术”，第4周才开始写代码，结果第7周被答辩日期按在地上摩擦。

论文结构就按照“绪论 → 需求分析 → 系统设计 → 系统实现 → 测试分析 → 总结”这个标准模板走，每一章的内容和你实际代码一一对应。需求分析里把前面拆解的功能清单做成用例表，系统设计里把数据库表结构、文字版系统架构画清楚，系统实现里贴核心代码并解释思路，测试分析里写功能测试用例和并发测试结果。这些材料在前面的开发过程中已经天然积累了，你只需把它们整理成文档形式。

答辩演示是能拉开差距的地方。演示时不要从头到尾登录系统戳来戳去，而是按“系统亮点”串一条线：进场先介绍系统架构，然后操作一遍学生端完成选课、看视频、提交作业的全流程，再切管理员视角演示用户管理和数据统计，最后回答两三个技术问题。演示前一定提前录一个完整流程的备用视频，万一点击某个按钮时意外报错，直接切换视频播完，比在黑板上干等修复强一百倍。

答辩老师最爱问的技术点，我帮你们押几个：JWT认证流程为什么比Session好？动态路由是怎么根据角色生成的？数据库为什么这么设计表关系？m3u8视频怎么实现在网页里播放的？文件上传做了哪些安全校验？这些问题在前面各部分都有完整答案，用自己的话梳理一遍，比背八股文有说服力得多。

最后分享一个我实际做项目时的体会：毕业设计最大的价值不在“系统做得多完善”，而在于你亲手把一个块状的需求，拆解成表、接口、页面、联调、部署的全过程走通了一遍。这套系统的代码也许以后不会再被打开，但你建立起的“从需求到交付”的方法论，在你进入真实的开发岗位之后会一直用得上。所以哪怕时间紧、进度赶，也尽量自己一行一行把代码敲完，不要直接下载所谓的“毕设源码”改名交差——要记住，答辩时老师让你改一个功能，而你连代码结构都说不清楚时，那个场面比现在熬夜写代码难受十倍。

这个项目做完之后，想继续扩展的话，可以往两个方向走：给系统加上Redis，把课程热门排行和用户会话缓存起来；或者把本地文件存储迁移到MinIO对象存储，把数据库读写分离跑起来。这两种扩展都和当前技术栈天然兼容，也正好覆盖了“并发能力”和“文件可靠性”两个提升点。先把这版系统稳稳交付，毕业之后这些事再慢慢折腾，不错的选择。