Thymeleaf是一个Java类库，它是一个xml/xhtml/html5的模板引擎，可以作为MVC的Web引用的View层。
Thymeleaf还提供了额外的模块与SpringMVC集成，因此推荐使用Thymeleaf来替代JSP
1、引入Thymeleaf
下面的diam是一个基本的Thymeleaf模板页面，在这里引入Boostrap（作为样式控制）和jQuery（DOM操作）
<html xmlns:th="http://www.thymeleaf.org"><!--1-->
<head>
<meta content="text/html;charset=UTF-8"/>
<link th:src="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet"/><!--2-->
<link th:src="@{bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet"/><!--2-->
</head>
<body>
<script th:src="@{jquery-1.10.2.min.js}" type="text/javascript"></script><!--2-->
<script th:src="@{bootstrap/css/bootstrap.min.js}"></script><!--2-->
</body>
</html>
Analysize:
a、通过xmlns:th=http://www.thymeleaf.org命名空间，将镜头页面转换为动态的视图。需要进行动态处理的元素将使用“th：”为前缀；
b、通过“@{}”引用web静态资源，这在JSP下是极易出错的。
2、访问model中的数据
通过“${}”访问model中的属性，这和JSP极为相似
<div lass = "panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">访问model</h3> </div> <div class="panel-body"> <span th:text="${singlePerson.name}"></span> </div> </div>
Analysize:
使用<span th:text="${singlePerson.name}"></span>访问model中的singlePerson的name属性。注意：需要处理的动态内容需要加上“th:”前缀。
3、model中的数据迭代
Thymeleaf的迭代和JSP的写法相似
<div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">列表</h3> </div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item" th:each="person:${people}"> <span th:text="${person.name}"></span> <span th:text="${person.age}"></span> </li> </ul> </div> </div>
Analysize：
使用th:each来做循环迭代（th:each="person:${people}"）,person作为迭代元素来使用。然后像上面一样访问迭代元素中的属性。
4、数据判断
<div th:if="${not #lists.isEmpty(people)}"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">列表</h3> </div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item" th:each="person:${people}"> <span th:text="${person.name}"></span> <span th:text="${person.age}"></span> </li> </ul> </div> </div> </div>
Analysize：
通过${not#lists.isEmpty{people}}表达式判断people是否为空。Thymeleaf支持>、<、>=、<=、==、！=作为比较条件，同时也支持将SpringEL表达式语言用于条件中。
5、在JavaScript中访问model
在项目中，需要在JavaScript访问model中的值，在Thymeleaf里实现代码如下：
<script th:inline="javascript"> var single = [[${singlePerson}]]; console.log(single.name + "/" + single.age) </script>
Analysize：
通过th:inline="javascript"添加到script标签，这样JavaScript代码即可访问model中的属性
通过“[[${}]]”格式获得实际的值
还有一种时需要在html的代码里访问model中的属性，例如需要在列表后单击每一行后面的按钮获得model中的值，可做如下处理：
<li class="list-group-item" th:each="person:${people}"> <span th:text="${person.name}"></span> <span th:text="${person.age}"></span> <button class="btn" th:onclick="'getName(\'' + ${person.name} + '\');'">获得名字</button> </li>
Analysize：
注意格式th:onclick="'getName(\"+${person.name} + '\');'"。
6、其他知识
更多完整的Thymeleaf的知识，可以查看https://www.thymeleaf.org/官网