整合课程分类
实现思路
1、图解
树形控件考到前端页面,按需求更改
2、实现Excel表格数据导入数据库功能
前端找一个上传的组件
后端使用前面学的easyexcel功能来实现
3、树状图显示数据功能
前端找一个树状图组件
后端返回上传的表格数据课程分类集合给前端,传递给组件自动遍历
表格数据导入数据库
这个功能用前面学的easyExcel来实现
1、添加依赖
<dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>2.1.6</version> </dependency>
2、创建excel对应实体类对象
3、通过代码生成器生成课程表代码
4、创建回调监听器
5、自定义接口方法
实现类完成读取功能
6、控制类完成调用
7、swagger完成测试
树状图显示数据
树状图由element-ui获取
1、树状图前端代码结构说明
2、设计思路
给el-tree返回一个集合对象就可以实现遍历
这个集合对象格式是,{一级分类对象,二级分类对象数组[],一级分类对象,二级分类对象数组[].......}
对应到实体类中就是这个形式
3、返回集合对象
在数据库中查询通过表格上传的数据,返回为集合对象
源码也放下来,供大家理解
@Service public class EduSubjectServiceImpl extends ServiceImpl<EduSubjectMapper, EduSubject> implements EduSubjectService { //添加课程分类 @Override public void saveSubject(MultipartFile file, EduSubjectService subjectService) { try { //文件输入流 InputStream in = file.getInputStream(); //调用方法进行读取 EasyExcel.read(in, SubjectData.class, new SubjectExcelListener(subjectService)).sheet().doRead(); } catch (Exception e) { e.printStackTrace(); } } @Override public List<OneSubject> getAllOneTwoSubject() { //查询所有一级分类 parentid=0 QueryWrapper<EduSubject> wrapperOne = new QueryWrapper<>(); wrapperOne.eq("parent_id", "0"); List<EduSubject> oneSubjectList = baseMapper.selectList(wrapperOne); // this.list()也可以通过这种方式调用查询。 //查询所有二级分类 parentid!=0 QueryWrapper<EduSubject> wrapperTwo = new QueryWrapper<>(); wrapperOne.ne("parent_id", "0"); List<EduSubject> twoSubjectList = baseMapper.selectList(wrapperTwo); //创建list集合,用于存放最终封装的数据 List<OneSubject> finalSubjectList = new ArrayList<>(); //封装一级分类 //查询出来所有的一级分类list集合遍历,得到每一级分类对象,获得每个一级分类对象值 //封装到要求的list集合里面 for (int i = 0; i < oneSubjectList.size(); i++) { EduSubject eduSubject = oneSubjectList.get(i); OneSubject oneSubject = new OneSubject(); // oneSubject.setId(eduSubject.getId()); // oneSubject.setTitle(eduSubject.getTitle()); //把eduSubject值复制到对应的oneSubject对象里面,两个对象里面的属性相同对应的的自动赋值 BeanUtils.copyProperties(eduSubject, oneSubject); //在一级分类循环遍历查询所有的二级分类 //创建list集合封装每个一级分类的二级分类 List<TwoSubject> twoFinalSubjectList = new ArrayList<>(); //遍历二级分类list集合 for (int j = 0; j < twoSubjectList.size(); j++) { EduSubject tSubject = twoSubjectList.get(j); //如果二级分类的parentid和一级分类的id一样,就把它加入到一级分类 if (tSubject.getParentId().equals(eduSubject.getId())) { TwoSubject twoSubject = new TwoSubject(); BeanUtils.copyProperties(tSubject, twoSubject); twoFinalSubjectList.add(twoSubject); } } //把一级下面所有的二级分类放到一级分类里面 oneSubject.setChildren(twoFinalSubjectList); finalSubjectList.add(oneSubject); } return finalSubjectList; } }
4、控制类调用接口返回集合
5、Swagger测试
加黑的小标题就是前后端整合的过程
1、定义路由、跳转页面
2、定义API
定义的API就是后端写好的接口
3、添加上传组件
element-ui找
组件参数说明
template部分
数据部分
4、测试
树形数据与懒加载
整合课程发布
实现思路
1、图解
2、获取步骤条
3、代码思路
写三个vue组件,每个组件根据需要自定义内容
课程基本信息
实现效果
后端编码
提前生成课程相关表
通过代码生成器生成一键生成
1、创建vo封装每个步骤提交的数据
课程描述类id和课程类id是一样的,所以我们提前设置好
2、service
定义添加课程方法
3、controller
调用添加课程方法
前端编码
1、添加路由,做页面跳转
隐藏路由的目的是用来跳转步骤条
2、定义API
3、编写Vue页面
引入步骤条和表单
显示所有讲师列表
:label表示的是下拉列表的名字的名字
:value是此表单提交时名字对应的teacherid也会被提交
二级联动
这是重点!!!
bug提示:
其中this.courseInfo.subjectId要在每次一级分类的时候进行清空
整合文本编辑器
封面上传
数据回显
课程大纲
实现效果
后端编码
写后端接口处理数据
分别是章节相关的,小节相关的
查询所有章节和小节方法
再次理解
前端编码
添加,修改之前我们使用的是跳到一个具体的页面
这次我们使用弹框,在弹框内进行操作
这里我们使用element-ui中的Dialog
前端定义API
增加章节
编码思路:
- 点击添加,出现弹框
- 填写内容,提交表单
- 刷新页面,展示数据
修改章节
- 点击修改,出现弹框
- 回显数据,修改提交
- 刷新页面,展示数据
章节删除
获取id,按id删除
小节增加删除修改
同上,不在一一截取
课程最终发布
实现效果
https://ucc.alicdn.com/images/user-upload-01/img_convert/1225ccbec1084854a47aad16b32ae07c.png
后端编码
后端主要是做数据回显了,如下:
- 根据id查询课程发布信息
- 根据id发布课程
1、根据id查询课程发布信息
方式一:业务层组装多个表多次的查询结果
方式二:数据访问层进行关联查询
我们使用第二种方式实现
定义VO
dao
业务层
2、根据id发布课程
@PostMapping("publishCourse/{id}") public R publishCourse(@PathVariable String id) { EduCourse eduCourse = new EduCourse(); eduCourse.setId(id); eduCourse.setStatus("Normal");//设置课程发布状态 courseService.updateById(eduCourse); return R.ok(); }
前端编码
1、定义API
2、写页面
3、显示课程发布的信息
和前面显示讲师类似,不详细说明
Ending…