Springboot怎样返回给前端一个tree结构

最新推荐文章于 2023-06-09 09:01:56 发布

water-之

最新推荐文章于 2023-06-09 09:01:56 发布

阅读量722

点赞数 15

分类专栏： Springboot学习文章标签： spring boot 前端 java

本文链接：https://blog.youkuaiyun.com/justleavel/article/details/125584029

版权

Springboot学习专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种基于Java的实现方式，用于将数据库中的商品分类数据转换为树形结构，并通过DTO层实现前后端数据的传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：首先我们看一下数据库的表：

这里的pid就是代表他的父节点id，如果没有父节点，那么pid就是0，上面的表就可以看作是一个tree结构，那么我们怎样去将这个tree结构返回给前端呢？

2：首先写好数据库对应的实体类和Dto层：

package com.wyr.modules.example.domain;
import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;
import com.baomidou.mybatisplus.annotation.TableName;
import cn.hutool.core.bean.BeanUtil;
import cn.hutool.core.bean.copier.CopyOptions;
import javax.validation.constraints.*;
import java.sql.Timestamp;
import java.io.Serializable;

/**
 * @author jianyijun
 * @date 2022-07-02
 */
@Data
@TableName("store_category")
public class Category implements Serializable {

    /** 商品分类表ID */
    @TableId
    private Integer id;


    /** 父id */
    @NotNull
    private Integer pid;


    /** 分类名称 */
    @NotBlank
    private String cateName;


    /** 排序 */
    private Integer sort;


    /** 图标 */
    private String pic;


    /** 是否推荐 */
    private Integer isShow;


    /** 添加时间 */
    @TableField(fill= FieldFill.INSERT)
    private Timestamp createTime;


    /** 更新时间 */
    @TableField(fill= FieldFill.INSERT_UPDATE)
    private Timestamp updateTime;


    /** 删除状态 */
    private Integer isDel;


    public void copy(Category source){
        BeanUtil.copyProperties(source,this, CopyOptions.create().setIgnoreNullValue(true));
    }
}

Dto层：

package com.wyr.modules.example.service.dto;
import lombok.Data;
import java.sql.Timestamp;
import java.io.Serializable;
import java.util.List;

/**
 * @author jianyijun
 * @date 2022-07-02
 */
@Data
public class CategoryDto implements Serializable {

    /** 商品分类表ID */
    private Long id;

    /** 父id */
    private Long pid;

    /** 分类名称 */
    private String cateName;

    /** 排序 */
    private Integer sort;

    /** 图标 */
    private String pic;

    /** 是否推荐 */
    private Integer isShow;

    /** 添加时间 */
    private Timestamp createTime;

    /** 更新时间 */
    private Timestamp updateTime;

    /** 删除状态 */
    private Integer isDel;

    private List<CategoryDto> children;
}

这里注意一下Dto层多余的字段：`private List<CategoryDto> children;`，这个也就是一个自己的集合，代表自己的孩子

3：这里介绍一下什么是Dto层，以及一些区别：

(1) entity 里的每一个字段，与数据库相对应，
(2) vo 里的每一个字段，是和你前台 html 页面相对应，
(3) dto 这是用来转换从 entity 到 vo，或者从 vo 到 entity 的中间的东西。（DTO中拥有的字段应该是entity中或者是vo中的一个子集）

4:然后是controller层：

在这里插入图片描述

`ResponseEntity<Object>`不用管，是一个通用的返回数据封装类，然后中间那行就是最里面使用了QueryHelp工具，可以不写SQL语句进行条件查询，然后convert就是一个复制方法，可以类似于BeanUtils里面的copy等等，这就是先将查询到的list复制给Dto类，然后我们进入接下来的Service方法：buildTree：

5：业务层：

请添加图片描述

 /**
     * 构建分类树
     * @param categoryDtos 原始数据
     * @return
     */
    @Override
    public Map<String, Object> buildTree(List<CategoryDto> categoryDtos) {
        List<CategoryDto> trees = new ArrayList<>();
        Set<Long> ids = new HashSet<>();
        for (CategoryDto categoryDto :categoryDtos) {
            if (categoryDto.getPid() == 0) {
                trees.add(categoryDto);
            }
            for (CategoryDto it : categoryDtos) {
                if (it.getPid().equals(categoryDto.getId())) {
                    if (categoryDto.getChildren() == null) {
                        categoryDto.setChildren(new ArrayList<>());
                    }
                    categoryDto.getChildren().add(it);
                    ids.add(it.getId());
                }
            }

        }
        Map<String, Object> map = new HashMap<>(2);
        if (trees.size() == 0){
            trees = categoryDtos.stream().filter(s -> !ids.contains(s.getId())).collect(Collectors.toList());
        }
        map.put("content",trees);
        map.put("totalElements", categoryDtos.size());
        return map;
    }
}