Thymeleaf動(dòng)態(tài)菜單渲染：程序員的進(jìn)階指南

言

在現(xiàn)代Web開發(fā)中，動(dòng)態(tài)生成的菜單不僅能夠提升用戶體驗(yàn)，還能簡(jiǎn)化應(yīng)用程序的維護(hù)工作。Thymeleaf作為一款流行的服務(wù)器端Java模板引擎，提供了豐富的標(biāo)簽和表達(dá)式語法，使得動(dòng)態(tài)內(nèi)容的生成變得簡(jiǎn)單而高效。本文將深入解析如何使用Thymeleaf來創(chuàng)建動(dòng)態(tài)菜單，并通過代碼示例來演示其實(shí)際應(yīng)用。

一、Thymeleaf簡(jiǎn)介

Thymeleaf是一個(gè)用于Web和獨(dú)立環(huán)境的現(xiàn)代服務(wù)器端Java模板引擎。它支持HTML、XML、JSF和Velocity模板，并且可以很好地與Spring框架集成。Thymeleaf的一大特點(diǎn)就是能夠處理靜態(tài)和動(dòng)態(tài)內(nèi)容，這意味著即使在沒有后端數(shù)據(jù)的情況下，模板仍然能夠正確顯示。

二、動(dòng)態(tài)菜單的實(shí)現(xiàn)原理

在Web應(yīng)用中，動(dòng)態(tài)菜單通常是從后端獲取數(shù)據(jù)，然后在前端根據(jù)這些數(shù)據(jù)動(dòng)態(tài)生成菜單結(jié)構(gòu)。Thymeleaf通過其特有的語法，可以輕松地將后端數(shù)據(jù)綁定到HTML元素上，從而實(shí)現(xiàn)動(dòng)態(tài)內(nèi)容的填充。

三、代碼示例

假設(shè)我們有一個(gè)簡(jiǎn)單的JavaBean代表菜單項(xiàng)：

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

    // 省略構(gòu)造函數(shù)、getter和setter...
}

后端控制器將返回一個(gè)菜單列表：

@GetMapping("/menu")
public List<MenuItem> getMenuList() {
    // 假設(shè)這里從數(shù)據(jù)庫或緩存中獲取菜單數(shù)據(jù)
    return menuService.getAllMenus();
}

在Thymeleaf模板中，我們可以使用th:each和th:if標(biāo)簽來遍歷菜單項(xiàng)，并根據(jù)條件渲染菜單結(jié)構(gòu)：

<!-- 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中的每一項(xiàng)，th:href和th:text分別用于設(shè)置鏈接的URL和顯示的文本。當(dāng)item.children不為空時(shí)，會(huì)進(jìn)一步渲染子菜單。

五、優(yōu)化技巧

性能優(yōu)化：避免在模板中進(jìn)行復(fù)雜的計(jì)算或數(shù)據(jù)庫查詢，這些應(yīng)該在后端完成。
可讀性：使用有意義的變量名和清晰的邏輯結(jié)構(gòu)，提高模板的可讀性和可維護(hù)性。
國(guó)際化：使用Thymeleaf的國(guó)際化支持，使菜單項(xiàng)名稱能夠根據(jù)用戶語言偏好動(dòng)態(tài)變化。

結(jié)語

通過本文的學(xué)習(xí)，你已經(jīng)掌握了如何使用Thymeleaf來創(chuàng)建動(dòng)態(tài)菜單的基本方法。動(dòng)態(tài)菜單不僅能夠提高Web應(yīng)用的靈活性，還能顯著提升用戶體驗(yàn)。在實(shí)際項(xiàng)目中，可以根據(jù)具體需求進(jìn)一步優(yōu)化和擴(kuò)展菜單功能，比如加入搜索、過濾和排序等功能，讓菜單更加智能和人性化。

#頭條創(chuàng)作挑戰(zhàn)賽#

言：

