Spring Boot系列之Thymeleaf常用语法
原文首发于微信公众号：躬行之(jzman-blog)
上篇文章中简单介绍了 Thymeleaf 模板的依赖、基本属性以及使用方式，下面将从以下几个方面介绍 Thymeleaf 中的常见语法：
- 表达式
- 字符串拼接
- 条件比较
- switch多分支
- 循环
- 其他操作符
- 内联
- 测试效果
下文中涉及到的部分参数或者变量的具体值如下：
// 测试用传值
model.addAttribute("name", "jzman");
model.addAttribute("gzh", "躬行之");
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 属性的情况下，${} 和 *{} 没有任何区别可通用，使用 *{} 也可以通过对象.属性访问对象的某个属性值。
链接表达式案例中为 标签指定了链接地址，而且还可以方便的指定链接需要的参数。
看下后端是如何将变量 name 和对象 user 传入页面的，代码如下：
字符串拼接
字符串拼接一般是使用 + 进行字符串之间的拼接，也可以使用双竖线包裹字符串内容来实现走服穿的拼接，使用方式如下：
<li><span>使用+号: span><span th:text="'My name is '+${name}+'!'">Defaultspan>li>
<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 文档中的属性值是不允许使用 < 和 > 标签的，当然在这里可以自由选择哪种方式进行项目开发，使用方式如下：
<li th:if="${value} gt 9"><span>gt(>) span><span th:text="|${value}|+'>9'">Defaultspan>li>
<li th:if="${user} ne null"><span>ne(!=) span><span th:text="'User object is not null!'">Defaultspan>li>
<li th:if="${value} gt 9"><span>if span><span th:text="|${value}|+'>9成立时才执行'">Defaultspan>li>
<li th:unless="${value} gt 11"><span>unless span><span th:text="|${value}|+'>11不成立时才执行'">Defaultspan>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>
<p th:case="*">othersp>
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 则使用后面表达式的值，反之，则使用前面表达式的值，使用方式参考如下：
<li><span>?:操作符：span><span th:text="${name} ?: 'default'">Defaultspan>li>
<li><span>三目操作符：span><span th:text="${name} ne null ? ${name}:'default'">Defaultspan>li>
测试结果如下：
?:操作符：jzman
三目操作符：jzman
_ 操作符仅表示无任何操作，如下变量 test 是为 null 的，所以在执行到 _ 操作符的时候不做任何操作。 标签中的值是 Default:
<li><span>_操作符：span><span th:text="${test} ?: _">Defaultspan>li>
测试结果如下：
_操作符：Default
内联
Thymeleaf 中的支持表达式内联、JavaScript 内联、CSS 内联以及文本内联，下面介绍最常用的前三种内联方式：
- 表达式内联
- JavaScript内联
- CSS内联
表达式内联
在 [[..]] 和 [(...)] 之间的表达式在 Thymeleaf 模板中称之为内联表达式，这相当于在 HTML 标签中分别使用 th:text 和 th:utext 来设置对应的元素的文本值，其使用方式如下：
<li><span>表达式内联：span>公众号名称是[[${gzh}]]li>
<li><span>表达式内联：span>公众号名称是[(${gzh})]li>
两者最大的区别在于是否对文本处理，[[..]] 将不会对给定的文本进行处理，原样输出，而 [(...)] 会对带有格式的文本渲染后输出，测试结果如下：
表达式内联：公众号名称是<b>躬行之</b>
表达式内联：公众号名称是躬行之
上述第二行中的 标签中的内容 躬行之 是被加粗的，具体看文末运行效果图。
JavaScript内联
JavaScript 内联允许在 js 代码中直接使用 [[${...}]] 获取里面表达式的值，使用时需要在