Thymeleaf教程(10分钟入门)

开课吧开课吧锤锤2021-08-13 14:20

Thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎。它与JSP,Velocity,FreeMaker等模板引擎类似,也可以轻易地与SpringMVC等Web框架集成。与其它模板引擎相比,Thymeleaf最大的特点是,即使不启动Web应用,也可以直接在浏览器中打开并正确显示模板页面。  

Thymeleaf教程(10分钟入门)

1.Thymeleaf简介  

Thymeleaf是新一代Java模板引擎,与Velocity、FreeMarker等传统Java模板引擎不同,Thymeleaf支持HTML原型,其文件后缀为“.html”,因此它可以直接被浏览器打开,此时浏览器会忽略未定义的Thymeleaf标签属性,展示thymeleaf模板的静态页面效果;当通过Web应用程序访问时,Thymeleaf会动态地替换掉静态内容,使页面动态显示。  

Thymeleaf通过在html标签中,增加额外属性来达到“模板+数据”的展示方式,示例代码如下。  

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--th:text 为 Thymeleaf 属性,用于在展示文本-->
<h1 th:text="迎您来到Thymeleaf">欢迎您访问静态页面 HTML</h1>
</body>
</html>

当直接使用浏览器打开时,浏览器展示结果如下。  

欢迎您访问静态页面HTML

当通过Web应用程序访问时,浏览器展示结果如下。  

迎您来到Thymeleaf  

Thymeleaf的特点  

Thymeleaf模板引擎具有以下特点:  

动静结合:Thymeleaf既可以直接使用浏览器打开,查看页面的静态效果,也可以通过Web应用程序进行访问,查看动态页面效果。  

开箱即用:Thymeleaf提供了Spring标准方言以及一个与SpringMVC完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。  

多方言支持:它提供了Thymeleaf标准和Spring标准两种方言,可以直接套用模板实现JSTL、OGNL表达式;必要时,开发人员也可以扩展和创建自定义的方言。  

与SpringBoot完美整合:SpringBoot为Thymeleaf提供了的默认配置,并且还为Thymeleaf设置了视图解析器,因此Thymeleaf可以与SpringBoot完美整合。  

2.Thymeleaf语法规则  

在使用Thymeleaf之前,首先要在页面的html标签中声明名称空间,示例代码如下。  

xmlns:th="http://www.thymeleaf.org"

在html标签中声明此名称空间,可避免编辑器出现html验证错误,但这一步并非必须进行的,即使我们不声明该命名空间,也不影响Thymeleaf的使用。  

Thymeleaf作为一种模板引擎,它拥有自己的语法规则。Thymeleaf语法分为以下2类:  

标准表达式语法  

th属性  

2.1标准表达式语法  

Thymeleaf模板引擎支持多种表达式:  

变量表达式:${...}  

选择变量表达式:*{...}  

链接表达式:@{...}  

国际化表达式:#{...}  

片段引用表达式:~{...}  

2.1.1变量表达式  

使用${}包裹的表达式被称为变量表达式,该表达式具有以下功能:  

获取对象的属性和方法  

使用内置的基本对象  

使用内置的工具对象  

①获取对象的属性和方法  

使用变量表达式可以获取对象的属性和方法,例如,获取person对象的lastName属性,表达式形式如下:  

${person.lastName}

②使用内置的基本对象  

使用变量表达式还可以使用内置基本对象,获取内置对象的属性,调用内置对象的方法。Thymeleaf中常用的内置基本对象如下:  

#ctx:上下文对象;  

#vars:上下文变量;  

#locale:上下文的语言环境;  

#request:HttpServletRequest对象(仅在Web应用中可用);  

#response:HttpServletResponse对象(仅在Web应用中可用);  

#session:HttpSession对象(仅在Web应用中可用);  

#servletContext:ServletContext对象(仅在Web应用中可用)。  

例如,我们通过以下2种形式,都可以获取到session对象中的map属性:  

