vue-admin-template-master组件学习-Tree 树形控件（1）

vue-admin-template-master组件学习-Tree 树形控件（1）

最终效果

一、前端部署

1）router路由

在router文件夹中的index.js中添加路由

{
    path: '/subject',
    component: Layout,
    redirect: '/subject/info',
    name: '课程分类列表',
    meta: { title: '课程分类列表', icon: 'example' },
    children: [
      {
        path: 'info',
        name: '课程分类列表',
        component: () => import('@/views/subject/info'),
        meta: { title: '课程分类列表', icon: 'table' }
      },
      {
        path: 'save',
        name: '添加课程分类',
        component: () => import('@/views/subject/save'),
        meta: { title: '添加课程分类', icon: 'tree' }
      }
    ]
  }

2）views页面

在views文件夹下新建subject文件夹并新建info.vue

<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>

<script>
import subject from '@/api/subject/info'
export default {
  data() {
    return {
      filterText: '',
      data2: [],  //返回所有分类数据
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  created() {
      this.getAllSubjectList()
  },
//   watch: {
//     filterText(val) {
//       this.$refs.tree2.filter(val)
//     }
//   },
  methods: {
    getAllSubjectList() {
        subject.getSubjectList()
            .then(response => {
                this.data2 = response.data.items
            })
    }
    // filterNode(value, data) {
    //   if (!value) return true
    //   return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
    // }
  }
}
</script>

3)info.js

import request from '@/utils/request'
export default {
    getSubjectList() {
        return request({
        	//后端提供的接口
            url: '/stu/subject/getAllSubject',
            method: 'get'
          })
    }
}

二、数据库

有Excel导入到数据库（省略）

Excel文件

三、后端开发

通过自动生成功能创建了subject实体类，controller，service等等
主要是编写前端需要的数据形式（官方提供的数据形式）

1)定义一个SubjectTree类

package com.atrsm.stu.entity.vo;

import lombok.Data;

import java.util.ArrayList;
import java.util.List;

/**
 * @author Ro shinMM
 * @create 2020-08-14 16:06
 */
@Data
public class SubjectTree {
	//雪花算法自动生成的id
    private String id;
    //名称
    private String title;
    //孩子集合
    private List<SubjectTree> children = new ArrayList<>();
}

2）controller层返回数据

	@Autowired
    private SubjectService subjectService;
    
 	@ApiOperation("获取所有课程")
    @GetMapping("getAllSubject")
    public R getAllSubject(){
    	//自定义的treeList()方法
        List<SubjectTree> subjectTreeList = subjectService.treeList();
        return R.ok().data("items",subjectTreeList);
    }

3）service层

public interface SubjectService extends IService<Subject> {

    //void importSubjectData(MultipartFile file, SubjectService subjectService);

    List<SubjectTree> treeList();
}

4）SubjectServiceImpl实现类

@Service
public class SubjectServiceImpl extends ServiceImpl<SubjectMapper, Subject> implements SubjectService {

    @Override
    public List<SubjectTree> treeList() {
        ArrayList<SubjectTree> subjectTrees = new ArrayList<>();
        QueryWrapper<Subject> wrapper = new QueryWrapper<>();
        //数据库中parent_id为0的数据为一级目录
        wrapper.eq("parent_id","0");
        List<Subject> subjects = baseMapper.selectList(wrapper);
        for (int i = 0; i < subjects.size(); i++) {
            SubjectTree tree = new SubjectTree();
            BeanUtils.copyProperties(subjects.get(i),tree);
            //调用下面的递归方法
            addTree(tree);
            subjectTrees.add(tree);
        }
        return subjectTrees;
    }
	
	//递归方法
    public void addTree(SubjectTree subjectTree){
        if (subjectTree != null) {
            QueryWrapper<Subject> wrapper = new QueryWrapper<>();
            wrapper.eq("parent_id",subjectTree.getId());
            //获取到parent_id为父节点id的所有subject集合
            List<Subject> list = baseMapper.selectList(wrapper);
            //如果存在子节点，递归执行
            if (list.size() > 0){
            	//new一个所需数据的集合
                ArrayList<SubjectTree> subjectTrees = new ArrayList<>();
                for (int i = 0; i < list.size(); i++) {
                    Subject subject = list.get(i);
                    SubjectTree childTree = new SubjectTree();
                    //将所有subject集合中的元素复制给subjectTrees集合
                    //copyProperties这个方法第一个参数必须要有值
                    BeanUtils.copyProperties(subject,childTree);
                    //父节点添加子节点
                    subjectTrees.add(childTree);
                    //对子节点进行递归
                    addTree(childTree);
                }
                //将所有子节点的集合赋值给父元素
                subjectTree.setChildren(subjectTrees);
            }else {
                return;
            }
        }
    }
}