基于springboot+vue的在线课程学习网站(前后端分离)

博主主页：猫头鹰源码

博主简介：Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万+、专注Java技术领域和毕业设计项目实战

主要内容：毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询

文末联系获取

项目介绍： 

随着计算机技术的飞速发展，计算机作为知识经济时代的产物，已被广泛应用于社会各个行业和领域，而素质教育在学校不断的深化，学校对学生的要求越来越高，不仅要求学生掌握书本上的知识，还需要学生拥有丰富的课外知识。以前的学生只能选择去图书馆进行大量的翻阅，才能找到最适合自己专业的书籍，并且还不能随时随地的学习。因此计算机公共课自主学习系统成了需要。在网上进行计算机公共课自主学习可以很好的满足现代计算机专业学生的需求。学生可以在此学习系统上根据自己专业或者自己的兴趣爱好，选择学习公共课程，还可以根据关键字进行查找，方便迅速，节省时间，实现了高效率学习！

计算机公共课自主学习系统是基于SpringBoot为开发技术；使用Mysql数据库，运行速度快，MySQL体积小，命令执行的速度快。优化SQL查询语句，有效提高查询速率，提供用户管理，检查，优化数据库操作的管理工。SpringBoot的使用可以很好地帮助快速搭建Spring框架、简化代码，方便了开发等。通过这些技术构建网站，可以很好的对网站的功能进行管理，对后期网站的维护也大有益处。

部分功能：

1.公共课展示模块：网站首页展示各种可供学习的计算机公共课轮播图，公共课搜索框，公共课推荐，公共课相关书籍推荐等。学生用户可以通过浏览首页点击自己想要学习的公共课程，进入相应的详情页去进行细节了解，或者可以在搜索框中输入具体的关键字来查找自己感兴趣的公共课程进行学习。但只有注册过后的用户才能将课程加入到我的课程中，然后进行相关学习。

2.公共课详情模块：课程展示模块有轮播图，课程推荐等，可以点击查看课程详情或者选择课程搜索框，方便学生搜索。课程详情页有课程名称，课程图片，授课老师，课程简要介绍，以及相关书籍推荐以供学生参考，选择。

3.学习模块：学生确定学习该门课程后，加入我的课程。学习模块有学习视频，课程名称，授课老师，以及相关文章推荐。学生可以通过在线播放视频学习，并且可以在下方评论区发表自己对于课程的看法和困惑，与其他学习的同学在线交流，还可以查看相关文章推荐，丰富课程知识。

4.学生用户模块：学生可以在学习网站上注册账号，编辑相关个人信息（用户名，真实姓名，密码，年龄，手机号码），后期也可根据需求更新修改个人信息。登陆成功后，学生可以进入公共课首页或者点击进入公共课详情页，根据自己的兴趣取向去选择自己感兴趣的课程或者通过查找关键字去选择相关课程加入到我的课程中，进行学习。

5.管理员模块：管理员进行注册时，编辑自己的个人信息（用户名，密码），后期也可更新个人信息。管理员登陆后，可查看用户信息，查看课程信息，查看学生学习课程相关信息信息。管理员可以取消课程或者设立新课程，完善课程展示效果以及查看课程相关论坛留言及发言。

6.课程评论模块：用户学习课程之后可以在论坛，发表自己的想法，或者是相关课程疑惑，与其他用户进行交流学习。管理员也可在论坛中发言，解答疑惑。

系统包含技术：

后端：springboot，mybatis
前端：element-ui、js、css等
开发工具：idea/vscode
数据库：mysql 5.7
JDK版本：jdk1.8

部分截图说明：

下面是首页

公共课推荐

课程详情，没有登录无法学习

书籍推荐

技术文章

我的课程

视频学习

登录

后台-课程管理

后台-用户管理

后台-书籍推荐

部分代码：

 /**      * 分页查询      */     @PostMapping("selectAll")     public PageInfo<Comment> selectAll(@RequestBody Map<String,String> mp) {         PageHelper.startPage(Integer.parseInt(mp.get("currentPage").toString()), Integer.parseInt(mp.get("pagesize").toString()));         mp.put("replyNull","1");         List<Comment> list = commentService.queryAllByLimit(mp);         for(int i=0;i<list.size();i++){             Comment comment = new Comment();             comment.setReply(list.get(i).getId().toString());             List<Comment> comments = commentService.queryCondition(comment);             list.get(i).setChildren(comments);         }         PageInfo<Comment> pageInfo = new PageInfo<Comment>(list);         return pageInfo;     }      @PostMapping("selectAllByAdmin")     public PageInfo<Comment> selectAllByAdmin(@RequestBody Map<String,String> mp) {         PageHelper.startPage(Integer.parseInt(mp.get("currentPage").toString()), Integer.parseInt(mp.get("pagesize").toString()));         List<Comment> list = commentService.queryAllByLimit(mp);         for(int i=0;i<list.size();i++){             Comment comment = commentService.queryById(Integer.parseInt(list.get(i).getReply()));             if(comment!=null){                 list.get(i).setReply(comment.getContent());             }         }         PageInfo<Comment> pageInfo = new PageInfo<Comment>(list);         return pageInfo;     }       /**      * 查询全部      */     @PostMapping("selectByAll")     public List<Comment> selectByAll(@RequestBody Map<String,String> mp) {         mp.put("replyNull","1");         List<Comment> list = commentService.queryAllByLimit(mp);         for(int i=0;i<list.size();i++){             Comment comment = new Comment();             comment.setReply(list.get(i).getId().toString());             List<Comment> comments = commentService.queryCondition(comment);             list.get(i).setChildren(comments);         }         return list;     }      /**      * 修改      */     @RequestMapping("edit")     public String edit(@RequestBody Comment comment) {         try {             commentService.update(comment);             return "200";         }catch (Exception e){             e.printStackTrace();             return "201";         }     }      /**      * 新增      */     @RequestMapping("add")     public String add(@RequestBody Comment comment) {         try {             Date date = new Date();             comment.setCreateTime(date);             commentService.insert(comment);             return "200";         }catch (Exception e){             e.printStackTrace();             return "201";         }     }

以上就是部分功能展示，从整体上来看，本系统功能是十分完整的，界面设计简洁大方，交互友好，数据库设计也很合理，规模适中，代码工整，清晰，适合学习使用。

好了，今天就到这儿吧，小伙伴们点赞、收藏、评论，一键三连走起呀，下期见~~