Thymeleaf语法

test638
116 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情

Thymeleaf 模板解读

在第一个Thymeleaf模板引擎整合案例中，读取动态数据并渲染的语句如下所示：

<p th:text="${description}">这里显示的是 description 字段内容</p>

我们可以看到分为三个部分

  1. html 标签
  2. Thymeleaf 模板引擎的 th 标签
  3. Thymeleaf 表达式

image.png

th:text 表示文本替换、${description}表示读取后台设置的 description 字段，该模板文件语句的作用就是动态的将 p 标签中的内容替换为 description 字段内容，如果是写在 <div></div> 标签中的话也是修改其中的内容。

编写规则:

  • 任意的 Thymeleaf 属性标签 th:* 需要写在 html 标签体中( th:block 除外 )
  • Thymeleaf 表达式写在 Thymeleaf 属性标签中

th:* 属性

th:text 对应的是 HTML5 中的 text 属性，除 th:text 属性外，Thymeleaf 也提供了其他的标签属性来替换 HTML5 原生属性的值 官方文档：www.thymeleaf.org/doc/tutoria…

image.png

 修改属性值实践

在templates目录下新建attributes.html文件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf setting-value-to-specific-attributes</title>
    <meta charset="UTF-8">
</head>
<!-- background 标签-->
<body th:background="${th_background}" background="#D0D0D0">
<!-- text 标签-->
<h1 th:text="${title}">html标签演示</h1>
<div>
    <h5>id、name、value标签:</h5>
    <!-- id、name、value标签-->
    <input id="input1" name="input1" value="1" th:id="${th_id}" th:name="${th_name}" th:value="${th_value}"/>
</div>
<br/>
<div class="div1" th:class="${th_class}">
    <h5>class、href标签:</h5>
    <!-- class、href标签-->
    <a th:href="${th_href}" href="##/">链接地址</a>
</div>
</body>
</html>

页面是这个样子，需要注意的是，当前页面是直接打开的，并没有通过Web服务器。

image.png 包含background、id、name、class等的html标签都设置了默认值，并在每个标签体中都添加了对应的th标签来读取动态数据

在ThymeleafControlle.java中添加如下代码，并启动访问/attributes

@GetMapping("/attributes")
public String attributes(ModelMap map) {
    // 更改 h1 内容
    map.put("title", "Thymeleaf 标签演示");
    // 更改 id、name、value
    map.put("th_id", "thymeleaf-input");
    map.put("th_name", "thymeleaf-input");
    map.put("th_value", "test");
    // 更改 class、href
    map.put("th_class", "thymeleaf-class");
    map.put("th_href", "http://blog.site");
    return "attributes";
}

得到如下的界面

内容和元素属性已经动态切换了，原来的默认值都变成了attributes()方法中设置的值。 image.png

Thymeleaf 语法规则

  • 表达式语法

    • 变量表达式： ${...}
    • 选择变量表达式： *{...}
    • 信息表达式： #{...}
    • 链接 URL 表达式： @{...}
    • 分段表达式： ~{...}

  • 字面量

    • 字符串： 'one text', 'Another one!' ...
    • 数字： 0, 34, 3.0, 12.3 ...
    • 布尔值： true, false
    • Null 值： null
    • 字面量标记：one, sometext, main ...

  • 文本运算

    • 字符串拼接： +
    • 字面量置换: |The name is ${name}|

  • 算术运算

    • 二元运算符： +, -, *, /, %
    • 负号（一元运算符）： (unary operator): -

  • 布尔运算

    • 二元运算符： and, or
    • 布尔非（一元运算符）： !, not

  • 比较运算

    • 比较： >, <, >=, <= (gt, lt, ge, le)
    • 相等运算符： ==, != (eq, ne)

    比较运算符也可以使用转义字符，比如大于号，可以使用 Thymeleaf 语法 gt 也可以使用转义字符 &gt;

  • 条件运算符

    • If-then: (if) ? (then)
    • If-then-else: (if) ? (then) : (else)
    • Default: (value) ?: (defaultvalue)

  • 特殊语法

    • 无操作： _

Thymeleaf简单语法实践


<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf simple syntax</title>
    <meta charset="UTF-8">
