vue.js|Vue基础知识总结 5（vue实现树形结构） spring|boot|java

目录
一、前言
二、代码实例
1、数据库设计
2、实体类
3、controller
4、service
5、前端
一、前言开发过程中，涉及到多级菜单的应用，树形结构比较常见，今天就做了一个Spring Boot + Vue + Element-UI 实现树形结构的一个小demo。
Tree组件最适合的结构是无序列列表ul，创建一个递归组件Item表示Tree选项，如果当前Item存在 children，则递归渲染子树，以此类推; 同时添加一个标识管理理当前层级item的展开状态。
效果展示：

文章图片

二、代码实例 1、数据库设计

文章图片

2、实体类
一般树形结构都是创建若干层实体类，然后通过list结合在一起，面向对象编程
一级实体类

@Data public class OneSubject { private String id; private String title; private List children = new ArrayList<>(); }

二级实体类

@Data public class TwoSubject { private String id; private String title; }

3、controller

@GetMapping("getAllSubject") public R getAllSubject(){ List list = subjectService.getAllOneTwoSubject(); return R.Ok().data("list",list); }

4、service

//课程分类列表（树形） @Override public List getAllOneTwoSubject() { //1 查询所有一级分类 QueryWrapper wrapperOne = new QueryWrapper<>(); wrapperOne.eq("parent_id","0"); List oneSubjectList = baseMapper.selectList(wrapperOne); //2 查询所有2级分类 QueryWrapper wrapperTwo = new QueryWrapper<>(); wrapperTwo.ne("parent_id","0"); List twoSubjectList = baseMapper.selectList(wrapperTwo); //创建list集合，用于存储最终封装数据 List finalSubjectList = new ArrayList<>(); //3、封装一级分类 for (int i = 0; i < oneSubjectList.size(); i++) { EduSubject eduSubject = oneSubjectList.get(i); OneSubject oneSubject = new OneSubject(); BeanUtils.copyProperties(eduSubject,oneSubject); //在一级分类循环遍历查询所有的二级分类 //创建list集合封装每一个一级分类的二级分类 List twoFinalSubjectList = new ArrayList<>(); for (int j = 0; j < twoSubjectList.size(); j++) { EduSubject tSubject = twoSubjectList.get(j); if(tSubject.getParentId().equals(oneSubject.getId())){ TwoSubject twoSubject = new TwoSubject(); BeanUtils.copyProperties(tSubject,twoSubject); twoFinalSubjectList.add(twoSubject); } } //把一级下面所有的二级分类放入一级分类中 oneSubject.setChildren(twoFinalSubjectList); finalSubjectList.add(oneSubject); } //4、封装二级分类 return finalSubjectList; }

5、前端
JavaScript

import request from '@/utils/request' export default { //1 课程分类列表 getSubjectList() { return request({ url: '/eduservice/subject/getAllSubject', method: 'get' }) } }

Vue页面

上一篇：Vue知识体系总结 4：Vue组件化开发
下一篇：Vue基础知识总结 6：vue双向绑定原理

【vue.js|Vue基础知识总结 5（vue实现树形结构）】