快速入门springboot 网页开发（二）Thymeleaf 入门初级

注：本博客参考于武汉科技大学张智老师的PPT

Thymeleaf 模板引擎

◼ Thymeleaf 是一个服务器端 Java 模板引擎，适用于 Web 和独立环境，
能够处理 HTML， XML， JavaScript， CSS 甚至纯文本等。
◼ 常见的模板引擎： Thymeleaf， FreeMarker， Velocity， JSP等。
◼ Thymeleaf 是新一代的模板引擎， Spring 4.0 推荐的前端模版引擎（完
全取代 JSP）。
◼ Thymeleaf 从一开始就设计了Web标准，特别是 HTML5。

Thymeleaf 目标

◼ Thymeleaf 主要目标是为开发工作流程带来优雅的自然模板： HTML可
以在浏览器中正确显示，并且可以作为静态原型工作，从而可以在开发
团队中加强协作
Thymeleaf 目标就是前后端分离，即同一个 HTML 文件，前端人员以静态原型方式
打开时，看到是它们的内容，而后端人员通过服务器打开时，看到是动态数据 — 自然模板

application.properties 的相关配置

#关闭缓存
spring.thymeleaf.cache = false
#设置thymeleaf页面的存储路径
spring.thymeleaf.prefix=classpath:/templates/
#设置thymeleaf页面的后缀
spring.thymeleaf.suffix=.html
#设置thymeleaf页面的编码
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8

控制器

常用表达式

◼ 变量表达式 ${ }
◼ 选择(星号)表达式 *{ }
◼ 消息(#)表达式 #{ }
◼ 链接表达式 @{ }
◼ 片段表达式 ~{ }

1)变量表达式： $ { }

◼ 使用方法： th:xx = “$ { }” 获取对象属性值给 th:xx 。

th:text 不会解析html（称为被HTML转义）
th:utext 会解析html（称为不执行HTML转义）

${ } 一些用法示例

◼ 字符串连接、数学运算、布尔逻辑和三目运算等。

<p th:text=" '欢迎' + ${stu.name} ">hello</p>
<p th:text=" 欢迎 ${stu.name} ">hello</p>  错误用法
<p th:text=" |欢迎 ${stu.name}| ">hello</p> | | 和 + 效果一样
<p th:text=" '欢迎' + ${ stu.name!=null ? stu.name : 'nobody' } ">hello</p>  三目运算
<p th:text="1+3">结果1</p> 算数运算
<p th:text="9%2">结果2</p>

三目运算

If-then-else： (if) ? (then) : (else)
If-then： (if) ? (then)
Default： (value) ? : (defaultvalue)
示例：
'User is of type ’ + ( ${user.isAdmin()} ? ‘Admin’ : ( ${user.type} ?: ‘Unknown’ ) )

2）选择(星号)表达式： * { }

使用方法： 首先通过 th:object 获取对象，然后使用 th:xx = " $\ast$ { }" 获取对
象属性值（ $\ast$ 表示不用写对象名）。

3）消息(#)表达式： #{ }

◼ 主要是用于读取自定义属性文件(.properties)中的值，常用于国际化。
1）在 templates 目录中新建属性文件 message.properties，并写入以下内容：
（2）在 application.properties 中加入属性文件所在位置：
#指定属性文件所在位置
spring.messages.basename=templates/message
（3）页面中读取配置文件：

<p th:text="#{home.province}"></p>
<p th:text="#{home.city}"></p> 

4）链接表达式： @{ }

◼ 使用方法：通过链接表达式 @{ } 直接拿到应用路径，然后拼接静态资
源路径。

th:src th:attr

<img th:src="@{/images/苏轼.jpg}"/> th:src 用于设置图片来源
另一种写法：
<img th:attr="src=@{/images/苏轼.jpg}" /> th:attr 用于设置属性

如果图片没有显示，需要 build 菜单 → rebuild项目

th:href 用于设置超链接值

<a th:href="@{/}">首页</a>   
<a th:href="@{/test1(id=${stu.id}, name=${stu.name})}">跳转</a>
<a th:href="@{/test5/{id}/{name}(id=${stu.id},name=${stu.name})}">跳转</a>

图解

条件判断 th:if th:unless

◼ th:if 当条件为 true 则显示。
◼ th:unless 当条件为 false 则显示

th:switch / th:case

与 Java 中的 switch 语句等效
◼ 只要其中⼀个 th:case 的值为 true，则其他 th:case 都将被视为 false。
◼ 当有多个 case 的值为 true 时，则只取第一个。
◼ default 选项指定为 th:case = “*”，即当没有 case 的值为 true 时，将显示
default 的内容，如果有多个 default ，则只取第一个。

<div th:switch="${stu.id}">
<p th:case="2019001" th:text=" '你好' + ${stu.name}">2019001</p>
<p th:case="2019002" th:text=" '再见' + ${stu.name}">2019002</p>
<p th:case="*" th:text="查无此人">nobody</p>
</div>

迭代循环 th:each

◼ th:each 遍历集合，基本语法：

<div th:each="变量名 : 集合">
<p th:text="${变量名}"></p>
</div>

遍历普通集合（如字符串集合）

List<String> strList = new ArrayList<String>();
strList.add("aa");
strList.add("bb");
strList.add("cc");
model.addAttribute("strList",strList);

<div th:each="s:${strList}">
<p th:text="${s}"></p>
</div>

遍历对象集合

List<Student> stuList=new ArrayList<Student>();
stuList.add(new Student(2019001,"小明"));
stuList.add(new Student(2019002,"小丽"));
stuList.add(new Student(2019003,"小王"));
model.addAttribute("stuList",stuList);

<table>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr th:each="stu:${stuList}">
<td th:text="${stu.id}">000</td>
<td th:text="${stu.name}">nobody</td>
</tr>
</table>

迭代状态变量的使用

◼ 在集合的迭代过程还可以获取状态变量，只需在变量后面指定状态变量
名即可，通过状态变量的属性可获取集合的下标/序号、总数、是否为单
数/偶数行、是否为第一个/最后一个等信息。

<div th:each = "变量名， 状态变量名 : 集合" >
<p th:text = "${状态变量.属性}" ></p>
</div>

状态变量的属性
index：当前迭代对象的序号，从0开始，这是索引属性
count：当前迭代对象的序号，从1开始，这个是统计属性
size：迭代变量元素的总量，这是被迭代对象的大小属性
even/odd：布尔值，当前循环是否是偶数/奇数（从0开始计算）
first：布尔值，当前循环是否是第一个
last：布尔值，当前循环是否是最后一个
current：当前迭代变量

附录：常用th标签

完