在线课堂管理平台的设计与实现

一、需求分析

1.1 需求来源

通过研究传统的课堂学习特点，了解到传统课堂教学中存在教师与学生沟通不便，通知与作业不能及时传达，教学资源不能高效共享等不足，本项目使用 Java EE 技术来解决上述需求。此项目贴近我们高校学生生活，可以从平时的课堂教学存在的优缺点来获取并定义部分需求。此外，此项目参考了一些主流课堂管理平台，如课堂派、蓝墨云班课等，来获取、定义、完善本系统的需求。

1.2 系统功能

本系统为教师和学生提供便捷的课堂管理功能，教师可通过此系统发布公告、发布作业、收作业、上传教学资源，学生可通过此系统查看公告、查看作业、上传作业、下载资源。此系统含有登录注册模块、课堂管理模块、公告管理模块、作业管理模块、资源管理模块、学生管理模块等。

1.3 详细功能

登录注册模块：包括登录子模块和注册子模块。登录子模块的功能为：用户可输入邮箱、密码、验证码进行登录，系统可判断该用户角色，进入相应用户页面。注册子模块功能为：用户可选择角色，输入邮箱、密码等信息进行注册。

课堂管理模块：包括教师管理课堂子模块和学生加入及删除课堂子模块。教师管理课堂子模块功能为：教师可创建一个课堂并设置课堂名，产生唯一邀请码，教师也可删除自己创建的课堂。学生加入及删除课堂子模块功能为：通过邀请码，学生可添加到相应的课堂中进行学习，也可退出某课堂。

公告管理模块：包括公告管理子模块、公告查看子模块。功能管理子模块功能为：教师可发布公告、修改公告、删除公告。公告查看子模块功能为：教师和学生均可查看公告。

作业管理模块：包括作业管理子模块、作业查看及提交子模块。作业管理子模块功能为：教师可发布作业，可查看、下载学生提交的电子作业、并提供 ZIP 打包下载功能。作业查看及提交子模块功能为：学生可以查看作业，并对电子文档作业进行提交。

资源管理模块：包括资源上传子模块、资源下载子模块。资源上传子模块功能为：教师可上传各种类型的教学资源。资源下载子模块功能为：学生可下载各类型的教学资源。

学生管理模块：教师可对于某个课堂所拥有的学生进行管理，可查看学生信息，删除学生。

二、概要设计

2.1 系统架构

本系统基于 B/S 总体架构设计，服务器端使用 Tomcat Web 服务器，其使用 HTTP 协议为浏览器提供服务。教师和学生用户可通过浏览器访问此系统。此系统使用 MySQL 数据库提供数据存储服务。整体架构如下图 2-1-1 所示。

图 2-1-1 B/S 架构图

服务器端使用 Web 应用主流的 MVC 架构，分为模型（Model）、视图（View）、控制器（Controller）。模型上使用 Javabean 存取实体数据，使用 Mybatis 框架将数据库与实体类进行映射。视图上使用 JSP 技术后端对前端进行渲染、显示。控制器使用 Struts2 框架接收 JSP 视图的请求，调用服务层进行相关处理后，更新模型中的数据，重新显示视图。此外使用 Spring 框架对 MVC 中涉及的对象及数据库事务进行管理。本系统的 MVC 架构图如图 2-1-2 所示。

图 2-1-2 系统 MVC 架构图

2.2 系统结构设计

此系统含有登录注册模块、课堂管理模块、公告管理模块、作业管理模块、资源管理模块、学生管理模块等。如图 2-2-1 所示。

图 2-2-1 系统模块图

2.3 系统流程图

用户登录流程图如下图 2-3-1 所示。用户先输入邮箱、密码、验证码，前端首先对用户输入进行验证，验证通过，前端向后端发送 Ajax 请求登录及字段。后端收到请求，首先 Struts2 框架的 LoginAction 接收请求并对请求进行处理，先验证验证码是否正确，若不正确，返回验证码错误的 JSON 数据，前端提示用户。

若验证码正确，LoginAction 将调用 LoginService 接口查询该邮箱、密码是否正确，若不正确，返回邮箱或密码错误的 JSON 数据，若正确，返回登录成功的 JSON 数据，前端跳转到用户课程列表界面。

图 2-3-1 登录功能流程图

