文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

使用 Spring Boot3.3 与 MyBatis-Plus 联合实现多层次树结构的异步加载策略

2024-11-29 19:24

关注

什么是多层次树结构?

多层次树结构是许多应用场景中的常见需求,尤其是在分类管理、组织结构、权限管理等场景中。例如,电商平台中的商品分类可以有多个层级,从根类别到具体商品的详细分类,形成一个递归的树形结构。为了有效管理和展示这些数据,通常需要对其进行异步加载,即在用户需要时才加载具体的层级数据,而不是一次性加载所有数据。这不仅能够减少初始数据加载的时间,还可以提高用户体验。

异步加载的意义

在处理大型树结构时,性能是一个非常重要的考量因素。一次性加载所有层级的数据不仅可能会导致数据传输过大,还会引发前端页面的性能问题。异步加载策略通过在用户展开某个节点时,动态加载该节点下的子节点数据,有效地减少了数据传输量,提高了页面响应速度。这种方法尤其适用于需要处理大量数据并且层级较多的场景。

技术选型与实现思路

为了实现上述功能,我们将采用 Spring Boot 构建后端 API,使用 MyBatis-Plus 处理数据库操作,并通过前端的 Thymeleaf 模板、Bootstrap 进行 UI 展示。具体实现步骤包括:

  1. 数据库设计: 创建一个 category 表,包含 id、parent_id、name 等字段,用于存储分类的层次结构。
  2. 后端实现: 使用 Spring Boot 构建 RESTful API,通过 MyBatis-Plus 进行数据查询。后端 API 将支持根据 parent_id 查询子节点数据,提供给前端进行异步加载。
  3. 前端实现: 使用 Thymeleaf 模板引擎生成 HTML 页面,并通过 Bootstrap 提供的组件美化页面。通过 JavaScript 实现异步加载功能,当用户点击某个分类节点时,发送请求加载其子分类数据,并动态渲染到页面上。
  4. 代码示例与配置: 文章中将提供完整的代码示例,包括 Spring Boot 项目配置、MyBatis-Plus 的 Mapper 和 Service 实现,以及前端 HTML、JavaScript 代码,帮助开发者快速理解和实现多层次树结构的异步加载。

本篇文章将深入讲解如何使用 Spring Boot3.3 和 MyBatis-Plus 联合实现多层次树结构的异步加载,并提供完整的代码示例。

运行效果:

图片

若想获取项目完整代码以及其他文章的项目源码,且在代码编写时遇到问题需要咨询交流,欢迎加入下方的知识星球。

项目结构

我们将构建一个Spring Boot项目,使用MyBatis-Plus进行数据库操作,并结合Thymeleaf模板引擎在前端展示树结构。以下是项目的基本结构:

springboot-tree-async
├── src
│   ├── main
│   │   ├── java
│   │   │   └── com.icoderoad.treeasync
│   │   │       ├── controller
│   │   │       ├── entity
│   │   │       ├── mapper
│   │   │       ├── service
│   │   │       └── serviceImpl
│   │   ├── resources
│   │   │   ├── templates
│   │   │   ├── application.yml
│   └── test
│       └── java
│           └── com.icoderoad.treeasync
└── pom.xml

项目配置(pom.xml)

首先,我们需要配置pom.xml,包括Spring Boot和MyBatis-Plus的依赖:



	4.0.0
	
		org.springframework.boot
		spring-boot-starter-parent
		3.3.3
		 
	
	com.icoderoad
	treeasync
	0.0.1-SNAPSHOT
	treeasync
	Demo project for Spring Boot
	
	
		17
		 3.5.7
        3.0.3
	
	
		
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
        
        
            org.projectlombok
            lombok
            true
        
        
	        com.baomidou
	        mybatis-plus-boot-starter
	        ${mybatis-plus-boot-starter.version}
	    
	   
	     
            org.mybatis
            mybatis-spring
            ${mybatis-spring.version}
      	
        
        
            com.mysql
            mysql-connector-j
            runtime
        
	

	
		
			
				org.springframework.boot
				spring-boot-maven-plugin
			
		
	

配置文件(application.yml)

接下来,我们配置application.yml,指定数据源及MyBatis-Plus的配置。

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/tree_db?useUnicode=true&characterEncoding=UTF-8&serverTimeznotallow=UTC
    username: root
    password: root
    driver-class-name: com.mysql.cj.jdbc.Driver

