在线学习|作业提交|基于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("管理管理员信息")
public class AdminController {
    @Autowired
    private AdminService adminService;
    @ApiOperation(value = "所有用户列表")
    @GetMapping("/findAllAdmin")
    public Result findAllAdmin() {
        List<Admin> adminList = adminService.findAllAdmin();
        return Result.ok().data("adminList", adminList);
    }
    @ApiOperation(value = "根据管理员id查找管理员信息")
    @GetMapping("/getAdminById/{id}")
    public Result getAdminById(@PathVariable String id) {
        Admin adminInfo = adminService.getAdminById(id);
        return Result.ok().data("adminInfo", adminInfo);
    }
    @ApiOperation(value = "分页且带条件查询用户列表")
    @PostMapping("/adminPageCondition/{pageNum}/{pageSize}")
    public Result adminPageCondition(@PathVariable(value = "pageNum") Integer pageNum,
                                     @PathVariable(value = "pageSize") Integer pageSize,
                                     @RequestBody(required = false) QueryAdmin queryAdmin) {
        Page<Admin> adminPage = new Page<>(pageNum, pageSize);
        IPage<Admin> adminList = adminService.adminPageCondition(adminPage, queryAdmin);
        return Result.ok().data("total", adminList.getTotal()).data("adminList", adminList);
    }
    @ApiOperation(value = "添加用户")
    @PostMapping("/insert")
    public Result insert(@RequestBody Admin admin) {
        return adminService.insert(admin);
    }
    @ApiOperation(value = "修改用户")
    @PutMapping("/update")
    public Result update(@RequestBody Admin admin) {
        return adminService.update(admin);
    }
    @ApiOperation(value = "根据id删除用户")
    @DeleteMapping("/delete/{id}")
    public Result delete(@PathVariable(value = "id") String id) {
        return adminService.deleteById(id);
    }
    @ApiOperation(value = "根据id数组删除多个用户")
    @DeleteMapping("/deleteIds")
    public Result deleteIds(@RequestParam String[] ids) {
        return adminService.deleteByIds(ids);
    }
    @ApiOperation(value = "登录")
    @PostMapping("/login")
    public Result login(@RequestBody Admin admin){
        return adminService.login(admin);
    }
    @ApiOperation(value = "注册")
    @PostMapping("/register")
    public Result register(@RequestBody Admin admin){
        return adminService.register(admin);
    }
}

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.Course;
import com.xb.studentSystem.pojo.Course;
import com.xb.studentSystem.pojo.Student;
import com.xb.studentSystem.pojo.vo.QueryAdmin;
import com.xb.studentSystem.pojo.vo.QueryCourse;
import com.xb.studentSystem.service.CourseService;
import com.xb.studentSystem.utils.Result;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.*;
import java.util.List;
/**
 * <p>
 *  前端控制器
 * </p>
 *
 * @author xb
 * @since 2022-10-18
 */
@RestController
@RequestMapping("/studentSystem/course")
public class CourseController {
    @Autowired
    private CourseService courseService;
    @ApiOperation(value = "查询所有课程")
    @GetMapping("/findAllCourse")
    public Result findAllCourse() {
        List<Course> courseList = courseService.findAllCourse();
        return Result.ok().data("courseList", courseList);
    }
    @ApiOperation(value = "分页且带条件查询课程列表")
    @PostMapping("/coursePageCondition/{pageNum}/{pageSize}")
    public Result coursePageCondition(@PathVariable(value = "pageNum") Integer pageNum,
                                     @PathVariable(value = "pageSize") Integer pageSize,
                                     @RequestBody(required = false) QueryCourse queryCourse) {
        Page<Course> coursePage = new Page<>(pageNum, pageSize);
        IPage<Course> courseList = courseService.coursePageCondition(coursePage, queryCourse);
        return Result.ok().data("total", courseList.getTotal()).data("courseList", courseList);
    }
    @ApiOperation(value = "添加课程")
    @PostMapping("/insert")
    public Result insert(@RequestBody Course course) {
        return courseService.insert(course);
    }
    @ApiOperation(value = "修改课程")
    @PutMapping("/update")
    public Result update(@RequestBody Course course) {
        return courseService.update(course);
    }
    @ApiOperation(value = "根据id删除课程")
    @DeleteMapping("/delete/{id}")
    public Result delete(@PathVariable(value = "id") String id) {
        return courseService.deleteById(id);
    }
    @ApiOperation(value = "根据id数组删除多个课程")
    @DeleteMapping("/deleteIds")
    public Result deleteIds(@RequestParam String[] ids) {
        return courseService.deleteByIds(ids);
    }
    @ApiOperation(value = "查询当前用户发布的所有课程")
    @GetMapping("/myCourse/{teacherId}")
    public Result myCourse(@PathVariable(value = "teacherId") String teacherId) {
        List<Course> courseList = courseService.myCourse(teacherId);
        return Result.ok().data("courseList", courseList);
    }
    @ApiOperation(value = "查询当前用户加入的所有课程")
    @GetMapping("/myJoinedCourse/{uid}")
    public Result myJoinedCourse(@PathVariable(value = "uid") String uid) {
        List<Course> courseList = courseService.myJoinedCourse(uid);
        return Result.ok().data("courseList", courseList);
    }
    @ApiOperation(value = "加入课程")
    @PostMapping("/joinCourse/{uid}/{courseId}")
    public Result joinCourse(@PathVariable("uid")String uid,
                             @PathVariable("courseId")String courseId) {
        return courseService.joinCourse(uid, courseId);
    }
    @ApiOperation(value = "查看课程详情")
    @GetMapping("/getCourseDetails/{cid}")
    public Result getCourseDetails(@PathVariable("cid")String cid) {
        Course course = courseService.getCourseDetails(cid);
        return Result.ok().data("course", course);
    }
    @ApiOperation(value = "通过课程id查询该课程下的所有学生")
    @GetMapping("/getStuListByCourseId/{cid}")
    public Result getStuListByCourseId(@PathVariable("cid")String cid) {
        List<Student> studentList = courseService.getStuListByCourseId(cid);
        return Result.ok().data("studentList", studentList).data("total", studentList.size());
    }
}

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.CourseHomework;
import com.xb.studentSystem.pojo.HomeworkCorrect;
import com.xb.studentSystem.pojo.vo.QueryAdmin;
import com.xb.studentSystem.pojo.vo.QueryCorrect;
import com.xb.studentSystem.service.CourseHomeworkService;
import com.xb.studentSystem.service.HomeworkCorrectService;
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-23
 */
