在线学习|作业提交|基于 SSM+VUE 的在线课程学习和作业提交系统的设计与实施

项目编号：BS-GX-049

一，项目简介

信息时代的高速发展，物联网等概念的实现，使得人们开始注重生活中的便利性。教育模块更是人们关注的重中之重，传统的现场教学模式已不再满足于当今时代人们的需求，互联网的发展使得这一希望得以实现，在线学习系统孕育而生。现场教学的局限性开始被打破，学习方式和途径从此多元化。比如现如今举世关注的新冠肺炎疫情，在线学习

系统展现出了独特的耀眼光芒，甚至国家发起了起了线教学的号召。因此，本文将利用互联网技术，提出一个B/S架构[1]的在线课程学习及作业提交系统，只要有网络，通过该系统人们就可以随时随地进行学习。

本篇文章阐述用SSM(Spring+SpringMVC+MyBatis-Plus)+Vue+MySQL开发的前后端分离的在线课程学习及作业提交系统，教师所拥有的功能有：发布课程、上传教学视频、上传资料、发布作业、发布公告、批改作业等，学生所拥有的功能有：加入课程、预览视频、下载资料、提交作业、查看公告等。管理员所拥有的功能有：用户管理、管理员管理、课程管理、作业管理、公告管理等。当中上传下载功能模块使用的是第三方接口：阿里云oss存储桶，视频的上传和点播使用的是第三方接口：阿里云视频点播服务。

本系统的功能主要有用户信息模块、课程学习模块、作业模块、文件模块、用户管理模块、课程管理模块、作业管理模块、公告管理模块。8个核心模块描述如下：

用户信息模块：用户注册、用户登录以及修改个人信息。

课程学习模块：发布课程（教师、管理员）、修改课程（教师、管理员）、加入课程（学生）、退出课程（学生）。

作业模块：作业发布（教师）、查看作业（教师、管理员、学生）、提交作业（学生）、批改作业（教师）。

文件模块：上传文件、下载文件、在线预览文件。

用户管理模块：用户信息管理（可对用户进行增删改查等操作）、管理员管理（可增加和查看管理员，一级管理员可对二级管理员进行删除和修改等操作）。

课程管理模块：审核课程、查看课程、添加课程、删除课程。

作业管理模块：审核作业、查看作业、删除作业。

公告管理模块：发布公告、修改公告、删除公告、查看公告。

二，环境介绍

语言环境：Java:  jdk1.8

数据库：Mysql: mysql5.7

应用服务器：Tomcat:  tomcat8.5.31

开发工具：IDEA或eclipse

后台开发技术：SSM框架

前端开发技术：VUE+ElementUI

前后端分离方式开发实现

三，系统展示

5.1 用户信息模块实现

本系统仅限有账户的用户使用，若无账户不能使用本系统的功能，需注册账户。用户若未登陆也不可查看本系统的其他内容，设置全局拦截器判断用户是否登陆，未登录则跳转至登陆界面。

用户在登陆之后可点击系统右上角的设置按钮，进入个人信息，可查看并修改自己的个人信息，包括上传头像、添加联系电话和地址等。

用户登陆界面如图5-1所示、用户注册界面如图5-2所示、用户个人信息修改界面如图5-3所示。

图5-1 用户登陆界面

图5-2 用户注册界面

图5-3 用户修改信息界面

5.2 课程学习模块实现

学生和教师均可加入课程，加入课程后会显示课程的头像，课程名称，课程内同学及教师名称显示在课程首页，加入课程后可查看课程内的课件信息，作业信息，课程发布的资料，公告，以及同学列表等。教师可在课程首页发布课程，进入课程详情页面可以添加课程章节，上传视频，上传课程资料，发布公告信息作业信息等。教师点击发布课程后会出现一个弹出框，里面填写课程的基本信息以表单的方式发送给后台，后台写入数据库中，等待管理员审核通过后课程即可发布在系统平台上供他人可见。

课程学习首页界面如图5-4所示，课程内容详情界面如图5-5所示，课程内同学列表界面如图5-6所示，发布课程界面如图5-7所示。

图5-4 课程学习首页界面

图5-5 课程内容详情界面

图5-6课程内同学列表界面

图5-7 发布课程界面

5.3 作业模块实现

作业模块中，教师可在课程中添加作业，点击发布作业，填写作业的相关信息后发送给后端，后端处理后写入数据库中，刚发布的作业即会显示在作业首页界面上，点击作业标题会进入作业详情界面，教师可更改作业要求文档和作业描述，教师作业详情界面也会显示当前已提交作业的学生及其作业，教师可查看文档之后点击marking按钮为学生批改评分。

