线上教学平台

最新推荐文章于 2024-09-15 16:54:15 发布

夜月行者

最新推荐文章于 2024-09-15 16:54:15 发布

阅读量756

点赞数 18

分类专栏： springboot 管理系统计算机毕设文章标签： springboot 后端 java

本文链接：https://blog.csdn.net/u013200380/article/details/141437177

版权

管理系统同时被 3 个专栏收录

162 篇文章 0 订阅

订阅专栏

计算机毕设

162 篇文章 0 订阅

订阅专栏

springboot

54 篇文章 0 订阅

订阅专栏

@TOC

springboot0797线上教学平台

JAVA简介

Java主要采用CORBA技术和安全模型，可以在互联网应用的数据保护。它还提供了对EJB（Enterprise JavaBeans）的全面支持，java servlet API，JSP（java server pages），和XML技术。Java是一种计算机编程语言，具有封装、继承和多态性三个主要特性，广泛应用于网站Web应用程序开发和移动应用程序开发。Java语言和一般编译器以及直译的区别在于，Java首先将源代码转换为字节码，然后将其转换为JVM的可执行文件，JVM可以在各种不同的JVM上运行。因此，实现了它的跨平台特性。虽然这使得Java在早期非常缓慢，但是随着Java的开发，它已经得到了改进。

1.3.4 MySql数据库

Mysql的语言是非结构化的，毕业生可以在数据上进行工作。因为Mysql的语言和结构比较简单，但是功能和存储信息量很强大，其速度、可靠性和适应性而备受关注并得到了普遍的应用。Mysql数据库在编程过程中的作用是很广泛的，为毕业生进行数据查询带来了方便。Mysql数据库的应用特点：灵活性强，功能强大，语言相对要简洁很多。

数据流程分析主要就是数据存储的储藏室，它是在计算机上进行的，而不是现实中的储藏室。数据库管理主要是数据存储、修改和增加以及数据表的建立。数据表的建立，可以对数据表中的数据进行调整，数据的重新组合及重新构造，保证数据的安全性。介于数据库的功能强大等特点，本系统的开发主要应用了Mysql进行对数据的管理。

1.4 国内外现状

进入2021年以来，中国线上教学平台系统的竞争正越来越激烈，应该如何减轻用人成本、维护费用，成为各大网站的难题。而使用一个高效、灵活、安全可靠的网上线上教学平台对于减轻用人成本、方便维护、提高效率等都具有十分重要的意义。

从专业的角度来看，线上教学平台相当于一个方便快捷的平台，使用在线服务给予了他们更多的方便，能够不受时间、空间的限制，完成所有的信息，更加方便、有效提高工作效率。

经过数十年的发展和各大网站的努力，线上教学平台系统可以说是比较成熟了，不论是学习资料、交流论坛、试卷列表、留言反馈都比十年前有了更好的改变。它在提高学员的生活水平，顺应时代发展的大势所趋，依靠计算机、互联网技术，整合资源适合发展潮流的正确选择。为线上教学平台系统提供一个方便管理和节约成本的方式，也为学员提供一个高效的线上教学平台，设计一个线上教学平台，是必须也是必然的。

系统分析

2.1 可行性分析

可行性分析的目的是确定一个系统是否有必要开发、确定系统是否能以最小的代价实现。其工作主要有三个方面，分别是技术、经济和社会三方面的可行性。我会从这三个方面对网上线上教学平台进行详细的分析。

2.1.1技术可行性

该系统主要使用JAVA、MyEclipse和MySQL数据库进行开发，Java易于学习和使用灵活。在校期间也接触过MyEclipes和MySQL数据库的课程，对此有一定的开发经验，因此开发难度不高，所以从技术上来说是可行的。

2.1.2经济可行性

本系统设计所选择的开发工具和服务器都是免费的开源软件，又或者是适合学员使用的免费版本，并不需要支付费用，而且由作者本人单独完成，也不存在团队费用，几乎没有经济成本，具备经济可行性。

