毕业设计实战：基于Java+MySQL的在线互动学习网站设计与实现，从需求到测试全流程拆解，新手也能轻松通关！

小飞计算机毕设
44 阅读19分钟

毕业设计实战：基于Java+MySQL的在线互动学习网站设计与实现，从需求到测试全流程拆解，新手也能轻松通关！

谁懂啊！当初做在线互动学习网站毕设时，光试题表和答题详情表的外键关联就卡了4天——一开始没给答题详情表设“所属试卷id”外键，查某套试卷的所有答题记录时数据全混在一起，导师看了直接让我“重新梳理数据库关系”😫 后来踩遍无数坑才摸出一套高效落地流程，今天把需求分析、技术选型、功能实现到测试的细节全说透，宝子们不用再熬夜改代码，轻松搞定毕设！

一、先搞懂“在线互动学习网站要啥”！需求分析别瞎蒙

刚开始我跳过需求分析就写代码，花三周加了个“智能错题推荐算法”，结果导师一句“核心是课程学习、在线答题、信息管理，不是复杂算法”直接打回重改！后来才明白，需求分析得先抓准“谁用系统、要干啥”，这步做对，后面少走90%弯路。

1. 核心用户&功能拆解（踩坑后总结版）

在线互动学习网站就三类核心用户：管理员、老师和普通用户（学生）（别加“游客角色”！我当初加了后，未登录就能看课程视频，最后砍掉才符合教育平台逻辑）：

  • 管理员端（必做功能）：
    • 基础管理：字典管理（维护课程类型、公告类型等）、个人中心（修改密码/更新资料）、管理员账号管理（新增/删除子管理员）
    • 教学管理：课程管理（新增课程、上传课程照片、编辑课程介绍）、课程视频管理（关联课程上传视频、添加课程资料）、作业管理（创建作业、指定班级、上传作业文件）
    • 考试管理：试卷表管理（创建试卷、设置考试时长和总分）、试题表管理（添加试题、设置选项和答案解析）、考试记录表管理（查看用户考试记录、统计分数）
    • 互动管理：讨论管理（审核用户发帖、回复讨论）、公告信息管理（发布教学通知、维护公告类型）、课程留言管理（查看用户留言、回复疑问）
  • 老师端（核心功能）：
    • 课程管理：查看所授课程、上传课程视频和资料、回复课程留言
    • 作业管理：发布作业、批改学生提交的作业、查看作业完成情况
    • 考试管理：协助管理员创建试题、查看学生答题详情、分析错题情况
    • 互动管理：发布讨论话题、回复学生讨论、查看班级公告
  • 用户端（学生）：
    • 学习操作：浏览课程列表、观看课程视频、下载课程资料、提交作业
    • 考试操作：在线选择试卷答题、提交试卷后查看分数、查看答题详情和错题
    • 互动操作：发布讨论提问、回复他人讨论、查看公告通知、给课程留言
    • 个人中心：修改个人信息（手机号、邮箱、头像）、查看我的作业/考试记录/错题集

2. 需求分析避坑指南（血泪教训！）

  • 别光靠“空想”！找2个同学分别模拟老师和学生提意见：比如有学生说“想快速找到做错的题”，我才加了“错题表分类存储”（按试卷归类错题，显示正确答案和解析），比瞎加“智能推荐”实用多了
  • 一定要画用例图！用DrawIO画简单版，标清“管理员-管理课程视频”“学生-在线答题”“老师-批改作业”，跟导师汇报时，比光说“我要做XX功能”直观10倍（当初没画，导师听30分钟还没get到逻辑）
  • 写“需求规格说明书”！不用复杂，把“功能描述、约束条件”写清楚（比如“试题分值≥0”“课程视频仅支持MP4格式”“作业提交截止时间不能早于发布时间”），编码时对着做，不会跑偏

3. 可行性分析别敷衍！3点写清楚就能过

