【项目实战】课程管理系统(SpringBoot+mybatis 您所在的位置:网站首页 计算机管理课程 【项目实战】课程管理系统(SpringBoot+mybatis

【项目实战】课程管理系统(SpringBoot+mybatis

2024-03-29 04:28| 来源: 网络整理| 查看: 265

文章目录

前言

一、技术点

二、环境介绍

三、设计目标

四、数据库设计

 五、功能设计与展示

1.首页

2.教师管理

①教师列表

②添加教师

3.课程管理

①课程目录

②课程分类

③课程列表

4.视频管理

①小节列表

 ②查看视频

六、项目总结

1.总结

2.做项目时遇到的问题

①视频播放出错

②级联选择问题

七、心得体会

前言

javaee课程需要制作一个后台管理系统,然后就自己动手写了个课程管理系统,在此之前还写过一个电脑商城项目,但是缺一个后台,有时间写一个完整的前后台项目(滑稽)

注:项目及图片仅供学习使用

一、技术点

前端:vue-admin-template模板(vue、element-ui)

后端:Springboot、mybatis-plus、maven、mysql、oss对象存储、视频点播

注:前端使用了gitee的开源模板vue-admin-template   :gitee地址

二、环境介绍

前端工具:webstorm

数据库工具:Navicat Premium

数据库:Mysql

IDE:idea

jdk版本:8

三、设计目标

前后端分离,实现对课程的管理

主要功能:教师管理(教师列表、添加教师、修改教师信息、删除教师、教师条件查询)

课程管理(课程目录展示、课程分类展示、课程列表、添加课程、修改课程、删除课程、课程条件查询)

视频管理(小节列表、查看视频、添加小节、修改小节信息、删除小节)

四、数据库设计

480e644189d34e6b912e40846cc0a05c.png

edu_course :课程表edu_chapter :章节表edu_video :小节表edu_teacher :教师信息表edu_subject :课程分类表  五、功能设计与展示 1.首页

展示用户信息、根据时间展示上午、下午、晚上信息

959d6727456d4e8abaad15c965e76512.png

2.教师管理 ①教师列表 可以根据教师名称、头衔、添加时间进行条件查询分页展示教师信息修改教师信息时数据会进行回显包含删除教师功能使用oss对象存储来存储图片及上传图片

1782071775624057b73f658e6e15aa4b.png

@PostMapping("page/condition/{current}/{limit}") public Result pageCondition(@PathVariable("current") long current ,@PathVariable("limit") long limit ,@RequestBody TeacherQuery teacherQuery){ Page page = new Page(current, limit); QueryWrapper wrapper = new QueryWrapper(); String name = teacherQuery.getName(); Integer level = teacherQuery.getLevel(); String begin = teacherQuery.getBegin(); String end = teacherQuery.getEnd(); if (!StringUtils.isEmpty(name)){ wrapper.like("name",name); } if (!StringUtils.isEmpty(level)){ wrapper.eq("level",level); } if (!StringUtils.isEmpty(begin)){ wrapper.ge("gmt_create",begin); } if (!StringUtils.isEmpty(end)){ wrapper.le("gmt_modified",end); } wrapper.orderByDesc("gmt_create","gmt_modified"); eduTeacherService.page(page, wrapper); return Result.ok().data("page",page); }

ec724661917b473f879dff13365bf262.png

②添加教师

如果地址栏中没有id参数则为添加讲师,否则根据id参数查询该教师并将数据进行回显

4d07873c1baa40d082726604abb79328.png

3.课程管理 ①课程目录

展示所有课程的章节及小节信息,相当于一个三级查询

99a8e5e906c34cc5a10d40505d66c995.png

②课程分类

展示课程分类,二级查询

af9ef4b37fd84dbdb2c722c71f1ef6be.png

@Override public List listTree() { List parentList = baseMapper.selectList(new QueryWrapper().eq("parent_id", 0)); List childrenList = baseMapper.selectList(new QueryWrapper().ne("parent_id", 0)); //一级分类实体 List parentSubjects=new ArrayList(); for (EduSubject subject : parentList) { ParentSubject parentSubject = new ParentSubject(); BeanUtils.copyProperties(subject,parentSubject); parentSubjects.add(parentSubject); //二级分类实体 List childrenSubjects=new ArrayList(); for (EduSubject childSubject : childrenList) { if (childSubject.getParentId().equals(subject.getId())){ ChildrenSubject childrenSubject=new ChildrenSubject(); BeanUtils.copyProperties(childSubject,childrenSubject); childrenSubjects.add(childrenSubject); } } //加入到children中 parentSubject.setChildren(childrenSubjects); } return parentSubjects; } ③课程列表  可以根据课程名称、状态、添加时间进行条件查询分页展示课程信息包含删除课程功能

a2463aaa15ea4cbd9245d016000f65ee.png

修改课程

修改课程信息时数据会进行回显

aa146e2accc042b693bddf382d20fbf2.png

添加课程

授课教师从数据库中查询并回传至选择器中课程分类为级联选择,先查询到父分类,后根据父分类的id查询到子分类的信息课程封面上传的图片传到阿里云oss中,返回上传图片的地址进行回显

 075618bea62d428b8c33837f76bb1648.png

52367e3c03eb4001a10fa1cd49b80918.png

f82ecc66cbd24bd4af4f1b5464958f5e.png

c0d93c1c68cf4fb587267fcc914c8a0e.png

4.视频管理 ①小节列表

分页展示小节信息

cb5c21f7f4f64a219ecd3efafe5210c4.png

添加小节

目录为级联选择,查询课程名称后,当选择某个课程会根据课程id查询课程下的章节信息,进而进行添加小节

9f8a8515403a4d709de5e78cd4782028.png

修改小节

根据id查询小节信息并进行回显使用阿里云视频点播功能实现视频的上传

be57155bca9c49738f6be27bcdfa3f3e.png

 ②查看视频

调用后台接口获取视频的vid及playAuth(播放权证)

0dfe37a8a43048c5bb58c5191f8e7d2b.png

ee9b22ca5a0e4a6eaac924d346362c86.png

六、项目总结 1.总结

        项目后端主要使用了springboot、mybatis-plus,涉及到spring、springmvc、mybatis等基本框架,前端使用vue-admin-template模板进行开发

2.做项目时遇到的问题 ①视频播放出错

        视频id及视频播放权证需要在页面加载前进行赋值,我之前的做法是在跳转到播放页面再根据视频id获取播放权证(playAuth),但是每次进行播放时候总显示视频权证无法获取,打断点发现权证依旧为null,后来我选择使用cookie在将跳转页面之前进行获取视频的播放权证playAuth,这样就能使得在跳转到该页面后playAuth有值。

6ffaaf596f764f68941100f0d7a8f3f5.png

②级联选择问题

         在进行级联选择时候,要么查询不到子标题,要么就是在父标题选择完成后,子标题清空的问题。在做级联选择我的做法是选择好父标题后,当父标题change后调用接口查询该父标题的子标题完成级联,对于上面问题的解决我是在每次父标题改变后,将子标题的值进行清空这样就能解决清空问题;其次,对于查询不到子标题的情况是因为前端传值出现了些小的问题。

41cb3fb0099e4446a7f37cc420f82a5d.png

七、心得体会

        从开始写项目,感觉无论什么功能最基本的还是对数据的crud,再加上使用了vue,让我在前端也花费了不少时间。在整合阿里云相关功能时,我开始自己去读对应文档来学习这些知识,同时使用element-ui组件来编写自己想要的页面,去实现自己想要的功能。由于自己才开始接触SpringSecurity,掌握的并不是很熟练,所以这次并没有引入SpringSecurity,后续我还会对项目进行完善。

最后附上gitee地址

前端gitee地址:vue-course: 课程管理系统vue界面使用vue-admin-template

后端gitee地址:course-manage: springboot+mybatis-plus+vue的后台课程管理系统



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有