SpringBoot+Vue项目线上教学平台
文末获取源码
开发语言:Java
开发工具:IDEA /Eclipse
数据库:MYSQL5.7
使用框架:springboot+vue
JDK版本:jdk1.8
前言介绍
本系统地描绘了整个网上线上教学平台的设计与实现,主要实现的功能有以下几点:管理员;首页、个人中心、学员管理、资料类型管理、学习资料管理、交流论坛、我的收藏管理、试卷管理、留言板管理、试题管理、系统管理、考试管理,学员;首页、个人中心、我的收藏管理、留言板管理、考试管理,前台首页;首页、学习资料、交流论坛、试卷列表、留言反馈、个人中心、后台管理等功能,其具有简单的接口,方便的应用,强大的互动,完全基于互联网的特点。
系统设计
线上教学平台结构图
数据库设计
数据库可以说是所有软件的根本,如果数据库存在缺陷,那么会导致系统开发的不顺利、维护困难、学员使用不顺畅等一系列问题,严重时将会直接损害学员的利益,同时在开发完成后,数据库缺陷也更加难以解决。所以必须要对数据库设计重点把握,做到认真细致。因此,数据库设计是这个线上教学平台的重点要素。
管理员实体属性图如下图
学习资料信息实体属性如下图
学员信息实体属性如下图
考试记录信息实体属性如下图
试题信息实体属性如下图
数据库表设计
将数据库概念设计的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 |
资料类型 |
系统实现
前台首页功能模块
学员登录、学员注册,通过填写学号、密码、姓名、邮箱、手机等信息进行注册,登录,如图
学员登录界面图
线上教学平台,通过系统可以获取首页、学习资料、交流论坛、试卷列表、公告信息、留言反馈、个人中心、后台管理等信息操作内容,如图
学习资料,通过内容列表可以获取资料名称、资料类型、图片、资料文件、教学视频、发布时间等信息可进行点我收藏操作,如图
交流论坛,通过内容列表可以获取标题、类型、内容等信息进行发布帖子操作,如图
试卷列表,通过内容列表可以获取试卷名称、考试时长、创建时间等信息进行考试操作,如图
我的发布,通过内容列表可以获取标题、发布时间等信息进行修改、删除操作,如图
管理员功能模块
管理员登录,通过填写注册时输入的用户名、密码、角色进行登录,如图
管理员登录进入线上教学平台可以查看首页、个人中心、学员管理、资料类型管理、学习资料管理、交流论坛、我的收藏管理、试卷管理、留言板管理、试题管理、
系统管理、考试管理等信息。
学员管理,在学员管理页面中可以通过填写学号、密码、姓名、性别、头像、邮箱、手机等内容进行详情、修改、删除,如图
还可以根据需要对资料类型管理进行详情,修改或删除等详细操作,如图
学习资料管理,在学习资料管理页面中可以查看资料名称、资料类型、图片、资料文件、教学视频、发布时间等信息,并可根据需要对已有学习资料管理进行修改或删除等操作,如图
试卷管理,在试卷管理页面中可以查看试卷名称、考试时长、试卷状态等信息,并可根据需要对已有试卷管理进行修改或删除等详细操作,如图
试题管理,在试题管理页面中可以查看试卷、试题名称、分值、答案、类型等内容,并且根据需要对已有试题管理进行详情,修改或删除等详细操作,如图
考试记录,在考试记录页面中可以查看用户ID、试卷、试题名称、分值、正确答案、考生答案、考生分值等内容,并且根据需要对已有考试记录进行修改或删除等详细操作,如图
留言板管理,在留言板管理页面中可以查看用户名、留言内容、回复内容等内容,并且根据需要对已有留言板管理进行详情,修改或删除等详细操作,如图
公告信息,在公告信息页面中可以查看标题、简介、图片等内容,并且根据需要对已有公告信息进行详情,修改或删除等详细操作,如图
学员功能模块
学员点击进入到系统操作界面,可以对首页、个人中心、我的收藏管理、留言板管理、考试管理等功能模块,个人信息:通过列表可以获取学号、密码、姓名、性别、头像、邮箱、手机并进行修改操作,如图
修改密码:通过列表可以获取原密码、新密码、确认密码等信息,进行修改、删除等操作,如图
我的收藏管理:通过列表可以获取收藏名称、收藏图片等信息,进行修改、删除操作,如图
留言板管理:通过列表可以获取用户名、留言内容、回复内容等信息,进行详情、删除操作,如图
错题本:通过列表可以获取用户ID、试卷、试题名称、分值、正确答案、考生答案、试题分析、考试时间等信息,进行详情、删除操作,如图
考试记录:通过列表可以获取用户ID、试卷、考试得分等信息,进行详情、删除操作,如图
部分核心代码:
# Tomcat
server:tomcat:uri-encoding: UTF-8port: 8080servlet:context-path: /springboota53y0spring:datasource:driverClassName: com.mysql.jdbc.Driverurl: jdbc:mysql://127.0.0.1:3306/springboota53y0?useUnicode=true&characterEncoding=utf-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTCusername: rootpassword: 123456servlet:multipart:max-file-size: 10MBmax-request-size: 10MBresources:static-locations: classpath:static/,file:static/#mybatis
mybatis-plus:mapper-locations: classpath*:mapper/*.xml#实体扫描,多个package用逗号或者分号分隔typeAliasesPackage: com.entityglobal-config:#主键类型 0:"数据库ID自增", 1:"用户输入ID",2:"全局唯一ID (数字类型唯一ID)", 3:"全局唯一ID UUID";id-type: 1#字段策略 0:"忽略判断",1:"非 NULL 判断"),2:"非空判断"field-strategy: 2#驼峰下划线转换db-column-underline: true#刷新mapper 调试神器refresh-mapper: true#逻辑删除配置logic-delete-value: -1logic-not-delete-value: 0#自定义SQL注入器sql-injector: com.baomidou.mybatisplus.mapper.LogicSqlInjectorconfiguration:map-underscore-to-camel-case: truecache-enabled: falsecall-setters-on-nulls: true#springboot 项目mybatis plus 设置 jdbcTypeForNull (oracle数据库需配置JdbcType.NULL, 默认是Other)jdbc-type-for-null: 'null'
控制层(controller)
/*** 学员* 后端接口* @author * @email * @date 2021-02-26 22:02:58*/
@RestController
@RequestMapping("/xueyuan")
public class XueyuanController {@Autowiredprivate XueyuanService xueyuanService;@Autowiredprivate TokenService tokenService;/*** 登录*/@IgnoreAuth@RequestMapping(value = "/login")public R login(String username, String password, String captcha, HttpServletRequest request) {XueyuanEntity user = xueyuanService.selectOne(new EntityWrapper<XueyuanEntity>().eq("xuehao", username));if(user==null || !user.getMima().equals(password)) {return R.error("账号或密码不正确");}String token = tokenService.generateToken(user.getId(), username,"xueyuan", "学员" );return R.ok().put("token", token);}/*** 注册*/@IgnoreAuth@RequestMapping("/register")public R register(@RequestBody XueyuanEntity xueyuan){//ValidatorUtils.validateEntity(xueyuan);XueyuanEntity user = xueyuanService.selectOne(new EntityWrapper<XueyuanEntity>().eq("xuehao", xueyuan.getXuehao()));if(user!=null) {return R.error("注册用户已存在");}Long uId = new Date().getTime();xueyuan.setId(uId);xueyuanService.insert(xueyuan);return R.ok();}/*** 退出*/@RequestMapping("/logout")public R logout(HttpServletRequest request) {request.getSession().invalidate();return R.ok("退出成功");}/*** 获取用户的session用户信息*/@RequestMapping("/session")public R getCurrUser(HttpServletRequest request){Long id = (Long)request.getSession().getAttribute("userId");XueyuanEntity user = xueyuanService.selectById(id);return R.ok().put("data", user);}/*** 密码重置*/@IgnoreAuth@RequestMapping(value = "/resetPass")public R resetPass(String username, HttpServletRequest request){XueyuanEntity user = xueyuanService.selectOne(new EntityWrapper<XueyuanEntity>().eq("xuehao", username));if(user==null) {return R.error("账号不存在");}user.setMima("123456");xueyuanService.updateById(user);return R.ok("密码已重置为:123456");}/*** 后端列表*/@RequestMapping("/page")public R page(@RequestParam Map<String, Object> params,XueyuanEntity xueyuan, HttpServletRequest request){EntityWrapper<XueyuanEntity> ew = new EntityWrapper<XueyuanEntity>();PageUtils page = xueyuanService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, xueyuan), params), params));return R.ok().put("data", page);}/*** 前端列表*/@RequestMapping("/list")public R list(@RequestParam Map<String, Object> params,XueyuanEntity xueyuan, HttpServletRequest request){EntityWrapper<XueyuanEntity> ew = new EntityWrapper<XueyuanEntity>();PageUtils page = xueyuanService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, xueyuan), params), params));return R.ok().put("data", page);}/*** 列表*/@RequestMapping("/lists")public R list( XueyuanEntity xueyuan){EntityWrapper<XueyuanEntity> ew = new EntityWrapper<XueyuanEntity>();ew.allEq(MPUtil.allEQMapPre( xueyuan, "xueyuan")); return R.ok().put("data", xueyuanService.selectListView(ew));}/*** 查询*/@RequestMapping("/query")public R query(XueyuanEntity xueyuan){EntityWrapper< XueyuanEntity> ew = new EntityWrapper< XueyuanEntity>();ew.allEq(MPUtil.allEQMapPre( xueyuan, "xueyuan")); XueyuanView xueyuanView = xueyuanService.selectView(ew);return R.ok("查询学员成功").put("data", xueyuanView);}/*** 后端详情*/@RequestMapping("/info/{id}")public R info(@PathVariable("id") Long id){XueyuanEntity xueyuan = xueyuanService.selectById(id);return R.ok().put("data", xueyuan);}/*** 前端详情*/@RequestMapping("/detail/{id}")public R detail(@PathVariable("id") Long id){XueyuanEntity xueyuan = xueyuanService.selectById(id);return R.ok().put("data", xueyuan);}/*** 后端保存*/@RequestMapping("/save")public R save(@RequestBody XueyuanEntity xueyuan, HttpServletRequest request){xueyuan.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());//ValidatorUtils.validateEntity(xueyuan);XueyuanEntity user = xueyuanService.selectOne(new EntityWrapper<XueyuanEntity>().eq("xuehao", xueyuan.getXuehao()));if(user!=null) {return R.error("用户已存在");}xueyuan.setId(new Date().getTime());xueyuanService.insert(xueyuan);return R.ok();}/*** 前端保存*/@RequestMapping("/add")public R add(@RequestBody XueyuanEntity xueyuan, HttpServletRequest request){xueyuan.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());//ValidatorUtils.validateEntity(xueyuan);XueyuanEntity user = xueyuanService.selectOne(new EntityWrapper<XueyuanEntity>().eq("xuehao", xueyuan.getXuehao()));if(user!=null) {return R.error("用户已存在");}xueyuan.setId(new Date().getTime());xueyuanService.insert(xueyuan);return R.ok();}/*** 修改*/@RequestMapping("/update")public R update(@RequestBody XueyuanEntity xueyuan, HttpServletRequest request){//ValidatorUtils.validateEntity(xueyuan);xueyuanService.updateById(xueyuan);//全部更新return R.ok();}/*** 删除*/@RequestMapping("/delete")public R delete(@RequestBody Long[] ids){xueyuanService.deleteBatchIds(Arrays.asList(ids));return R.ok();}/*** 提醒接口*/@RequestMapping("/remind/{columnName}/{type}")public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request, @PathVariable("type") String type,@RequestParam Map<String, Object> map) {map.put("column", columnName);map.put("type", type);if(type.equals("2")) {SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");Calendar c = Calendar.getInstance();Date remindStartDate = null;Date remindEndDate = null;if(map.get("remindstart")!=null) {Integer remindStart = Integer.parseInt(map.get("remindstart").toString());c.setTime(new Date()); c.add(Calendar.DAY_OF_MONTH,remindStart);remindStartDate = c.getTime();map.put("remindstart", sdf.format(remindStartDate));}if(map.get("remindend")!=null) {Integer remindEnd = Integer.parseInt(map.get("remindend").toString());c.setTime(new Date());c.add(Calendar.DAY_OF_MONTH,remindEnd);remindEndDate = c.getTime();map.put("remindend", sdf.format(remindEndDate));}}Wrapper<XueyuanEntity> wrapper = new EntityWrapper<XueyuanEntity>();if(map.get("remindstart")!=null) {wrapper.ge(columnName, map.get("remindstart"));}if(map.get("remindend")!=null) {wrapper.le(columnName, map.get("remindend"));}int count = xueyuanService.selectCount(wrapper);return R.ok().put("count", count);}}
文件上传功能
/*** 上传文件映射表*/
@RestController
@RequestMapping("file")
@SuppressWarnings({"unchecked","rawtypes"})
public class FileController{@Autowiredprivate ConfigService configService;/*** 上传文件*/@RequestMapping("/upload")public R upload(@RequestParam("file") MultipartFile file, String type,HttpServletRequest request) throws Exception {if (file.isEmpty()) {throw new EIException("上传文件不能为空");}String fileExt = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1);String fileName = new Date().getTime()+"."+fileExt;File dest = new File(request.getSession().getServletContext().getRealPath("/upload")+"/"+fileName);file.transferTo(dest);if(StringUtils.isNotBlank(type) && type.equals("1")) {ConfigEntity configEntity = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "faceFile"));if(configEntity==null) {configEntity = new ConfigEntity();configEntity.setName("faceFile");configEntity.setValue(fileName);} else {configEntity.setValue(fileName);}configService.insertOrUpdate(configEntity);}return R.ok().put("file", fileName);}/*** 下载文件*/@IgnoreAuth@RequestMapping("/download")public void download(@RequestParam String fileName, HttpServletRequest request, HttpServletResponse response) {try {File file = new File(request.getSession().getServletContext().getRealPath("/upload")+"/"+fileName);if (file.exists()) {response.reset();response.setHeader("Content-Disposition", "attachment; filename=\"" + fileName+"\"");response.setHeader("Cache-Control", "no-cache");response.setHeader("Access-Control-Allow-Credentials", "true");response.setContentType("application/octet-stream; charset=UTF-8");IOUtils.write(FileUtils.readFileToByteArray(file), response.getOutputStream());}} catch (IOException e) {e.printStackTrace();}}}
SpringBoot+Vue项目线上教学平台相关推荐
- 基于springboot+vue+Java线上教学平台( 源码+文档)
文章目录 开发环境: 后端: 前端: 数据库: 系统架构: 主要功能: 管理员功能模块 **前台首页功能模块** 学员功能模块 开发环境: 后端: 开发语言:Java 框架:springboot JD ...
- 基于SpringBoot+vue的线上教学平台设计与实现
博主介绍: 大家好,我是一名在Java圈混迹十余年的程序员,精通Java编程语言,同时也熟练掌握微信小程序.Python和Android等技术,能够为大家提供全方位的技术支持和交流. 我擅长在Java ...
- Java毕设项目线上教学平台(java+VUE+Mybatis+Maven+Mysql)
Java毕设项目线上教学平台(java+VUE+Mybatis+Maven+Mysql) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webst ...
- 基于SpringBoot+VUE的线上教学管理平台系统
项目背景 在社会快速发展的影响下,使线上教学平台的管理和运营比过去十年更加理性化.依照这一现实为基础,设计一个快捷而又方便的网上线上教学平台系统是一项十分重要并且有价值的事情.对于传统的线上教学平台控 ...
- 基于springboot实现学校线上教学平台管理系统【源码+论文】
开发语言:Java 框架:springboot JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/myeclips ...
- 基于springboot实现学校线上教学平台管理系统【源码+论文】分享
开发语言:Java 框架:springboot JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/myeclips ...
- SpringBoot+Vue项目大学生网络教学平台的设计与实现
文末获取源码 开发语言:Java 使用框架:spring boot 前端技术:JavaScript.Vue .css3 开发工具:IDEA/MyEclipse/Eclipse.Visual Studi ...
- SpringBoot+Vue项目线上买菜系统
文末获取源码 开发语言:Java 框架:springboot JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclip ...
- springboot+vue线上教学平台(源码+文档)
风定落花生,歌声逐流水,大家好我是风歌,混迹在java圈的辛苦码农.今天要和大家聊的是一款基于springboot的线上教学平台.项目源码请联系风歌,文末附上联系信息 . 目前有各类成品java毕设, ...
最新文章
- 机器学习入门必读:6种简单实用算法及学习曲线、思维导图
- 二维数组,锯齿数组和集合 C# 一维数组、二维数组(矩形数组)、交错数组(锯齿数组)的使用 C# 数组、多维数组(矩形数组)、锯齿数组(交叉数组)...
- 新华三的背景_新华三集团与飞友科技签署战略合作协议,共赢智慧机场新时代...
- 自制操作系统学习笔记(3)-INT 0x10软中断显示字符串
- BackTrack5 安装中文输入法
- ie 访问 java接口_Java基础面试题 库(1~10)
- 让 .Net 更方便的导入导出 Excel
- 浏览器对同一IP的最大并发请求数记录
- layui tab html,layui竖版tab选项卡
- linux 性能检测工具之 dstat
- python direct_Python-RabbitMQ-direct(广播模式)
- 187.重复的DNA序列
- Principle 5.14 完美汉化版 Mac平台交互动效设计神器
- oracle数据库一个汉字占几个字节
- gst-launch-1.0用法小记
- HTTP请求415错误 – 不支持的媒体类型(Unsupported media type)
- 在Windows系统下,手把手教你制作属于自己的星际译王词典
- 酒浓码浓 - HTML5微数据/itemscope/itemtype/itemprop
- webdriver中的等待——主要讲解WebDriverWait()
- 58同城自动登录功能 分享给大家!
热门文章
- Process terminated以及出现Dependency not found的情况
- Kaggle实战:电子游戏销量分析(Vedio Game Sales)
- mysql数据存储过程添加数据_Mysql 存储过程 自动插入数据
- Ubuntu各个版本下载
- 【已解决】win10远程桌面连接报错:出现身份验证错误,要求的函数不受支持(CredSSP)
- 基于金字塔的模板匹配算法(python)
- python uniform 函数
- 蓝牙常用的profile
- 2021Java进阶学习资料!熬夜整理小米Java面试题
- 《华为数据之道》-第7章 打造“数字孪生”的数据全量感知能力