导师超爱问“你这系统可行吗”，别只说“我觉得可行”，从3个核心角度写，显得专业：

  • 技术可行性：Java、MySQL、SpringBoot框架、JSP都是课堂学过的，图书馆有《SpringBoot实战》《MySQL数据库设计与优化》，遇到问题能查资料（别用Vue！我当初想试前后端分离，联调时视频播放接口卡了一周，换回JSP才顺利）
  • 经济可行性：所有工具全免费！IDEA（社区版）、MySQL、Tomcat官网直接下，课程视频和试题资料用开源教学资源，不用花钱买版权，答辩时说“开发成本为0”，导师会觉得你懂成本控制
  • 操作可行性：界面参考主流学习平台（如慕课网），按钮布局简洁，我找同学测试，5分钟就学会选课、答题、提交作业，导师直接认可

二、技术选型别跟风！这套组合稳到爆

刚开始我跟风用Java+Vue+Redis，结果“用户答题记录缓存”卡了6天——Redis的过期策略没设对，重启后考试记录全丢😫 后来换成Java 8+SpringBoot+MySQL8.0+Tomcat9+IDEA 2022+JSP，新手友好度拉满，调试效率翻两倍！

1. 技术栈详细对比（附避坑提醒）

宝子们别盲目选“最新技术”，稳定比炫酷重要！我整理了5个核心工具的选择理由和坑点，直接抄：

技术工具为啥选它避坑提醒！（重点！）
Java 8语法简洁，支持面向对象编程，学习资料丰富，SpringBoot对Java 8兼容性最好别用Java 11+！部分SpringBoot依赖对高版本支持差，会出现“类加载失败”错误
SpringBoot简化配置（不用手动整合SSM），自带Tomcat插件，支持热部署，开发效率高别用2.7+版本！新手容易踩“循环依赖”坑，选2.5.6版本最稳定
MySQL 8.0支持事务和外键，存课程、试题、答题记录足够用，占内存小，支持utf8mb4编码安装时设“utf8mb4”编码！我当初用默认编码，课程名称含特殊符号（如“𠮷”）乱码，查3小时才解决
Tomcat 9.0和SpringBoot、JSP适配最好，启动稳定，极少出现“端口占用”问题别用Tomcat 10！会出现“Servlet API包名变更”，答辩时系统崩了就完了
IDEA 2022对SpringBoot支持好，自带代码提示，调试工具直观，免费开源别更到2023+版本！高版本对老电脑兼容性差，编译项目时经常卡顿

2. 开发环境搭建（step by step 实操）

很多宝子卡在“环境配置”，跟着步骤来超简单，我当初一次成功：

  1. 装JDK 1.8：记住安装路径（比如D:\Java\jdk1.8.0_301），配置“JAVA_HOME”环境变量，Path中添加“%JAVA_HOME%\bin”，cmd输入“java -version”显示版本即成功
  2. 装IDEA 2022（社区版）：选“IntelliJ IDEA Community Edition”，首次打开勾选“SpringBoot”“MySQL”插件，自动安装
  3. 装MySQL 8.0：用Navicat管理（可视化工具超方便），新建数据库“online_interactive_learning”，编码设“utf8mb4”，排序规则选“utf8mb4_general_ci”
  4. 初始化SpringBoot项目：在IDEA中新建“Spring Initializr”项目，勾选“Spring Web”“MyBatis Framework”“MySQL Driver”依赖，自动生成配置文件
  5. 测试连接：在application.properties中配置MySQL连接信息（url、用户名、密码），写一个简单的“查询课程列表”接口，运行后能返回数据即完成初始化

3. 架构图一定要画！答辩加分项

用DrawIO画SpringBoot分层架构图，标清“表现层（JSP）-控制层（Controller）-业务层（Service）-数据访问层（Mapper）-数据库（MySQL）”：比如学生点“提交试卷”→JSP页面传请求→Controller接收→Service计算得分→Mapper操作数据库（更新考试记录和答题详情）→返回分数。去年答辩时，评委特意夸这图“逻辑清晰”，比光说“我用了SpringBoot+MySQL”专业多了！

三、数据库设计：别让表关联坑了你

这部分是毕设的“核心骨架”，我当初没关联“试题表”和“试卷表”，查“某套试卷的所有试题”要写嵌套SQL，调试到凌晨2点😫 后来按“实体-属性-关系”设计，终于理清了。

1. 核心实体&属性（附ER图绘制技巧）

