一、Thymeleaf 模板引擎是什么?
Thymeleaf 是 Web 和独立环境的现代服务器端 Java 模板引擎，能够处理HTML，XML，JavaScript，CSS 甚至纯文本。Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP且比他更强大。与其它模板引擎相比， Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用。
Spring Boot 中使用 Thymeleaf 模板引擎时非常简单，因为 Spring Boot 已经提供了默认的配置，比如解析的文件前缀，文件后缀，文件编码，缓存等等，程序员需要的只是写 html 中的内容即可。
thyme leaf 百里香 叶
Thymeleaf 官网：
https://www.thymeleaf.org/
Thymeleaf 在Github：https://github.com/thymeleaf/thymeleaf
二、常用基础语法
引入命名空间
<html xmlns:th="http://www.thymeleaf.org">
地址问题
复制HTML<link rel="stylesheet" th:href="@{../plugins/bootstrap.min.css}" />
<script th:src="@{../plugins/jquery/jquery-2.2.3.min.js}"></script>
<img alt="图片" th:src="@{/images/thymeleaf.png}" />
<a th:href="@{user/login}">登录页面</a>
<!-- 拼接URL -->
<a th:href="@{'/user/details?id='+${list.articleId}}" th:text="${list.articleTitle}">标题</a>
<!-- 拼接src -->
<img th:src="@{/img/{filename}(filename=${item.filename})}">- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
使用运算符
复制Java<!-- 运算符在表达式中可以使用各类算术运算符，例如+, -, *, /, % -->
<p th:with="isEven=(${prodStat.count} % 2 == 0)"></p>- 1
- 2
条件判断th:if和th:unless
Thymeleaf中使用th:if和th:unless属性进行条件判断
标签只有在th:if中条件成立时才显示，th:unless于th:if恰好相反，只有表达式中的条件不成立，才会显示其内容
复制HTML<a th:href="@{/login}" th:unless="${session.user != null}">登录</a>
<!-- 文章图片，没有的话默认给-->
<div class="content-center-item-left" th:if="${list.articleTitleUrl != null && list.articleTitleUrl != ''}" >
<img th:src="@{ ${list.articleTitleUrl} }" onerror="this.src='/img/loading/load6.gif';this.onerror=null" >
</div>- 1
- 2
- 3
- 4
- 5
- 6
多分支th:switch
复制HTML<!-- 文章类型 -->
<div th:switch="${list.articleType}">
<!-- th:case="*"为默认的 -->
<!-- <div class="type original" th:case="*">原创</div> -->
<div class="type original" th:case="1">原创</div>
<div class="type transport" th:case="2">转载</div>
<div class="type translate" th:case="3">翻译</div>
</div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
循环th:each
遍历java对象list、array
复制HTML<!--一个单独的文章start-->
<div class="content-center-item" th:each="list : ${datas}">
<div class="content-center-item-head">
<!-- 文章类型 -->
<div th:switch="${list.articleType}">
<!-- th:case="*"为默认的 -->
<!-- <div class="type original" th:case="*">原创</div> -->
<div class="type original" th:case="1">原创</div>
<div class="type transport" th:case="2">转载</div>
<div class="type translate" th:case="3">翻译</div>
</div>
<!-- 标题 -->
<div class="title">
<a href="/user/details" th:text="${list.articleTitle}">标题</a>
</div>
</div>
<!-- 摘要 -->
<div class="content-center-item-cont">
<span th:text="${list.articleSummary}"></span>
</div>
</div>
<!--一个单独的文章end-->- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
时间格式化
复制HTML<span th:text="${#dates.format(list.articleUpdateTime, 'yyyy-MM-dd HH:mm:ss')}">1563868256000</span>- 1
Thymeleaf 在JS中获取服务端穿过来的对象
复制JavaScript<script th:inline="javascript">
/* js中获取服务端穿过来的对象，写在外联的js文件中不起作用，可以写在html中的js中，且在注意加th:inline="javascript" */
var searchCount = [[${count}]];
alert(searchCount);
</script>- 1
- 2
- 3
- 4
- 5
Thymeleaf导入其他html页面
复制HTML<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>头部</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<!--th:fragment="header" 放在哪个位置，则父页面就会调用哪个部分代码-->
<div th:fragment="header" id="header">
</div>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
=
复制HTML<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>底部</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<!--th:fragment="footer" 放在哪个位置，则父页面就会调用哪个部分代码-->
<div th:fragment="footer" id="footer">
2019版权所有~累行博客
</div>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
=
复制HTML<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>main </title>
</head>
<body>
<!-- 引入其他页面 头部导航-->
<!-- 语法说明 "::"前面是模板文件名，加地址，后面是选择器 th:fragment那个-->
<div th:include="common/header::header"></div>
<!-- 主要内容start-->
<div id="content"></div>
<!-- 引入其他页面 底部-->
<!-- 语法说明 "::"前面是模板文件名，加地址，后面是选择器 th:fragment那个-->
<div id="footer" th:include="common/footer::footer"></div>
<body/>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
动态设置id(hidden)
复制HTML<!-- articleId -->
<input type="hidden" th:value="${article.articleId}" id="articleId"/>
<div th:id="${list.id}" style="display:none;"></div>- 1
- 2
- 3
th:text与th:utext
用th:text不会解析html，用th:utext会解析html，在页面中显示相应的样式。
js方法调用onclick
js方法调用onclick，且有参数，参数是动态的
复制收展HTML<div th:text="${val.name}" class="night item-tag item-tag2" th:onclick="|flowById(1, 1, 10,'${val.id}','${val.name}')|" >- 1
表格th内容展示截取
复制收展HTML<!-- Abbreviate text making it have a maximum size of will be clipped and finished in "..." -->
<td th:title="${patient.info}" th:text="${#strings.abbreviate(patient.info,10)}" ></td>- 1
- 2
字符串Strings常见的使用方法
复制收展HTML判断是不是为空:null:
<span th:if="${name} != null">不为空</span>
<span th:if="${name1} == null">为空</span>
判断是不是为空字符串: “”
<span th:if="${#strings.isEmpty(name1)}">空的</span>
判断是否相同：
<span th:if="${name} eq 'luo'">相同于luo,</span>
<span th:if="${name} ne 'luo'">不相同于luo,</span>
不存在的话设置默认值：
<span th:text="${name2} ?: '默认值'"></span>
是否包含(分大小写):
<span th:if="${#strings.contains(name,'lEi')}">包含lei</span>
是否包含（不分大小写）
<span th:if="${#strings.containsIgnoreCase(name,'xYz')}">包含xyz</span>
下面的和JAVA的String基本一样使用。
${#strings.startsWith(name,'o')}
${#strings.endsWith(name, 'o')}
${#strings.indexOf(name,frag)}// 返回下标
${#strings.substring(name,3,5)}// 截取
${#strings.substringAfter(name,prefix)}// 从 prefix之后的一位开始截取到最后,比如 (ywj,y) = wj, 如果是(abccdefg,c) = cdefg//里面有2个c,取的是第一个c
${#strings.substringBefore(name,suffix)}// 同上，不过是往前截取
${#strings.replace(name,'luo','lei')}// 替换
${#strings.prepend(str,prefix)}// 拼字字符串在str前面
${#strings.append(str,suffix)}// 和上面相反，接在后面
${#strings.toUpperCase(name)}
${#strings.toLowerCase(name)}
${#strings.trim(str)}
${#strings.length(str)}
${#strings.abbreviate(str,20)}// str截取0-20位，后面的全部用…这个点代替，注意，最小是3位- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
三、Thymeleaf与 Spring Boot 整合Demo
引入依赖，其中spring-boot-starter-thymeleaf下面已经包括了spring-boot-starter-web,所以可以把spring-boot-starter-web的依赖去掉.
复制XML<!--
thymeleaf 用于Web和独立环境的现代服务器端的Java模板引擎s
Thymeleaf的主要目标是将优雅的自然模板带到开发工作流程中，并将HTML在浏览器中正确显示，并且可以作为静态原型，
让开发团队能更容易地协作。Thymeleaf能够处理HTML，XML，JavaScript，CSS甚至纯文本。
-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
配置视图解析器
复制Java## 视图
#static放静态资源，静态页面。css、js、img
#templates放动态页面。html不能发送post请求，出现405
#1、定位模板的目录templates #引用thymeleaf默认就是，可不配置
#需要引入依赖spring-boot-starter-thymeleaf
spring.mvc.view.prefix=classpath:/templates/
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
Controller控制器
复制Javapackage com.leixing.blog.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* @explain
* @author luolei
* @date 2019年7月23日
*/
@Controller
public class HelloController {
/**
* 测试hello
* @return
*/
@RequestMapping(value = "/hello")
public String hello(Model model) {
model.addAttribute("name", "Thymleaf!");
return "hello";
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
Html页面放在templates下
复制HTML<!DOCTYPE HTML>
<!—注意这里 thymeleaf 的命名空间-–>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<!--/*@thymesVar id="name" type="java.lang.String"*/-->
<p th:text="'Hello!, ' + ${name}" >默认值</p>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
QQ好友
QQ空间