当前位置:   article > 正文

在线教育系统|线上教学系统|基于Springboot+Vue+Nodejs实现在线教学平台系统_node vue springboot

node vue springboot

作者主页:编程指南针

作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师

主要内容:Java项目、Python项目、前端项目、人工智能与大数据、毕业设计、简历模板、学习资料、面试题库、技术互助

收藏点赞不迷路  关注作者有好处

文末获取源码 

前言:

毕业设计作为大学几年学习后最终成果的展示,占有很大的份量,也是非常重要的一个里程碑!但是很多人志不在此专业,或别有所求,大量的人群进入考公、考研的大军中备战,如此一来,准备毕设计和论文的时间少之又少。而近年来导师对毕业设计的要求可以说是越来越高,很多超出了企业开发的一般难度,令大多数学子望而却步,踌躇不前!本专栏提供了为客户开发的BS作品展示以便为你提供一个参考的思路,或者有需要的话也可以为你提供更多的一系列服务,相关项目开发、LW文档撰写、项目讲解、远程调试等可供你选择!

项目编号:BS-GX-060

目录

一,环境介绍

二,项目简介

2.1  开发背景

2.2 需求分析

        2.3 功能介绍

三,系统展示

四,核心代码展示

五,相关作品展示


一,环境介绍

语言环境:Java:  jdk1.8

数据库:Mysql: mysql5.7

应用服务器:Tomcat:  tomcat8.5.31

开发工具:IDEA或eclipse

后台开发:springiboot+mybatis

前端开发:vue+elementUI

二,项目简介

2.1  开发背景

随着计算机应用技术的快速发展,计算机应用技术也逐渐深入到教育领域,给我们带来了教育观念、教育模式、教学方法的变革,尤其在疫情的特殊时期开展的网络教学模式,减少了师生之间面对面的交流机会,因此教师无法及时解答学生学习中遇到的问题,而且教师每年面对的学生都是不同的,很多问题都是重复性的,上一届学生提出的问题极大可能出现在下一届学生上。而网络上的信息杂而多,不能针对性地解决学生的问题,本课题通过建立《计算机网络》课程知识库,将老师常年的教学过程中产生的问题及解决方法记录在系统中,学生通过问题关键字进行检索来获取解决方法。这样教师不需要年复一年地回答学生重复提出的问题,极大地减轻了教师的工作量,学生也可以随时随地获得问题解决方法,提高学生学习的积极性。

《计算机网络》课程教学系统使用springboot框架和Vue框架开发,springboot框架简单,简化了配置,减少了开发周期,能有更多的时间进行优化,同时springboot提供maven的极简配置,以及可视化的相关监控功能,比如性能监控,应用的健康程度等;在前端Vue框架上,Vue的使用使网站更加简约好看,性能大大提升,使网站运行更加流畅。

2.2 需求分析

根据市场调研和用户走访,并进行整理分析,得知本次设计实现的<<计算机网络>>课程教学网站用户一共有三类,一是学生用户,一类是教师用户,还有一类是平台提供的用于管理系统基本信息的管理员账户。这三类用户的角色和操作功能权限各不不同,下面通过用例图的方式来进行展示。

学生用户的用例图如下图1所示。

 

学生用户用例描述:学生用户注册登陆后,主要可以实现在线浏览公告信息、浏览自己的课程信息、章节信息、在线学习课程、查看新闻资讯、博客文章,并可以在个人中心中管理自己的个人信息和收藏信息,同时在个人后台管理处可以发布博客,管理自己的提问和老师的解答信息等。

教师用户的操作用例图如下图2所示。

教师用户用例图描述:教师登陆<<计算机网络>>课程教学网站,主要的职责是对自己的课程信息进行相关的管理操作,主要包含课程管理、章节管理、提问管理、解答管理、课程资源管理等。

管理员用户的用例图如下图3所示。

 

管理员用户用例图描述:管理员登陆<<计算机网络>>课程教学网站,主要的操作功能包含用户管理、管理员管理、课程管理、课程章节管理、课程资源管理、博客文章管理、新闻资讯管理、轮播图管理等。

2.3 功能介绍

 在对整个<<计算机网络>>课程教学网站做了充分的需求分析和架构设计之后,最终确定了本次开发设计的<<计算机网络>>课程教学网站要实现的功能目标,具体展示如下图5所示。

对于本课题要实现的功能,下面进行一下相应的介绍。

学生用户的功能描述:

(1)注册登陆:<<计算机网络>>课程教学网站的前端如果以游客身份进入平台,主要可以进行信息的浏览操作,其它的在线学习、在线问答等模块是无权限操作的。只有注册为会员用户,并根据注册时指定的账户登陆平台,才可以获得平台的授权来进行相关操作。

