Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。它与 JSP，Velocity，FreeMaker 等模板引擎类似，也可以轻易地与 Spring MVC 等 Web 框架集成。与其它模板引擎相比，Thymeleaf 最大的特点是，即使不启动 Web 应用，也可以直接在浏览器中打开并正确显示模板页面 。
Thymeleaf 是新一代 Java 模板引擎，支持 HTML 原型，以直接被浏览器打开，此时浏览器会忽略未定义的 Thymeleaf 标签属性，展示 thymeleaf 模板的静态页面效果。当在应用程序中会动态地替换掉页面设置的标签属性。
一、访问map中的数据
@RequestMapping("/index")
public String hello(Model map){
Map<String, Object> student= new HashMap<>();
student.put("name", "潘某人seo");
map.addAttribute("student",student);
return "index";
}
1
2
3
4
5
6
7
2
3
4
5
6
7
<span th:text="${student.name}"></span>
字符串拼接：<h2 th:text="'姓名：'+${student.name}"></h2>
三元表达式:<input th:value="${age gt 30 ? '中年':'年轻'}"/>
gt：great than（大于）
ge：great equal（大于等于）
eq：equal（等于）
lt：less than（小于）
le：less equal（小于等于）
ne：not equal（不等于）
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
记住：th:text就是把数据渲染到两个标签中间 ，其中th是thymeleaf简写。
二、访问pojo中的属性
//pojo
Book book = new Book("辟邪剑谱",199.99f,"localhost");
map.addAttribute("book",book);
1
2
3
2
3
<img th:src="${book.bookUrl}"/>
<span th:text="${book.bookName}"/>
1
2
2
记住：如果你想让标签属性值动态化，请在标签属性名前面加上th:
三、循环遍历list集合
List<Book> books = new ArrayList<Book>();
for (int i = 0; i < 10; i++) {
Book b = new Book("book"+i, 100f, i);
books.add(b);
}
map.addAttribute("books",books);
1
2
3
4
5
6
2
3
4
5
6
<table border="1px" cellspacing="0px" cellspadding="0px" width="100%">
<tr>
<td>编号</td><td>书名</td><td>书价格</td><td>图片地址</td>
</tr>
<tr th:each="book:${books}">
<td>编号</td>
<td th:text="${book.bookName}">书名</td>
<td th:text="${book.bookPrice}">书价格</td>
<td th:text="${book.bookUrl}">图片地址</td>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
取循环下标：
<tr th:each="user,userStat : ${list}">
<th th:text="${userStat.index}">状态变量：index</th>
<th th:text="${userStat.count}">状态变量：count</th>
<th th:text="${userStat.size}">状态变量：size</th>
<th th:text="${userStat.current.userName}">状态变量：current</th>
<th th:text="${userStat.even}">状态变量：even****</th>
<th th:text="${userStat.odd}">状态变量：odd</th>
<th th:text="${userStat.first}">状态变量：first</th>
<th th:text="${userStat.last}">状态变量：last</th>
</tr>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
说明：
- index：列表状态的序号，从0开始；
- count：列表状态的序号，从1开始；
- size：列表状态，列表数据条数；
- current：列表状态，当前数据对象
- even：列表状态，是否为奇数，boolean类型
- odd：列表状态，是否为偶数，boolean类型
- first：列表状态，是否为第一条，boolean类型
- last：列表状态，是否为最后一条，boolean类型
四、if逻辑判断
<h1>
<b th:text="${name}"></b>：
<span th:if="${age gt 30}">中年</span>
<span th:unless="${age gt 30}">年轻</span>
</h1>
1
2
3
4
5
2
3
4
5
记住：th:if表示满足条件显示标签，th:unless表示不满足条件显示标签
五、日期处理
<span th:text="${#dates.format(post.postCreate,'yyyy-MM-dd')}">2017年11月8日</span>
1
六、定义片段和引用片段
定义片段：新建footer.html,并在footer.html中声明片段
<footer th:fragment="copy">
<script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
</footer>
1
2
3
2
3
引用片段：在index.html中引用footer片段：
<!--下面的footer是页面的名字，不是标签的名字-->
<div th:insert="footer::copy"></div>
<div th:replace="footer::copy"></div>
<div th:include="footer::copy"></div>
结果为：
<div>
<footer>
<script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
</footer>
</div>
<footer>
<script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
</footer>
<div>
<script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
说明：
- th:insert ：保留自己的主标签，保留th:fragment的主标签。
- th:replace ：不要自己的主标签，保留th:fragment的主标签。
- th:include ：保留自己的主标签，不要th:fragment的主标签。（官方3.0后不推荐）
七、内联方式
如果不内联我们这么拼接字符串
<span th:text="'名字'+${stu.name}+'性别'+${stu.sex}+'年龄'+${stu.age}"></span>
1
使用内联我们就可以这么玩：
<span th:inline="text">名字[[${stu.name}]]性别[[${stu.sex}]]年龄[[${stu.age}]]</span>
1
一对比，发现第一种拼接起来麻烦，第二种更快捷，所以内联还是有使用场景的
注意:一定要加th:inline=“text”
八、内置对象
<span th:if="${session.name!=null}" th:text="'欢迎:'+${session.name}"></span>
<span th:id="${session.name==null}" th:>请登录</span>
1
2
2
九、自定义标签属性
<span th:sex="${stu.sex}" th:age="${stu.age}"></span>
1
这样写标签属性是取不到值的，你必须这么写
<main th:attr="sex=${stu.sex},age=${stu.age}"></span>
1