2.1.3社会可行性

社会可行性主要包括法律和学员两个方面，下面将从这两方面进行分析。

(1)法律因素

本系统是学习开发所制作的程序，并不用作商业用途，是在根据实际调研的结果结合现有的网上线上教学平台后得出的，而且系统制作的全部过程都是在个人的工作电脑中完成的，使用的都是开源和免费的开发环境、分析软件和数据库，不存在侵权问题。

(2)学员可行性

操作人员或者学员只需要具备一定的windows电脑操作常识，不需要精通计算机技能。此外系统管理人员，只需要在windows常识之上再熟悉下使用Tomcat服务器的操作流程，只要掌握一定的计算机知识即可，在正式上线运营之前，仅需要对操作人员进行简单的熟悉流程培训即可。所以从学员可行性上也是可行的。

2.2总体设计原则

一个系统要在开发和维护的过程中方便使用，必须采取一定的设计原则，其主要设计原则有：

简单性：系统功能简单易懂，只需要掌握基本的计算机操作能力即可使用。

针对性：针对特定的线上教学平台，没有多余的其他功能，使学员可以专心使用。

实用性：能够满足学员方面的需求。

一致性：设计风格、命名规范一致，整个系统的各个功能模块色彩、摆放位置、功能等都是一致的。

先进性：本系统的代码采用读取数据的方式，方便后续开发、拓展。

2.3 系统需求分析

线上教学平台需要满足的需求有以下几个：

（1）实现管理系统信息关系的系统化、规范化和自动化；

（2）减少维护人员的工作量以及实现学员对信息的控制和管理。

（3）方便查询信息及管理信息等；

（4）通过网络操作，改善处理问题的效率，提高操作人员利用率；

（5）考虑到学员多样性特点，要求界面简单，操作简便。

2.4 业务流程分析

2.4.1登录流程

登录模块主要满足管理员以及学员的权限登录，学员登录流程图如图2-1所示。

图2-1 登录流程图

2.4.2注册流程

未有账号的学员可进入注册界面进行注册操作，学员注册流程图如图2-2所示。

图2-2 注册流程图

2.4.3添加信息流程

学员在添加信息时，信息编号自动生成，系统会对添加的信息进行验证，验证通过则添加至数据库，添加信息成功，反之添加失败。添加信息流程如图2-3所示。

图2-3 添加信息流程图

2.4.4删除信息流程

学员可选择要删除的信息进行信息删除操作，在删除信息时系统提示是否确定删除信息，是则删除信息成功，系统数据库将信息进行删除。删除信息流程图如图2-4所示。

图2-4删除信息流程图

系统设计

3.1 系统概要设计

本线上教学平台适合在互联网上进行操作，只要学员能连网，任何时间、任何地点都可以进行系统的操作使用。系统工作原理图如图3-1所示：

图3-1 系统工作原理图

3.2系统结构设计

整个系统是由多个功能模块组合而成的，要将所有的功能模块都一一列举出来，然后进行逐个的功能设计，使得每一个模块都有相对应的功能设计，然后进行系统整体的设计。

本线上教学平台结构图如图3-2所示。

图3-2 线上教学平台结构图

3.3 数据库设计

数据库可以说是所有软件的根本，如果数据库存在缺陷，那么会导致系统开发的不顺利、维护困难、学员使用不顺畅等一系列问题，严重时将会直接损害学员的利益，同时在开发完成后，数据库缺陷也更加难以解决。所以必须要对数据库设计重点把握，做到认真细致。因此，数据库设计是这个线上教学平台的重点要素。

3.3.1概念结构设计

(1)管理员实体属性图如下图3-3所示

图3-3管理员实体属性图

(2)学习资料信息实体属性如下图3-4所示

图3-4学习资料信息实体属性图