為了后續(xù)的代碼審計(jì)一些常用的框架和技術(shù)都是有必要了解一下，在此重拾Spring Boot等開發(fā)知識(shí)內(nèi)容。

1|20x01 Thymeleaf簡(jiǎn)介

Thymeleaf是一個(gè)現(xiàn)代的服務(wù)器端Java模板引擎的web和獨(dú)立的環(huán)境，能夠處理HTML, XML, JavaScript, CSS，甚至純文本。

Thymeleaf的主要目標(biāo)是提供一種優(yōu)雅的和高度可維護(hù)的方式來創(chuàng)建模板。為了實(shí)現(xiàn)這一點(diǎn)，它構(gòu)建在自然模板的概念上，以不影響模板作為設(shè)計(jì)原型使用的方式將其邏輯注入模板文件。這改進(jìn)了設(shè)計(jì)的交流，并在設(shè)計(jì)和開發(fā)團(tuán)隊(duì)之間架起了橋梁。

Thymeleaf的設(shè)計(jì)從一開始就考慮了Web標(biāo)準(zhǔn)，尤其是HTML5

Thymeleaf是一個(gè)非常可擴(kuò)展的模板引擎(事實(shí)上它可以被稱為模板引擎框架)，它允許你定義和自定義的方式，你的模板將被處理到一個(gè)精細(xì)的細(xì)節(jié)級(jí)別。

將一些邏輯應(yīng)用到標(biāo)記工件(標(biāo)記、一些文本、注釋，如果模板不是標(biāo)記，則僅僅是占位符)的對(duì)象稱為處理程序，這些處理程序的集合—加上一些額外的工件—通常是方言的組成部分。Thymeleaf的核心庫提供了一種稱為標(biāo)準(zhǔn)方言的方言，這對(duì)大多數(shù)用戶來說應(yīng)該足夠了。

1|30x02 Thymeleaf 基礎(chǔ)配置

這里主要以Srping Boot為主

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

在項(xiàng)目的resources\templates目錄下創(chuàng)建HTML文件，這里注意導(dǎo)入thymeleaf的命名空間，否則無法進(jìn)行模板的渲染。

<!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注解，否則會(huì)報(bào)錯(cuò).

如果只是使用@RestController注解Controller，則Controller中的方法無法返回jsp頁面，或者h(yuǎn)tml，配置的視圖解析器 InternalResourceViewResolver不起作用，返回的內(nèi)容就是Return 里的內(nèi)容。
如果需要返回到指定頁面，則需要用 @Controller配合視圖解析器InternalResourceViewResolver才行。
如果需要返回JSON，XML或自定義mediaType內(nèi)容到頁面，則需要在對(duì)應(yīng)的方法上加上@ResponseBody注解。

1|40x03 Thymeleaf 語法

類型

1.變量表達(dá)式
2.選擇或星號(hào)表達(dá)式
3.文字國(guó)際化表達(dá)式
4.URL表達(dá)式

${...}變量表達(dá)式

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

@{...} 鏈接表達(dá)式

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

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

#{...} 消息表達(dá)式

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

*{...} 選擇變量表達(dá)式

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

常用th標(biāo)簽

th標(biāo)簽屬性

1）th:text：文本替換；

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

3）th:value：屬性賦值

4）th:each：遍歷循環(huán)元素

5）th:if：判斷條件，類似的還有th:unless，th:switch，th:case

6）th:insert：代碼塊引入，類似的還有th:replace，th:include，常用于公共代碼塊提取的場(chǎng)景

7）th:fragment：定義代碼塊，方便被th:insert引用

8）th:object：聲明變量，一般和*{}一起配合使用，達(dá)到偷懶的效果。

9）th:attr：設(shè)置標(biāo)簽屬性，多個(gè)屬性可以用逗號(hào)分隔

1|50x04 結(jié)尾

內(nèi)容比較簡(jiǎn)單，主要作為記錄。

