Spring Boot系列之Thymeleaf常用语法

原文首发于微信公众号：躬行之(jzman-blog)

上篇文章中简单介绍了 Thymeleaf 模板的依赖、基本属性以及使用方式，下面将从以下几个方面介绍 Thymeleaf 中的常见语法：

1. 表达式
2. 字符串拼接
3. 条件比较
4. switch多分支
5. 循环
6. 其他操作符
7. 内联
8. 测试效果

下文中涉及到的部分参数或者变量的具体值如下：

// 测试用传值
model.addAttribute("name", "jzman");
model.addAttribute("gzh", "<b>躬行之</b>");
model.addAttribute("user", new User("manu"));
model.addAttribute("id", "123456");
model.addAttribute("flag", false);
model.addAttribute("value", 10);
// 循环语句测试用
model.addAttribute("list", mUserList);
// span标签的id,css内联测试用
model.addAttribute("idName", "css");
// css样式中要使用的颜色值,css内联测试用
model.addAttribute("color", "#FF0000");

表达式

Thymeleaf 中常见的表达式主要有如下几种：

• 消息表达式：使用 #{} 获取对应属性文件中的值；
• 变量表达式：使用 ${} 获取变量值，这些变量的值一般由后端传入；
• 选择变量表达式：配合 th:object 属性，使用 *{} 来获取 th:object 指定的对象的属性值；
• 链接网址表达式：使用 @{} 表示链接地址，可以方便的在该链接地址上传递参数。

上述几种表达式的使用方式如下所示：

<ul th:object="${user}">
    <!--消息表达式-->
    <li>消息表达式：<span th:text="#{home.title}">Hello World!</span></li>

    <!--变量表达式-->
    <li>变量表达式：<span th:text="${name}">Hello World!</span></li>

    <!--选择变量表达式-->
    <li>选择变量表达式：<span th:text="*{username}">Hello World!</span></li>
    <li>选择变量表达式：<span th:text="${user.username}">Hello World!</span></li>

    <!--链接表达式-->
    <li>链接表达式：<a href="default.html" th:href="@{default.html}">Default Page.</a></li>
    <li>链接表达式：<a href="default.html" th:href="@{http://localhost:8080/{path}/i18n}">I18n Page.</a></li>
    <li>链接表达式：<a href="default.html" th:href="@{http://localhost:8080/message(id=${id})}">Message.</a></li>
</ul>

上述代码中的 th 属性都是 Thymeleaf 对应 Html 属性定义的属性，消息表达式案例中获取了定义在 resources 下的 home.properties 文件中的 home.title 的值。

在变量表达式案例中获取了后端传入的名为 name 的变量的值。

在选择变量表达式案例中获取了 th:object 属性指定对象 user 的 username 的值，在不设置 th:object 属性的情况下，${} 和 *{} 没有任何区别可通用，使用 *{} 也可以通过对象.属性访问对象的某个属性值。

链接表达式案例中为 <a> 标签指定了链接地址，而且还可以方便的指定链接需要的参数。

看下后端是如何将变量 name 和对象 user 传入页面的，代码如下：

字符串拼接

字符串拼接一般是使用 + 进行字符串之间的拼接，也可以使用双竖线包裹字符串内容来实现走服穿的拼接，使用方式如下：

<!--字符串拼接-->
<!--1.使用+号-->
<li><span>使用+号: </span><span th:text="'My name is '+${name}+'!'">Default</span></li>
<!--2.使用|号-->
<li><span>使用| 号: </span><span th:text="|My name is ${name}!|"></span></li>

测试结果如下：

1.使用+号: My name is jzman!
2.使用| 号: My name is jzman!

条件比较

Thymeleaf 中的条件判断语句是 th:if 和 th:unless，th:if 表示条件满足时执行，th:unless 表示条件不满足时执行，此外看一下 Thymeleaf 中常见的比较运算符如下：

• gt(>)：great than(⼤于)
• lt(<)：less than (⼩于)
• ge(>=)：great equal(⼤于等于)
• le(<=)：less equal(⼩于等于)
• not(!)：not(否定)
• eq(==)：equal(等于)
• neq/ne(!=)：not equal(不等于)

上述比较运算符中，其对应的字符串是各个比较运算符的别名，如大于号可以使用 gt 来表示等，这样做的目的是因为 Thymeleaf 模板可以在 XML 文档中使用，而 XML 文档中的属性值是不允许使用 < 和 > 标签的，当然在这里可以自由选择哪种方式进行项目开发，使用方式如下：

<!--条件比较--value=10-->
<li th:if="${value} gt 9"><span>gt(>)   </span><span th:text="|${value}|+'>9'">Default</span></li>
<li th:if="${user} ne null"><span>ne(!=)   </span><span th:text="'User object is not null!'">Default</span></li>
<!--if/unless-->
<li th:if="${value} gt 9"><span>if   </span><span th:text="|${value}|+'>9成立时才执行'">Default</span></li>
<li th:unless="${value} gt 11"><span>unless   </span><span th:text="|${value}|+'>11不成立时才执行'">Default</span></li>

测试结果如下：

gt(>) 10>9
ne(!=) User object is not null!
if 10>9成立时才执行
unless 10>11不成立时才执行

switch多分支

switch...case 语句也属于条件语句，th:case="*" 表示默认选择项，使用方式如下：

<li th:switch="${name}">
    <p th:case="jzman">He name is jzman.</p>
    <p th:case="manu">He name is manu.</p>
    <!--default-->
    <p th:case="*">others</p>