(3)学员信息实体属性如下图3-5所示

图3-5学员信息实体属性图

(4)考试记录信息实体属性如下图3-6所示

图3-6考试记录信息实体属性图

(5)试题信息实体属性如下图3-7所示

图3-7试题信息实体属性图

3.3.2数据库表设计

将数据库概念设计的E-R图转换为关系数据库。在关系数据库中，数据关系由数据表组成，但是表的结构表现在表的字段上。

表名：token

功能：token表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
userid	bigint		用户id
username	varchar	100	用户名
tablename	varchar	100	表名
role	varchar	100	角色
token	varchar	200	密码
addtime	timestamp		新增时间		CURRENT_TIMESTAMP
expiratedtime	timestamp		过期时间		CURRENT_TIMESTAMP

表名：xuexiziliao

功能：学习资料

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
ziliaomingcheng	varchar	200	资料名称
ziliaoleixing	varchar	200	资料类型
tupian	varchar	200	图片
ziliaowenjian	varchar	200	资料文件
jiaoxueshipin	varchar	200	教学视频
ziliaoxiangqing	varchar	200	资料详情
fabushijian	varchar	200	发布时间

表名：xueyuan

功能：学员

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
xuehao	varchar	200	学号
mima	varchar	200	密码
xingming	varchar	200	姓名
xingbie	varchar	200	性别
touxiang	varchar	200	头像
youxiang	varchar	200	邮箱
shouji	datetime		时间

表名：ziliaoleixing

功能：资料类型

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
ziliaoleixing	varchar	200	资料类型

系统实现

4.1管理员功能模块

管理员登录，通过填写注册时输入的用户名、密码、角色进行登录，如图4-1所示。

图4-1管理员登录界面图 ######### 管理员登录进入线上教学平台可以查看首页、个人中心、学员管理、资料类型管理、学习资料管理、交流论坛、我的收藏管理、试卷管理、留言板管理、试题管理、

系统管理、考试管理等信息。

学员管理，在学员管理页面中可以通过填写学号、密码、姓名、性别、头像、邮箱、手机等内容进行详情、修改、删除，如图4-2所示。还可以根据需要对资料类型管理进行详情，修改或删除等详细操作，如图4-3所示。

图4-2学员管理界面图

图4-3资料类型管理界面图 ######### 学习资料管理，在学习资料管理页面中可以查看资料名称、资料类型、图片、资料文件、教学视频、发布时间等信息，并可根据需要对已有学习资料管理进行修改或删除等操作，如图4-4所示。

图4-4学习资料管理界面图 ######### 试卷管理，在试卷管理页面中可以查看试卷名称、考试时长、试卷状态等信息，并可根据需要对已有试卷管理进行修改或删除等详细操作，如图4-5所示。

图4-5试卷管理界面图 ######### 轮播图；该页面为轮播图管理界面。管理员可以在此页面进行首页轮播图的管理，通过新建操作可在轮播图中加入新的图片，还可以对以上传的图片进行修改操作，以及图片的删除操作，如图4-6所示。

图4-6轮播图管理界面图 ######### 试题管理，在试题管理页面中可以查看试卷、试题名称、分值、答案、类型等内容，并且根据需要对已有试题管理进行详情，修改或删除等详细操作，如图4-7所示。

图4-7试题管理界面图 ######### 考试记录，在考试记录页面中可以查看用户ID、试卷、试题名称、分值、正确答案、考生答案、考生分值等内容，并且根据需要对已有考试记录进行修改或删除等详细操作，如图4-8所示。

图4-8考试记录界面图 ######### 留言板管理，在留言板管理页面中可以查看用户名、留言内容、回复内容等内容，并且根据需要对已有留言板管理进行详情，修改或删除等详细操作，如图4-9所示。

图4-9留言板管理界面图 ######### 学习资料评论，在学习资料评论页面中可以查看评论内容、回复内容等内容，并且根据需要对已有学习资料评论进行详情，修改或删除等详细操作，如图4-10所示。

