使用Java实现树形下拉菜单：从零开始到完全掌握

本篇博客将带领读者通过Java代码实现一个树形下拉菜单，并在此过程中详细讲解其设计思路和实现细节。无论你是初学者还是经验丰富的开发者，都能从中获得启发。完整的代码示例包括详细的注释，帮助你快速上手并掌握实现逻辑。树形下拉菜单是一种UI组件，适用于展示多层级的分类数据。- 一级分类- 二级分类- 三级分类使用场景权限管理：多级角色权限展示。分类管理：商品分类、文章分类等多层结构。其他应用：如数据组织

CSDN北京话事人:默语

612人浏览 · 2024-11-21 08:30:00

CSDN北京话事人:默语 · 2024-11-21 08:30:00 发布

使用Java实现树形下拉菜单：从零开始到完全掌握

使用Java实现树形下拉菜单：从零开始到完全掌握

在这里插入图片描述

博主默语带您 Go to New World.
✍ 个人主页—— 默语的博客👦🏻 优秀内容
 《java 面试题大全》
《java 专栏》
《idea技术专区》
《spring boot 技术专区》
《MyBatis从入门到精通》
《23种设计模式》
《经典算法学习》
《spring 学习》
《MYSQL从入门到精通》数据库是开发者必会基础之一~
🍩惟余辈才疏学浅，临摹之作或有不妥之处，还请读者海涵指正。☕🍭
🪁 吾期望此文有资助于尔，即使粗浅难及深广，亦备添少许微薄之助。苟未尽善尽美，敬请批评指正，以资改进。！💻⌨

默语是谁？

大家好，我是默语，别名默语博主，擅长的技术领域包括Java、运维和人工智能。我的技术背景扎实，涵盖了从后端开发到前端框架的各个方面，特别是在Java 性能优化、多线程编程、算法优化等领域有深厚造诣。

目前，我活跃在CSDN、掘金、阿里云和 51CTO等平台，全网拥有超过10万的粉丝，总阅读量超过1400 万。统一 IP 名称为默语或者默语博主。我是 CSDN 博客专家、阿里云专家博主和掘金博客专家，曾获博客专家、优秀社区主理人等多项荣誉，并在 2023 年度博客之星评选中名列前 50。我还是 Java 高级工程师、自媒体博主，北京城市开发者社区的主理人，拥有丰富的项目开发经验和产品设计能力。希望通过我的分享，帮助大家更好地了解和使用各类技术产品，在不断的学习过程中，可以帮助到更多的人，结交更多的朋友.

我的博客内容涵盖广泛，主要分享技术教程、Bug解决方案、开发工具使用、前沿科技资讯、产品评测与使用体验。我特别关注云服务产品评测、AI 产品对比、开发板性能测试以及技术报告，同时也会提供产品优缺点分析、横向对比，并分享技术沙龙与行业大会的参会体验。我的目标是为读者提供有深度、有实用价值的技术洞察与分析。

好的！以下是进一步优化和完善的版本，包含详细注释，更加清晰的模块划分，及进一步优化的代码实现：

使用Java实现树形下拉菜单：从零开始到完全掌握

作者：默语

摘要

本篇博客将带领读者通过Java代码实现一个树形下拉菜单，并在此过程中详细讲解其设计思路和实现细节。无论你是初学者还是经验丰富的开发者，都能从中获得启发。完整的代码示例包括详细的注释，帮助你快速上手并掌握实现逻辑。

引言

什么是树形下拉菜单？

树形下拉菜单是一种UI组件，适用于展示多层级的分类数据。例如：

- 一级分类
    - 二级分类
        - 三级分类

使用场景：

权限管理：多级角色权限展示。
分类管理：商品分类、文章分类等多层结构。
其他应用：如数据组织、结构化展示等。

本文目标

我们将实现一个简单、清晰、易扩展的树形下拉菜单功能，采用Spring Boot作为框架，搭配H2数据库和Thymeleaf模板引擎展示结果。

正文

1. 项目结构设计

优化后的模块化设计如下：

