模板引擎Thymeleaf使用教程（SpringBoot 第五章）
程序员文章站
2022-06-11 09:33:51
...
模板引擎
我们在上一章的学习中，有一个templates的资源放置位置我们并没有详细说明，现在我们来学习一下
他其实是模板引擎引擎中（thymeleaf）的专属的资源放置位置
那么模板引擎是什么呢？
模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。
当然也可以这样理解：
我们定义了一个模板templateA，他的内容如下
xxx的爱好是xxx
这就是一个简单的模板，当我们使用他时，只需要给xxx赋值就行了，如下
Vision的爱好是encoding
模板内部还有许多这样的例子（相对来说是静态的），他与业务数据（相对来说是动态的），可以实现动静分离
4.Thymeleaf
概念：
- Thymeleaf是⾯向Web和独⽴环境的现代服务器端Java模板引擎，能够处 理HTML，XML，JavaScript，CSS甚⾄纯⽂本。
- Thymeleaf旨在提供⼀个优雅的、⾼度可维护的创建模板的⽅式。 为了实 现这⼀⽬标，Thymeleaf建⽴在⾃然模板的概念上，将其逻辑注⼊到模板 ⽂件中，不会影响模板设计原型。 这改善了设计的沟通，弥合了设计和 开发团队之间的差距。
- Thymeleaf从设计之初就遵循Web标准——特别是HTML5标准 ，如果需 要，Thymeleaf允许您创建完全符合HTML5验证标准的模板。
特点：
- Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
- Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
- Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能
tips:此博客中的 Thymeleaf 是基于 Thymeleaf 3.0.11.RELEASE 版本进行说明的。
4.1、环境部署
在使用Thymeleaf 模板引擎之前，需要在pom.xml导入以下依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
查看导入的依赖：
HTML页面也需要进行如下配置
<html lang="en" xmlns:th="http://www.thymeleaf.org">
查看ThymeleafProperties（这是容器自动配置需要的配置文件），观察以下三个常量
private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;
public static final String DEFAULT_PREFIX = "classpath:/templates/";
public static final String DEFAULT_SUFFIX = ".html";
可以看到，他的默认编码格式为utf-8,且前缀为classpath:/templates/,后缀为html
使用时只需要html页面放在类路径下的templates下，thymeleaf就可以帮我们自动渲染了。
而且什么都不需要配置，只需要将他放在指定的文件夹下即可以了
4.2、基础表达式的语法
现在我们编写一个简单的案例来认识他的基础语法
controller:
@Controller
public class Test {
@RequestMapping("/TestThymeleaf")
public String testThymeleaf(Model model){
model.addAttribute("msg","Hello,Thymeleaf");
model.addAttribute("list", Arrays.asList("Vision","Json","Chris"));
return "thymeleaf";
}
}
html:
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <!--导入标签库-->
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--th:text 将他所在的标签的给替换掉-->
<h1 th:text="${msg}"></h1>
<hr>
<!--th:each 遍历-->
<h1 th:each="name:${list}" th:text="${name}"></h1>
<hr>
<!--[[]] 会将里面的表达式自动转义-->
<h1 th:each="name:${list}">[[${name}]]</h1>
</body>
</html>
运行结果：
注意一点：如果想要页面获取session或者其他的值，则必须写明作用域
controller:
@Controller
public class Test {
@RequestMapping("/TestThymeleaf")
public String testThymeleaf(HttpServletRequest request){
request.getSession().setAttribute("hello","Hello,Thymeleaf");
return "thymeleaf";
}
}
html:
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 th:text="${session.hello}"></h1>
</body>
</html>
基础表达式的语法可以分为四类：
- 1.变量表达式
变量表达式即OGNL表达式或Spring EL表达式(在Spring术语中也叫model attributes)。如下所示：${session.user.name}
它们将以HTML标签的一个属性来表示：
<span th:text="${book.author.name}">
<li th:each="book : ${books}">
- 2.选择或星号表达式
选择表达式很像变量表达式，不过它们用一个预先选择的对象来代替上下文变量容器(map)来执行，如下：*{customer.name}
被指定的object由th:object属性定义：
<div th:object="${book}">
...
<span th:text="*{title}">...</span>
...
</div>
- 3.文字国际化表达式
文字国际化表达式允许我们从一个外部文件获取区域文字信息(.properties)，用Key索引Value，还可以提供一组参数(可选).
#{main.title}
#{message.entrycreated(${entryId})}
可以在模板文件中找到这样的表达式代码：
<table>
...
<th th:text="#{header.address.city}">...</th>
<th th:text="#{header.address.country}">...</th>
...
</table>
- 4.URL表达式
URL表达式指的是把一个有用的上下文或回话信息添加到URL，这个过程经常被叫做URL重写。@{/order/list}
URL还可以设置参数：@{/order/details(id=${orderId})}
相对路径：@{../documents/report}
让我们看这些表达式：
<form th:action="@{/createOrder}">
<a href="main.html" th:href="@{/main}">
4.3、常用标签
当然 除了上述的th:xx标签，还有以下常用的
| 关键字 | 功能介绍 | 案例 |
|---|---|---|
| th:id | 替换id | <input th:id="'xxx' + ${collect.id}"/> |
| th:text | 文本替换 | <p th:text="${collect.description}">description</p> |
| th:utext | 支持html的文本替换 | <p th:utext="${htmlcontent}">conten</p> |
| th:object | 替换对象 | <div th:object="${session.user}"> |
| th:value | 属性赋值 | <input th:value="${user.name}" /> |
| th:with | 变量赋值运算 | <div th:with="isEven=${prodStat.count}%2==0"></div> |
| th:style | 设置样式 | th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''" |
| th:onclick | 点击事件 | th:onclick="'getCollect()'" |
| th:each | 属性赋值 | tr th:each="user,userStat:${users}"> |
| th:if | 判断条件 | <a th:if="${userId == collect.userId}" > |
| th:unless | 和th:if判断相反 | <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> |
| th:href | 链接地址 | <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> /> |
| th:switch | 多路选择 配合th:case 使用 | <div th:switch="${user.role}"> |
| th:case | th:switch的一个分支 | <p th:case="'admin'">User is an administrator</p> |
| th:fragment | 布局标签，定义一个代码片段，方便其它地方引用 | <div th:fragment="alert"> |
| th:include | 布局标签，替换内容到引入的文件 | <head th:include="layout :: htmlhead" th:with="title='xx'"></head> /> |
| th:replace | 布局标签，替换整个标签到引入的文件 | <div th:replace="fragments/header :: title"></div> |
| th:selected | selected选择框 选中 | th:selected="(${xxx.id} == ${configObj.dd})" |
| th:src | 图片类地址引入 | <img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" /> |
| th:inline | 定义js脚本可以使用变量 | <script type="text/javascript" th:inline="javascript"> |
| th:action | 表单提交的地址 | <form action="subscribe.html" th:action="@{/subscribe}"> |
| th:remove | 删除某个属性 | <tr th:remove="all"> 1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。 |
| th:attr | 设置标签属性，多个属性可以用逗号分隔 | 比如 th:attr="aaa@qq.com{/image/aa.jpg},title=#{logo}"，此标签不太优雅，一般用的比较少。 |
还有非常多的标签，这里只列出最常用的几个
注意：,由于一个标签内可以包含多个th:x属性，其生效的优先级顺序为:include>each>if/unless/switch/case>with>attr/attrprepend/attrappend>value/href>src>etc>text/utext>fragment>remove。
4.4、常用运算符
thymeleaf支持许多的运算符
Text operations:（文本操作）
String concatenation: +
Literal substitutions: |The name is ${name}|
Arithmetic operations:（数学运算）
Binary operators: + , - , * , / , %
Minus sign (unary operator): -
Boolean operations:（布尔运算）
Binary operators: and , or
Boolean negation (unary operator): ! , not
Comparisons and equality:（比较运算）
Comparators: > , < , >= , <= ( gt , lt , ge , le )
Equality operators: == , != ( eq , ne )
Conditional operators:条件运算（三元运算符）
If-then: (if) ? (then)
If-then-else: (if) ? (then) : (else)
Default: (value) ?: (defaultvalue)
Special tokens:
No-Operation: _
4.5、内置基本对象和内置工具对象
thymeleaf提供了许多的对象供我们使用
Variable Expressions: ${...}：获取变量值；OGNL；
1）、获取对象的属性、调用方法
2）、使用内置的基本对象：#18
#ctx : the context object.
#vars: the context variables.
#locale : the context locale.
#request : (only in Web Contexts) the HttpServletRequest object.
#response : (only in Web Contexts) the HttpServletResponse object.
#session : (only in Web Contexts) the HttpSession object.
#servletContext : (only in Web Contexts) the ServletContext object.
3）、内置的一些工具对象：
#execInfo : information about the template being processed.
#uris : methods for escaping parts of URLs/URIs
#conversions : methods for executing the configured conversion service (if any).
#dates : methods for java.util.Date objects: formatting, component extraction, etc.
#calendars : analogous to #dates , but for java.util.Calendar objects.
#numbers : methods for formatting numeric objects.
#strings : methods for String objects: contains, startsWith, prepending/appending, etc.
#objects : methods for objects in general.
#bools : methods for boolean evaluation.
#arrays : methods for arrays.
#lists : methods for lists.
#sets : methods for sets.
#maps : methods for maps.
#aggregates : methods for creating aggregates on arrays or collections.
4.3、补充
当然 如果觉得不够完善的话
这里提供几篇优质博客，供大家参考
上一篇： 直播软件搭建音视频开发中的视频采集