Thymeleaf动态菜单渲染：程序员的进阶指南

言

在现代Web开发中，动态生成的菜单不仅能够提升用户体验，还能简化应用程序的维护工作。Thymeleaf作为一款流行的服务器端Java模板引擎，提供了丰富的标签和表达式语法，使得动态内容的生成变得简单而高效。本文将深入解析如何使用Thymeleaf来创建动态菜单，并通过代码示例来演示其实际应用。

一、Thymeleaf简介

Thymeleaf是一个用于Web和独立环境的现代服务器端Java模板引擎。它支持HTML、XML、JSF和Velocity模板，并且可以很好地与Spring框架集成。Thymeleaf的一大特点就是能够处理静态和动态内容，这意味着即使在没有后端数据的情况下，模板仍然能够正确显示。

二、动态菜单的实现原理

在Web应用中，动态菜单通常是从后端获取数据，然后在前端根据这些数据动态生成菜单结构。Thymeleaf通过其特有的语法，可以轻松地将后端数据绑定到HTML元素上，从而实现动态内容的填充。

三、代码示例

假设我们有一个简单的JavaBean代表菜单项：

public class MenuItem {
    private String name;
    private String url;
    private List<MenuItem> children;

    // 省略构造函数、getter和setter...
}

后端控制器将返回一个菜单列表：

@GetMapping("/menu")
public List<MenuItem> getMenuList() {
    // 假设这里从数据库或缓存中获取菜单数据
    return menuService.getAllMenus();
}

在Thymeleaf模板中，我们可以使用th:each和th:if标签来遍历菜单项，并根据条件渲染菜单结构：

<!-- index.html -->
<ul th:each="item : ${menuList}">
    <li>
        <a th:href="${item.url}" th:text="${item.name}"></a>
        <!-- 如果有子菜单，递归渲染 -->
        <ul th:if="${!#lists.isEmpty(item.children)}">
            <li th:each="child : ${item.children}">
                <a th:href="${child.url}" th:text="${child.name}"></a>
            </li>
        </ul>
    </li>
</ul>

四、源码解析

在上述代码中，th:each用于迭代menuList中的每一项，th:href和th:text分别用于设置链接的URL和显示的文本。当item.children不为空时，会进一步渲染子菜单。

五、优化技巧

性能优化：避免在模板中进行复杂的计算或数据库查询，这些应该在后端完成。
可读性：使用有意义的变量名和清晰的逻辑结构，提高模板的可读性和可维护性。
国际化：使用Thymeleaf的国际化支持，使菜单项名称能够根据用户语言偏好动态变化。

结语

通过本文的学习，你已经掌握了如何使用Thymeleaf来创建动态菜单的基本方法。动态菜单不仅能够提高Web应用的灵活性，还能显著提升用户体验。在实际项目中，可以根据具体需求进一步优化和扩展菜单功能，比如加入搜索、过滤和排序等功能，让菜单更加智能和人性化。

#头条创作挑战赛#

言：

为了后续的代码审计一些常用的框架和技术都是有必要了解一下，在此重拾Spring Boot等开发知识内容。

1|20x01 Thymeleaf简介

Thymeleaf是一个现代的服务器端Java模板引擎的web和独立的环境，能够处理HTML, XML, JavaScript, CSS，甚至纯文本。

Thymeleaf的主要目标是提供一种优雅的和高度可维护的方式来创建模板。为了实现这一点，它构建在自然模板的概念上，以不影响模板作为设计原型使用的方式将其逻辑注入模板文件。这改进了设计的交流，并在设计和开发团队之间架起了桥梁。

Thymeleaf的设计从一开始就考虑了Web标准，尤其是HTML5

Thymeleaf是一个非常可扩展的模板引擎(事实上它可以被称为模板引擎框架)，它允许你定义和自定义的方式，你的模板将被处理到一个精细的细节级别。