</li>

测试结果如下：

这是jzman

循环

在模板代码中使用 for 循环如下：

<li><span>不带索引</span>
    <table>
        <tr th:each="user:${list}">
            <td th:text="${user.userId}"></td>
            <td th:text="${user.username}"></td>
        </tr>
    </table>
</li>

<li><span>带索引</span>
    <table>
        <tr th:each="user,start:${list}">
            <td th:text="${start.index}"></td>
            <td th:text="${user.userId}"></td>
            <td th:text="${user.username}"></td>
        </tr>
    </table>
</li>

上述代码中通过 start 可以获取循环中的一些信息如下：

• index: 当前迭代对象的 index,从 0 开始计算；
• count: 当前迭代对象的 index,从 1 开始计算；
• size: 被迭代对象的⼤⼩；
• current: 当前迭代变量；
• even/odd: 布尔值，表示当前循环是否是偶数或奇数,从 0 开始计算；
• first: 布尔值，当前循环是否是第⼀个；
• last: 布尔值，当前循环是否是最后⼀个。

测试结果如下:

不带索引
1	jzman
2	躬行之
3	Tom
带索引
0	1	jzman
1	2	躬行之
2	3	Tom

其他操作符

?: 操作符先判断前面表达式是否为 null ,如果为 null 则使用后面表达式的值，反之，则使用前面表达式的值，使用方式参考如下：

<!--?:操作符：先判断前面表达式是否为null,如果为null则使用后面表达式的值，反之-->
<li><span>?:操作符：</span><span th:text="${name} ?: 'default'">Default</span></li>
<!--三目运算符也可以表示-->
<li><span>三目操作符：</span><span th:text="${name} ne null ? ${name}:'default'">Default</span></li>

测试结果如下：

?:操作符：jzman
三目操作符：jzman

_ 操作符仅表示无任何操作，如下变量 test 是为 null 的，所以在执行到 _ 操作符的时候不做任何操作。<span> 标签中的值是 Default:

<!--_操作符：表示不做任何操作-->
<li><span>_操作符：</span><span th:text="${test} ?: _">Default</span></li>

测试结果如下：

_操作符：Default

内联

Thymeleaf 中的支持表达式内联、JavaScript 内联、CSS 内联以及文本内联，下面介绍最常用的前三种内联方式：

1. 表达式内联
2. JavaScript内联
3. CSS内联

表达式内联

在 [[..]] 和 [(...)] 之间的表达式在 Thymeleaf 模板中称之为内联表达式，这相当于在 HTML 标签中分别使用 th:text 和 th:utext 来设置对应的元素的文本值，其使用方式如下：

<!--表达式内联-->
<!--对应表达式的值按照文本进行处理，不会处理HTML标签效果-->
<li><span>表达式内联：</span>公众号名称是[[${gzh}]]</li>
<!--对应表达式的值按照不按文本进行处理，会处理带HTML标签效果-->
<li><span>表达式内联：</span>公众号名称是[(${gzh})]</li>

两者最大的区别在于是否对文本处理，[[..]] 将不会对给定的文本进行处理，原样输出，而 [(...)] 会对带有格式的文本渲染后输出，测试结果如下：

表达式内联：公众号名称是<b>躬行之</b>
表达式内联：公众号名称是躬行之

上述第二行中的 <b> 标签中的内容 躬行之 是被加粗的，具体看文末运行效果图。

JavaScript内联

JavaScript 内联允许在 js 代码中直接使用 [[${...}]] 获取里面表达式的值，使用时需要在 <script> 模块使用 th:inline="javascript" 开启 javascript 内联支持，使用方式如下：

<script th:inline="javascript">
    function gzhName() {
        // 输出未转义的字符
        // let gzh = [(${gzh})];
        // js获取后端传入的名称为gzh的值
        let gzh = [[${gzh}]];
        console.log("gzhName：" + gzh);
        let span = document.getElementsByClassName("jsInline");
        span[0].innerHTML = gzh.toString();
    }
</script>
<!--...-->
<!--javascript内联-->
<li><span>javascript内联：</span><button onclick="gzhName()">从js获取变量值</button><span class="jsInline"></span></li>

运行程序后，点击 button 即可获取变量 gzh 的值，看下 JavaScript 的自然模板，使用注释包裹表达式，动态运行时会忽略注释前后的文件只输出表达式的值，如果是静态页面则忽略该表达式的值，使用方式参考如下：

// javascript自然模板
let name = /*[[${name}]]*/ "测试";
console.log("name：" + name);

此外，如果需要未转义的字符串可以使用 [(${...})] 来获取。

CSS内联

CSS 内联允许在 <style> 中直接使用 [[${...}]] 获取里面表达式的值，使用时需要在 <style> 中使用 th:inline="css" 开启 CSS 内联支持，使用方式如下：

<!--开启CSS内联-->
<style th:inline="css">
    /*设置idName对应id的元素内字体的颜色*/
    #[[${idName}]]{
        /*CSS自然模板*/
        color:/*[(${color})]*/ #0000FF;
    }
</style>

<!--CSS内联-->
<li><span>CSS内联：</span><span id="css">测试CSS内联</span></li>

上述代码中，后端会传入 idName 的值和 color 的值，这样就可以动态的设置 CSS 的样式了。

测试效果

可关注公众号【躬行之】交流学习，回复关键字【Spring Boot】获取对应案例源码链接。