开发过程中,涉及到多级菜单的应用,树形结构比较常见,今天就做了一个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、前端
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
最后前端到底应该怎么学才好?
如果你打算靠自己摸索自学,那么你首先要了解学习前端的基本大纲,这是你将要学习的主要内容,理解以及掌握好这些内容,便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程,作为初学者最好的方式就是看视频教程学习,初学者容易理解接受。
不要选择买书学习,这样的方式没有几个人能学会,基本都是看不下去书,也看不懂书。如果喜欢看书的学弟,可以买一些经典的书籍作为辅助即可,主要还是以看教程为主。每天抽出固定几个小时学习,做好长期学习的准备。学习编程并不是每天光看视频,你学习编程最重要的目的是为了编写软件产品,提供给大众使用,所以用手写出代码实现功能才是我们要做的事情。
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
[外链图片转存中…(img-8nhWdHjG-1712792641018)]