先确定“实体”（管理员、老师、用户、课程、试卷、试题、答题详情），再想“属性”，别漏关键字段！我整理了必做的14张表，直接照着画ER图：

  • 用户表（yonghu）：id（主键）、yonghu_name（用户姓名）、yonghu_phone（手机号）、yonghu_id_number（身份证号，唯一）、yonghu_photo（头像路径）、banji_types（班级）、yonghu_email（邮箱）
  • 课程表（kecheng）：id（主键）、kecheng_name（课程名称）、kecheng_photo（课程照片）、kecheng_types（课程类型）、kecheng_content（课程介绍）、create_time（创建时间）
  • 试卷表（exampaper）：id（主键）、exampaper_name（试卷名称）、exampaper_date（考试时长，分钟）、exampaper_myscore（试卷总分）、exampaper_types（试卷状态）、exampaper_delete（逻辑删除：0未删/1已删）
  • 试题表（examquestion）：id（主键）、exampaper_id（所属试卷id，外键）、examquestion_name（试题名称）、examquestion_options（选项，JSON字符串）、examquestion_score（分值）、examquestion_answer（正确答案）
  • 答题详情表（examredetails）：id（主键）、examredetails_uuid_number（试卷编号）、yonghu_id（用户id，外键）、examquestion_id（试题id，外键）、examredetails_myanswer（考生答案）、examredetails_myscore（试题得分）

画ER图用Visio或亿图，记住3个规则：

  1. 矩形代表“实体”（比如“用户”“课程”）
  2. 椭圆代表“属性”（比如用户的“班级”“邮箱”）
  3. 菱形代表“关系”（比如“用户-答题详情”是一对多，一个用户可有多条答题记录；“试卷-试题”是一对多，一套试卷可有多道试题） 避坑提醒：别把“课程视频、用户头像”存数据库！我当初存二进制导致数据库崩溃，改成存“文件路径”（比如/static/video/course1.mp4、/static/photo/user1.jpg）才对。

2. 数据库物理设计（附建表SQL示例）

ER图画好后，转成实际表，字段类型和约束别瞎设！比如“试题分值”用INT，“考试时长”用INT，“选项”用VARCHAR（存JSON字符串）。

给宝子们贴“试卷表”和“试题表”的建表SQL，复制到Navicat就能用：