${#session.getAttribute('map')}
${session.map}

③使用内置的工具对象  

除了能使用内置的基本对象外,变量表达式还可以使用一些内置的工具对象。  

strings:字符串工具对象,常用方法有:equals、equalsIgnoreCase、length、trim、toUpperCase、toLowerCase、indexOf、substring、replace、startsWith、endsWith,contains和containsIgnoreCase等;  

numbers:数字工具对象,常用的方法有:formatDecimal等;  

bools:布尔工具对象,常用的方法有:isTrue和isFalse等;  

arrays:数组工具对象,常用的方法有:toArray、length、isEmpty、contains和containsAll等;  

lists/sets:List/Set集合工具对象,常用的方法有:toList、size、isEmpty、contains、containsAll和sort等;  

maps:Map集合工具对象,常用的方法有:size、isEmpty、containsKey和containsValue等;  

dates:日期工具对象,常用的方法有:format、year、month、hour和createNow等。  

例如,我们可以使用内置工具对象strings的equals方法,来判断字符串与对象的某个属性是否相等,代码如下。  

${#strings.equals('开课吧',name)}

2.1.2选择变量表达式  

选择变量表达式与变量表达式功能基本一致,只是在变量表达式的基础上增加了与th:object的配合使用。当使用th:object存储一个对象后,我们可以在其后代中使用选择变量表达式(*{...})获取该对象中的属性,其中,“*”即代表该对象。  

<div th:object="${session.user}" >
    <p th:text="*{fisrtName}">firstname</p>
</div>

th:object用于存储一个临时变量,该变量只在该标签及其后代中有效,在后面的内容“th属性”中我详细介绍。  

2.1.3链接表达式  

不管是静态资源的引用,还是form表单的请求,凡是链接都可以用链接表达式(@{...})。链接表达式的形式结构如下:无参请求:@{/xxx}有参请求:@{/xxx(k1=v1,k2=v2)}例如使用链接表达式引入css样式表,代码如下。  

<link href="asserts/css/signin.css" th:href="@{/asserts/css/signin.css}" rel="stylesheet">

2.1.4国际化表达式  

消息表达式一般用于国际化的场景。结构如下。  

th:text="#{msg}"

注意:此处了解即可,我们会在后面的章节中详细介绍。  

2.1.5片段引用表达式  

片段引用表达式用于在模板页面中引用其他的模板片段,该表达式支持以下2中语法结构:  

推荐:~{templatename::fragmentname}  

支持:~{templatename::#id}  

以上语法结构说明如下:  

templatename:模版名,Thymeleaf会根据模版名解析完整路径:/resources/templates/templatename.html,要注意文件的路径。  

fragmentname:片段名,Thymeleaf通过th:fragment声明定义代码块,即:th:fragment="fragmentname"  

id:HTML的id选择器,使用时要在前面加上#号,不支持class选择器。  

2.2th属性  

Thymeleaf还提供了大量的th属性,这些属性可以直接在HTML标签中使用,其中常用th属性及其示例如下表。  

属性 描述 示例
th:id 替换 HTML 的 id 属性
  • <input id="html-id" th:id="thymeleaf-id" />
th:text 文本替换,转义特殊字符
  • <h1 th:text="hello,kaikeba" >hello</h1>
th:utext 文本替换,不转义特殊字符
  • <div th:utext="<h1>欢迎来到开课吧!</h1>" >欢迎你</div>
th:object 在父标签选择对象,子标签使用 *{…} 选择表达式选取值。
没有选择对象,那子标签使用选择表达式和 ${…} 变量表达式是一样的效果。
同时即使选择了对象,子标签仍然可以使用变量表达式。
  • <div th:object="${session.user}" >
  • <p th:text="*{fisrtName}">firstname</p>
  • </div>
th:value 替换 value 属性
  • <input th:value = "${user.name}" />
th:with 局部变量赋值运算
  • <div th:with="isEvens = ${prodStat.count}%2 == 0" th:text="${isEvens}"></div>
th:style 设置样式
  • <div th:style="'color:#F00; font-weight:bold'">开课吧 https://www.kaikeba.com/</div>
th:onclick 点击事件
  • <td th:onclick = "'getInfo()'"></td>
th:each 遍历,支持 Iterable、Map、数组等。
 
  • <table>
  • <tr th:each="m:${session.map}">
  • <td th:text="${m.getKey()}"></td>
  • <td th:text="${m.getValue()}"></td>
  • </tr>
  • </table>
th:if 根据条件判断是否需要展示此标签
  • <a th:if ="${userId == collect.userId}">
th:unless 和 th:if 判断相反,满足条件时不显示
  • <div th:unless="${m.getKey()=='name'}" ></div>
th:switch 与 Java 的 switch case语句类似
通常与 th:case 配合使用,根据不同的条件展示不同的内容
  • <div th:switch="${name}">
  • <span th:case="a">开课吧</span>
  • <span th:case="b">https://www.kaikeba.com/</span>
  • </div>
th:fragment 模板布局,类似 JSP 的 tag,用来定义一段被引用或包含的模板片段
  • <footer th:fragment="footer">插入的内容</footer>
th:insert 布局标签;
将使用 th:fragment 属性指定的模板片段(包含标签)插入到当前标签中。
  • <div th:insert="commons/bar::footer"></div>
th:replace 布局标签;
使用 th:fragment 属性指定的模板片段(包含标签)替换当前整个标签。
  • <div th:replace="commons/bar::footer"></div>
th:selected select 选择框选中
  • <select>
  • <option>---</option>
  • <option th:selected="${name=='a'}">
  • 开课吧
  • </option>
  • <option th:selected="${name=='b'}">
  • https://www.kaikeba.com/
  • </option>
  • </select>
th:src 替换 HTML 中的 src 属性 
  • <img th:src="@{/asserts/img/bootstrap-solid.svg}" src="asserts/img/bootstrap-solid.svg" />
th:inline 内联属性;
该属性有 text,none,javascript 三种取值,
在 <script> 标签中使用时,js 代码中可以获取到后台传递页面的对象。
  • <script type="text/javascript" th:inline="javascript">
  • var name = /*[[${name}]]*/ 'kaikeba';
  • alert(name)
  • </script>
th:action 替换表单提交地址
 
  • <form th:action="@{/user/login}" th:method="post"></form>

3.Thymeleaf公共页面抽取  

在Web项目中,通常会存在一些公共页面片段(重复代码),例如头部导航栏、侧边菜单栏和公共的jscss等。我们一般会把这些公共页面片段抽取出来,存放在一个独立的页面中,然后再由其他页面根据需要进行引用,这样可以消除代码重复,使页面更加简洁。  

3.1抽取公共页面  

Thymeleaf作为一种优雅且高度可维护的模板引擎,同样支持公共页面的抽取和引用。我们可以将公共页面片段抽取出来,存放到一个独立的页面中,并使用Thymeleaf提供的th:fragment属性为这些抽取出来的公共页面片段命名。  

示例1  

将公共页面片段抽取出来,存放在commons.html中,代码如下。  

<div th:fragment="fragment-name" id="fragment-id">
    <span>公共页面片段</span>
</div>

3.2引用公共页面  

在Thymeleaf中,我们可以使用以下3个属性,将公共页面片段引入到当前页面中。  

th:insert:将代码块片段整个插入到使用了th:insert属性的HTML标签中;  

th:replace:将代码块片段整个替换使用了th:replace属性的HTML标签中;  

th:include:将代码块片段包含的内容插入到使用了th:include属性的HTML标签中。  

使用上3个属性引入页面片段,都可以通过以下2种方式实现。  

~{templatename::selector}:模板名::选择器  

~{templatename::fragmentname}:模板名::片段名  

通常情况下,~{}可以省略,其行内写法为[[~{...}]]或[(~{...})],其中[[~{...}]]会转义特殊字符,[(~{...})]则不会转义特殊字符。  

示例2  

1.在页面fragment.html中引入commons.html中声明的页面片段,可以通过以下方式实现。  

<!--th:insert 片段名引入-->
<div th:insert="commons::fragment-name"></div>
<!--th:insert id 选择器引入-->
<div th:insert="commons::#fragment-id"></div>
------------------------------------------------
<!--th:replace 片段名引入-->
<div th:replace="commons::fragment-name"></div>
<!--th:replace id 选择器引入-->
<div th:replace="commons::#fragment-id"></div>
------------------------------------------------
<!--th:include 片段名引入-->
<div th:include="commons::fragment-name"></div>
<!--th:include id 选择器引入-->
<div th:include="commons::#fragment-id"></div>

2.启动SpringBoot,使用浏览器访问fragment.html,查看源码,结果如下。  

<!--th:insert 片段名引入-->
<div>
    <div id="fragment-id">
        <span>公共页面片段</span>
    </div>
</div>
<!--th:insert id 选择器引入-->
<div>
    <div id="fragment-id">
        <span>公共页面片段</span>
    </div>
</div>
------------------------------------------------
<!--th:replace 片段名引入-->
<div id="fragment-id">
    <span>公共页面片段</span>
</div>
<!--th:replace id 选择器引入-->
<div id="fragment-id">
    <span>公共页面片段</span>
</div>
------------------------------------------------
<!--th:include 片段名引入-->
<div>
    <span>公共页面片段</span>
</div>
<!--th:include id 选择器引入-->
<div>
    <span>公共页面片段</span>
</div>

3.3传递参数  

Thymeleaf在抽取和引入公共页面片段时,还可以进行参数传递,大致步骤如下:  

1、传入参数;  

2、使用参数。  

3.3.1传入参数  

引用公共页面片段时,我们可以通过以下2种方式,将参数传入到被引用的页面片段中:  

模板名::选择器名或片段名(参数1=参数值1,参数2=参数值2)  

模板名::选择器名或片段名(参数值1,参数值2)  

注:  

若传入参数较少时,一般采用第二种方式,直接将参数值传入页面片段中;  

若参数较多时,建议使用第一种方式,明确指定参数名和参数值,。  

示例代码如下:  

<!--th:insert 片段名引入-->
<div th:insert="commons::fragment-name(var1='insert-name',var2='insert-name2')"></div>
<!--th:insert id 选择器引入-->
<div th:insert="commons::#fragment-id(var1='insert-id',var2='insert-id2')"></div>
------------------------------------------------
<!--th:replace 片段名引入-->
<div th:replace="commons::fragment-name(var1='replace-name',var2='replace-name2')"></div>
<!--th:replace id 选择器引入-->
<div th:replace="commons::#fragment-id(var1='replace-id',var2='replace-id2')"></div>
------------------------------------------------
<!--th:include 片段名引入-->
<div th:include="commons::fragment-name(var1='include-name',var2='include-name2')"></div>
<!--th:include id 选择器引入-->
<div th:include="commons::#fragment-id(var1='include-id',var2='include-id2')"></div>

3.3.2使用参数  

在声明页面片段时,我们可以在片段中声明并使用这些参数,例如:  

<!--使用 var1 和 var2 声明传入的参数,并在该片段中直接使用这些参数 -->
<div th:fragment="fragment-name(var1,var2)" id="fragment-id">
    <p th:text="'参数1:'+${var1} + '-------------------参数2:' + ${var2}">...</p>
</div>

启动SpringBoot,使用浏览器访问fragment.html,结果如下图。  

Thymeleaf教程(10分钟入门)

以上就是开课吧广场小编为大家整理发布的“Thymeleaf教程(10分钟入门)”一文,更多Java教程相关内容尽在开课吧广场Java教程频道!

Thymeleaf教程(10分钟入门)

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享
全部评论快来秀出你的观点
登录 后可发表观点…
发表
暂无评论,快来抢沙发!
高并发编程训练营