SpringBoot+MyBatis实现级联选择器后端多层结构数据接口

已于 2022-05-15 17:59:33 修改
阅读量1.7k 收藏 15
点赞数 2
分类专栏： 前后端开发技术 文章标签： spring boot java 后端
于 2022-05-15 17:54:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42848737/article/details/124785123
版权

       级联选择器的应用相对广泛，以前端组件库ElementUI中的Cascader级联选择器为例，可对层级结构的数据集合进行查看并选择。本文使用SpringBoot+MyBatis框架，以“套娃式”继承的方式实现级联选择器后端数据接口，返回层级结构的数据集合。 

图1 级联选择器示例

1、数据库表结构

       所需数据库表结构如图2、图3、图4和图5所示，表示四层结构，其他更深层结构类似。

图2 factory表

图3 line表

图4 region表

图5 position表

       对应SQL创建语句如下：

-- ----------------------------
-- Table structure for factory
-- ----------------------------
DROP TABLE IF EXISTS `factory`;
CREATE TABLE `factory` (
  `id` int NOT NULL AUTO_INCREMENT,
  `factoryName` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=66 DEFAULT CHARSET=utf8mb3;
-- ----------------------------
-- Records of factory
-- ----------------------------
INSERT INTO `factory` VALUES ('1', '工厂A');
INSERT INTO `factory` VALUES ('2', '工厂B');
INSERT INTO `factory` VALUES ('3', '工厂C');

-- ----------------------------
-- Table structure for line
-- ----------------------------
DROP TABLE IF EXISTS `line`;
CREATE TABLE `line` (
  `id` int NOT NULL AUTO_INCREMENT,
  `factoryId` int NOT NULL,
  `lineName` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  PRIMARY KEY (`id`,`factoryId`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb3;
-- ----------------------------
-- Records of line
-- ----------------------------
INSERT INTO `line` VALUES ('1', '1', '生产线A1');
INSERT INTO `line` VALUES ('2', '1', '生产线A2');
INSERT INTO `line` VALUES ('3', '2', '生产线B1');

-- ----------------------------
-- Table structure for region
-- ----------------------------
DROP TABLE IF EXISTS `region`;
CREATE TABLE `region` (
  `id` int NOT NULL AUTO_INCREMENT,
  `lineId` int NOT NULL,
  `regionName` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  PRIMARY KEY (`id`,`lineId`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb3;
-- ----------------------------
-- Records of region
-- ----------------------------
INSERT INTO `region` VALUES ('1', '1', '区域A1-1');
INSERT INTO `region` VALUES ('2', '1', '区域A1-2');
INSERT INTO `region` VALUES ('3', '2', '区域A2-1');

-- ----------------------------
-- Table structure for position
-- ----------------------------
DROP TABLE IF EXISTS `position`;
CREATE TABLE `position` (
  `id` int NOT NULL AUTO_INCREMENT,
  `regionId` int NOT NULL,
  `positionName` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  PRIMARY KEY (`id`,`regionId`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb3;
-- ----------------------------
-- Records of position
-- ----------------------------
INSERT INTO `position` VALUES ('1', '1', '职位A1-1-1');
INSERT INTO `position` VALUES ('2', '1', '职位A1-1-2');
INSERT INTO `position` VALUES ('3', '2', '职位A1-2-1');

2、数据实体类“套娃式”继承

       父类NameId，声明String类型的name和id属性。

public class NameId implements Serializable {
    private static final long serialVersionUID = 1L;
    private String name;
    private String id;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    @Override
    public String toString() {
        return "NameId{" +
                "name='" + name + '\'' +
                ", id='" + id + '\'' +
                '}';
    }
}

       子类ChildrenNameId，继承父类NameId，并声明List<NameId>类型的childrenList属性。 

public class ChildrenNameId extends NameId implements Serializable {
    private static final long serialVersionUID = 1L;
    private List<NameId> childrenList;
    public List<NameId> getChildrenList() {
        return childrenList;
    }
    public void setChildrenList(List<NameId> childrenList) {
        this.childrenList = childrenList;
    }
    @Override
    public String toString() {
        return "ChildrenNameId{" +
                super.toString() +
                "childrenList=" + childrenList +
                '}';
    }
}

3、查询实现过程

       Dao

@Repository
public interface NameIdDao {
    public List<ChildrenNameId> getNameIdOfFL();

    public List<ChildrenNameId> getNameIdOfFLR();

    public List<ChildrenNameId> getNameIdOfFLRP();
}

       Mapper 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.xxx.dao.NameIdDao">
    <resultMap id="NameIdOfFLMap" type="com.xxx.bean.utils.ChildrenNameId">
        <result property="id" column="factoryId"/>
        <result property="name" column="factoryName"/>
        <collection property="childrenList" javaType="ArrayList" ofType="com.xxx.bean.utils.NameId">
            <!-- column对应查询返回的列，property对应返回的对象的属性-->
            <result property="id" column="lineId"/>
            <result property="name" column="lineName"/>
        </collection>
    </resultMap>
    <select id="getNameIdOfFL" resultMap="NameIdOfFLMap">
        SELECT f.id factoryId, f.factoryName factoryName, 
               l.id lineId, l.lineName lineName 
        from
            factory f
                left join
            line l
            on f.id = l.factoryId
        order by f.id, l.id
    </select>

    <resultMap id="NameIdOfFLRMap" type="com.xxx.bean.utils.ChildrenNameId">
        <result property="id" column="factoryId"/>
        <result property="name" column="factoryName"/>
        <collection property="childrenList" javaType="ArrayList" ofType="com.xxx.bean.utils.ChildrenNameId">
            <result property="id" column="lineId"/>
            <result property="name" column="lineName"/>
            <collection property="childrenList" javaType="ArrayList" ofType="com.xxx.bean.utils.NameId">
                <result property="id" column="regionId"/>
                <result property="name" column="regionName"/>
            </collection>
        </collection>
    </resultMap>
    <select id="getNameIdOfFLR" resultMap="NameIdOfFLRMap">
        SELECT f.id factoryId, f.factoryName factoryName,
               l.id lineId, l.lineName lineName,
               r.id regionId, r.regionName regionName
        from
            factory f
                left join
            line l
            on f.id = l.factoryId
                left join
            region r
            on l.id = r.lineId
        order by f.id, l.id, r.id
    </select>
    
    <resultMap id="NameIdOfFLRPMap" type="com.xxx.bean.utils.ChildrenNameId">
        <result property="id" column="factoryId"/>
        <result property="name" column="factoryName"/>
        <collection property="childrenList" javaType="ArrayList" ofType="com.xxx.bean.utils.ChildrenNameId">
            <result property="id" column="lineId"/>
            <result property="name" column="lineName"/>
            <collection property="childrenList" javaType="ArrayList" ofType="com.xxx.bean.utils.ChildrenNameId">              
                <result property="id" column="regionId"/>
                <result property="name" column="regionName"/>
                <collection property="childrenList" javaType="ArrayList" ofType="com.xxx.bean.utils.NameId">
                    <result property="id" column="positionId"/>
                    <result property="name" column="positionName"/>
                </collection>
            </collection>
        </collection>
    </resultMap>
    <select id="getNameIdOfFLRP" resultMap="NameIdOfFLRPMap">
        SELECT f.id factoryId, f.factoryName factoryName,
               l.id lineId, l.lineName lineName,
               r.id regionId, r.regionName regionName,
               p.id positionId, p.positionName positionName
        from
            factory f
                left join
            line l
            on f.id = l.factoryId
                left join
            region r
            on l.id = r.lineId
                left join
            position p
            on r.id = p.regionId
        order by f.id, l.id, r.id, p.id
    </select>
</mapper>

        Controller

@RequestMapping("/common")
@RestController
public class NameIdController {
    private static Map<String, Object> map = new HashMap<>();
    @Autowired
    private NameIdDao nameIdDao;
    
    @GetMapping("/getNameIdOfFL")
    public Result<?> getNameIdOfFL(){
        List<ChildrenNameId> nameIdList = nameIdDao.getNameIdOfFL();
        map.clear();
        map.put("nameIdList",nameIdList);
        return Result.success(map,"请求成功！");
    }

    @GetMapping("/getNameIdOfFLR")
    public Result<?> getNameIdOfFLR(){
        List<ChildrenNameId> nameIdList = nameIdDao.getNameIdOfFLR();
        map.clear();
        map.put("nameIdList",nameIdList);
        return Result.success(map,"请求成功！");
    }

    @GetMapping("/getNameIdOfFLRP")
    public Result<?> getNameIdOfFLRP(){
        List<ChildrenNameId> nameIdList = nameIdDao.getNameIdOfFLRP();
        map.clear();
        map.put("nameIdList",nameIdList);
        return Result.success(map,"请求成功！");
    }
}

4、接口请求响应结果

        http://127.0.0.1:8888/common/getNameIdOfFL，两层结构接口请求响应结果如下：

{
    "code": "200",
    "msg": "请求成功！",
    "data": {
        "nameIdList": [
            {
                "name": "工厂A",
                "id": "1",
                "childrenList": [
                    {
                        "name": "生产线A1",
                        "id": "1"
                    },
                    {
                        "name": "生产线A2",
                        "id": "2"
                    }
                ]
            },
            {
                "name": "工厂B",
                "id": "2",
                "childrenList": [
                    {
                        "name": "生产线B1",
                        "id": "3"
                    }
                ]
            },
            {
                "name": "工厂C",
                "id": "3",
                "childrenList": []
            }
        ]
    }
}

        http://127.0.0.1:8888/common/getNameIdOfFLR，三层结构接口请求响应结果如下：

{
    "code": "200",
    "msg": "请求成功！",
    "data": {
        "nameIdList": [
            {
                "name": "工厂A",
                "id": "1",
                "childrenList": [
                    {
                        "name": "生产线A1",
                        "id": "1",
                        "childrenList": [
                            {
                                "name": "区域A1-1",
                                "id": "1"
                            },
                            {
                                "name": "区域A1-2",
                                "id": "2"
                            }
                        ]
                    },
                    {
                        "name": "生产线A2",
                        "id": "2",
                        "childrenList": [
                            {
                                "name": "区域A2-1",
                                "id": "3"
                            }
                        ]
                    }
                ]
            },
            {
                "name": "工厂B",
                "id": "2",
                "childrenList": [
                    {
                        "name": "生产线B1",
                        "id": "3",
                        "childrenList": []
                    }
                ]
            },
            {
                "name": "工厂C",
                "id": "3",
                "childrenList": []
            }
        ]
    }
}

        http://127.0.0.1:8888/common/getNameIdOfFLRP，四层结构接口请求响应结果如下： 

{
    "code": "200",
    "msg": "请求成功！",
    "data": {
        "nameIdList": [
            {
                "name": "工厂A",
                "id": "1",
                "childrenList": [
                    {
                        "name": "生产线A1",
                        "id": "1",
                        "childrenList": [
                            {
                                "name": "区域A1-1",
                                "id": "1",
                                "childrenList": [
                                    {
                                        "name": "职位A1-1-1",
                                        "id": "1"
                                    },
                                    {
                                        "name": "职位A1-1-2",
                                        "id": "2"
                                    }
                                ]
                            },
                            {
                                "name": "区域A1-2",
                                "id": "2",
                                "childrenList": [
                                    {
                                        "name": "职位A1-2-1",
                                        "id": "3"
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "name": "生产线A2",
                        "id": "2",
                        "childrenList": [
                            {
                                "name": "区域A2-1",
                                "id": "3",
                                "childrenList": []
                            }
                        ]
                    }
                ]
            },
            {
                "name": "工厂B",
                "id": "2",
                "childrenList": [
                    {
                        "name": "生产线B1",
                        "id": "3",
                        "childrenList": []
                    }
                ]
            },
            {
                "name": "工厂C",
                "id": "3",
                "childrenList": []
            }
        ]
    }
}

5、总结

        本文详细阐述了两层、三层和四层结构数据集合一对多的查询过程，其他更深层结构的查询方式同上类似。因作者技术能力有限，文中不足之处还望各位大佬直抒己见、批评指正，反馈邮箱：yourshare@foxmail.com。 

YourShare
关注
  • 2
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
springboot+mybatis-plus+jwt+redis的简易后端框架
04-10
1.快速搭建springboot+mybatis-plus代码自动生成器的后端框架https://blog.csdn.net/pengpm/article/details/124047191?spm=1001.2014.3001.5501 2.springboot+JWT+redis实现token身份令牌验证（附代码）（超详细） ...
级联选择器查询（后端实现）
weixin_42030357的博客
08-04 3472
前端需要的数据类型如下： 数据库中的表如下： 需要查询后的结果如下： 实体类的定义： @Data @ToString @Entity @Table(name="category") @GenericGenerator(name = "jpa-assigned", strategy = "assigned") //@GenericGenerator(name = "jpa-uuid", str...
elementUI级联选项器
weixin_52234593的博客
06-11 1147
elementUI级联选项器的数据处理
SpringBoot3 + Vue3 + Element-Plus + TS 实现动态二级菜单级联选择器
最新发布
一名全栈小白的博客
04-21 576
SpringBoot3 + Vue3 + Element-Plus + TS 实现动态二级菜单级联选择器
java 四级联动_四级联动
weixin_34462016的博客
02-13 501
纯JS省市区联动/*** jquery.citys.js 1.0* http://jquerywidget.com*/;(function (factory) {if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) {// AMD或CMDdefine([ "jquery"...
java接口返回el-cascader级联所需格式的返回值
feixue8823的博客
04-25 1005
查询出全部数据放到List，然后利用递归转换成el-cascader级联所需格式的返回值。
Vue脚手架 Element Ui Spring Boot 连接数据库通过级联选择器 实现组合条件查询（父子集合表不同，字段不同，label值，value值的正常显示，全是干货，）
qq_60614034的博客
03-06 1329
本篇主要讲解通过级联选择器，实现数据库数据的组合条件查询。先上图，符合你们心目中预期的功能在看下去。重点解决父子集合间，因为字段名不同，label值，value值无法正常显示的问题最后再来讲讲总体操作流程1.勾选级联选择器的楼栋单元数据，将楼栋id，单元id分别存入data中2.点击搜索按钮3.调用 搜索房屋功能，执行组合分页查询操作。4.将返回的房屋集合信息存入data中，显示到表格中。
Android+Java后端（Springboot+Mybatis）小商店项目源码+数据库+项目说明.zip
12-20
主要实现一个商城的下单、购物车、支付等基本功能，熟悉后端的开发过程，因为自己做Android的，然后想学一些后端的技术，所以Android端和后端(Springboot，Mybatis)一起写了。Android使用基本的MVC模式，尽可能的写...
基于SpringBoot + MyBatis + Layui的后台权限管理系统.zip
07-08
基于SpringBoot + MyBatis + Layui的后台权限管理系统。代码简洁易懂、界面美观大方，内部封装了权限管理系统常用的全部功能，可直接作为快速开发JavaWeb项目的脚手架使用。 基于SpringBoot + MyBatis + Layui的...
基于Springboot+MyBatis-Plus实现多租户动态数据源模式源码.zip
12-20
基于Springboot+MyBatis-Plus实现多租户动态数据源模式源码.zip 基于Springboot+MyBatis-Plus实现多租户动态数据源模式源码.zip 基于Springboot+MyBatis-Plus实现多租户动态数据源模式源码.zip 【备注】 主要针对...
基于SpringBoot+MyBatis前后端开发的博客网站项目源码.zip
01-06
1、基于SpringBoot+MyBatis前后端开发的博客网站项目源码.zip 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料...
Java后端+Elementui前端，实现树形JSON数据+级联选择器
qq_20683411的博客
06-18 963
ElementUI的级联选择器的代码实现，前端+后端
（Jquery使用（javascript库）+ ajax）前端 + (jdbc + servlet + javaee)后端实现简单的级联查询
weixin_53475254的博客
03-19 1557
文章目录0.简介1. DOM 对象和 jQuery 对象1）DOM 对象转换 jQuery 对象2）jQuery 对象转为 DOM 对象2. 选择器(和CSS的一样)1）基本选择器2）表单选择器3. 过滤器1）基本过滤器2）表单过滤器4. jQuery对象的方法什么是父标签和子标签5. 绑定事件1） 属性绑定2）on(事件，处理函数)绑定时间ajax响应 0.简介 jQuery 是一款跨主流浏览器的 JavaScript 库，封装了 JavaScript 相关方法调用，简化JavaScript 对 HTML
Java4层级联怎么做_[Java教程]通过递归算法完成树的级联勾选的一般思路
weixin_33181210的博客
02-26 474
[Java教程]通过递归算法完成树的级联勾选的一般思路0 2016-09-14 19:00:08文章版权由作者李晓晖和博客园共有，若转载请于明显处标明出处：http://www.cnblogs.com/naaoveGIS/1.背景在某个项目中，发现当tree上加上checkbox后，初始化该树时会特别慢。现场树上的节点最深有三层，节点个数总和有200多个。经排查，为该tree的参数中...
记一次后端开发者，如何完成前端下拉框三级联动功能？
diandian9517的博客
11-22 510
前言 下拉框三级联动这个对于我们大家都很常见，经常在注册一些信息的时候，需要选取省市县等信息，我需要完成的就是这个功能。 但是无奈这个项目没有前端开发，而我是一个~专注夹克20年~咦，劲霸男装？哦~不，是专注后端开发5年~早期学习的jquery，还能记起的常用方法不多了~就知道$("#id")~~~ 但是你要知道一个程序员的可（谜）怕（之）之（自）处（信）是，只要你给我一根网线，我...
基于mybaties-plus的关于条件选择器的工具类
chuaofanshuangsheng的博客
08-02 469
利用反射自动生成条件选择器的选择字段
Mybatis三大执行器介绍
共勉
11-17 2729
基于3.5.10版本的Mybatis源码，搞清楚SimpleExecutor、BatchExecutor、ReuseExecutor三大执行器之间区别，以及平时开发中要如何使用
cascader级联选择器数据处理（返回给后端的数据以及数据回填）
VIVI_CSDN01的博客
02-27 3310
cascader级联选择器处理数据（返回给后端的数据以及数据回填）
一种级联前后端实现方案
lonelymanontheway的博客
01-15 867
级联选择前后端实现方案。
基于SpringBoot+Mybatis微信小程序软件学院会议室管理系统源码数据库.docx
02-29
Mybatis作为持久层框架，与SpringBoot结合使用，能够灵活地执行SQL语句，实现数据的增删查改操作。Mybatis的映射文件和接口方法可以精确控制每一个SQL操作，确保数据操作的安全性和效率。 在前端，系统使用微信小...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值