业务通用流程图如下图 2-3-2 所示。用户通过浏览器使用系统功能，当请求系统某一功能时，前端向后端发送相应请求，Struts2 框架 Action 对象接收请求，获取前端参数，调用相应 Service 层接口进行业务处理，Service 层接口的实现类调用 Mybatis 的 Mapper 代理类对数据库进行存取。MySQL 将数据返回给 Mapper 代理类，代理类将数据返回给 Service 层，Service 层将相应的处理结果返回给 Action，Action 再根据不同的返回结果转发跳转到不同页面，对页面进行刷新，完成相应功能。

图 2-3-2 业务通用流程图

三、运行环境、开发语言

3.1 运行环境

• CPU：1 核内存：2G 数据库：MySQL 5.7

• Java WEB 服务器：Tomcat 9

• 服务器：阿里云轻量应用服务器

• 操作系统：CentOS Linux release 7.4.1708

3.2 开发语言

后端语言：Java SE 9

后端框架：Spring、Struts2、Mybatis 等前端语言：HTML、CSS、JavaScript 前端框架：ZUI、JQuery 等

四、详细设计

4.1 程序清单

登录注册模块所有程序如表 1 所示。

表 1 登录注册模块程序清单

文件名	功能
index.jsp	系统首页、登录页面
User.java	用户实体类
LoginAction.java	登录 Action 控制类
LoginService.java	登录模块接口
LoginServiceImpl.java	登录模块接口实现类
UserMapper.java	用户 DAO 层接口
VerificationCodeAction.java	生成验证码 Action 控制类
register.jsp	用户注册界面
RegisterAction.java	用户注册 Action 控制类

课程管理模块所有程序如表 2 所示。

表 2 课程管理模块程序清单

文件名	功能
teacher/courselist.jsp	教师课程列表界面
TeaCourse.java	教师课程实体类
TeaCourseListAction.java	教师课程列表 Action 控制类
TeaCourseListService.java	教师课程列表服务接口
TeaCourseListServiceImpl.java	教师课程列表服务接口实现类
TeaCourseMapper.java	教师课程 DAO 接口
student/courselist.jsp	学生课程列表界面
StuCourse.java	学生课程实体类
StuCourseListAction.java	学生课程列表 Action 控制类
StuCourseListService.java	学生课程列表服务接口
StuCourseListServiceImpl.java	学生课程列表服务接口实现类
StuCourseMapper.java	学生课程 DAO 接口

公告模块所有程序如表 3 所示。

表 3 公告模块程序清单

文件名	功能
teacher/course_task.jsp	教师课程作业界面
TeaNotice.java	教师公告实体类
TeaCourseNoticeAction.java	教师公告 Action 控制类
TeaCourseNoticeService.java	教师公告服务接口
TeaCourseNoticeServiceImpl.java	教师公告服务接口实现类
TeaCourseNoticeMapper.java	教师公告 DAO 接口
student/course_notice.jsp	学生课程公告界面
StuNotice.java	学生公告实体类
StuCourseNoticeAction.java	学生公告 Action 控制类
StuCourseNoticeService.java	学生公告服务接口
StuCourseNoticeServiceImpl.java	学生公告服务接口实现类
StuCourseNoticeMapper.java	学生公告 DAO 接口

作业模块所有程序如表 4 所示。

表 4 作业模块程序清单

文件名	功能
teacher/course_task.jsp	教师课程公告界面
TeaTask.java	教师作业实体类
TeaCourseTaskAction.java	教师公告 Action 控制类
TeaCourseTaskService.java	教师作业服务接口
TeaCourseTaskServiceImpl.java	教师作业服务接口实现类
TeaCourseTaskMapper.java	教师作业 DAO 接口
teacher/course_task_detail.jsp	教师作业详情界面
course_task_update.jsp	教师作业修改界面
StuTaskFiles.java	学生上传作业文件实体类
StuTaskFilesMapper.java	学生上传作业文件 DAO 接口
student/course_task.jsp	学生课程中作业界面
StuTask.java	学生作业实体类
StuCourseTaskAction.java	学生作业 Action 控制类
StuCourseTaskService.java	学生作业服务接口
StuCourseTaskServiceImpl.java	学生作业服务接口实现类
StuCourseTaskMapper.java	学生作业 DAO 接口
student/course_task_detail.jsp	学生作业详情界面
TaskFileUploadAction.java	上传作业 Action 控制类
TaskFileDownloadAction.java	下载作业 Action 控制类
ZipTaskFileDownloadAction.java	ZIP 方式下载作业 Action 控制类
TaskFileService.java	上传作业接口
TaskFileServiceImpl.java	上传作业接口实现类
TaskFileMapper.java	课程作业文件 DAO 接口

