Thymeleaf介绍
Thymeleaf是Web和独立环境的现代服务器端Java模板引擎，能够处理HTML，XML，JavaScript，CSS甚至纯文本。
Thymeleaf的主要目标是提供一种优雅和高度可维护的创建模板的方式。为了实现这一点，它建立在自然模板的概念上，将其逻辑注入到模板文件中，不会影响模板被用作设计原型。这改善了设计的沟通，弥补了设计和开发团队之间的差距。
Thymeleaf也从一开始就设计了Web标准 - 特别是HTML5 - 允许您创建完全验证的模板，如果这是您需要的
springboot 用thymeleaf 还是挺不错的
Thymeleaf 基本语法
在html文件使用thymeleaf 标签 需要再头文件中加入命名空间
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
基础表达式
变量表达式${...}
html示例
<input type="text" name="userName"
value="James" th:value="${person.name}" />
java示例
@RequestMapping("basicExpression")
public String basicExpression(Model model){
model.addAttribute("person",this.getPerson());
return "basic_expression";
}
选择/星号表达式*{...}
注： 需要配合th:object标签使用
html示例
<div th:object="${person}">
<p>Name:
<span th:text="*{name}">Saturn</span>.
</p>
<p>Age:
<span th:text="*{age}">30</span>.
</p>
<p>Phone:
<span th:text="*{phone}">1350992····</span>.
</p>
<p>Address:
<span th:text="*{address}">广州**科技</span>.
</p>
</div>
java示例
@RequestMapping("selectExpression")
public String selectExpression(Model model){
model.addAttribute("person",this.getPerson());
return "basic_expression_selection";
}
文字国际化表达式 #{…}
- Thymeleaf文字国际化需要springmvc的支持
- 在资源目录 resources 下创建文件夹 spring-i18n 作为国际化文件的根目录，创建各种语言的
.properties文件存储需要使用的内容
URL表达式 @{…}
@{…}支持绝对路径和相对路径。其中相对路径又支持跨上下文调用url和协议的引用。
html 代码
//相对路径
<img th:width="100px" th:src="@{../images/{imageUrl}(imageUrl=${image})}">
//绝对路径
<img th:width="100px" th:src="@{/images/{imageUrl}(imageUrl=${image})}">
Thymeleaf 常用标签
普通标签
Thymeleaf中大部分标签都是与html原有属性对应的，比如html中script标签的src属性，在Thymeleaf中对应th:src标签，这样通过静态解析的时候，浏览器会读取src属性对应的js，而通过动态解析访问的时候，浏览器拿到的src即为th:src中的内容。
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>常用普通标签-ThymeLeaf 模板引擎</title>
</head>
<body>
<!-- Thymeleaf中大部分标签都是与html原有属性对应的，
比如html中script标签的src属性，在Thymeleaf中对应th:src标签-->
<!-- 引入iuput标签 -->
<input type="text" name="name"
th:value="ThymeleafValue" value="HtmlValue">
<!-- 引入img标签 -->
<img src="../images/001.jpg" width="200px"
th:width="100px" th:src="@{../images/001.jpg}">
<!-- 引用javascript标签 -->
<script type="text/javascript" src="../js/myThymeleaf.js"
th:src="@{/js/myThymeleaf.js}"></script>
</body>
</html>
常用标签
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>常用普通标签-ThymeLeaf 模板引擎</title>
</head>
<body>
<!--Thymeleaf中大部分标签都是与html原有属性对应的，
比如html中script标签的src属性，在Thymeleaf中对应th:src标签-->
<p>简单数据转换：</p>
<dt>年龄</dt>
<!-- 此示例表示保留两位小数位，整数位1位，不够位自动补0-->
<dd th:text="${#numbers.formatDecimal(person.age, 1, 2)}">25</dd>
<dt>生日</dt>
<dd th:text="${#dates.format(person.birthday, 'yyyy-MM-dd')}">2014-12-01</dd>
<p>字符串拼接</p>
<dt>地址</dt>
<dd th:text="${'广东省'+person.address}">越秀区</dd>
<p>表单</p>
<form th:action="@{/vic/person}" th:object="${person}"
method="post" th:method="post">
<!-- th:field常用于表单字段绑定。
通常与th:object一起使用。 属性绑定、集合绑定 -->
<dt>姓名：<input type="text" th:field="*{name}"/></dt>
<dt>年龄：<input type="text" th:field="*{age}"/></dt>
<dt>电话：<input type="text" th:field="*{phone}"/></dt>
<dt>地址：<input type="text" th:field="*{address}"/></dt>
<dt>生日：<input type="text" th:field="*{birthday}"/></dt>
<dt><input type="submit"/>
</form>
</body>
</html>
常用工具
工具对象表达式。常用于日期、集合、数组对象的访问。这些工具对象就像是java对象，可以访问对应java对象的方法来进行各种操作。有#maps、#dates、#calendars、#numbers、#lists等
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>工具对象-ThymeLeaf 模板引擎</title>
</head>
<body>
<p>工具对象表达式。常用于日期、集合、数组对象的访问。
这些工具对象就像是java对象，可以访问对应java对象的方法来进行各种操作。</p>
<p>#maps、#dates、#calendars、#numbers、#lists等</p>
<p>简单数据转换：</p>
<dt>#numbers：年龄</dt>
<dd th:text="${#numbers.formatDecimal(person.age, 1, 2)}">25</dd>
<dt>#dates：生日</dt>
<dd th:text="${#dates.format(person.birthday, 'yyyy-MM-dd')}">2014-12-01</dd>
<dt>#calendars：生日</dt>
<dd th:text="${#calendars.format(person.birthday, 'dd MMMM yyyy')}">2014-12-01</dd>
<div th:if="${#maps.isEmpty(persons)}">
<p>#maps:判断对象是否为空</p>
</div>
<div>
#lists:<span th:text="${#lists.size(personList)}"></span>
</div>
<!-- 变量必须在里面使用，否则无效 -->
<div th:with="sizes=${#lists.size(personList)}">
<h3>当前数据长度：<span th:text="${sizes}"></span></h3>
</div>
<div>
<!-- 此参数必须经过地址栏传到 -->
#httpServletRequest:
<span th:text="${#httpServletRequest.getParameter('ids')}"> </span>
</div>
</body>
</html>
循环、IF、Switch
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>IF/EACH/SWITCH-ThymeLeaf 模板引擎</title>
</head>
<body>
<div>
<span th:if="${switch > 8}"> 判断大于8 显示</span>
<span th:if="${switch > 32}"> 判断大于32 不显示</span>
</div>
--------------------------------------------------
<div>
<span th:unless="${switch > 8}"> 判断大于8 显示</span>
<span th:unless="${switch > 32}"> 判断大于32 不显示</span>
</div>
<div th:switch="${switch}">
<p th:case="'admin'">User is an administrator</p>
<p th:case="30">User is a manager</p>
<p th:case="20">User is a manager</p>
<!--默认情况-->
<p th:case="*">User is some other thing</p>
</div>
-- 循环 --
<div th:if="${personList!=null}">
<table>
<tr th:each="person : ${personList}">
<td th:text="${person.name}"></td>
<td th:text="${person.age}"></td>
<td th:text="${person.address}"></td>
</tr>
</table>
</div>
</body>
</html>
项目中被用到的 Thymeleaf 标签 - 片段（th:fragment）
这是我在裂变工具中看到的熟悉的代码，类似于 jsp:include 之类的：
editUser.html 定义一个片段
<!-- 用户编辑模态框开始 -->
<div th:fragment="editUserFragment">
….内容
</div>
userCenter.html 引用一个片段
<div th:replace="userManager/editUser::editUserFragment"></div>
没错，上面就是我在项目中经常到的所谓类似于包含的标签。我们经常会想要包含在模板片段来自其他模板。
常见的用途是页脚、标题、菜单等。为了做到这一点,Thymeleaf需要我们定义包含可用的片段,我们可以通过使用th:fragment标签
userManager/editUser是要引入页面的路劲加上去掉后缀的名称
editUserFragment就是dom选择器，即为th:fragment中的值
通过使用th:include or th:replace or th:insert 属性之一都可以使用片段
对于片段的灵活运用，那么就是对它进行参数传递
定义一个片段
<meta charset="utf-8" pageEncoding="utf-8"/>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!-- 用户编辑模态框开始 -->
<div th:fragment="params(one,two)">
<p th:text="${one}"></p>
<p th:text="${two}"></p>
</div>
引用一个片段
<div th:replace="param::params(${dataOne},${dataTwo})"></div>
