一、thymeleaf官網
官網：https://www.thymeleaf.org/index.html
doc：https://www.thymeleaf.org/documentation.html
二、springmvc+thymeleaf從這里開始
1.修改pom.xml，引入相關依賴。
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf -->
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.2.RELEASE</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf-spring4 -->
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring4</artifactId>
<version>2.1.2.RELEASE</version>
</dependency>
</dependendies>
2.xml方式配置thymeleaf視圖解析器：
<!-- Thymeleaf View Resolver - implementation of Spring's ViewResolver interface -->
<bean id="viewResolver" class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
<property name="templateEngine" ref="templateEngine" />
<property name="characterEncoding" value="UTF-8" />
</bean>
<!-- Thymeleaf Template Engine (Spring4-specific version) -->
<bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
<property name="templateResolvers">
<set>
<ref bean="templateResolver" />
</set>
</property>
</bean>
<!-- Thymeleaf Template Resolver -->
<bean id="templateResolver" class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">
<property name="prefix" value="/WEB-INF/templates/" />
<property name="templateMode" value="HTML" />
<property name="suffix" value=".html"></property>
<property name="characterEncoding" value="UTF-8"></property>
</bean>
3.在controller中為變量name賦值。
@RequestMapping(value="/index")
public String index(Model model){
model.addAttribute("name","world");
return "index.html";
}
4.在index.html中使用thymeleaf語法讀取變量name的值。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Title</title>
</head>
<body>
<div>your name is:<span th:text="${name}"></span></div>
</body>
</html>
注意：需要修改html節點，添加xmlns:th="http://www.thymeleaf.org"
三、thymeleaf常見問題小結
1.如何添加鏈接：
<a th:href="@{/category/index}">首頁</a>
<a class="btn btn-xs btn-default" th:href="@{/role/edit(roleId=${r.roleId})}">編輯</a>
2.表單綁定示例：
<form method="post" th:object="${cate}" th:action="@{/category/save}" enctype="multipart/form-data">
<table>
<tr>
<td>id:</td>
<td><input type="text" th:field="*{cateId}"></td>
</tr>
<tr>
<td>name:</td>
<td><input type="text" th:field="*{cateName}"></td>
</tr>
<tr>
<td>file:</td>
<td>
<input type="file" accept="image/jpeg,image/png,image/jpg" name="picture">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交">
</td>
</tr>
</table>
</form>
3.展示文本
<td th:text="${r.name}"></td>
如何替換子字符串
<span th:text="|welcome,${name}|"></span>
如何轉換日期格式
${#dates.format(v.AddDate,'yyyy-MM-dd HH:mm:ss')}
4.如何在js讀取后台數據
var url="[[${url}]]";
5.條件表達式
<td th:text="(${r.deleteFlag}==0)?'正常':'刪除'"></td>
6.thymeleaf如何實現switch選擇
<td th:switch="${r.type}">
<span th:case="page">頁面</span>
<span th:case="module">模塊</span>
<span th:case="*">其他</span>
</td>
注意：默認值 用th:case="*"
7.th:object語法
首先在controller為對象賦值
@Controller
@RequestMapping("/demo")
public class DemoController {
@RequestMapping("/index")
public String index(Model model){
OrgResource resource=new OrgResource();
resource.setId("11");
resource.setName("test");
model.addAttribute("resource",resource);
return "demo/index.html";
}
}
使用*{}語法可以方便讀取th:object對象的屬性。
<div th:object="${resource}">
<div th:text="*{id}"></div>
<div th:text="*{name}"></div>
</div>
8.迭代 th:each
<th:block th:each="r,iterstat:${resources}">
<tr th:class="${iterstat.odd}?'odd'">
<td th:text="${r.orderNo}"></td>
<td th:switch="${r.type}">
<span th:case="page">頁面</span>
<span th:case="module">模塊</span>
</td>
<td th:text="(${r.deleteFlag}==0)?'正常':'刪除'"></td>
<td th:switch="${r.deleteFlag}">
<span th:case="0"><a>刪除</a></span>
<span th:case="1"><a>恢復</a></span>
</td>
</tr>
</th:block>
9.如何使用Fragment layout布局
首先新建layout.html作為布局模板。
<!DOCTYPE html>
<html lang="zh-CN" xmlns:layout="http://www.thymeleaf.org" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
……
<body>
<div layout:fragment="content"></div>
</body>
</html>
然后在index.html中使用layout，並用頁面具體內容替代content fragment。
<!DOCTYPE html>
<html layout:decorator="task/layout" xmlns:layout="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div layout:fragment="content">
測試頁面
</div>
</body>
</html>
第一次使用layout布局的時候，調試了好半天就是不生效。后來找到了原因，dependency需要添加：
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>${nz.net.ultraq.thymeleaflayout-version}</version>
</dependency>
10.如何用if條件動態調整form action
<form th:action="@{/Video/{path}(path=${isCollect}?'CollectVideoList':'VideoList')}">
11.thymeleaf回顯富文本編輯器內容
將th:text換成th:utext即可。
<script type="text/plain" id="content" name="content" th:utext="${article.content}"></script>