</head>
<body>
<h1>Thymeleaf简单语法</h1>
<div>
    <h5>基本类型操作(字符串):</h5>
    <p>一个简单的字符串：<span th:text="'thymeleaf text'">default text</span>.</p>
    <p>字符串连接：<span th:text="'thymeleaf text concat,'+${thymeleafText}">default text</span>.</p>
    <p>字符串连接：<span th:text="|thymeleaf text concat,${thymeleafText}|">default text</span>.</p>
</div>
<div>
    <h5>基本类型操作(数字):</h5>
    <p>一个简单的神奇的数字：<span th:text="2022">1000</span>.</p>
    <p>算术运算： 2021+1=<span th:text="${number1}+1">0</span>.</p>
    <p>算术运算： 14-1=<span th:text="14-1">0</span>.</p>
    <p>算术运算： 1011 * 2=<span th:text="1011*${number2}">0</span>.</p>
    <p>算术运算： 39 ÷ 3=<span th:text="39/3">0</span>.</p>
</div>
<div>
    <h5>基本类型操作(布尔值):</h5>
    <p>一个简单的数字比较：2022 > 2021=<span th:text="2022&gt;2021"> </span>.</p>
    <p>字符串比较：thymeleafText == 'spring-boot'，结果为<span th:text="${thymeleafText} == 'spring-boot'">0</span>.</p>
    <p>数字比较：13 == 39/3 结果为： <span th:text="13 == 39/3">0</span>.</p>
</div>
</body>
</html>

@GetMapping("/simple")
public String simple(ModelMap map) {
    map.put("thymeleafText", "spring-boot");
    map.put("number1", 2021);
    map.put("number2", 2);
    return "simple";
}

重启运行可以得到如下结果

image.png

Thymeleaf表达式

Thymeleaf表达式包括：变量表达式${...}、选择变量表达式*{...}、信息表达式#{...}、链接 URL表达式@{...}、分段表达式~{...}。这些表达式一般只写在Thymeleaf模板文件的th标签中，否则不会生效。表达式语法的主要作用就是获取变量值、获取绑定对象的变量值、国际化变量取值、URL拼接与生成、Thymeleaf模板布局。

变量表达式

变量表达式即OGNL表达式或Spring EL表达式，其作用是获取模板中与后端返回数据所绑定对象的值，写法为${...}。这是最常见的一个表达式，在取值赋值、逻辑判断、循环语句中都可以使用该表达式，示例如下所示：

<!-- 读取参数 -->
<p>算术运算： 2021+1=<span th:text="${number1}+1">0</span>.</p>
<!-- 读取参数并进行三元运算 -->
<div th:class="${path}=='users'?'nav-link active':'nav-link'"></div>
<!-- 读取对象中的属性 -->
<p>读取goodsDetail对象中goodsName字段：<span th:text="${goodsDetail.goodsName}">default text</span>.</p>
<!-- 循环遍历 -->
<li th:each="goods : ${goodsList}">

选择(星号)表达式

选择表达式与变量表达式类似，不过它会用一个预先选择的对象代替上下文变量容器来执行。语法如下：*{goodsName}。被指定的对象由th:object标签属性在外层进行定义。前文读取goodsDetail对象的goodsName字段可以替换为：

<p th:object="${goodsDetail}">读取goodsDetail对象中goodsName字段：<span th:text="*{goodsName}">text</span>.</p>

如果不考虑上下文的情况下，两者没有区别，使用 ${...}读取的内容也完全可以替换为使用*{...}进行读取，唯一的区别是使用*{...}前可以预先在父标签中通过 th:object 定义一个对象并进行操作。

<p>读取goodsDetail对象中goodsName字段<span th:text="*{goodsDetail.goodsName}">default text</span></p> 
<p>读取text字段：<span th:text="*{text}">default text</span>.</p>

 URL 表达式

th:href对应的是html中的href标签，它将计算并替换href标签中的URL地址，th:href可以直接设置为静态地址，也可以使用表达式语法对读取为的变量值进行动态拼接URL地址。

<a th:href="@{'http://localhost:goods/detail/1'}">商品详情页</a>

也可以根据 id 值进行替换，写法为：

<a th:href="@{'/goods/detail/'+${goods.goodsId}}">商品详情页</a>

或者也可以写成这样：

<a th:href="@{/goods/{goodsId}(goodsId=${goods.goodsId})">商品详情页</a>
avatar
文章
阅读
粉丝