将一些逻辑应用到标记工件(标记、一些文本、注释，如果模板不是标记，则仅仅是占位符)的对象称为处理程序，这些处理程序的集合—加上一些额外的工件—通常是方言的组成部分。Thymeleaf的核心库提供了一种称为标准方言的方言，这对大多数用户来说应该足够了。

1|30x02 Thymeleaf 基础配置

这里主要以Srping Boot为主

<!--引入thymeleaf依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

在项目的resources\templates目录下创建HTML文件，这里注意导入thymeleaf的命名空间，否则无法进行模板的渲染。

<!doctype html>

<!--注意：引入thymeleaf的名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p th:text="'hello SpringBoot'">hello thymeleaf</p>
</body>
</html>

编写Controller

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class IndexController {

    @GetMapping("home")
    public String index() {
        return "index";
    }
}

这里的注解需要使用@Controller，不能使用@RestController注解，否则会报错.

如果只是使用@RestController注解Controller，则Controller中的方法无法返回jsp页面，或者html，配置的视图解析器 InternalResourceViewResolver不起作用，返回的内容就是Return 里的内容。
如果需要返回到指定页面，则需要用 @Controller配合视图解析器InternalResourceViewResolver才行。
如果需要返回JSON，XML或自定义mediaType内容到页面，则需要在对应的方法上加上@ResponseBody注解。

1|40x03 Thymeleaf 语法

类型

1.变量表达式
2.选择或星号表达式
3.文字国际化表达式
4.URL表达式

${...}变量表达式

<span th:text="${book.author.name}">  
<li th:each="book : ${books}">

@{...} 链接表达式

 @{/order/list} 
 @{/order/details(id=${orderId})}  

或者是
    
<form th:action="@{/createOrder}">  
<a href="main.html" th:href="@{/main}">

#{...} 消息表达式

#{main.title}  
#{message.entrycreated(${entryId})}

*{...} 选择变量表达式

<div th:object="${book}">  
...  
<span th:text="*{title}">...</span>  
...  
</div>

常用th标签

th标签属性

1）th:text：文本替换；

2）th:utext：支持html的文本替换。

3）th:value：属性赋值

4）th:each：遍历循环元素

5）th:if：判断条件，类似的还有th:unless，th:switch，th:case

6）th:insert：代码块引入，类似的还有th:replace，th:include，常用于公共代码块提取的场景

7）th:fragment：定义代码块，方便被th:insert引用

8）th:object：声明变量，一般和*{}一起配合使用，达到偷懒的效果。

9）th:attr：设置标签属性，多个属性可以用逗号分隔

1|50x04 结尾

内容比较简单，主要作为记录。

景

模板技术在现代的软件开发中有着重要的地位，而目前最流行的两种模板技术恐怕要算freemarker和Thymeleaf了，模板技术作为view的好处是很多，那么现在开源的模板技术有好几种，多了之后就有一个选择的问题了，如何选择一个满足自己需要的模板的呢

FreeMarker

介绍

FreeMarker是一款模板引擎：是一种基于模板和数据，用来生成输出文本（HTML网页、电子邮件、配置文件、源代码等）的通用工具。它不是面向最终用户的，是一款程序员可以嵌入他们所开发产品的组件。FreeMarker是免费的，基于Apache许可证2.0版本发布。其模板编写为FreeMarker Template Language（FTL），FTL包含模板信息和数据标签与指令，使用FTL和数据通过模板引擎可以生成需要的文档或代码。FreeMarker最初的设计，是被用来在MVC模式的Web开发框架中生成HTML页面的，没有被绑定到Servlet或HTML或任意Web相关的东西上，它也可以用于非Web应用环境中。

特性

FreeMarker的优点

FreeMarker的原理就是：模板+数据模型=输出，这样可以很好的将业务逻辑和表现层分离。JSP开发中，页面会有大量业务逻辑，不利于维护和阅读，使用FreeMarker可以避免这一问题。

