一、thymeleaf官网
官网：https://www.thymeleaf.org/index.html
doc：https://www.thymeleaf.org/documentation.html
二、springmvc+thymeleaf从这里开始
1.修改pom.xml，引入相关依赖。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<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视图解析器：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!-- 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赋值。
|
1
2
3
4
5
|
@RequestMapping
(value=
"/index"
)
public
String index(Model model){
model.addAttribute(
"name"
,
"world"
);
return
"index.html"
;
}
|
4.在index.html中使用thymeleaf语法读取变量name的值。
|
1
2
3
4
5
6
7
8
9
|
<!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.如何添加链接：
|
1
|
<a th:href=
"@{/category/index}"
>首页</a>
|
<a class="btn btn-xs btn-default" th:href="@{/role/edit(roleId=${r.roleId})}">编辑</a>
2.表单绑定示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<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.展示文本
|
1
|
<td th:text=
"${r.name}"
></td>
|
如何替换子字符串
|
1
|
<span th:text=
"|welcome,${name}|"
></span>
|
如何转换日期格式
|
1
|
${#dates.format(v.AddDate,
'yyyy-MM-dd HH:mm:ss'
)}
|
4.如何在js读取后台数据
|
1
|
var url=
"[[${url}]]"
;
|
5.条件表达式
|
1
|
<td th:text=
"(${r.deleteFlag}==0)?'正常':'删除'"
></td>
|
6.thymeleaf如何实现switch选择
|
1
2
3
4
5
|
<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为对象赋值
|
1
2
3
4
5
6
7
8
9
10
11
12
|
@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对象的属性。
|
1
2
3
4
|
<div th:object=
"${resource}"
>
<div th:text=
"*{id}"
></div>
<div th:text=
"*{name}"
></div>
</div>
|
8.迭代 th:each
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<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作为布局模板。
|
1
2
3
4
5
6
7
8
9
10
11
|
<!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。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!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需要添加：
|
1
2
3
4
5
|
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>${nz.net.ultraq.thymeleaflayout-version}</version>
</dependency>
|
10.如何用if条件动态调整form action
|
1
|
<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>
本文转自 陈敬（Cathy） 博客园博客，原文链接：http://www.cnblogs.com/janes/p/7234465.html，如需转载请自行联系原作者
扫一扫
427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
