Thymeleaf基本使用

news/2024/10/24 14:00:03

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 requestedwith 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 ;为止)。这种行为只适用于内联输出表达式。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ryyt.cn/news/75463.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

漫谈自动化测试

前几天看到星球里几位同学在讨论各自所在团队的自动化测试实践案例和踩过的坑,蛮有意思的。 比如为了响应领导号召和满足绩效考核,搞各种各样的覆盖率指标;比如为了赶自动化测试覆盖率进度,每个接口和用例象征性的校验一下(甚至不校验不断言),各种各样意想不到的操作。 自…

AUTOSAR架构下,持续集成CI的最佳实践

随着汽车电子技术的快速发展,汽车软件的复杂性与日俱增,如何确保软件开发的高效性与稳定性成为了一个关键问题。为了解决这个问题,许多汽车企业和供应商逐渐引入了AUTOSAR架构,并在此基础上构建了持续集成(CI)流程。今天,我们就来探讨一下基于AUTOSAR架构的CI流程实践,…

哇!树链剖分(重链剖分学习笔记)

听说有人不会树链剖分? 前置芝士线段树 树状数组 Splay FHQ-Treap以上五种任意一种即可,这里主要讲线段树做法。 引入 树链剖分(Tree Line Pow Divide),一种解决树上快速路径修改查询问题的算法,一般指 重链剖分(Heavy Path Decomposition)。 思想图解 一个问题 如题,…

某SCADA系统发电机过速故障研究

某SCADA系统发电机过速故障研究 直观上讲,发电机转速过高故障最显然的特征应该就是“发电机转速”,因此对故障发生时的发电机转速进行可视化研究:如上图所示,对发电机转速进行了 Min-Max 归一化。该次故障报警时,确实存在转速较高的情况,但显然,并非转速高就会报警。通过…

CANOpen协议SDO中止报文(内存不足的解决方法)

今天在开发过程中,使用SDO进行字符串传输的时候出现了错误,检查到SDO服务器返回的报文帧是一个中止帧,中止代码为0x05040005这时候去翻CIA301的手册查中止代码的含义为内存不足经过断点调试跟踪,发现在config.h中是一个配置宏设置的是32,而我的字符串的长度为50,所以就中…

WinDbg快速分析异常情况Dump文件

https://syxdevcode.github.io/2017/12/04/WinDbg%E5%BF%AB%E9%80%9F%E5%88%86%E6%9E%90%E5%BC%82%E5%B8%B8%E6%83%85%E5%86%B5Dump%E6%96%87%E4%BB%B6/WinDbg快速分析异常情况Dump文件 生产环境偶尔会出现一些异常问题,WinDbg 或 GDB 就是解决此类问题的利器。调试工具 WinDb…

20222317 2024-2025-1 《网络与系统攻防技术》实验三实验报告

一、实验内容 本次实验目的为通过多次加密、文件格式欺骗、填充、加壳等技术手段实现恶意代码免杀,产生恶意程序,并尝试通过杀毒软件,不被杀毒软件检测出来。具体实验内容如下: 1.正确使用msf编码器,使用msfvenom生成如jar之类的其他文件; 2.能够使用veil,加壳工具; …

EventTranscript.db占用空间太大,文件能否移动到其他位置?

在大多数情况下,EventTranscript.db 文件可以被移动到其他位置(不建议移动、删除),这样做可能会对系统日志记录功能产生影响:日志记录功能:移动 EventTranscript.db 文件可能会导致系统日志记录工具无法正常工作。系统完整性:在操作系统中,日志文件的位置是系统配置的一…