Thymeleaf基本使用

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工程为主流，所以需学习和掌握基础语法和使用技巧，熟练运用并实践。



StringTemplateResolver以及ClassLoaderTemplateResolver 简单实例:

@Test
   void testTemplate1() {
       String template = "<input type='text' th:value='${myname}'/>";
       TemplateEngine templateEngine=new TemplateEngine();
       Context context = new Context();
       context.setVariable("myname","FFFF");
       String processedTemplate =templateEngine.process(template, context);
       System.out.println(processedTemplate);
   }


   @Test
   void testTemplate2() {

       List<String> list=new ArrayList<>();
       list.add("AAAAAAAAA");
       list.add("BBBBBBBBB");
       list.add("CCCCCCCCC");

       TemplateEngine templateEngine=new TemplateEngine();
       StringTemplateResolver resolver=new StringTemplateResolver();
       resolver.setTemplateMode(TemplateMode.TEXT);
       templateEngine.setTemplateResolver(resolver);

       Context context = new Context();
       context.setVariable("myname","FFFF");
       context.setVariable("mylist",list);

       String strTemplate=" [# th:each=\"item, stat : ${mylist}\"]\n" +
                          " [(${stat.count})] [(${item})]\n" +
                          " [/]";

       String processedTemplate =templateEngine.process(strTemplate, context);
       System.out.println(processedTemplate);
   }


   /**
    * 通用模版本样例
    */
   @Test
   void testTemplateText()
   {
       //1.集合信息数据
       List<FinanceAnswerInfo> financeAnswerInfoList=new ArrayList<>();
       FinanceAnswerInfo  financeAnswerInfo1=new FinanceAnswerInfo();
       financeAnswerInfo1.setDocTitle("特斯拉的新闻1");
       financeAnswerInfo1.setDocContent("特斯拉的新闻XXXXXXXXXXXXXXXXXXXXXXXXXX");

       FinanceAnswerInfo  financeAnswerInfo2=new FinanceAnswerInfo();
       financeAnswerInfo2.setDocTitle("特斯拉的新闻2");
       financeAnswerInfo2.setDocContent("特斯拉的新闻XXXXXXXXXXXXXXXXXXXXXXXXXX");
       financeAnswerInfoList.add(financeAnswerInfo1);
       financeAnswerInfoList.add(financeAnswerInfo2);

       //2.接口返回结果
       FinanceAnswerInfoResponse financeAnswerInfoResponse=new FinanceAnswerInfoResponse();
       financeAnswerInfoResponse.setFinanceAnswerInfoList(financeAnswerInfoList);
       financeAnswerInfoResponse.setWindCode("601729.SH");
       financeAnswerInfoResponse.setStockName("特斯拉");

       //3.模板相关
       TemplateEngine templateEngine=new TemplateEngine();
       ClassLoaderTemplateResolver resolver=new ClassLoaderTemplateResolver();
       resolver.setPrefix("template/ainative/");
       resolver.setSuffix(".txt");
       templateEngine.setTemplateResolver(resolver);

       Context context = new Context();
       context.setVariable("templateInfo",financeAnswerInfoResponse);
       String processedTemplate =templateEngine.process("ainews", context);
       System.out.println(processedTemplate);
   }


______________________________________________________________________________________________

以下为 template/ainative/ainews.txt 文件内容

##输入个股##
[(${templateInfo.stockName})]
##输入内容##
[# th:each="item, stat : ${templateInfo.financeAnswerInfoList}"]
([(${stat.count})].[(${item.docTitle})])
{[(${item.docContent})]}
[/]

_______________________________________________________________________________________

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换码。

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

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

当然，< 在实际的文本模板中这没有任何意义，但是如果我们用包含上面代码的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 ;为止）。这种行为只适用于内联输出表达式。

以下为 template/ainative/ainews.txt文件内容.

posted @ 2024-10-24 13:55 kelelipeng 阅读(89) 评论(0) 编辑收藏举报

刷新页面返回顶部

kelelipeng

Thymeleaf基本使用

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

转义元素属性

可扩展性

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

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

自然的JavaScript和CSS模板

公告