课程分类树形结构显示

1、开发树形结构显示接口

（1）针对课程分类数据，在enetiy/vo目录下创建两个vo类，一个是一级分类OneSubjectVo、一个是二级分类TwoSubjectVo 。

OneSubjectVo.Java

package com.atguigu.eduservice.entity.vo;
import lombok.Data;
import java.util.ArrayList;
import java.util.List;
@Data
public class OneSubjectVo {
    private  String id;
    private String title;
    private List<TwoSubjectVo> children = new ArrayList<>();
}

TwoSubjectVo.java

package com.atguigu.eduservice.entity.vo;
import lombok.Data;
@Data
public class TwoSubjectVo {
    private  String id;
    private String title;
}

（2）EduSubjectController中添加方法

@ApiOperation(value = "查询课程分类")
@GetMapping
public R getAllSubject(){
    List<OneSubjectVo> allSubject = subjectService.getAllSubject();
    return R.ok().data("allSubject",allSubject);
}

（3）EduSubjectService 接口添加方法

List<OneSubjectVo> getAllSubject();

（4）EduSubjectServiceImpl添加方法的实现

//查询课程分类
    @Override
    public List<OneSubjectVo> getAllSubject() {
        //1获取一级分类数据
        QueryWrapper<EduSubject> wrapperOne = new QueryWrapper<>();
        wrapperOne.eq("parent_id","0");
        List<EduSubject> oneSubjectList = baseMapper.selectList(wrapperOne);
        //2获取二级分类数据
        QueryWrapper<EduSubject> wrapperTwo = new QueryWrapper<>();
        wrapperTwo.ne("parent_id","0");
        List<EduSubject> twoSubjectList = baseMapper.selectList(wrapperTwo);
        //3创建最终返回的数据集合
        List<OneSubjectVo> finalSubjectList = new ArrayList<>();
        //4封装一级分类
        //4.1遍历一级分类
        for (int i = 0; i <oneSubjectList.size() ; i++) {
            EduSubject oneSubject = oneSubjectList.get(i);
            //4.2 EduSubject转化成OneSubjectVo
            OneSubjectVo oneSubjectVo = new OneSubjectVo();
//            oneSubjectVo.setId(oneSubject.getId());
//            oneSubjectVo.setTitle(oneSubject.getTitle());
            //把oneSubject里的值复制到oneSubjectVo
            BeanUtils.copyProperties(oneSubject,oneSubjectVo);
            //4.3把数据存入finalSubjectList
            finalSubjectList.add(oneSubjectVo);
            //4.4创建集合封装二级分类
            List<TwoSubjectVo> twoVoList = new ArrayList<>();
            //5封装二级
            for (int m = 0; m <twoSubjectList.size() ; m++) {
                EduSubject twoSubject = twoSubjectList.get(m);
                //5.1判断，判断一级分类id和二级分类的parentid比较
                if(oneSubject.getId().equals(twoSubject.getParentId())){
                    //5.2 twoSubject转化成TwoSubjectVo
                    TwoSubjectVo twoSubjectVo = new TwoSubjectVo();
                    BeanUtils.copyProperties(twoSubject,twoSubjectVo);
                    twoVoList.add(twoSubjectVo);
                }
            }
            //6二级vo集合存入一级分类vo里
            oneSubjectVo.setChildren(twoVoList);
        }
        return finalSubjectList;
    }

（5）测试

使用swagger进行测试：http://localhost:8001/swagger-ui.html

2、开发树形接口显示前端

（1）新增subject.js

import request from '@/utils/request'
export default {
  //查询课程分类
  getAllSubject(){
    return request({
      url: `/eduservice/edusubject`,
      method: 'get'
    })
  }
}

（2）修改list.vue

1)页面元素

<template>
  <div class="app-container">
    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
    <el-tree
      ref="tree2"
      :data="data2"
      :props="defaultProps"
      :filter-node-method="filterNode"
      class="filter-tree"
      default-expand-all
    />
  </div>
</template>

2)Js实现

<script>
import subject from "@/api/subject";
export default {
  data() {
    return {
      filterText: "",
      data2: [],
      defaultProps: {
        children: "children",
        label: "title"
      }
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val);
    }
  },
  created () {
      this.getAllSubjectList()
  },
  methods: {
    //查询课程分类数据
    getAllSubjectList() {
        subject.getAllSubject()
        .then(response=>{
            this.data2 = response.data.allSubject;
        })

    },

    filterNode(value, data) {
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    }
  }
};
</script>