学生进入课程后可点击左侧导航栏查看该课程内的作业，进入作业首页界面查看作业，点击作业标题即可进入学生作业详情界面，可在我的答案下提交自己完成的作业，在教师发布的作业文档或作业描述中查看作业，也可以在作业首页界面点击上传文件上传作业，上传完后点击提交即真正的提交作业上去，教师才可查看到，学生若要更改提交的作业可点击撤回作业，并点击确定，确定后后端会调用deleteByHidSid接口从数据库中删除该提交作业记录，之后学生可重新上传提交作业。

作业首页界面如图5-8所示，学生作业详情界面如图5-9所示，教师作业详情如图5-10所示，发布作业界面如图5-11所示，编辑作业界面如图5-12所示。

图5-8 作业首页界面

图5-9 学生作业详情界面

图5-10 教师作业详情界面

图5-11 发布作业界面

图5-12 发布作业界面

5.4 文件模块实现

文件模块主要包含文件上传和文件下载以及在线预览教学视频等，教师可以进入课程详情界面后，在课程内的章节中点击上传视频，选择教学视频后，系统会调用VodController中的uploadAlyVideo接口将视频上传至系统指定的阿里云视频点播服务中的存储位置，在教师点击提交后会调用后端的VideoController中的insertVideo接口将视频的相关信息写入到数据库中做一个持久化存储，此后学生可在该课程中的对应章节下查看视频文件，点击即在线预览，教师不止可以上传视频，还可以上传图片和作业文档以及其他资料等，通过调用FileController中的upload接口将文件上传至系统指定的阿里云oss存储桶中的bucket中，学生也可点击上传来上传作业和头像等。

文件下载，教师点击学生上传来的作业文档即会下载到本地，这是阿里云oss存储桶中文件url特有的功能，学生也可点击教师发布的作业文档及资料等。

文件上传举例界面如图5-13所示，文件下载举例界面如图5-14所示，视频在线预览界面如图5-15所示。

图5-13 文件上传举例界面

图5-14 文件下载举例界面

图5-15 视频在线预览界面

5.5 用户管理模块实现

用户管理主要包含管理员管理、学生信息管理、教师信息管理。

在管理员管理中，一级管理员可以点击添加、编辑和删除按钮来对二级管理员进行操作，而二级管理员只能查看管理员的公开信息，通过输入查询条件点击查询来调用后端的AdminController中的adminPageCondition接口进行分页查询满足条件的管理员信息。

在学生信息管理中，所有管理员均可通过点击查询、新增、编辑、删除等按钮来对学生信息进行一个增删改查的操作。同理在教师信息管理中具有同样的功能。

管理员信息管理界面如图5-16所示，学生信息管理如图5-17所示，教师信息管理如图5-18所示。

图5-16 管理员管理界面

图5-17 学生信息管理界面

图5-18 教师信息管理界面

5.6 课程管理模块实现

管理员可以对教师提交的课程发布申请进行审核，点击编辑按钮，修改审核状态为1后该课程才会发布在系统公开的内容中，用户才可查询到此课程，管理员还可以通过输入课程编号、课程名称等查询条件然后点击查询，调用后端的CourseController的coursePageCondition接口来查询，来查看满足条件的课程信息，管理员也可以点击新增课程，来测试课程发布的功能是否正常，当课程内容含有非法内容时且结果提醒教师，仍然不改的可点击删除按钮来调用后端的CourseController的delete或deleteByIds接口来删除课程。

课程管理首页界面如图5-19所示，课程审核界面如图5-20所示，课程删除界面如图5-21所示。

图5-19 课程管理首页界面

图5-20 课程审核界面

图5-21 课程删除界面

四，核心代码展示

package com.xb.studentSystem.controller;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.xb.studentSystem.pojo.Admin;
import com.xb.studentSystem.pojo.vo.QueryAdmin;
import com.xb.studentSystem.service.AdminService;
import com.xb.studentSystem.utils.Result;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
/**
 * <p>
 *  前端控制器
 * </p>
 *
 * @author xb
 * @since 2022-10-10
 */
@RestController
@RequestMapping("/studentSystem/admin")
@Api("管理管理员信息")

						

							上一篇：							
								基于 SSM 的作业管理（电子学习）系统							
						
						

							下一篇：							
								车道线检测_Canny 操作员边缘检测_1