首页 > 其他分享 >Thymeleaf基本使用

Thymeleaf基本使用

时间：2024-10-24 13:48:00浏览次数：1  
标签：基本 ... context name Thymeleaf th 使用 var 模板

https://blog.csdn.net/weixin_45719444/article/details/122891930

介绍

官网：https://www.thymeleaf.org/

Thymeleaf是一个用于Web和独立环境的现代服务器端Java模板引擎。

简单示例
打开IDEA，创建一个maven工程（quickstart archetype）·。

在pom.xml文件中导入依赖，目前最新版本3.0.15：

<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.15.RELEASE</version>
</dependency>


新建一个HelloWorld类，内容如下：

 

public static void main(String[] args) {
// 创建模板引擎
TemplateEngine engine = new TemplateEngine();
// 准备模板
String input = "<input type='text' th:value='helloWorld'/>";
// 准备数据
Context context = new Context();
// 调用引擎，处理模板和数据
String result = engine.process(input, context);
System.out.println("模板渲染结果==> " + result);

}
输出结果：

 

这里模板是HTML常见组件input框，type和value属性。实际上模板引擎在解析模板时，通过‘th:’前缀来锁定要替换的值，就是这里的‘helloWorld’内容。 但是这个数据是写死的，下面我们将数据动态地呈现在页面上。

使用模板数据
方便起见，我使用单元测试的方式来体验thymeleaf的语法规则。

@Test
public void test1() {
// 创建模板引擎
TemplateEngine engine = new TemplateEngine();
// 准备模板
String input = "<input type='text' th:value='${name}'/>";
// 准备数据
Context context = new Context();
context.setVariable("name", "李四");
// 处理模板和数据
String result = engine.process(input, context);
System.out.println("模板渲染结果==> " + result);
}
${name} 相当于一个占位符，通过我们传递的数据进行替换。

context.setVariable("name", "李四") ，此方法通过占位符（唯一标识），动态设置数据。

输出结果： 

 

这样我们可以提供不同数据，重复利用模板来得到不同结果。

使用模板文件
在resources文件夹下创建html模板，内容如下：

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

<div>
template: <input type="text" th:value="${name}"/>
</div>
</body>
</html>
编写测试方法：

@Test
public void test2() {
// 创建模板引擎
TemplateEngine engine = new TemplateEngine();
// 读取模板文件（在类路径下找要渲染的模板）
ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();
// 设置引擎使用 resolver
engine.setTemplateResolver(resolver);
// 指定数据
Context context = new Context();
context.setVariable("name", "李四");
// 处理模板（注：文件名后缀不能省）
String result = engine.process("index.html", context);
System.out.println("模板文件渲染结果==> " + result);
}
这个示例说明我们可以通过类路径加载一个模板文件，作为真正的模板，再结合设置的数据将最终结果输出。也就是说如果网页文件中出现大量的类似‘th:’的语法规则，提供不同数据来组合成一个完整的用户视图界面。

输出结果： 

  

设置模板前缀和后缀
简化引用模板文件所在路径及文件扩展名操作。其中前缀就是相当于类路径下的一个目录名称，后缀是文件的扩展名。

在resources下新建文件夹templates，再在里面新建模板文件main.html（内容上同）。

编写测试方法：

@Test
public void test3() {
TemplateEngine engine = new TemplateEngine();

ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();
// 在类路径下的templates目录找后缀为html的main文件
resolver.setPrefix("templates/");
resolver.setSuffix(".html");
engine.setTemplateResolver(resolver);

Context context = new Context();
context.setVariable("name", "张三");

String result = engine.process("main", context);
System.out.println("模板文件渲染结果==> " + result);

}
注意别少了“templates/”后边的‘/’！

输出结果：

  

 以上是在一个非web项目中如何使用thymeleaf模板引擎，只是简单介绍。 但在开发中大多还是以web工程为主流，所以需学习和掌握基础语法和使用技巧，熟练运用并实践。

_______________________________________________________________________________________

 

Thymeleaf参考手册（十三）：文字模板模式

https://zhuanlan.zhihu.com/p/183821971

 

文字语法

在Thymeleaf的三种模板模式被认为是文字：TEXT，JAVASCRIPT和CSS。这将它们与标记模板模式区分开：HTML和 XML。

文本模板模式和标记模式之间的主要区别在于，在文本模板中，没有标签可以插入属性形式的逻辑，因此我们必须依靠其他机制。

这些机制的第一个也是最基本的是内联的，我们已经在上一章中进行了详细介绍。内联语法是在文本模板模式下输出表达式结果的最简单方法，因此，这是文本电子邮件完美有效的模板。

Dear [(${name})],
  Please find attached the results of the report you requested
  with name "[(${report.name})]".
  Sincerely,
    The Reporter.

即使没有标签，上面的示例也是一个完整且有效的Thymeleaf模板，可以在 TEXT 模板模式下执行。

但是，为了包含比单纯的输出表达式更复杂的逻辑，我们需要一种新的非基于标记的语法：