图4-10学习资料评论界面图

公告信息，在公告信息页面中可以查看标题、简介、图片等内容，并且根据需要对已有公告信息进行详情，修改或删除等详细操作，如图4-11所示。

图4-11公告信息界面图 ######### #########

######### ######### ######### ######### #########

ExamrecordServiceImpl.java

package com.service.impl;

import org.springframework.stereotype.Service;
import java.util.Map;
import java.util.List;

import com.baomidou.mybatisplus.mapper.Wrapper;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.utils.PageUtils;
import com.utils.Query;


import com.dao.ExamrecordDao;
import com.entity.ExamrecordEntity;
import com.service.ExamrecordService;
import com.entity.vo.ExamrecordVO;
import com.entity.view.ExamrecordView;

@Service("examrecordService")
public class ExamrecordServiceImpl extends ServiceImpl<ExamrecordDao, ExamrecordEntity> implements ExamrecordService {
	
	@Override
	public PageUtils queryPageGroupBy(Map<String, Object> params, Wrapper<ExamrecordEntity> wrapper) {
		Page<ExamrecordView> page =new Query<ExamrecordView>(params).getPage();
        page.setRecords(baseMapper.selectGroupBy(page,wrapper));
    	PageUtils pageUtil = new PageUtils(page);
    	return pageUtil;
	}
	
    @Override
    public PageUtils queryPage(Map<String, Object> params) {
        Page<ExamrecordEntity> page = this.selectPage(
                new Query<ExamrecordEntity>(params).getPage(),
                new EntityWrapper<ExamrecordEntity>()
        );
        return new PageUtils(page);
    }
    
    @Override
	public PageUtils queryPage(Map<String, Object> params, Wrapper<ExamrecordEntity> wrapper) {
		  Page<ExamrecordView> page =new Query<ExamrecordView>(params).getPage();
	        page.setRecords(baseMapper.selectListView(page,wrapper));
	    	PageUtils pageUtil = new PageUtils(page);
	    	return pageUtil;
 	}
    
    @Override
	public List<ExamrecordVO> selectListVO(Wrapper<ExamrecordEntity> wrapper) {
 		return baseMapper.selectListVO(wrapper);
	}
	
	@Override
	public ExamrecordVO selectVO(Wrapper<ExamrecordEntity> wrapper) {
 		return baseMapper.selectVO(wrapper);
	}
	
	@Override
	public List<ExamrecordView> selectListView(Wrapper<ExamrecordEntity> wrapper) {
		return baseMapper.selectListView(wrapper);
	}

	@Override
	public ExamrecordView selectView(Wrapper<ExamrecordEntity> wrapper) {
		return baseMapper.selectView(wrapper);
	}

}

ExamquestionServiceImpl.java

package com.service.impl;

import org.springframework.stereotype.Service;
import java.util.Map;
import java.util.List;

import com.baomidou.mybatisplus.mapper.Wrapper;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.utils.PageUtils;
import com.utils.Query;


import com.dao.ExamquestionDao;
import com.entity.ExamquestionEntity;
import com.service.ExamquestionService;
import com.entity.vo.ExamquestionVO;
import com.entity.view.ExamquestionView;

@Service("examquestionService")
public class ExamquestionServiceImpl extends ServiceImpl<ExamquestionDao, ExamquestionEntity> implements ExamquestionService {
	
	
    @Override
    public PageUtils queryPage(Map<String, Object> params) {
        Page<ExamquestionEntity> page = this.selectPage(
                new Query<ExamquestionEntity>(params).getPage(),
                new EntityWrapper<ExamquestionEntity>()
        );
        return new PageUtils(page);
    }
    
