Spring Boot系列之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 属性指定对象 userusername 的值,在不设置 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:ifth:unlessth: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:textth: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 的样式了。

测试效果

作者:躬行之
原文:https://juejin.im/post/6893538507856281614