(2)课程浏览:点击课程连接即可进入在线课程详情展示页,并可以收藏课程和对课程进行评论。

(3)在线学习:用户在课程章节详情页可以查看章节内容信息,并在线观看学习课程视频,同时可以下载课程相关的资源文件。

(4)新闻浏览:平台可以根据需要发布一些新闻或系统公告,来让用户浏览了解。

(5)博客浏览:用户可以在线发布学习的笔记等博客信息,供别人浏览。

(6)个人中心:在个人中心处主要完成对个人基本信息管理,以及自己收藏信息管理。

(7)在线问答:用户可以在课程中在线进行提问问题,课程所属老师看到后会进行解答,用户可以看到老师给出的解答内容。

教师用户的功能描述:

   (1)个人中心:管理个人信息和登陆的密码。

   (2)课程管理:教师可以发布属于自己的课程信息,并进行管理。

   (3)章节管理:每个课程可以添加若干章节,并在章节中添加课程资源和对应讲解的视频。

   (4)课程资源管理:老师可以对上传的课程资源信息进行管理操作。

   (5)问题管理:主要可以查看前端用户对自己发布的课程提出的问题,并对问题进行解答,答案用户可以在前端查看。

   (6)解答管理:可以对自己回答的答案进行信息的修改和删除操作。

后台管理员的操作功能描述如下:

    (1)用户管理:主要实现对在<<计算机网络>>课程教学网站注册的学生信息、教师信息和平台管理员的管理操作。

(2)文章分类管理:主要完成对系统博客分类信息的管理操作,方便用户分类进行博客信息的查看。

    (3)课程管理:管理可以管理所有老师发布的课程信息。

   (3)章节管理:管理员可以管理所有老师发布的课程章节信息,每个课程可以添加若干章节,并在章节中添加课程资源和对应讲解的视频。

   (4)课程资源管理:管理员可以对所有老师上传的课程资源信息进行管理操作。

   (5)问题管理:主要可以查看所有前端用户对课程提出的问题,并对问题进行解答,答案用户可以在前端查看。

   (6)解答管理:可以对所有老师回答的答案进行信息的修改和删除操作。

   (7)轮播图管理:管理前端展示的轮播图片。

   (8)新闻管理:管理员可以发布相关的新闻和公告信息供前端用户查看。

 

三,系统展示

用户登录

 用户注册

 课程浏览

 课程详情

新闻浏览

 

课程资源

 

 个人中心后台管理

管理员后台管理

用户管理

 

博客分类管理

 

博客管理

 课程管理

 轮播图管理

 新闻管理

课程章节管理

 

 课程资源管理

问答管理

 