    @Override
	public PageUtils queryPage(Map<String, Object> params, Wrapper<ExamquestionEntity> wrapper) {
		  Page<ExamquestionView> page =new Query<ExamquestionView>(params).getPage();
	        page.setRecords(baseMapper.selectListView(page,wrapper));
	    	PageUtils pageUtil = new PageUtils(page);
	    	return pageUtil;
 	}
    
    @Override
	public List<ExamquestionVO> selectListVO(Wrapper<ExamquestionEntity> wrapper) {
 		return baseMapper.selectListVO(wrapper);
	}
	
	@Override
	public ExamquestionVO selectVO(Wrapper<ExamquestionEntity> wrapper) {
 		return baseMapper.selectVO(wrapper);
	}
	
	@Override
	public List<ExamquestionView> selectListView(Wrapper<ExamquestionEntity> wrapper) {
		return baseMapper.selectListView(wrapper);
	}

	@Override
	public ExamquestionView selectView(Wrapper<ExamquestionEntity> wrapper) {
		return baseMapper.selectView(wrapper);
	}

}

InterceptorConfig.java

package com.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;

import com.interceptor.AuthorizationInterceptor;

@Configuration
public class InterceptorConfig extends WebMvcConfigurationSupport{
	
	@Bean
    public AuthorizationInterceptor getAuthorizationInterceptor() {
        return new AuthorizationInterceptor();
    }
	
	@Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(getAuthorizationInterceptor()).addPathPatterns("/**").excludePathPatterns("/static/**");
        super.addInterceptors(registry);
	}
	
	/**
	 * springboot 2.0配置WebMvcConfigurationSupport之后，会导致默认配置被覆盖，要访问静态资源需要重写addResourceHandlers方法
	 */
	@Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
		registry.addResourceHandler("/**")
        .addResourceLocations("classpath:/resources/")
        .addResourceLocations("classpath:/static/")
        .addResourceLocations("classpath:/admin/")
        .addResourceLocations("classpath:/front/")
        .addResourceLocations("classpath:/public/");
		super.addResourceHandlers(registry);
    }
}

HomeComment.vue

<template>
  <div class="home-comment">
    <div class="title">用户留言</div>
    <div class="comment-list">
      <div v-for="(item,index) in list"  v-bind:key="index" class="comment-item">
        <div class="user-content">
          <el-image
            class="avator"
            :src="item.avator"
          ></el-image>
          <span class="user">{{item.name}}</span>
        </div>
        <div class="comment">{{item.content}}</div>
        <div class="create-time">{{item.createTime}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          name: "MaskLin",
          avator:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          content:
            "你以为只要长得漂亮就有男生喜欢？你以为只要有了钱漂亮妹子就自己贴上来了？你以为学霸就能找到好工作？我告诉你吧，这些都是真的！",
          createTime: "5月02日 00:00"
        },
        {
          name: "MaskLin",
          avator:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          content: "作者太帅了",
          createTime: "5月04日 00:00"
        },
        {
          name: "MaskLin",
          avator:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          content: "作者太帅了",
          createTime: "5月04日 00:00"
        },
        {
          name: "MaskLin",
          avator: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          content: "作者太帅了",
          createTime: "5月04日 00:00"
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
.home-comment {
  background: #ffffff;
  .title {
    font-size: 18px;
    color: #666;
    font-weight: bold;
    padding: 10px;
    border-bottom: 1px solid #eeeeee;
  }
  .comment-list {
    padding: 10px;
    .comment-item {
      padding: 10px;
      border-bottom: 1px solid #eeeeee;
      .user-content {
        display: flex;
        align-items: center;
        .user {
          font-size: 18px;
          color: #666;
          font-weight: bold;
          line-height: 50px;
          margin-left: 10px;
        }
        .avator {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
      }
      .comment {
        margin-top: 10px;
        font-size: 14px;
        color: #888888;
      }
      .create-time {
        margin-top: 15px;
        font-size: 14px;
        color: #888888;
      }
    }
  }
}
</style>