资源模块所有程序如表 5 所示。

表 5 资源模块程序清单

文件名	功能
teacher/course_resource.jsp	教师课程资源界面
CourseResource.java	课程资源实体类
TeaCourseResourceAction.java	教师资源 Action 控制类
ResourceUploadAction.java	上传资源 Action 控制类
ResourceDownloadAction.java	下载资源 Action 控制类
ResourceDownloadAction.java	课程资源服务接口
ResourceDownloadActionImpl.java	课程资源服务接口实现类
CourseResourceMapper.java	教师课程 DAO 接口
ResourceDeleteAction.java	删除资源 Action 控制类
student/course_resource.jsp	学生课程资源界面
StuCourseResourceAction.java	学生课程资源 Action 控制类

工具类模块所有程序如表 6 所示。

表 6 工具类模块程序清单

文件名	功能
DownloadFileNameOp.java	下载中文文件名编码转换工具
GenerateCode.java	生成 6 位邀请码工具
Html2Text.java	HTML 中提取文本缩略工具

4.2 数据库设计

用户表（user）用于存储教师、学生、管理员的用户数据，结构如表 7 所示。

表 7 user（用户数据表）

列名	类型（包括长度）	描述
id	int(10)	用户 id，唯一，主键,自增
email	varchar(30)	用户邮箱，不为空
password	varchar(30)	用户密码，不为空
role	char(1)	用户角色，不为空
name	varchar(20)	用户姓名，不为空
school_id	varchar(20)	用户学号/教工号
school	varchar(30)	用户学校
dept	varchar(30)	用户院系
major	varchar(30)	用户专业
class	varchar(20)	用户班级

课程表（course）用于存储课程信息，结构如表 8 所示。

表 8 course（课程表）

列名	类型（包括长度）	描述
id	int(10)	课程 id，唯一，主键，自增
code	varchar(10)	课程邀请码，唯一，不为空
name	varchar(30)	课程名，不为空
create_time	datetime	课程创建时间，不为空

课程-教师表（course-teacher）用于存储课程-教师关系，结构如表 9 所示。

表 9 course-teacher（课程-教师表）

列名	类型（包括长度）	描述
course_id	int(10)	课程 id，主键
user_id	int(10)	用户 id，主键
enter_time	datetime	用户加入课程时间，不为空

课程-学生表（course-student）用于存储课程-学生关系，结构如表 10 所示。

表 10 course-student（课程-学生表）

列名	类型（包括长度）	描述
course_id	int(10)	课程 id，主键
user_id	int(10)	用户 id，主键
enter_time	datetime	进入课程时间，不为空

公告表（notice）用于存储课程公告信息，结构如表 11 所示。

表 11 notice（公告表）

列名	类型（包括长度）	描述
id	int(10)	公告 id，主键，自增
course_id	int(10)	课程 id，不为空
title	varchar(255)	公告标题，不为空
content	varchar(10000)	公告内容
writer_id	int(10)	公告发布者，用户 id
create_time	datetime	公告创建时间
update_time	datetime	公告更新时间

作业表（task）用于存储课程作业信息，结构如表 12 所示。

表 12 task（作业表）

列名	类型（包括长度）	描述
id	int(10)	作业 id，主键，自增
course_id	int(10)	课程 id，不为空
title	varchar(255)	作业标题
content	varchar(10000)	作业内容
deadline	datetime	作业截止时间
writer_id	int(10)	作业发布者，用户 id
create_time	datetime	作业创建时间
update_time	datetime	作业更新时间

作业文件表（task_file），用于存储学生用户上传的作业文件信息，结构如表 13 所示。

表 13 task_file（作业-文件表）

列名	类型（包括长度）	描述
id	int(10)	作业文件 id，主键，自增
task_id	int(10)	作业 id，不为空
user_id	int(10)	学生 id，不为空
upload_time	datetime	作业上传时间
file_name	varchar(255)	作业文件名
file_path	varchar(255)	作业文件路径

资源（resource）表，用于存储课程资源信息，结构如表 14 所示。

表 14 resource（资源表）

列名	类型（包括长度）	描述
id	int(10)	资源 id，主键，自增
course_id	int(10)	课程 id，不为空
file_name	varchar(255)	资源文件名
file_path	varchar(255)	文件上传路径
upload_time	datetime	文件上传时间

4.3 主要功能

登录注册功能

