本文共 4775 字，大约阅读时间需要 15 分钟。

课程列表功能

现在我们数据都有了，进行页面显示

我们做一个树形显示

1、参考tree模块把前端整合

把tree/index中的页面复制到edu/subject/list中

看一下代码：

搜索功能：

树形结构部分： :data=“data2” 表示要显示的数据，我们这里是数组形式 :props=“defaultProps” 表示取到节点和子节点的名称

:filter-node-method=“filterNode” 主要做的是检索功能

class="filter-tree"和default-expand-all 做的是页面布局

我们要做的事：写个接口返回数据，把数据在里面进行遍历，数据格式要和上面的形式一样

我们把上面的树形数据模板改一下：（4级分类改成我们的2级分类）

//基本格式：数组中有多个对象 data2: [{
   		id: 1,        label: '一级分类名称',        children: [        {
     id: 4,           label: '二级分类1', }，        {
             id: 5,          label: '二级分类2',}          						]}, {
   		 id: 2,        label: '一级分类2',        children: [        {
    id: 5,          label: '二级-1',}，        {
             id: 6,          label: '二级-2', }        						]}

数据要改成这样的，他才认识，难点是怎么返回这种数据

来到后端的EduSubjectController中，在这里写接口

（1）第一种方式（一般不用）：字符串拼接

（2）第二种方式 实际中常见的封装数据的方式

• 第一步 针对返回数据创建对应的实体类
  两个实体类：一级和二级分类
  我们建一个subject包，创建OneSubject和TwoSubject类，对应数据写上属性

• 第二步 在两个实体类之间表示关系（一个一级分类有多个二级分类）
  数组和集合可以用来表示多个二级分类，我们选择集合来表示多个数据的结构
  
  我们做这些都是为了最后数据的封装的使用，这样做数据可以更方便的返回他的格式
• 第三步 具体封装的代码
  这里方式必须要会写，我们后边会写很多（建实体类表示关系，封装代码）
  

在service中，最终实现：

创建方法：

在实现类中把具体方法写一下： 先查出所有数据，再进行封装 完善代码：

我们利用一级分类的parent_id=0和二级分类的parent_id！=0来实现查出所有分类（我们有两个分类可以这样做）

ＳＥＬＥＣＴ　＊　FROM edu_subject WHERE parent_id='0'

这个效果用代码实现:

service要调用Mapper，ServiceImpl类帮我们做了注入

代码部分:

//1.查询所有的一级分类  parent_id=0        QueryWrapper
   
     wrapperOne = new QueryWrapper<>();        wrapperOne.eq("parent_id","0");        //service要调用Mapper，ServiceImpl帮我们做了注入        List
    
      oneSubjectList = baseMapper.selectList(wrapperOne);        //this.list(wrapperOne);//第二种写法,用自己的方法调用,basemapper用mapper方法调用        //2.查询所有的二级分类  parent_id!=0        QueryWrapper
     
       wrapperTwo  = new QueryWrapper<>();        wrapperOne.ne("parent_id","0");        List
      
        twoSubjectList = baseMapper.selectList(wrapperTwo);       		 //创建list集合,用于存储最终封装数据        List
       
         finalSubjectList = new ArrayList<>();        //
       
      
     
    
   

把一级分类和二级分类的数据进行封装:

List
   
        ==>    List
    
   

复杂写法（get，set方法）：

for (int i = 0; i < oneSubjectList.size(); i++) {
               //遍历oneSubjectList集合            //得到oneSubject每个eduSubject对象            EduSubject eduSubject = oneSubjectList.get(i);            //把eduSubject里面值获取出来，放到OneSubject对象里面            //多个OneSubject放到finalSubjectList里面            OneSubject oneSubject = new OneSubject();            oneSubject.setId(eduSubject.getId());            oneSubject.setTitle(eduSubject.getTitle());            finalSubjectList.add(oneSubject);        }

我们Swagger测试一下：

简单写法（spring中的工具类 BeanUtils.copyProperties(）方法实现）：

for (int i = 0; i < oneSubjectList.size(); i++) {
               //遍历oneSubjectList集合            //得到oneSubject每个eduSubject对象            EduSubject eduSubject = oneSubjectList.get(i);            //把eduSubject里面值获取出来，放到OneSubject对象里面            //多个OneSubject放到finalSubjectList里面            OneSubject oneSubject = new OneSubject();            BeanUtils.copyProperties(eduSubject,oneSubject);            finalSubjectList.add(oneSubject);            }

封装二级分类（完整代码）：

//课程分类列表（树形）    @Override    public List
   
     getAllOneTwoSubject() {
           //1.查询所有的一级分类  parent_id=0        QueryWrapper
    
      wrapperOne = new QueryWrapper<>();        wrapperOne.eq("parent_id","0");        //service要调用Mapper，ServiceImpl帮我们做了注入        List
     
       oneSubjectList = baseMapper.selectList(wrapperOne);        //this.list(wrapperOne);//第二种写法        //2.查询所有的二级分类  parent_id!=0        QueryWrapper
      
        wrapperTwo  = new QueryWrapper<>();        wrapperOne.ne("parent_id","0");        List
       
         twoSubjectList = baseMapper.selectList(wrapperTwo);        //创建list集合,用于存储最终封装数据        List
        
          finalSubjectList = new ArrayList<>(); //3.封装一级分类 //查询出来的所有一级分类list遍历集合，得到每个一级分类的对象，获取每个一级分类的对象里面的值 //封装到要求的list集合里面 List
         
           finalSubjectList for (int i = 0; i < oneSubjectList.size(); i++) { //遍历oneSubjectList集合 //得到oneSubject每个eduSubject对象 EduSubject eduSubject = oneSubjectList.get(i); //把eduSubject里面值获取出来，放到OneSubject对象里面 //多个OneSubject放到finalSubjectList里面 OneSubject oneSubject = new OneSubject(); BeanUtils.copyProperties(eduSubject,oneSubject); finalSubjectList.add(oneSubject); //在一级分类循环遍历查询所有的二级分类 //创建list集合封装每个一级分类的二级分类 List
          
            twoFinalSubjectList = new ArrayList<>(); //遍历二级分类list集合 for (int m = 0; m < twoSubjectList.size(); m++) { //获取每个二级分类 EduSubject tSubject = twoSubjectList.get(m); //判断二级分类parent_id和一级分类的id是否一样 if (tSubject.getParentId().equals(eduSubject.getId())) { //把tSubject值复制到TwoSubject里面，放到twoFinalSubjectList里面 TwoSubject twoSubject = new TwoSubject(); BeanUtils.copyProperties(tSubject,twoSubject); twoFinalSubjectList.add(twoSubject); } } //把一级下面所有二級分类放到一级分类里面 oneSubject.setChildren(twoFinalSubjectList); } return finalSubjectList; }
          
         
        
       
      
     
    
   

Swagger测试

转载地址：http://rpxzi.baihongyu.com/