@Api(value = "提交后的作业控制器")
@RestController
@RequestMapping("/studentSystem/homework-correct")
public class HomeworkCorrectController {
    @Autowired
    private HomeworkCorrectService correctService;
    @ApiOperation(value = "获取全部提交后的作业")
    @GetMapping("/getAllHomeworkCorrect")
    private Result getAllHomeworkCorrect(){
        List<HomeworkCorrect> correctList = correctService.getAllHomeworkCorrect();
        return Result.ok().data("correctList", correctList);
    }
    @ApiOperation(value = "获取某课程下某个作业某位学生提交后的作业")
    @GetMapping("/getCorrectByCidHidSid/{courseId}/{hid}/{sid}")
    private Result getCorrectByCidHidSid(@PathVariable String courseId,
                                         @PathVariable Integer hid,
                                         @PathVariable String sid){
        HomeworkCorrect correct = correctService.getCorrectByCidHidSid(courseId, hid, sid);
        return Result.ok().data("correct", correct);
    }
    @ApiOperation(value = "分页且带条件查询批改作业列表")
    @PostMapping("/correctPageCondition/{pageNum}/{pageSize}")
    public Result correctPageCondition(@PathVariable(value = "pageNum") Integer pageNum,
                                     @PathVariable(value = "pageSize") Integer pageSize,
                                     @RequestBody(required = false) QueryCorrect queryCorrect) {
        Page<HomeworkCorrect> correctPage = new Page<>(pageNum, pageSize);
        IPage<HomeworkCorrect> correctList = correctService.correctPageCondition(correctPage, queryCorrect);
        return Result.ok().data("total", correctList.getTotal()).data("correctList", correctList);
    }
    @ApiOperation(value = "提交作业")
    @PostMapping("/insert")
    private Result insert(@RequestBody HomeworkCorrect homeworkCorrect){
        return correctService.insert(homeworkCorrect);
    }
    @ApiOperation(value = "修改提交后的作业")
    @PutMapping("/update")
    public Result update(@RequestBody HomeworkCorrect homeworkCorrect) {
        return correctService.update(homeworkCorrect);
    }
    @ApiOperation(value = "根据id删除提交后的作业")
    @DeleteMapping("/delete/{id}")
    public Result delete(@PathVariable(value = "id") Integer id) {
        return correctService.deleteById(id);
    }
    @ApiOperation(value = "根据id数组删除多个提交后的作业")
    @DeleteMapping("/deleteIds")
    public Result deleteIds(@RequestParam Integer[] ids) {
        return correctService.deleteByIds(ids);
    }
    @ApiOperation(value = "根据作业id和学生id删除提交后的作业(撤回作业)")
    @DeleteMapping("/deleteByHidSid/{hid}/{sid}")
    public Result deleteByHidSid(@PathVariable(value = "hid") Integer hid,
                                 @PathVariable(value = "sid") Integer sid) {
        return correctService.deleteByHidSid(hid,sid);
    }
}

五，项目总结

本项目是基于SSM搭建的在线课程学习及作业提交系统，主要研究内容包括如何将主流技术Spring+SpringMVC+Mybatis-Plus+Vue+MySQL等多种技术整合到一起，能够使自己对这些技术有着更深的理解和实践。

本次毕业设计项目的主要目标是完成在线课程学习及作业提交系统。该系统主要面向PC端，所使用的对象是学生老师人群，本系统的具体功能模块包括:用户信息模块、课程学习模块、作业模块、文件上传下载模块、用户信息管理模块、课程信息管理模块、作业信息管理模块、公告信息管理模块。通过这个系统可以大大减少老师与学生之间的工作量并提高工作效率，便于老师关注每个学生和提高学生学习的自主性。

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