有利于分工合作。HTML人员可以关注页面的设计无需面对页面的业务逻辑，同时修改页面代码也不需要程序员编重新译代码。
提高开发效率。相对于JSP，FreeMarker不需要每次修改后重新编译，因此在开发调试中可以有效节省时间。
有利于提高访问速度。对于不会频繁发生变化的页面，建议使用FreeMarker生成的静态页面。而不是每次都要动态生成的JSP页面。
可以提高并发量。例如单台tomcat容器只支持几百并发，我们如果将网页以纯静态化的形式展现，就可以使用Nginx这样的高性能的web服务器来部署。Nginx可以支持几万的并发。
静态页面对SEO更友好。
不占用JVM的PermGen space。因为不会被编译成类，所以不会占用web服务器永生代的空间，避免OutOfMemoryError：PermGen space的问题。
对于电商网站的商品详细页来说，至少几百万个商品，每个商品又有大量的信息，这样的情况同样也适用于使用网页静态化来解决

FreeMarker 的缺点

应用FreeMarker模板技术，在修改模板后，可能会看到已经过期的数据。如：生成静态的HTML页面后，如果一旦模板改变，而没有及时更新模板生成的HTML页面的话，用户看到的就是过期的数据。
FreeMarker模板技术在应用过程中，FreeMarker中的变量必须要赋值，如果不赋值，那么就会抛出异常。想避免错误就要应用if/elseif/else 指令进行判段，如果对每一个变量都判断的话，那么则反而增加了编程的麻烦。
FreeMarker的map限定key必须是string，其他数据类型无法操作。
FreeMarker不支持集群应用。为了编成的方便性，把序列化的东西都放到了Session中，如Session，request等，在开发的过程中确实方便，但如果将应用放到集群中，就会出现错误。

Thymeleaf

介绍

Thymeleaf是一种用于Web和独立环境的现代服务器端的Java模板引擎。Thymeleaf的主要目标是将优雅的自然模板带到开发工作流程中，并将HTML在浏览器中正确显示，并且可以作为静态原型，让开发团队能更容易地协作。Thymeleaf能够处理HTML，XML，JavaScript，CSS甚至纯文本。Thymeleaf使用Spring框架的模块，与许多常见的工具集成在一起，并且可以插入自己的功能，是现代HTML5 JVM Web开发的理想选择，尽管Thymeleaf还有更多其它的功能。Thymeleaf建立在自然模板的概念之上，以不影响模板作为设计原型的方式将其逻辑注入到模板文件中。这改善了设计沟通，弥合了前端设计和开发人员之间的理解偏差。

特点

Thymeleaf的优点

hymeleaf的主要目标是为开发工作流程带来优雅自然的模板-HTML可以在浏览器中正确显示，也可以作为静态原型工作，从而可以在开发团队中加强协作。

Thymeleaf拥有适用于Spring Framework的模块，与您喜欢的工具的大量集成以及插入您自己的功能的能力，对于现代HTML5 JVM Web开发而言，Thymeleaf是理想的选择——尽管它还有很多工作要做。

动静分离，ymeleaf选用html作为模板页，这是任何一款其他模板引擎做不到的！Thymeleaf使用html通过一些特定标签语法代表其含义，但并未破坏html结构，即使无网络、不通过后端渲染也能在浏览器成功打开，大大方便界面的测试和修改。

开箱即用， Thymeleaf提供标准和Spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、改JSTL、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
Springboot官方大力推荐和支持，Springboot官方做了很多默认配置，开发者只需编写对应html即可，大大减轻了上手难度和配置复杂度。

Thymeleaf的缺点

模板必须符合xml规范。
错误信息不友好

总结

从写代码的角度看，freemarker更习惯于我们的思维。从前后分离开发的角度看thymeleaf更合适，值的绑定都是基于html的dom元素属性的，适合前后联调。

在线咨询

上一篇：技术干货：CSS的浮动和定位，我是这么来理解的！
下一篇：HTML是什么？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商