mybatis-plus:
  mapper-locations: classpath:/mapper/*.xml
  global-config:
    db-config:
      id-type: auto

实体类与Mapper接口

我们使用一个简单的Category实体来表示树结构中的节点:

package com.icoderoad.treeasync.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

@Data
@TableName("category")
public class Category {
    @TableId(type = IdType.AUTO)
    private Long id;
    private Long parentId;
    private String name;
}

CategoryMapper接口定义了数据库操作:

package com.icoderoad.treeasync.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.icoderoad.treeasync.entity.Category;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface CategoryMapper extends BaseMapper {
}

Service层

在Service层,我们实现了获取树结构节点的逻辑:

package com.icoderoad.treeasync.service;

import com.icoderoad.treeasync.entity.Category;
import com.baomidou.mybatisplus.extension.service.IService;

import java.util.List;

public interface CategoryService extends IService {
    List getChildren(Long parentId);
}


package com.icoderoad.treeasync.service.impl;

import com.icoderoad.treeasync.entity.Category;
import com.icoderoad.treeasync.mapper.CategoryMapper;
import com.icoderoad.treeasync.service.CategoryService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class CategoryServiceImpl extends ServiceImpl implements CategoryService {

    @Override
    public List getChildren(Long parentId) {
        return lambdaQuery().eq(Category::getParentId, parentId).list();
    }
}

控制器

控制器用来处理前端的异步请求:

package com.icoderoad.treeasync.controller;

import com.icoderoad.treeasync.entity.Category;
import com.icoderoad.treeasync.service.CategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/category")
public class CategoryController {

    @Autowired
    private CategoryService categoryService;

    @GetMapping("/children/{parentId}")
    public List getChildren(@PathVariable Long parentId) {
        return categoryService.getChildren(parentId);
    }
}

前端页面与异步加载实现

前端使用Thymeleaf模板结合Bootstrap和JavaScript实现树结构的展示与异步加载:

在 src/main/resources/templates 目录下创建 index.html 模板文件。




    
    
    分类树结构
    
    
    


分类树结构

数据库结构

数据库表category的SQL DDL语句如下:

CREATE TABLE `category` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `parent_id` bigint DEFAULT NULL,
  `name` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

初始化分类表数据:

-- 插入第一层数据(根节点)
INSERT INTO category (parent_id, name) VALUES (0, '电子产品');
INSERT INTO category (parent_id, name) VALUES (0, '家用电器');
INSERT INTO category (parent_id, name) VALUES (0, '时尚服饰');

-- 插入第二层数据
INSERT INTO category (parent_id, name) VALUES (1, '手机');
INSERT INTO category (parent_id, name) VALUES (1, '笔记本电脑');
INSERT INTO category (parent_id, name) VALUES (2, '冰箱');
INSERT INTO category (parent_id, name) VALUES (2, '洗衣机');
INSERT INTO category (parent_id, name) VALUES (3, '男装');
INSERT INTO category (parent_id, name) VALUES (3, '女装');

-- 插入第三层数据
INSERT INTO category (parent_id, name) VALUES (4, '智能手机');
INSERT INTO category (parent_id, name) VALUES (4, '功能手机');
INSERT INTO category (parent_id, name) VALUES (5, '游戏笔记本');
INSERT INTO category (parent_id, name) VALUES (5, '超极本');
INSERT INTO category (parent_id, name) VALUES (6, '双门冰箱');
INSERT INTO category (parent_id, name) VALUES (6, '单门冰箱');
INSERT INTO category (parent_id, name) VALUES (7, '滚筒洗衣机');
INSERT INTO category (parent_id, name) VALUES (7, '波轮洗衣机');
INSERT INTO category (parent_id, name) VALUES (8, '休闲装');
INSERT INTO category (parent_id, name) VALUES (8, '正装');
INSERT INTO category (parent_id, name) VALUES (9, '连衣裙');
INSERT INTO category (parent_id, name) VALUES (9, '上衣');

-- 插入第四层数据
INSERT INTO category (parent_id, name) VALUES (10, '安卓手机');
INSERT INTO category (parent_id, name) VALUES (10, '苹果手机');
INSERT INTO category (parent_id, name) VALUES (13, '变形笔记本');
INSERT INTO category (parent_id, name) VALUES (13, '传统笔记本');
INSERT INTO category (parent_id, name) VALUES (17, '办公室连衣裙');
INSERT INTO category (parent_id, name) VALUES (17, '休闲连衣裙');

总结

本文介绍了如何使用Spring Boot结合MyBatis-Plus实现多层次树结构的异步加载策略。我们通过一个简单的分类树示例展示了如何在前端逐步加载节点,避免一次性加载大量数据带来的性能问题。希望通过这篇文章,您能够对Spring Boot和MyBatis-Plus的联合使用有更深入的理解,并能够将其应用到实际项目中。

来源:路条编程内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