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是一個非?？蓴U展的模板引擎(事實上它可以被稱為模板引擎框架)，它允許你定義和自定義的方式，你的模板將被處理到一個精細的細節級別。

將一些邏輯應用到標記工件(標記、一些文本、注釋，如果模板不是標記，則僅僅是占位符)的對象稱為處理程序，這些處理程序的集合—加上一些額外的工件—通常是方言的組成部分。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小時內與您取得聯系。

整合營銷服務商