用户输入邮箱、密码、验证码，前端向后端发送请求数据，后端对验证码、邮箱和密码进行验证，返回相应 JSON 数据。该功能截图如图 4-3-1 所示。

图 4-3-1 登录注册功能截图

前端提交数据代码如下所示。

$.ajax( {
	type: "POST", url: "/login", data: {
		email: email.val(), password: pass.val(), verificationCode:
		verificationCode.val()
	}
    success: function (data) {
		成功回调，跳转页面
	}
	error: function () {
		失败回调，提示失败
	}
}
);

Action 层处理代码如下所示。

public String login() throws IOException {
	LoginJson loginJson = new LoginJson();
	loginJson.code = LOGIN_CODE;
	if (email == null || email.trim().length() == 0 || password == null || password.trim().length() == 0|| verificationCode == null || verificationCode.trim().length() == 0) {
		设置异常状态
	} else {
		Map<String, Object> session =
		ActionContext.getContext().getSession();
		String realVerificationCode = (String) session.get("verificationCode");
		if (verificationCode.equals(realVerificationCode)) {
			user 赋值
			user = loginService.loginByEmailPassword(user);
			if (user == null) {
				设置账号错误状态
			} else {
				设置登录成功状态
				ActionContext.getContext().getSession().put("user", user);
			}
		} else {
			设置验证码错误状态
		}
	}
	返回 JSON 数据
	return NONE;
}

课程管理功能

教师用户可通过输入课程名，创建课程，后端返回课程邀请码，刷新页面，显示教师所有课程。该功能截图如 4-3-2 所示。

图 4-3-2 课程管理功能截图

获取课程列表 Action 代码如下所示。

public String showCourseList() {
	User user = (User) ActionContext.getContext().getSession().get("user");
	if (user == null) return LOGIN;
	teaCourses = TeaCourseListService.findTCourses(user);
	for (TeaCourse t : teaCourses) {
		List<TeaTask> teaTasks = teaCourseTaskService.findTasks(t);
		for (TeaTask task : teaTasks) {
			if (task.getTitle().length() > 12) task.setTitle(task.getTitle().substring(0, 12) + "...");
		}
		if (teaTasks.size() > 3)
		t.setTeaTasks(teaTasks.subList(0, 3)); else
		t.setTeaTasks(teaTasks);
	}
	return SUCCESS;
}

• 公告管理功能

• 教师用户可添加公告信息，输入公告标题、内容来添加公告，该功能截图如

• 4-3-3 所示。

图 4-3-3 公告管理功能截图

作业管理功能

教师端可发布作业、修改作业、删除作业，学生可提交作业，教师进入作业详情页面，可分别下载和 ZIP 打包下载学生作业。该功能如下图 4-3-4 所示。

图 4-3-4 作业管理功能截图

学生上传作业功能如图 4-3-5 所示。

• 图 4-3-5 学生上传作业功能截图

• 资源管理功能

• 教师用户可在此模块上传教学资源，学生可下载教学资源，教师可删除教学资源，该功能截图如下图 4-3-6 所示。

• 图 4-3-6 资源管理功能截图

• 学生管理功能

• 教师可查看该课程内所有学生，移除课程学生，该功能截图如下图 4-3-7 所

• 示。

图 4-3-7 学生管理功能截图

五、调试与分析

问题 1：搭建 SSM（Spring、Struts2、Mybatis）环境及整合时，特别是 Spring、Struts2 整合过程中，不能正常运行。

解决：查阅官方文档的整合方式，需要下载 struts2-spring-plugin.jar 插件，将Struts2 的 Action 交给 Spring 管理。

问题 2：测试过程中，不定时不定次数会出现系统不访问后端的 Action，直接跳转到首页问题。

解决：通过认真排查，查看后端日志，确实前端未访问后端直接跳转首页。再查看浏览器开发者工具，发现当访问某 Action 时，直接跳转首页。经过分析，发现原因在于将首页设为.html 格式的静态网页，浏览器会对静态网页进行缓存，由于开发调试问题，第一次访问 Action 时跳转到静态页面，之后每次访问相同

Action 就都会使用缓存的首页页面。

问题 3：将项目从本机部署到阿里云服务器时，系统不容易部署，部署成功后用户访问验证码时乱码。

解决：通过多次尝试，发现只要将本机的部署目录文件直接复制到服务器Tomcat Root 目录下即可完成部署。验证码乱码问题，通过搜索，发现为 Cent OS 默认字体原因，通过更换服务器 Cent OS 系统的默认字体即可解决。

