Thymeleaf模板引擎的语法

alankuo
于 2024-10-02 19:30:10 发布
阅读量498
点赞数 6
分类专栏：后端文章标签： python 前端 javascript
本文链接：https://blog.csdn.net/alankuo/article/details/142673415
版权
后端专栏收录该内容
77 篇文章 0 订阅
订阅专栏
                    
                        
                    
                    Thymeleaf模板引擎语法 
一、表达式语法 
变量表达式（${…}） 
  用于访问从后端传递到模板中的变量。
例如，在Java后端代码中，将一个名为user的对象添加到模型（Model）中：
 model.addAttribute("user", new User("John", "Doe"));
 
  在Thymeleaf模板中，可以使用变量表达式来访问user对象的属性：
 <p th:text="${user.firstName}">Default First Name</p>
 
  如果user对象有一个名为firstName的属性，表达式${user.firstName}将获取该属性的值并显示在<p>标签中。如果变量不存在或者属性获取失败，将显示默认的文本“Default First Name”。
 
选择表达式（*{…}） 
  主要用于在特定对象（如在迭代或表单绑定对象）内部进行属性访问。
例如，在一个<form>标签中绑定了一个user对象：
 <form th:object="${user}">
    <input type="text" th:field="*{firstName}" />
</form>
 
  这里的th:field="*{firstName}"表示在user对象（通过th:object指定）中访问firstName属性，用于表单元素（这里是<input>）与对象属性的绑定。
 
消息表达式（#{…}） 
  用于国际化（i18n）功能，从消息源（如属性文件）中获取对应键的消息。
假设在messages.properties文件中有一个键值对：welcome.message = Welcome to our website。
在模板中可以这样使用：
 <p th:text="#{welcome.message}">Default Welcome Message</p>
 
  当应用支持多语言时，根据用户的语言设置，将从对应的语言属性文件中获取正确的消息内容。
 
链接表达式（@{…}） 
  用于构建URL，确保生成的URL是相对于应用程序上下文的正确路径。
例如：
 <a th:href="@{/user/profile}">User Profile</a>
 
  如果应用部署在/myapp上下文路径下，@{/user/profile}将生成/myapp/user/profile的绝对路径。
还可以传递参数，如@{/user/{id}(id = ${user.id})}，这里{id}是路径中的参数占位符，通过(id = ${user.id})将后端变量user.id的值作为参数填充进去。
 
 
二、属性修饰符 
条件判断属性（th:if和th:unless） 
  th:if 
    根据表达式的结果决定是否渲染HTML元素。
例如：
 <div th:if="${user.isAdmin}">
    <p>You are an administrator.</p>
</div>
 
    当${user.isAdmin}表达式的值为true时，<div>及其内部的<p>标签才会被渲染到最终的HTML页面中。
 
th:unless 
    与th:if相反，当表达式的值为false时才渲染元素。
例如：
 <div th:unless="${user.isAdmin}">
    <p>You are not an administrator.</p>
</div>
 
 
循环遍历属性（th:each） 
  用于遍历集合（如List、Set等）或数组。
例如，后端传递了一个名为users的用户列表到模板中：
 <ul>
    <li th:each="user, userStat : ${users}" th:text="${user.name}">Default Name</li>
</ul>
 
  这里的th:each表达式中，user是迭代变量，表示集合中的每个元素（在这个例子中是用户对象），userStat是一个状态变量（可选），可以用于获取当前迭代的状态信息，如索引、是否为第一个或最后一个元素等。
 
属性设置属性（th:attr） 
  用于动态设置HTML元素的属性。
例如：
 <img th:attr="src=${imageUrl}, alt=${imageAltText}" />
 
  这里将根据后端传递过来的imageUrl和imageAltText变量的值动态设置<img>标签的src和alt属性。不过，在Thymeleaf中，更推荐使用特定属性的Thymeleaf属性来设置，如th:src和th:alt，如下：
 <img th:src="${imageUrl}" th:alt="${imageAltText}" />
 
 
三、文本操作相关语法 
文本替换（th:text和th:utext） 
  th:text 
    将表达式的值作为纯文本替换HTML元素中的内容。
例如：
 <p th:text="${message}">Default Message</p>
 
    如果${message}的值为“Hello, World”，则<p>标签中的内容将被替换为“Hello, World”。
 
th:utext 
    与th:text类似，但会解析表达式中的HTML标签（如果有的话）。
例如：
 <div th:utext="${htmlContent}">
    Default HTML Content
</div>
 
    如果${htmlContent}的值为<strong>Bold Text</strong>，则在最终的HTML页面中，<div>标签内将显示加粗的“Bold Text”。
 
 
文本拼接（在表达式内部） 
  可以在表达式中使用+运算符进行简单的文本拼接。
例如：
 <p th:text="'Welcome, ' + ${user.name}">Welcome, guest</p>
 
  将固定的字符串“Welcome, ”和后端传递过来的user.name变量的值拼接起来显示在<p>标签中。
 
 
四、表单绑定语法 
表单对象绑定（th:object） 
  用于将HTML表单与后端对象进行绑定。
例如：
 <form th:object="${user}">
    <input type="text" th:field="*{firstName}" />
    <input type="text" th:field="*{lastName}" />
    <input type="submit" value="Submit" />
</form>
 
  这里的th:object="${user}"指定了表单绑定的对象为user，然后通过th:field属性将表单元素与对象的属性进行绑定。
 
表单字段绑定（th:field） 
  用于将表单元素（如<input>、<textarea>、<select>等）与对象的属性进行一对一的绑定。
除了上述示例中的<input>绑定，对于<textarea>的绑定：
 <form th:object="${user}">
    <textarea th:field="*{description}"></textarea>
</form>
 
  对于<select>的绑定：
 <form th:object="${user}">
    <select th:field="*{role}">
        <option value="admin">Admin</option>
        <option value="user">User</option>
    </select>
</form>
 

                