景

模板技術(shù)在現(xiàn)代的軟件開發(fā)中有著重要的地位，而目前最流行的兩種模板技術(shù)恐怕要算freemarker和Thymeleaf了，模板技術(shù)作為view的好處是很多，那么現(xiàn)在開源的模板技術(shù)有好幾種，多了之后就有一個(gè)選擇的問題了，如何選擇一個(gè)滿足自己需要的模板的呢

FreeMarker

介紹

FreeMarker是一款模板引擎：是一種基于模板和數(shù)據(jù)，用來生成輸出文本（HTML網(wǎng)頁、電子郵件、配置文件、源代碼等）的通用工具。它不是面向最終用戶的，是一款程序員可以嵌入他們所開發(fā)產(chǎn)品的組件。FreeMarker是免費(fèi)的，基于Apache許可證2.0版本發(fā)布。其模板編寫為FreeMarker Template Language（FTL），F(xiàn)TL包含模板信息和數(shù)據(jù)標(biāo)簽與指令，使用FTL和數(shù)據(jù)通過模板引擎可以生成需要的文檔或代碼。FreeMarker最初的設(shè)計(jì)，是被用來在MVC模式的Web開發(fā)框架中生成HTML頁面的，沒有被綁定到Servlet或HTML或任意Web相關(guān)的東西上，它也可以用于非Web應(yīng)用環(huán)境中。

特性

FreeMarker的優(yōu)點(diǎn)

FreeMarker的原理就是：模板+數(shù)據(jù)模型=輸出，這樣可以很好的將業(yè)務(wù)邏輯和表現(xiàn)層分離。JSP開發(fā)中，頁面會(huì)有大量業(yè)務(wù)邏輯，不利于維護(hù)和閱讀，使用FreeMarker可以避免這一問題。

有利于分工合作。HTML人員可以關(guān)注頁面的設(shè)計(jì)無需面對(duì)頁面的業(yè)務(wù)邏輯，同時(shí)修改頁面代碼也不需要程序員編重新譯代碼。
提高開發(fā)效率。相對(duì)于JSP，F(xiàn)reeMarker不需要每次修改后重新編譯，因此在開發(fā)調(diào)試中可以有效節(jié)省時(shí)間。
有利于提高訪問速度。對(duì)于不會(huì)頻繁發(fā)生變化的頁面，建議使用FreeMarker生成的靜態(tài)頁面。而不是每次都要?jiǎng)討B(tài)生成的JSP頁面。
可以提高并發(fā)量。例如單臺(tái)tomcat容器只支持幾百并發(fā)，我們?nèi)绻麑⒕W(wǎng)頁以純靜態(tài)化的形式展現(xiàn)，就可以使用Nginx這樣的高性能的web服務(wù)器來部署。Nginx可以支持幾萬的并發(fā)。
靜態(tài)頁面對(duì)SEO更友好。
不占用JVM的PermGen space。因?yàn)椴粫?huì)被編譯成類，所以不會(huì)占用web服務(wù)器永生代的空間，避免OutOfMemoryError：PermGen space的問題。
對(duì)于電商網(wǎng)站的商品詳細(xì)頁來說，至少幾百萬個(gè)商品，每個(gè)商品又有大量的信息，這樣的情況同樣也適用于使用網(wǎng)頁靜態(tài)化來解決

FreeMarker 的缺點(diǎn)

