两级分类以懒加载的方式展现树形数据

您所在的位置：网站首页 › vue自定义树形控件搜索功能 › 两级分类以懒加载的方式展现树形数据

两级分类以懒加载的方式展现树形数据

2023-06-15 18:32| 来源: 网络整理| 查看: 265

两级分类以懒加载的方式展现树形数据解决方案：

数据库设计+ElementUI

看懂以下代码前提知识：

mysql、springBoot、mybatisPlus、了解vue生命周期、了解ElementUI基本使用，了解前后分离开发。

场景：

因为每一个课程都对应了课程分类（比如：Web基础课程，属于一级分类–>后端开发；属于二级分类–>java），想做课程的相关功能，需要先做一个课程的分类列表功能，为后面的添加课程做准备。要求该课程的分类列表功能能以树形的结构展示出课程的各种类别，还能实现只有点击一级菜单才会加载该一级分类下的二级分类内容（懒加载）。效果如下图2所示

数据库设计：

在这里插入图片描述

图1

效果演示：

在这里插入图片描述

图2

代码实现：后端代码： (1)统一返回结果类Result //统一返回结果类 @Data public class Result { private Integer code; //状态码 private String message; //返回状态信息（成功失败） private T data; //返回数据 public Result() {} //成功的方法，有data数据 public static Result ok(T data) { Result result = new Result(); if(data != null) { result.setData(data); } result.setCode(20000); result.setMessage("成功"); return result; } //失败的方法,有data数据 public static Result fail(T data) { Result result = new Result(); if(data != null) { result.setData(data); } result.setCode(20001); result.setMessage("失败"); return result; } public Result message(String msg){ this.setMessage(msg); return this; } public Result code(Integer code){ this.setCode(code); return this; } } (2)实体类Subject.java @Data @ApiModel(description = "Subject") @TableName("subject") public class Subject { private static final long serialVersionUID = 1L; @ApiModelProperty(value = "id") private Long id; @ApiModelProperty(value = "创建时间") @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss") @TableField("create_time") private Date createTime; @ApiModelProperty(value = "更新时间") @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss") @TableField("update_time") private Date updateTime; @ApiModelProperty(value = "逻辑删除(1:已删除，0:未删除)") @JsonIgnore @TableLogic @TableField("is_deleted") private Integer isDeleted; @ApiModelProperty(value = "其他参数") @TableField(exist = false) private Map param = new HashMap(); @ApiModelProperty(value = "类别名称") @TableField("title") private String title; @ApiModelProperty(value = "父ID") @TableField("parent_id") private Long parentId; @ApiModelProperty(value = "排序字段") @TableField("sort") private Integer sort; @ApiModelProperty(value = "是否包含子节点") @TableField(exist = false) private boolean hasChildren; }

解释：记住这个属性（private boolean hasChildren;）后面会讲它的作用。

(3)课程分类的控制层代码SubjectController.java @RestController @RequestMapping(value="/admin/vod/subject") //@CrossOrigin public class SubjectController { @Autowired private SubjectService subjectService; //课程分类列表 //懒加载，每次查询一层数据 @ApiOperation("课程分类列表") @GetMapping("getChildSubject/{id}") public Result getChildSubject(@PathVariable Long id) { List list = subjectService.selectSubjectList(id); return Result.ok(list); } }

以上代码注入的SubjectService关键代码selectSubjectList(id);

@Service public class SubjectServiceImpl extends ServiceImpl implements SubjectService { @Autowired private SubjectListener subjectListener; //课程分类列表 //懒加载，每次查询一层数据 @Override public List selectSubjectList(Long id) { //SELECT * FROM SUBJECT WHERE parent_id=0 QueryWrapper wrapper = new QueryWrapper(); wrapper.eq("parent_id",id); List subjectList = baseMapper.selectList(wrapper); //subjectList遍历，得到每个subject对象，判断是否有下一层数据，有hasChildren=true for (Subject subject:subjectList) { //获取subject的id值 Long subjectId = subject.getId(); //查询 boolean isChild = this.isChildren(subjectId); //封装到对象里面 subject.setHasChildren(isChild); } return subjectList; } //判断是否有下一层数据 private boolean isChildren(Long subjectId) { QueryWrapper wrapper = new QueryWrapper(); wrapper.eq("parent_id",subjectId); Integer count = baseMapper.selectCount(wrapper); // 1>0 true 0>0 false return count>0; } }

解释以上代码：但该selectSubjectList传入的参数是0时，即查询出所有的一级分类（比如后端开发、前端开发），并且遍历该一级分类判断是否有下一层数据，若有则给该subject实体类的hasChildren属性设置为true，反之为false（用于前端判断要不要显示那个下拉列表的小箭头）。

前端代码： import subjectApi from "@/api/vod/subject"; export default { data() { return { dialogImportVisible: false, list: [], //数据字典列表数组 }; }, created() { this.getSubList(0); }, methods: { //数据字典列表 getSubList(id) { subjectApi.getChildList(id).then((response) => { this.list = response.data; }); }, load(tree, treeNode, resolve) { subjectApi.getChildList(tree.id).then((response) => { resolve(response.data); }); }, }, };

解释：

（1）该代码中的下面部分，实现了页面渲染前直接查询出所有的一级分类（this.getSubList(0)），并将响应体中的data数据赋值给data中的list，从而显示一级分类数据。

created() { this.getSubList(0); }, methods: { //数据字典列表 getSubList(id) { subjectApi.getChildList(id).then((response) => { this.list = response.data; }); } }

（2）该代码中的下面部分，是使用了ElementUI提供的组件（代码解读没什么好说的，人家都给我们封装好了），大致意思是：该组件实现了懒加载lazy（a、hasChildren: ‘hasChildren’，表示当hasChildren为true则显示小箭头；:load=“load”，表示点击箭头后调用load方法加载该一级分类下的二级分类）

（3）该代码中的下面部分，功能是点击小箭头后调用后端接口获取该一级分类下的二级分类数据，resolve函数就是vue中实现路由懒加载的函数，本人对vue不精，需要了解更多自己去查询相关资料。

load(tree, treeNode, resolve) { subjectApi.getChildList(tree.id).then((response) => { resolve(response.data); }); }, 总结：

使用了ElementUI提供的组件，能为后端人员简单快速搭建一个好用的后台管理系统，这里只是其中一小部分。更多可以前往blibli搜索：“硅谷课堂项目”，学习更多知识，我只是做知识的归纳总结，希望能帮到你。

【本文地址】

两级分类以懒加载的方式展现树形数据

两级分类以懒加载的方式展现树形数据

今日新闻

推荐新闻