Thymeleaf详细介绍

zhezhongyun 2024-12-11 18:18 35 浏览

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

Thymeleaf 简介

Thymeleaf 是新一代 Java 模板引擎，支持 HTML 原型，以直接被浏览器打开，此时浏览器会忽略未定义的 Thymeleaf 标签属性，展示 thymeleaf 模板的静态页面效果。当在应用程序中会动态地替换掉页面设置的标签属性。

Thymeleaf 的特点

动静结合：Thymeleaf 既可以直接使用浏览器打开，查看页面的静态效果，也可以通过 Web 应用程序进行访问，查看动态页面效果。
开箱即用：Thymeleaf 提供了 Spring 标准方言以及一个与 SpringMVC 完美集成的可选模块，可以快速地实现表单绑定、属性编辑器、国际化等功能。
多方言支持：它提供了 Thymeleaf 标准和 Spring 标准两种方言，可以直接套用模板实现 JSTL、 OGNL 表达式；必要时，开发人员也可以扩展和创建自定义的方言。
与 SpringBoot 完美整合：SpringBoot 为 Thymeleaf 提供了的默认配置，并且还为 Thymeleaf 设置了视图解析器，因此 Thymeleaf 可以与 Spring Boot 完美整合。

Thymeleaf 通过在 html 标签中，增加额外属性来达到“模板+数据”的展示方式

IDEA新创建HTML文件是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

要想使用 Thymeleaf 之前，首先要在页面的 html 标签中声明名称空间，可避免编辑器出现 html 验证错误。

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

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

标准表达式语法
th 属性

标准表达式语法

hymeleaf 模板引擎支持多种表达式：

变量表达式：${...}
选择变量表达式：*{...}
链接表达式：@{...}
国际化表达式：#{...}
片段引用表达式：~{...}

变量表达式

这里变量表达式和其他模板类似，可以使用表达式具有以下功能：

获取对象的属性和方法
使用内置的基本对象，获取内置对象的属性，调用内置对象的方法。如上下文对象ctx，上下文语言环境locale，请求对象HttpServletRequest，响应对象HttpServletResponse等。
使用内置的工具对象，如字符串工具对象，数字工具对象，日期工具对象等。

选择变量表达式

变量表达式与 th:object 的配合使用。当使用 th:object 存储一个对象后，我们可以在其后代中使用选择变量表达式（*{...}）获取该对象中的属性，其中，“*”即代表该对象。

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

链接表达式

链接都可以用链接表达式（@{...}）,链接表达式的形式结构如下：无参请求：@{/xxx} 有参请求：@{/xxx(k1=v1,k2=v2)}。

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

国际化表达式

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

th:text="#{message}"

片段引用表达式

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

推荐：~{templatename::fragmentname}
支持：~{templatename::#id}

templatename：模版名，fragmentname：片段名，Thymeleaf 通过 th:fragment 声明定义代码块，即：th:fragment="fragmentname"。id：HTML 的 id 选择器，使用时要在前面加上 # 号，不支持 class 选择器。

我们可以将公共页面片段抽取出来，存放到一个独立的页面中，然后在其他页面使用片段表达式进行引用。

hymeleaf 在抽取和引入公共页面片段时，还可以进行参数传递。

我们可以通过以下 2 种方式，将参数传入到被引用的页面片段中：

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

在使用参数时可以使用变量表达式使用这些参数。

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

th 属性

Thymeleaf 还提供了大量的 th 属性，这些属性可以直接在 HTML 标签中使用。

th属性标签还有很多，这里只是用了一小部分，有兴趣的可以在网上搜索一下。

XHTML 简介

上一篇：前端 JS 之 AJAX 简介及使用
下一篇：SAML和OAuth2这两种SSO协议的区别

Thymeleaf详细介绍

Thymeleaf 简介

Thymeleaf 的特点

标准表达式语法

变量表达式

选择变量表达式

链接表达式

国际化表达式

片段引用表达式

th 属性

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

接口测试遇到500报错?别慌，你的头部可能有点问题

Web前端需要学什么?Web前端开发需要学习哪些?

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?