实体类：定义分类数据的结构。
数据访问类（DAO）：负责数据库交互，操作分类数据。
业务逻辑类（Service）：处理树形结构的生成逻辑。
控制器类（Controller）：提供API接口，向前端返回数据。
工具类：封装通用工具。
异常处理类：捕获和处理可能发生的异常。
配置类：负责项目和数据库配置。

2. 完整代码实现

2.1 实体类：`Category`

用于描述分类数据的模型。

package com.example.tree.model;

import java.util.List;

/**
 * 实体类：Category
 * 描述分类数据，包括父子层级关系
 */
public class Category {
    private Long id;             // 分类ID
    private String name;         // 分类名称
    private Long parentId;       // 父分类ID
    private List<Category> children; // 子分类列表

    // Getters 和 Setters
    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Long getParentId() {
        return parentId;
    }

    public void setParentId(Long parentId) {
        this.parentId = parentId;
    }

    public List<Category> getChildren() {
        return children;
    }

    public void setChildren(List<Category> children) {
        this.children = children;
    }
}

2.2 数据访问类：`CategoryRepository`

直接与数据库交互。

package com.example.tree.dao;

import com.example.tree.model.Category;
import org.springframework.stereotype.Repository;

import java.util.ArrayList;
import java.util.List;

/**
 * 数据访问类：模拟数据库操作
 */
@Repository
public class CategoryRepository {
    /**
     * 模拟获取所有分类数据
     *
     * @return 分类数据列表
     */
    public List<Category> findAll() {
        List<Category> categories = new ArrayList<>();
        
        // 示例数据
        categories.add(new Category() {{
            setId(1L); setName("一级分类A"); setParentId(0L);
        }});
        categories.add(new Category() {{
            setId(2L); setName("二级分类A1"); setParentId(1L);
        }});
        categories.add(new Category() {{
            setId(3L); setName("三级分类A1-1"); setParentId(2L);
        }});
        return categories;
    }
}

2.3 业务逻辑类：`CategoryService`

负责构建树形结构。

package com.example.tree.service;

import com.example.tree.dao.CategoryRepository;
import com.example.tree.model.Category;
import org.springframework.stereotype.Service;

import java.util.ArrayList;
import java.util.List;

/**
 * 业务逻辑类：处理分类树形结构生成
 */
@Service
public class CategoryService {

    private final CategoryRepository categoryRepository;

    public CategoryService(CategoryRepository categoryRepository) {
        this.categoryRepository = categoryRepository;
    }

    /**
     * 获取树形结构分类数据
     *
     * @return 树形分类数据
     */
    public List<Category> getTreeStructure() {
        List<Category> categories = categoryRepository.findAll();
        return buildTree(categories, 0L);
    }

    /**
     * 递归构建树形结构
     *
     * @param categories 所有分类数据
     * @param parentId   当前父分类ID
     * @return 子分类树
     */
    private List<Category> buildTree(List<Category> categories, Long parentId) {
        List<Category> tree = new ArrayList<>();
        for (Category category : categories) {
            if (category.getParentId().equals(parentId)) {
                category.setChildren(buildTree(categories, category.getId()));
                tree.add(category);
            }
        }
        return tree;
    }
}

2.4 控制器类：`CategoryController`

暴露RESTful接口。

package com.example.tree.controller;

import com.example.tree.model.Category;
import com.example.tree.service.CategoryService;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * 控制器类：处理分类相关请求
 */
@RestController
public class CategoryController {

    private final CategoryService categoryService;

    public CategoryController(CategoryService categoryService) {
        this.categoryService = categoryService;
    }

    /**
     * 获取树形分类数据接口
     *
     * @return 树形分类列表
     */
    @GetMapping("/categories")
    public List<Category> getCategories() {
        return categoryService.getTreeStructure();
    }
}

2.5 前端模板：`Thymeleaf`实现

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>树形下拉菜单</title>
</head>
<body>
    <h1>树形下拉菜单</h1>
    <select id="treeDropdown">
        <option th:each="category : ${categories}" 
                th:value="${category.id}" 
                th:text="${category.name}">
        </option>
    </select>
</body>
</html>