四,核心代码展示

  1. package com.controller;
  2. import java.text.SimpleDateFormat;
  3. import java.util.ArrayList;
  4. import java.util.Arrays;
  5. import java.util.Calendar;
  6. import java.util.Map;
  7. import java.util.HashMap;
  8. import java.util.Iterator;
  9. import java.util.Date;
  10. import java.util.List;
  11. import javax.servlet.http.HttpServletRequest;
  12. import com.utils.ValidatorUtils;
  13. import org.apache.commons.lang3.StringUtils;
  14. import org.springframework.beans.factory.annotation.Autowired;
  15. import org.springframework.transaction.annotation.Transactional;
  16. import org.springframework.format.annotation.DateTimeFormat;
  17. import org.springframework.web.bind.annotation.PathVariable;
  18. import org.springframework.web.bind.annotation.RequestBody;
  19. import org.springframework.web.bind.annotation.RequestMapping;
  20. import org.springframework.web.bind.annotation.RequestParam;
  21. import org.springframework.web.bind.annotation.RestController;
  22. import com.baomidou.mybatisplus.mapper.EntityWrapper;
  23. import com.baomidou.mybatisplus.mapper.Wrapper;
  24. import com.annotation.IgnoreAuth;
  25. import com.entity.KechengziyuanEntity;
  26. import com.entity.view.KechengziyuanView;
  27. import com.service.KechengziyuanService;
  28. import com.service.TokenService;
  29. import com.utils.PageUtils;
  30. import com.utils.R;
  31. import com.utils.MD5Util;
  32. import com.utils.MPUtil;
  33. import com.utils.CommonUtil;
  34. import java.io.IOException;
  35. import com.service.StoreupService;
  36. import com.entity.StoreupEntity;
  37. /**
  38. * 课程资源
  39. * 后端接口
  40. * @author
  41. * @email
  42. * @date 2022-07-23 18:58:54
  43. */
  44. @RestController
  45. @RequestMapping("/kechengziyuan")
  46. public class KechengziyuanController {
  47. @Autowired
  48. private KechengziyuanService kechengziyuanService;
  49. @Autowired
  50. private StoreupService storeupService;
  51. /**
  52. * 后端列表
  53. */
  54. @RequestMapping("/page")
  55. public R page(@RequestParam Map<String, Object> params,KechengziyuanEntity kechengziyuan,
  56. HttpServletRequest request){
  57. String tableName = request.getSession().getAttribute("tableName").toString();
  58. if(tableName.equals("jiaoshi")) {
  59. kechengziyuan.setJiaoshigonghao((String)request.getSession().getAttribute("username"));
  60. }
  61. EntityWrapper<KechengziyuanEntity> ew = new EntityWrapper<KechengziyuanEntity>();
  62. PageUtils page = kechengziyuanService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, kechengziyuan), params), params));
  63. return R.ok().put("data", page);
  64. }
  65. /**
  66. * 前端列表
  67. */
  68. @IgnoreAuth
  69. @RequestMapping("/list")
  70. public R list(@RequestParam Map<String, Object> params,KechengziyuanEntity kechengziyuan,
  71. HttpServletRequest request){
  72. EntityWrapper<KechengziyuanEntity> ew = new EntityWrapper<KechengziyuanEntity>();
  73. PageUtils page = kechengziyuanService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, kechengziyuan), params), params));
  74. return R.ok().put("data", page);
  75. }
  76. /**
  77. * 列表
  78. */
  79. @RequestMapping("/lists")
  80. public R list( KechengziyuanEntity kechengziyuan){
  81. EntityWrapper<KechengziyuanEntity> ew = new EntityWrapper<KechengziyuanEntity>();
  82. ew.allEq(MPUtil.allEQMapPre( kechengziyuan, "kechengziyuan"));
  83. return R.ok().put("data", kechengziyuanService.selectListView(ew));
  84. }
  85. /**
  86. * 查询
  87. */
  88. @RequestMapping("/query")
  89. public R query(KechengziyuanEntity kechengziyuan){
  90. EntityWrapper< KechengziyuanEntity> ew = new EntityWrapper< KechengziyuanEntity>();
  91. ew.allEq(MPUtil.allEQMapPre( kechengziyuan, "kechengziyuan"));
  92. KechengziyuanView kechengziyuanView = kechengziyuanService.selectView(ew);
  93. return R.ok("查询课程资源成功").put("data", kechengziyuanView);
  94. }
  95. /**
  96. * 后端详情
  97. */
  98. @RequestMapping("/info/{id}")
  99. public R info(@PathVariable("id") Long id){
  100. KechengziyuanEntity kechengziyuan = kechengziyuanService.selectById(id);
  101. return R.ok().put("data", kechengziyuan);
  102. }
  103. /**
  104. * 前端详情
  105. */
  106. @IgnoreAuth
  107. @RequestMapping("/detail/{id}")
  108. public R detail(@PathVariable("id") Long id){
  109. KechengziyuanEntity kechengziyuan = kechengziyuanService.selectById(id);
  110. return R.ok().put("data", kechengziyuan);
  111. }
  112. /**
  113. * 后端保存
  114. */
  115. @RequestMapping("/save")
  116. public R save(@RequestBody KechengziyuanEntity kechengziyuan, HttpServletRequest request){
  117. kechengziyuan.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
  118. //ValidatorUtils.validateEntity(kechengziyuan);
  119. kechengziyuanService.insert(kechengziyuan);
  120. return R.ok();
  121. }
  122. /**
  123. * 前端保存
  124. */
  125. @RequestMapping("/add")
  126. public R add(@RequestBody KechengziyuanEntity kechengziyuan, HttpServletRequest request){
  127. kechengziyuan.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
  128. //ValidatorUtils.validateEntity(kechengziyuan);
  129. kechengziyuanService.insert(kechengziyuan);
  130. return R.ok();
  131. }
  132. /**
  133. * 修改
  134. */
  135. @RequestMapping("/update")
  136. @Transactional
  137. public R update(@RequestBody KechengziyuanEntity kechengziyuan, HttpServletRequest request){
  138. //ValidatorUtils.validateEntity(kechengziyuan);
  139. kechengziyuanService.updateById(kechengziyuan);//全部更新
  140. return R.ok();
  141. }
  142. /**
  143. * 删除
  144. */
  145. @RequestMapping("/delete")
  146. public R delete(@RequestBody Long[] ids){
  147. kechengziyuanService.deleteBatchIds(Arrays.asList(ids));
  148. return R.ok();
  149. }
  150. /**
  151. * 提醒接口
  152. */
  153. @RequestMapping("/remind/{columnName}/{type}")
  154. public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request,
  155. @PathVariable("type") String type,@RequestParam Map<String, Object> map) {
  156. map.put("column", columnName);
  157. map.put("type", type);
  158. if(type.equals("2")) {
  159. SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
  160. Calendar c = Calendar.getInstance();
  161. Date remindStartDate = null;
  162. Date remindEndDate = null;
  163. if(map.get("remindstart")!=null) {
  164. Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
  165. c.setTime(new Date());
  166. c.add(Calendar.DAY_OF_MONTH,remindStart);
  167. remindStartDate = c.getTime();
  168. map.put("remindstart", sdf.format(remindStartDate));
  169. }
  170. if(map.get("remindend")!=null) {
  171. Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
  172. c.setTime(new Date());
  173. c.add(Calendar.DAY_OF_MONTH,remindEnd);
  174. remindEndDate = c.getTime();
  175. map.put("remindend", sdf.format(remindEndDate));
  176. }
  177. }
  178. Wrapper<KechengziyuanEntity> wrapper = new EntityWrapper<KechengziyuanEntity>();
  179. if(map.get("remindstart")!=null) {
  180. wrapper.ge(columnName, map.get("remindstart"));
  181. }
  182. if(map.get("remindend")!=null) {
  183. wrapper.le(columnName, map.get("remindend"));
  184. }
  185. String tableName = request.getSession().getAttribute("tableName").toString();
  186. if(tableName.equals("jiaoshi")) {
  187. wrapper.eq("jiaoshigonghao", (String)request.getSession().getAttribute("username"));
  188. }
  189. int count = kechengziyuanService.selectCount(wrapper);
  190. return R.ok().put("count", count);
  191. }
  192. }
  1. package com.controller;
  2. import java.text.SimpleDateFormat;
  3. import java.util.ArrayList;
  4. import java.util.Arrays;
  5. import java.util.Calendar;
  6. import java.util.Map;
  7. import java.util.HashMap;
  8. import java.util.Iterator;
  9. import java.util.Date;
  10. import java.util.List;
  11. import javax.servlet.http.HttpServletRequest;
  12. import com.utils.ValidatorUtils;
  13. import org.apache.commons.lang3.StringUtils;
  14. import org.springframework.beans.factory.annotation.Autowired;
  15. import org.springframework.transaction.annotation.Transactional;
  16. import org.springframework.format.annotation.DateTimeFormat;
  17. import org.springframework.web.bind.annotation.PathVariable;
  18. import org.springframework.web.bind.annotation.RequestBody;
  19. import org.springframework.web.bind.annotation.RequestMapping;
  20. import org.springframework.web.bind.annotation.RequestParam;
  21. import org.springframework.web.bind.annotation.RestController;
  22. import com.baomidou.mybatisplus.mapper.EntityWrapper;
  23. import com.baomidou.mybatisplus.mapper.Wrapper;
  24. import com.annotation.IgnoreAuth;
  25. import com.entity.NewsEntity;
  26. import com.entity.view.NewsView;
  27. import com.service.NewsService;
  28. import com.service.TokenService;
  29. import com.utils.PageUtils;
  30. import com.utils.R;
  31. import com.utils.MD5Util;
  32. import com.utils.MPUtil;
  33. import com.utils.CommonUtil;
  34. import java.io.IOException;
  35. /**
  36. * 高校资讯
  37. * 后端接口
  38. * @author
  39. * @email
  40. * @date 2022-07-23 18:58:54
  41. */
  42. @RestController
  43. @RequestMapping("/news")
  44. public class NewsController {
  45. @Autowired
  46. private NewsService newsService;
  47. /**
  48. * 后端列表
  49. */
  50. @RequestMapping("/page")
  51. public R page(@RequestParam Map<String, Object> params,NewsEntity news,
  52. HttpServletRequest request){
  53. EntityWrapper<NewsEntity> ew = new EntityWrapper<NewsEntity>();
  54. PageUtils page = newsService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, news), params), params));
  55. return R.ok().put("data", page);
  56. }
  57. /**
  58. * 前端列表
  59. */
  60. @IgnoreAuth
  61. @RequestMapping("/list")
  62. public R list(@RequestParam Map<String, Object> params,NewsEntity news,
  63. HttpServletRequest request){
  64. EntityWrapper<NewsEntity> ew = new EntityWrapper<NewsEntity>();
  65. PageUtils page = newsService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, news), params), params));
  66. return R.ok().put("data", page);
  67. }
  68. /**
  69. * 列表
  70. */
  71. @RequestMapping("/lists")
  72. public R list( NewsEntity news){
  73. EntityWrapper<NewsEntity> ew = new EntityWrapper<NewsEntity>();
  74. ew.allEq(MPUtil.allEQMapPre( news, "news"));
  75. return R.ok().put("data", newsService.selectListView(ew));
  76. }
  77. /**
  78. * 查询
  79. */
  80. @RequestMapping("/query")
  81. public R query(NewsEntity news){
  82. EntityWrapper< NewsEntity> ew = new EntityWrapper< NewsEntity>();
  83. ew.allEq(MPUtil.allEQMapPre( news, "news"));
  84. NewsView newsView = newsService.selectView(ew);
  85. return R.ok("查询高校资讯成功").put("data", newsView);
  86. }
  87. /**
  88. * 后端详情
  89. */
  90. @RequestMapping("/info/{id}")
  91. public R info(@PathVariable("id") Long id){
  92. NewsEntity news = newsService.selectById(id);
  93. return R.ok().put("data", news);
  94. }
  95. /**
  96. * 前端详情
  97. */
  98. @IgnoreAuth
  99. @RequestMapping("/detail/{id}")
  100. public R detail(@PathVariable("id") Long id){
  101. NewsEntity news = newsService.selectById(id);
  102. return R.ok().put("data", news);
  103. }
  104. /**
  105. * 后端保存
  106. */
  107. @RequestMapping("/save")
  108. public R save(@RequestBody NewsEntity news, HttpServletRequest request){
  109. news.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
  110. //ValidatorUtils.validateEntity(news);
  111. newsService.insert(news);
  112. return R.ok();
  113. }
  114. /**
  115. * 前端保存
  116. */
  117. @RequestMapping("/add")
  118. public R add(@RequestBody NewsEntity news, HttpServletRequest request){
  119. news.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
  120. //ValidatorUtils.validateEntity(news);
  121. newsService.insert(news);
  122. return R.ok();
  123. }
  124. /**
  125. * 修改
  126. */
  127. @RequestMapping("/update")
  128. @Transactional
  129. public R update(@RequestBody NewsEntity news, HttpServletRequest request){
  130. //ValidatorUtils.validateEntity(news);
  131. newsService.updateById(news);//全部更新
  132. return R.ok();
  133. }
  134. /**
  135. * 删除
  136. */
  137. @RequestMapping("/delete")
  138. public R delete(@RequestBody Long[] ids){
  139. newsService.deleteBatchIds(Arrays.asList(ids));
  140. return R.ok();
  141. }
  142. /**
  143. * 提醒接口
  144. */
  145. @RequestMapping("/remind/{columnName}/{type}")
  146. public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request,
  147. @PathVariable("type") String type,@RequestParam Map<String, Object> map) {
  148. map.put("column", columnName);
  149. map.put("type", type);
  150. if(type.equals("2")) {
  151. SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
  152. Calendar c = Calendar.getInstance();
  153. Date remindStartDate = null;
  154. Date remindEndDate = null;
  155. if(map.get("remindstart")!=null) {
  156. Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
  157. c.setTime(new Date());
  158. c.add(Calendar.DAY_OF_MONTH,remindStart);
  159. remindStartDate = c.getTime();
  160. map.put("remindstart", sdf.format(remindStartDate));
  161. }
  162. if(map.get("remindend")!=null) {
  163. Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
  164. c.setTime(new Date());
  165. c.add(Calendar.DAY_OF_MONTH,remindEnd);
  166. remindEndDate = c.getTime();
  167. map.put("remindend", sdf.format(remindEndDate));
  168. }
  169. }
  170. Wrapper<NewsEntity> wrapper = new EntityWrapper<NewsEntity>();
  171. if(map.get("remindstart")!=null) {
  172. wrapper.ge(columnName, map.get("remindstart"));
  173. }
  174. if(map.get("remindend")!=null) {
  175. wrapper.le(columnName, map.get("remindend"));
  176. }
  177. int count = newsService.selectCount(wrapper);
  178. return R.ok().put("count", count);
  179. }
  180. }

五,相关作品展示

基于Java开发、Python开发、PHP开发、C#开发等相关语言开发的各类毕业设计作品

基于Nodejs、Vue等前端技术开发设计的前端毕业设计作品

基于微信小程序和安卓APP应用开发的相关作品

基于51单片机等嵌入式物联网开发应用

基于各类算法实现的AI智能应用

基于大数据实现的各类数据管理和推荐系统

前沿技术、一站式服务、贴心售后解决你后顾之忧

 

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/526809
推荐阅读
相关标签
  

闽ICP备14008679号