[# th:each="item : ${items}"]
  - [(${item})]
[/]

实际上是更冗长的精简版本：

[#th:block th:each="item : ${items}"]
  - [#th:block th:utext="${item}" /]
[/th:block]

请注意，这种新语法是如何基于声明为的元素（即可处理标签）[#element ...] 而不是 <element ...>。元素以 [#element ...] 开头，以 [/element] 闭合，并且可以通过 / 将开始元素最小化来声明独立标签，该方式几乎等同于XML标签：[#element ... /]。

标准方言仅包含用于以下元素之一的处理器：th:block，尽管我们可以在方言中对此进行扩展并以通常的方式创建新元素。另外，th:block 元素（[#th:block ...] ... [/th:block]）可以缩写为空字符串（[# ...] ... [/]），因此上述代码块实际上等效于：

[# th:each="item : ${items}"]
  - [# th:utext="${item}" /]
[/]

给定 [# th:utext="${item}" /] 等效于内联的未转义表达式，我们可以使用它来减少代码量。因此，我们结束了上面看到的代码的第一个片段：

[# th:each="item : ${items}"]
  - [(${item})]
[/]

请注意，文本语法要求元素对称（没有未关闭的标签）和带引号的属性 – XML样式比HTML样式更多。

我们来看一个更完整的TEXT模板示例，即纯文本电子邮件模板：

Dear [(${customer.name})],
This is the list of our products:
[# th:each="prod : ${products}"]
   - [(${prod.name})]. Price: [(${prod.price})] EUR/kg
[/]
Thanks,
  The Thymeleaf Shop

执行后，其结果可能类似于：

Dear Mary Ann Blueberry,
This is the list of our products:
   - Apricots. Price: 1.12 EUR/kg
   - Bananas. Price: 1.78 EUR/kg
   - Apples. Price: 0.85 EUR/kg
   - Watermelon. Price: 1.91 EUR/kg
Thanks,
  The Thymeleaf Shop

JAVASCRIPT 模板模式下的另一个示例（greeter.js文件）将作为文本模板进行处理，然后从HTML页面调用该结果。请注意，这不是HTML模板中的 <script> 块，而是 .js 单独作为模板处理的文件：

var greeter = function() {
    var username = [[${session.user.name}]];
    [# th:each="salut : ${salutations}"]    
      alert([[${salut}]] + " " + username);
    [/]
};

执行后，其结果可能类似于：

var greeter = function() {
    var username = "Bertrand \"Crunchy\" Pear";
      alert("Hello" + " " + username);
      alert("Ol\u00E1" + " " + username);
      alert("Hola" + " " + username);
};

转义元素属性

为了避免与模板的其他部分可能会以其他方式处理的交互（例如，HTML模板内的文本模式），Thymeleaf 3.0允许转义其文本语法中元素的属性。所以：

  • TEXT 模板模式下的属性将采用HTML转义。
  • JAVASCRIPT 模板模式下的属性将是JavaScript非转义的。
  • CSS 模板模式下的属性将采用CSS换码。

因此，这在文本模式模板中是完全可以的（请注意 &gt;）：

[# th:if="${120&lt;user.age}"]
     Congratulations!
 [/]

当然，&lt; 在实际的文本模板中这没有任何意义，但是如果我们用包含上面代码的th:inline="text" 代码块来处理HTML模板，并且希望确保我们的浏览器在静态打开文件作为原型时，不使用 <user.age 作为起始标记的名称。

可扩展性

这种语法的优点之一是它与标记语法一样可扩展。开发人员仍然可以使用自定义元素和属性来定义自己的方言，为它们应用前缀（可选），然后在文本模板模式下使用它们：

[#myorg:dosomething myorg:importantattr="211"]some text[/myorg:dosomething]

纯文本原型注释块：添加代码

在JAVASCRIPT 和 CSS 模板模式（不适用于 TEXT），允许包括一个特殊的注释语法之间的代码 /*[+...+]*/，这样Thymeleaf会处理模板时自动取消注释这样的代码：

var x = 23;
/*[+
var msg  = "This is a working application";
+]*/
var f = function() {
    ...

将解析为：

var x = 23;
var msg  = "This is a working application";
var f = function() {
...

也可以在这些注释中包含表达式，它们将被评估：

var x = 23;
/*[+
var msg  = "Hello, " + [[${session.user.name}]];
+]*/
var f = function() {
...

文本解析器级注释块：删除代码

在类似于仅原型的注释块的方式，所有三个文本模板模式（TEXT，JAVASCRIPT 和 CSS）使其能够指示Thymeleaf特殊之间移除代码/*[- */ 和 /* -]*/ 标志，就像这样：

var x = 23;
/*[- */
var msg  = "This is shown only when executed statically!";
/* -]*/
var f = function() {
...

或在 TEXT 模式下：

...
/*[- Note the user is obtained from the session, which must exist -]*/
Welcome [(${session.user.name})]!
...

自然的JavaScript和CSS模板

如之前所述，JavaScript和CSS内联提供了将内联表达式包含在JavaScript / CSS注释中的可能性，例如：

...
var username = /*[[${session.user.name}]]*/ "Sebastian Lychee";
...

解析后结果为：

...
var username = "John Apricot";
...

实际上，可以将这种将内联表达式包含在注释中的相同技巧可用于整个文本模式语法：

/*[# th:if="${user.admin}"]*/
    alert('Welcome admin');
/*[/]*/

如果模板是静态打开的（因为它是100％有效的JavaScript），并且如果用户是管理员运行模板，则将在上面的代码中显示该警报。它等效于：

[# th:if="${user.admin}"]
   alert('Welcome admin');
[/]

实际上是模板解析期间初始版本转换成的代码。

但是请注意，注释行中的换行元素不会像内联表达式那样，清除其所在的行（直到一直在右边找到a ;为止）。这种行为只适用于内联输出表达式。

 

标签：基本,...,context,name,Thymeleaf,th,使用,var,模板
From： https://www.cnblogs.com/kelelipeng/p/18499450

相关文章

  • MyBatis 如何映射 Enum（使用 EnumTypeHandler、自定义 TypeHandler）
    文章目录1.MyBatis中的Enum映射概述2.使用EnumTypeHandler2.1代码示例：将Enum映射为字符串2.2代码示例：将Enum映射为整数2.3如何配置EnumTypeHandler3.自定义TypeHandler3.1为什么需要自定义TypeHandler3.2自定义TypeHandler的实现3.3如何注册自定......
  • HarmonyOS：合理使用页面间转场
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号：山青咏芝（MaoistLearning）➤博客园地址：为敢技术（https://www.cnblogs.com/strengthen/ ）➤GitHub地址：https://github.com/strengthen➤原文地址：https://www.cnblogs.com/strengthen/p/......
  • 电瓶车检测视频分析网关AI智能分析提升电瓶车使用场景的消防安全
    随着电瓶车（电动自行车）的普及，它在城市交通中扮演着越来越重要的角色。然而，电瓶车的管理、安全监控以及维护等方面也面临着诸多挑战。人工智能（AI）技术的发展为解决这些问题提供了新的途径。电瓶车检测AI算法能够通过深度学习等技术对电瓶车及其相关行为进行智能识别和分析，为电瓶车的......
  • 国内最新源码系统交易平台：安全交易，放心使用
    国内最新源码系统交易平台：安全交易，放心使用在当今的数字化时代，源码系统交易平台为软件开发者和企业提供了一个高效、便捷的获取和分享源码资源的途径。这些平台不仅汇聚了丰富的源码资源，还通过严格的审核和安全措施，确保了交易的安全性和可靠性。本文将介绍几个知名的国内源码......
  • 通过 PowerShell 添加网络打印机并创建一个标准 TCP/IP 端口，您可以使用 Add-PrinterPo
    通过PowerShell添加网络打印机并创建一个标准TCP/IP端口，您可以使用Add-PrinterPort和Add-Printercmdlet。以下是一个详细的示例，演示了如何创建TCP/IP端口并添加网络打印机。步骤创建TCP/IP端口添加打印机示例代码powershellCopyCode#设置打印机的IP地址和......
  • HarmonyOS：合理使用动画（2）
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号：山青咏芝（MaoistLearning）➤博客园地址：为敢技术（https://www.cnblogs.com/strengthen/ ）➤GitHub地址：https://github.com/strengthen➤原文地址：https://www.cnblogs.com/strengthen/p/......
  • 如何使用虚拟现实（VR）在前端_1
    在前端使用虚拟现实（VR）的方法：1.了解VR技术；2.获取VR硬件；3.探索VR内容创建；4.掌握VR编程；5.设置开发环境；6.创建您的第一个VR场景；7.设计用户交互。虚拟现实是一种通过模拟沉浸式环境来改变用户体验的技术。在开始前，首先要了解VR的基本概念。1.了解VR技术虚拟现实是一种通过模拟沉浸......
  • Altair官方文档——HyperMesh的使用与帮助
    1.1.3启动HyperMesh(1)OnPC•从起始菜单，选择AllPrograms>AltairHyperWorks(version)>HyperMeshDesktop。•右击上述程序创建软件启动快捷方式，点击快捷方式。(2)OnUNIX•在命令窗口点击<installdirectory>/scripts/hm。•设置软件别名。(3)OnMacOSX......
  • 在Windows中，可以使用PowerShell来迁移打印机设置，以下是用于导出和导入打印机配置的Pow
    在Windows中，可以使用PowerShell来迁移打印机设置，以下是用于导出和导入打印机配置的PowerShell代码示例。导出打印机设置使用以下命令导出当前打印机设置到一个文件：powershellCopyCodeGet-Printer|Export-Clixml-Path"C:\path\to\exported_printers.xml"导入打印机设置......
  • k8s 使用 containerd 作为容器运行时拉取 http 的 harbor 私有仓库镜像
    目录版本介绍报错内容解决方法主配置文件修改创建镜像仓库配置备注版本介绍k8s：v1.28.2containerd：1.6.33报错内容我的harbor用的是http的，因为是内网自己用，就没有配置https了，于是配置好镜像拉取的凭据，pod拉取镜像会有以下的报错Failedtopullimage"harbor.de......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99