单表树形结构查询以及数据展示

业务需求

点击一个按钮，以树形结构展示某一个地方下面的人员分布

使用场景

设计的某一个数据库单表中没有父ID这种类似的，想配合某一些前端框架实现树形结构展示

部分环境

我使用的前端框架是1.7.8版本的Ant Design of Vue。后端是基本的Springboot+dubbon+mvc架构模式。数据库mysql。以上只是部分环境，其实与你实现这个没太大关系。

最终效果图

实体类

public class ApiResult { //最终返回给前端的集合
private static final ObjectMapper MAPPER = new ObjectMapper();
private Boolean success;
private String returnCode;
private Object data;
private String message;
}
public class AreaTreeData implements Serializable { //树形结构数据，配合前端Tree 树形控件即可展示
private String title; //标题
private String key; //一般是ID
private String type; //类型，也可以当作标题或者ID。根据需求变化
private List children; //Children

后端控制层

 @RequestMapping("/queryArea")
    public ApiResult queryArea() {
       List<AreaTreeData> tree = caseUrbanService.queryArea();
        return ApiResult.ok(tree);
    }

业务层

    /**
     * @Author: OUO
     * @DateTime: 2021/8/28 15:52
     * @Description: 查询区域社区树形结构数据
     */
    @Override
    public List<AreaTreeData> queryArea() {
        List<AreaTreeData> tree = new ArrayList<>();           //创建新的空数组树形集合
        AreaTreeData root = new AreaTreeData();                //创建一个实例对象
        root.setTitle("南阳县");                                //设置标题
        root.setKey("-1");                                     //设置key其实也算ID值(父ID值)
        root.setType("root");                                  //设置type类型属性

        List<AreaTreeData> areaTreeData = caseUrbanMapper.queryArea();  //核心代码
        System.out.println(areaTreeData);                      //打印输出
        root.setChildren(areaTreeData);                        //设置Children属性
        tree.add(root);                                        //设置假设得最高等级父类
        return tree;                                           //返回给前台渲染树形结构
    }
}

数据持久化层

<resultMap id="AreaResultMap" type="com.icms.page.AreaTreeData">
        <result  property="title" column="title" />
        <result  property="key" column="key" />
        <result  property="type" column="type" />
        <collection property="children" column="key" select="selectUserByArea" javaType="list" />
    </resultMap>
    
    <!--先查出来所有区域-->
    <select id="queryArea" resultMap="AreaResultMap">
        select  distinct  region_type  as title,region_type as `key` ,'area' as type from    ts_user where region_type != ''
    </select>

    <!---通过区域查出来人-->
    <select id="selectUserByArea" parameterType="string" resultType="com.icms.page.AreaTreeData">
        select  realname  as title,user_id as `key` ,'user' as type from ts_user where region_type= #{area}
    </select>

结束感言

这是我第一次写文章，上面代码注释已经把大部分思路讲解了，数据库那张也就是一个用户表，如有遗漏或疑问欢迎提出，