Spring中使用ThymeLeaf进行动态页面开发（二）

2020-07-30

在上文中，我们主要介绍了在后端使用Model类和在前端使用”th:text=“达到前端调用后端数据的效果。

其中的 th:text= 是ThymeLeaf自定义的HTML标签，语法的作用就是会动态替换掉 html 标签的内部内容。

注：th 开头的标签属性均是使用 ThymeLeaf 语法，无须添加任何配置，但是在IDEA中，如果不在 <html> 标签中添加 xmlns 则会提示警告（但不影响正常运行），使用“Alt+enter”后会自动填写相关配置：
1
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

当然，这只是最基本的简单映射，我们接下来会利用 ThymeLeaf 中的 th:each 实现循环逻辑。

例如：

1
2
3

<ul th:each="song : ${songs}">
  <li th:text="${song.name}">歌曲名称</li>
</ul>

和 Java 中的 xxx : xxx 一样，这种方式不关心当前迭代次数次数，如果需要用到当前迭代次数，可以这么完成：

<ul th:each="song,it: ${songs}">
  <li>
    <span th:text="${it.count}"></span>
    <span th:text="${song.name}"></span>
  </li>
</ul>

其中的核心就在于这个 it ，而它的 count 属性则代表当前迭代次数+1（即从1开始计算）。

关于 it 还有一些其他的常用属性：

it.index ：当前对象的迭代次数（即从1开始计算）。
it.size ：迭代对象的大小。
it.current ：当前迭代变量。
it.even/odd ：布尔值，当前循环是否为偶数/奇数。
it.first/last ：布尔值，当前循环是否为第一个/最后一个。

讲完了循环，自然少不了条件语句，我们可以用 th:if 或者 th:unless 实现条件判断逻辑,其中if

表示ture的情况会渲染，unless 表示false的情况下会渲染。

例如：

1 2	<span th:if="${user.sex == 'male'}">男</span> <span th:unless="${user.sex == 'male'}">女</span>

除了boolean 值以外，以下也会被ThymeLeaf视为true：

值非空
值是非0数字
值是字符串,但是不是 false, off or no
值不是 boolean 值,数字,character 或字符串

常见的例子有男女判断

如果我们在同一文本中不需要全部内容都从后端传入，那就需要用到字符串拼接，通常有以下两种方法：

//1.固定文本使用''包围，然后使用加号连接
<span th:text="'00:00/'+${totalTime}"></span>

//2.全部文本使用||包围，在其中使用加号连接（推荐本方法，阅读起来清爽高效）
<span th:text="|00:00/${totalTime}|"></span>

利用 ThymeLeaf 也可以获取当前时间，可以利用 dates ， LocalDate 或 LocalDateTime 进行获取。

使用 LocalDate 或 LocalDateTime 需要添加的依赖：

<dependency>
  <groupId>org.thymeleaf.extras</groupId>
  <artifactId>thymeleaf-extras-java8time</artifactId>
  <version>3.0.4.RELEASE</version>
</dependency>

具体的前后端写法如下：

@RequestMapping("/demo")
public String index(Model model){

  Date dateVar = new Date();
//LocalDateTime dateVar = LocalDateTime.now();

  model.addAttribute("dateVar",dateVar);
  return "demo";
}

<p th:text="${#dates.format(dateVar, 'yyyy-MM-dd')}"></p>
<p th:text="${#dates.format(dateVar, 'yyyy年MM月dd日')}"></p>

<p th:text="${#dates.format(dateVar, 'yyyy-MM-dd HH:mm:ss')}"></p>
<p th:text="${#dates.format(dateVar, 'yyyy年MM月dd日 HH时mm分ss秒')}"></p>

<p th:text="${#temporals.format(dateVar, 'yyyy-MM-dd')}"></p>
<p th:text="${#temporals.format(dateVar, 'yyyy年MM月dd日')}"></p>

<p th:text="${#temporals.format(dateVar, 'yyyy-MM-dd HH:mm:ss')}"></p>
<p th:text="${#temporals.format(dateVar, 'yyyy年MM月dd日 HH时mm分ss秒')}"></p>

其中用到了 #{xxx} 与之前我们使用的 ${xxx} 有所不同。变量使用的是 ${变量名} ，而工具类则使用的是 #{工具类} ，除了上文用到的日期方法（ #dates.format(time,'format') )，还有用的比较多的就是字符串方法了，例如：

(因为转义字符关系，在 { 与 # 之间添加了空格)

${ #strings.toUpperCase(name)/toLowerCase(name)} ：字符串全部大/小写
${ #strings.arrayJoin(array,',')} ：把字符串数组组合成一个字符串并以，连接，比如 ["a","b"] 执行后就会变成 a,b
${ #strings.arraySplit(str,',')} ：arrayJoin 的逆处理过程
${ #strings.trim(str)} ：去除字符串左右两端空格
${ #strings.length(str)} ：得到字符串长度

以下字符串方法一般和 th:if 一起使用

${ #strings.equals(str1,str2)} ：比较两个字符串是否完全相等
${ #strings.equalsIgnoreCase(str1,str2)} ：比较两个字符串忽略大小写后是否相等
${ #strings.isEmpty(str)} ：判断是否为空（或null），在检查前会先执行trim操作去掉空格
${ #strings.arrayIsEmpty(name)} ：判断数组是否为空
${ #strings.listIsEmpty(name)}：判断列表是否为空

更多内置对象查询点击此处