六、功能测试

6.1 登录注册功能测试

用户可通过注册页面，在本系统中注册账号。注册如图 6-1-1 所示。注册后成功跳转到用户课程页面，如图 6-1-2 所示。

图 6-1-1 注册页面

图 6-1-2 注册成功后页面

6.2 课程管理功能测试

教师用户可通过输入课程名，创建新课程并获取邀请码，学生用户可通过邀请码加入课堂。教师用户创建课堂如图 6-2-1 所示，创建成功后如图 6-2-2 所示，可见新课程显示在课程列表中。

图 6-2-1 创建课程

图 6-2-2 创建课程后

6.3 公告管理功能测试

教师用户可通过点击添加公告按钮，添加公告，添加公告如图 6-3-1 所示。

添加公告完成如图 6-3-2 所示。

图 6-3-1 添加公告

图 6-3-2 添加公告完成

6.4 作业管理功能测试

教师用户可打包下载学生上传的作业文件，打包下载前如图 6-4-1 所示。打包下载完成后如图 6-4-2 所示。

图 6-4-1 打包下载前

图 6-4-2 打包下载后文件

6.5 资源管理功能测试

教师可通过此功能上传教学资源，上传前如图 6-5-1 所示，上传成功后如图

6-5-2 所示。

图 6-5-1 上传资源前

图 6-5-2 上传资源后

七、结论与心得

本次课程设计我选择了和数据库课程设计相同的题目—在线课堂管理系统的设计与实现。但数据库课程设计使用的是 Java Web 原始的 Servlet 技术，因此希望运用下学期学习的 Java EE 和软件系统结构等课程对整个系统进行完全的重写重构。

Java EE 核心在于框架的引入与使用，可以极大地提高开发效率与开发质量，在本系统中，我选择使用 Spring、Struts2、Mybatis 三大主流框架完成系统开发，同时使用 maven 对整个系统进行构建管理。在框架的使用过程中，我切实感受到了使用框架带来的优越性，但同时也遇到了很多问题。

最先遇到的问题就是框架的搭建与整合，每一不同框架都有着不同的解决领域与处理方法，因此每种框架的搭建使用方式都不尽相同，如果框架间整合不好，很容易出现问题，框架间不能协同工作。通过多次失败与多次尝试，发现阅读官方文档和相关资料是掌握框架搭建、使用、整合的最快捷方式，意识到阅读英文文档能力应是开发者的基本素养，未来应加强此方面的学习。

在完成此系统中，同样遇到了很多问题，印象最深刻的就是一个不定时出现的 bug，前前后后排查、修改了很多地方都没找到问题的根源，当我摈弃掉急躁的态度，一步步细致分析排查后，才找到了问题的根源—浏览器对网页进行了缓存，未请求后端。在本次排查过程中，我也学习了更多的知识，更加深入了解了 Web 应用的执行过程。此次解决问题中，我认识到遇到 bug 时必须要沉着冷静，认真细致地对 bug 进行排查，要有敢于试错和解决错误的能力与勇气。

与数据库课设不同的是，本次课设我更加注重了系统架构、业务逻辑、事务、安全等方面的属性。运用软件体系结构知识，参阅阿里 Java 开发手册，对系统的质量属性进行了规范与约束，使得系统更具扩展性、修改性、可维护性、可测试性，以及更高的性能。

本次课设有很大收获，也有一些遗憾与不足。遗憾是想增加考试、测试功能，但由于时间原因，并未增加。我也深知自己的系统还有很大的提升空间，我将继续学习新知识，扩展自己知识面的广度与深度，不断使自己的系统更加完善。

八、参考资料

• 贾蓓，镇明敏，杜磊. Java Web 整合开发实战：基于 Struts 2+Hibernate+Spring. 清华大学出版社, 2013.

• 许勇，王黎. Struts 2+Hibernate+Spring 整合开发深入剖析与范例应用. 清华大学出版社, 2013.

• 李刚. 轻量级 Java EE 企业应用实战（第 5 版）――Struts 2+Spring 5+Hibernate 5 /JPA 2. 电子工业出版社, 2018.

• 郭琳. Java Web 中错误异常的处理方法分析．电子技术与软件工程，2015.

• 赵辉，姚胤含．白领就业指南：Java Web 开发设计师之路．电子工业出版社，2012.Craig Walls, 张卫滨译. Spring 实战（第 4 版）. 人民邮电出版社, 2016.