應(yīng)用FreeMarker模板技術(shù)，在修改模板后，可能會(huì)看到已經(jīng)過期的數(shù)據(jù)。如：生成靜態(tài)的HTML頁面后，如果一旦模板改變，而沒有及時(shí)更新模板生成的HTML頁面的話，用戶看到的就是過期的數(shù)據(jù)。
FreeMarker模板技術(shù)在應(yīng)用過程中，F(xiàn)reeMarker中的變量必須要賦值，如果不賦值，那么就會(huì)拋出異常。想避免錯(cuò)誤就要應(yīng)用if/elseif/else 指令進(jìn)行判段，如果對(duì)每一個(gè)變量都判斷的話，那么則反而增加了編程的麻煩。
FreeMarker的map限定key必須是string，其他數(shù)據(jù)類型無法操作。
FreeMarker不支持集群應(yīng)用。為了編成的方便性，把序列化的東西都放到了Session中，如Session，request等，在開發(fā)的過程中確實(shí)方便，但如果將應(yīng)用放到集群中，就會(huì)出現(xiàn)錯(cuò)誤。

Thymeleaf

介紹

Thymeleaf是一種用于Web和獨(dú)立環(huán)境的現(xiàn)代服務(wù)器端的Java模板引擎。Thymeleaf的主要目標(biāo)是將優(yōu)雅的自然模板帶到開發(fā)工作流程中，并將HTML在瀏覽器中正確顯示，并且可以作為靜態(tài)原型，讓開發(fā)團(tuán)隊(duì)能更容易地協(xié)作。Thymeleaf能夠處理HTML，XML，JavaScript，CSS甚至純文本。Thymeleaf使用Spring框架的模塊，與許多常見的工具集成在一起，并且可以插入自己的功能，是現(xiàn)代HTML5 JVM Web開發(fā)的理想選擇，盡管Thymeleaf還有更多其它的功能。Thymeleaf建立在自然模板的概念之上，以不影響模板作為設(shè)計(jì)原型的方式將其邏輯注入到模板文件中。這改善了設(shè)計(jì)溝通，彌合了前端設(shè)計(jì)和開發(fā)人員之間的理解偏差。

特點(diǎn)

Thymeleaf的優(yōu)點(diǎn)

hymeleaf的主要目標(biāo)是為開發(fā)工作流程帶來優(yōu)雅自然的模板-HTML可以在瀏覽器中正確顯示，也可以作為靜態(tài)原型工作，從而可以在開發(fā)團(tuán)隊(duì)中加強(qiáng)協(xié)作。

Thymeleaf擁有適用于Spring Framework的模塊，與您喜歡的工具的大量集成以及插入您自己的功能的能力，對(duì)于現(xiàn)代HTML5 JVM Web開發(fā)而言，Thymeleaf是理想的選擇——盡管它還有很多工作要做。

動(dòng)靜分離，ymeleaf選用html作為模板頁，這是任何一款其他模板引擎做不到的！Thymeleaf使用html通過一些特定標(biāo)簽語法代表其含義，但并未破壞html結(jié)構(gòu)，即使無網(wǎng)絡(luò)、不通過后端渲染也能在瀏覽器成功打開，大大方便界面的測(cè)試和修改。

開箱即用， Thymeleaf提供標(biāo)準(zhǔn)和Spring標(biāo)準(zhǔn)兩種方言，可以直接套用模板實(shí)現(xiàn)JSTL、 OGNL表達(dá)式效果，避免每天套模板、改JSTL、改標(biāo)簽的困擾。同時(shí)開發(fā)人員也可以擴(kuò)展和創(chuàng)建自定義的方言。
Springboot官方大力推薦和支持，Springboot官方做了很多默認(rèn)配置，開發(fā)者只需編寫對(duì)應(yīng)html即可，大大減輕了上手難度和配置復(fù)雜度。

Thymeleaf的缺點(diǎn)

模板必須符合xml規(guī)范。
錯(cuò)誤信息不友好

總結(jié)

從寫代碼的角度看，freemarker更習(xí)慣于我們的思維。從前后分離開發(fā)的角度看thymeleaf更合適，值的綁定都是基于html的dom元素屬性的，適合前后聯(lián)調(diào)。

在線咨詢

上一篇：技術(shù)干貨：CSS的浮動(dòng)和定位，我是這么來理解的！
下一篇：HTML是什么？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商