-- 试卷表
CREATE TABLE `exampaper` (
  `id` INT NOT NULL AUTO_INCREMENT COMMENT '试卷ID',
  `exampaper_name` VARCHAR(100) NOT NULL COMMENT '试卷名称',
  `exampaper_date` INT DEFAULT NULL COMMENT '考试时长(分钟)',
  `exampaper_myscore` INT DEFAULT NULL COMMENT '试卷总分数',
  `exampaper_types` INT DEFAULT NULL COMMENT '试卷状态（1-启用，0-禁用）',
  `exampaper_delete` INT DEFAULT 0 COMMENT '逻辑删除（0-未删除，1-已删除）',
  `create_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='试卷表';

-- 试题表
CREATE TABLE `examquestion` (
  `id` INT NOT NULL AUTO_INCREMENT COMMENT '试题ID',
  `exampaper_id` INT DEFAULT NULL COMMENT '所属试卷ID（外键）',
  `examquestion_name` VARCHAR(200) NOT NULL COMMENT '试题名称',
  `examquestion_options` VARCHAR(500) DEFAULT NULL COMMENT '选项（JSON字符串）',
  `examquestion_score` INT DEFAULT NULL COMMENT '分值',
  `examquestion_answer` VARCHAR(50) DEFAULT NULL COMMENT '正确答案',
  `examquestion_analysis` VARCHAR(300) DEFAULT NULL COMMENT '答案解析',
  `examquestion_types` INT DEFAULT NULL COMMENT '试题类型（1-单选，2-多选）',
  `examquestion_sequence` INT DEFAULT NULL COMMENT '试题排序（值越大越靠前）',
  `create_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  PRIMARY KEY (`id`),
  KEY `fk_paper_question` (`exampaper_id`),
  CONSTRAINT `fk_paper_question` FOREIGN KEY (`exampaper_id`) REFERENCES `exampaper` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='试题表';

3. 表关联测试！别等编码才发现错

建完表一定要测关联！比如在“试卷表”插数据（id=1，名称=“Java基础测试卷”，时长=60，总分=100），在“试题表”插3道关联该试卷的试题，用JOIN查询“某套试卷的所有试题”：

SELECT p.exampaper_name, q.examquestion_name, 
       q.examquestion_options, q.examquestion_score, q.examquestion_answer
FROM exampaper p
JOIN examquestion q ON p.id = q.exampaper_id
WHERE p.id = 1;

如果能查出“试卷名称+试题名称+选项+分值+正确答案”，说明关联没问题；如果报错“Cannot add or update a child row”，大概率是外键没设对，赶紧检查表结构。

四、功能实现：核心模块操作+页面设计

不用做所有功能！先搞定3个核心模块，答辩时足够出彩。每个模块我都附关键操作逻辑和页面设计要点，宝子们直接套就行。

1. 管理员端：课程管理模块（必做！）

这是管理员的核心功能，实现“课程信息维护+课程视频关联”，重点说“课程类型校验”和“视频格式限制”——别漏这两步，我当初就是这里踩了大坑！

（1）关键操作逻辑
  1. 新增课程前，校验“课程名称非空且唯一”“课程类型已在字典表中定义”（缺一项提示“请完善课程信息”）；
  2. 上传课程视频时，限制格式为MP4，大小≤200MB（避免占用过多服务器空间）；
  3. 编辑课程信息时，同步更新关联的课程视频和课程留言中的课程名称（避免数据不一致）。
（2）页面设计要点（JSP+Bootstrap）

页面标题：管理员-课程管理页面
（插入图片位置：此处放“课程管理页面截图”，需包含以下元素）

  • 筛选区：
    • 输入框：课程名称（模糊查）
    • 下拉框：课程类型（全部/Java/Python/前端）
    • 按钮：“查询”（蓝色btn-primary）、“新增课程”（绿色btn-success）
  • 课程列表区：
    • 表格列名：课程名称、课程照片、课程类型、课程介绍、操作
    • 课程照片：缩略图（hover放大）
    • 操作按钮：“查看视频”（蓝色btn-info）、“编辑”（橙色btn-warning）、“删除”（红色btn-danger）
  • 新增课程弹窗：
    • 表单元素：课程名称（必填）、课程类型（下拉选，必填）、课程照片（上传框，JPG/PNG）、课程介绍（文本域，必填）
    • 按钮：“提交”（绿色）、“取消”（灰色）
（3）避坑提醒
  • 课程名称唯一性校验！加逻辑： 
    // 课程名称唯一性校验
String courseName = kecheng.getKechengName();
LambdaQueryWrapper<Kecheng> nameWrapper = new LambdaQueryWrapper<>();
nameWrapper.eq(Kecheng::getKechengName, courseName);
if (kechengService.count(nameWrapper) > 0) {
    return Result.error("该课程名称已存在，请勿重复添加！");
}
// 课程类型校验（需在字典表中存在）
Integer courseType = kecheng.getKechengTypes();
LambdaQueryWrapper<Dictionary> typeWrapper = new LambdaQueryWrapper<>();
typeWrapper.eq(Dictionary::getDicCode, "course_type").eq(Dictionary::getCodeIndex, courseType);
if (dictionaryService.count(typeWrapper) == 0) {
    return Result.error("课程类型无效，请选择正确类型！");
}

2. 用户端：在线答题模块（核心需求！）

用户用系统的核心是“选试卷-答题-查分数”，流程别复杂：选择试卷→进入答题页面→逐题作答→提交试卷→查看得分和解析，我当初漏了“考试时长倒计时”，导致用户能无限答题，补了两天才好。

（1）关键操作逻辑
  1. 进入答题页前，校验“试卷状态为启用”“用户未重复参加该试卷考试”（不满足提示“无法参加此考试”）；
  2. 答题时启动倒计时（基于试卷表的“考试时长”字段），时间到自动提交试卷；
  3. 提交试卷后，对比“考生答案”和“正确答案”计算得分，同步更新考试记录表（总分）和答题详情表（每题得分）。
（2）页面设计要点（JSP+Bootstrap）

页面标题：用户-在线答题页面
（插入图片位置：此处放“在线答题页面截图”，需包含以下元素）

  • 头部信息区：
    • 显示：试卷名称、考试时长（倒计时）、当前答题进度（如“3/10题”）
    • 按钮：“提交试卷”（红色btn-danger，悬浮提示“提交后不可修改”）
  • 答题区：
    • 每题显示：试题序号、试题名称、选项（单选/多选按钮）、“上一题”“下一题”按钮
    • 选项样式：选中的选项标蓝色背景，未选中标白色
  • 得分结果区（提交后显示）：
    • 显示：总分、正确率、答题用时
    • 按钮：“查看答题详情”（蓝色，跳转至每题的答案和解析）
（3）避坑提醒
  • 倒计时与得分计算！加逻辑： 
    // 倒计时逻辑（前端JS）
var examTime = ${exampaper.exampaperDate} * 60; // 转换为秒
var timer = setInterval(function() {
    examTime--;
    var minutes = Math.floor(examTime / 60);
    var seconds = examTime % 60;
    $("#countdown").text(minutes + "分" + seconds + "秒");
    if (examTime <= 0) {
        clearInterval(timer);
        $("#submitForm").submit(); // 时间到自动提交
    }
}, 1000);

// 得分计算逻辑（后端Service）
int totalScore = 0;
for (Examredetails detail : detailList) {
    Examquestion question = examquestionService.getById(detail.getExamquestionId());
    if (detail.getExamredetailsMyanswer().equals(question.getExamquestionAnswer())) {
        detail.setExamredetailsMyscore(question.getExamquestionScore());
        totalScore += question.getExamquestionScore();
    } else {
        detail.setExamredetailsMyscore(0);
        // 错题存入错题表
        WrongQuestion wrongQuestion = new WrongQuestion();
        wrongQuestion.setYonghuId(detail.getYonghuId());
        wrongQuestion.setExampaperId(question.getExampaperId());
        wrongQuestion.setExamquestionId(question.getId());
        wrongQuestion.setExamredetailsMyanswer(detail.getExamredetailsMyanswer());
        wrongQuestionService.save(wrongQuestion);
    }
    examredetailsService.updateById(detail);
}
// 更新考试记录总分
Examrecord record = examrecordService.getById(recordId);
record.setTotalScore(totalScore);
examrecordService.updateById(record);

3. 管理员端：公告信息管理模块（答辩亮点！）

这个功能最能体现“平台通知闭环”，导师超爱问！核心是“发布公告-维护公告类型-删除失效公告”，别漏“公告发布时间排序”，不然用户找不到最新通知。

页面设计要点（JSP+Bootstrap）

页面标题：管理员-公告信息管理页面
（插入图片位置：此处放“公告信息管理页面截图”，需包含以下元素）

  • 筛选区：
    • 输入框：公告名称（模糊查）
    • 下拉框：公告类型（全部/考试通知/课程通知/系统通知）
    • 按钮：“查询”（蓝色）、“新增公告”（绿色）
  • 公告列表区：
    • 表格列名：公告名称、公告图片、公告类型、发布时间、操作
    • 发布时间：按“倒序”排列（最新公告在最前）
    • 操作按钮：“查看详情”（蓝色）、“编辑”（橙色）、“删除”（红色）
  • 新增公告弹窗：
    • 表单元素：公告名称（必填）、公告类型（下拉选，必填）、公告图片（上传框，JPG/PNG）、公告详情（富文本编辑器，必填）
    • 按钮：“提交发布”（绿色）、“取消”（灰色）
（3）避坑提醒
  • 公告发布时间排序！加逻辑： 
    // 公告列表查询时按发布时间倒序
LambdaQueryWrapper<Gonggao> wrapper = new LambdaQueryWrapper<>();
if (StringUtils.isNotBlank(gonggaoName)) {
    wrapper.like(Gonggao::getGonggaoName, gonggaoName);
}
if (gonggaoTypes != null) {
    wrapper.eq(Gonggao::getGonggaoTypes, gonggaoTypes);
}
wrapper.orderByDesc(Gonggao::getInsertTime); // 按发布时间倒序
List<Gonggao> gonggaoList = gonggaoService.list(wrapper);

在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

五、测试别敷衍！这3步让答辩不翻车

很多宝子觉得“功能能跑就行”，结果答辩时评委一测就出问题！我当初没测“试题选项为空”场景，导致用户答题时看不到选项，导师说“不符合考试逻辑”，当场扣分😫 测试一定要针对性做！

1. 功能测试（必测3个模块）

别全测！重点测“核心功能”，我整理了测试用例表，直接填结果：

（1）课程管理测试（表1：课程测试用例）
测试场景操作步骤预期结果实际结果测试结论
课程名称重复新增新增课程→填已存在课程名称→提交提示“该课程名称已存在，请勿重复添加！”
课程类型无效新增课程→选未定义的课程类型→提交提示“课程类型无效，请选择正确类型！”
正常新增课程填唯一课程名称+选有效类型+上传照片+写介绍→提交提示“新增成功！”，列表显示该课程
（2）在线答题测试（表2：答题测试用例）
测试场景操作步骤预期结果实际结果测试结论
考试时间到进入答题页→等待倒计时结束自动提交试卷，显示得分和解析
考生答案正确选正确选项→提交试卷该题得分=试题分值，总分累加
考生答案错误选错误选项→提交试卷该题得分=0，错题存入错题表
（3）公告管理测试（表3：公告测试用例）
测试场景操作步骤预期结果实际结果测试结论
按发布时间排序新增2条公告（间隔10分钟）→查看列表后发布的公告排在前
公告名称模糊查询输入公告名称关键词→点击查询显示所有名称含关键词的公告
正常删除公告选一条公告→点击“删除”→确认公告从列表中消失，数据库中逻辑删除（exampaper_delete=1）

2. 兼容性测试（容易忽略的点）

别只在自己电脑测！答辩时评委可能用不同浏览器，我当初没测IE，结果公告详情的富文本格式错乱，赶紧加兼容性CSS才好：

  • 浏览器测试：Chrome、Firefox、Edge、IE11（重点测IE，兼容性最差）
  • 分辨率测试：1920×1080、1366×768（别让页面出现横向滚动条，用Bootstrap的“container-fluid”布局，加“overflow-x: hidden”）

3. 测试报告要写好！答辩加分

把测试结果整理成“测试报告”，含“目的、范围、用例、结果、问题总结”，导师会觉得你“做事严谨”。比如：

  • 问题总结：“IE浏览器下公告富文本格式错乱，通过添加IE专属CSS（*display: inline-block;）修复；试题选项为空时能提交，加非空校验修复”
  • 测试结论：“核心功能（课程管理、在线答题、公告管理）均通过测试，无严重bug；兼容性问题已修复，系统可正常使用”

六、答辩准备：3个加分小技巧

毕设不仅要做出来，还要说清楚！我当初准备了这3点，导师直接给“良好”：

  1. 演示流程要顺畅：提前录演示视频（怕现场系统崩），按“管理员新增课程→管理员创建试卷→用户选课→用户答题→用户查看错题”的流程来，别跳步
  2. 重点讲“你解决了啥问题”：比如“一开始课程名称能重复新增，加唯一约束解决；考试时间到不自动提交，加倒计时JS逻辑修复；表关联错误导致查不到试题，重新设计外键解决”，比光说“我用了SpringBoot+MySQL”有亮点
  3. 准备常见问题：导师大概率问“为啥选SpringBoot不选SSM”“用户多了怎么优化”，提前答：“SpringBoot简化配置，新手容易上手；用户多就加索引（如试题表的exampaper_id索引），优化查询速度，还能分表存储历史答题记录”

最后：毕设通关的小私心

以上就是基于Java+MySQL的在线互动学习网站从0到1的避坑干货！毕设没那么难，关键是找对方法，别瞎做复杂功能。

需要核心源码（带注释，直接能跑）、数据库脚本（含测试数据）、ER图模板的宝子，评论区扣“在线互动学习网站”，我私发你；卡在某个模块（比如课程新增、在线答题），也可以留言，我看到必回！

点赞收藏这篇，下次找流程不迷路～祝宝子们毕设顺利，轻松毕业！😘

avatar
文章
阅读
粉丝