Thymeleaf模板引擎详细介绍

Thymeleaf模板引擎详细介绍

什么是Thymeleaf?

 

Thymeleaf是一个现代服务器端Java模板引擎,适用于Web和独立环境,能够处理HTML,XML,JavaScript,CSS甚至纯文本。

Thymeleaf的主要目标是提供一种优雅且高度可维护的模板创建方式。为实现这一目标,它以自然模板的概念为基础,将其逻辑注入模板文件,其方式不会影响模板被用作设计原型。这改善了设计沟通,缩小了设计和开发团队之间的差距。

Thymeleaf也从一开始就设计了Web标准 - 特别是HTML5 - 允许您创建完全验证的模板,如果您需要的话。

Thymeleaf过程可以使用哪种模板?

开箱即用,Thymeleaf允许您处理六种模板,每种模板称为模板模式

  1. HTML
  2. XML
  3. 文本
  4. JAVASCRIPT
  5. CSS
  6. 生的

有两种标记模板模式(HTMLXML),三种文本模板模式(TEXTJAVASCRIPTCSS)和一种无操作模板模式(RAW)。

HTML模板模式将允许任何类型的HTML的输入,包括HTML5,HTML4和XHTML。不会执行验证或格式良好检查,并且将在输出中尽可能地尊重模板代码/结构。

XML模板模式将允许XML输入。在这种情况下,代码应该是格式良好的 - 没有未封闭的标签,没有不带引号的属性等等 - 如果发现格式错误,解析器将抛出异常。请注意,不会执行验证(针对DTD或XML架构)。

TEXT模板模式将允许非标记性质的模板使用特殊的语法。此类模板的示例可能是文本电子邮件或模板文档。请注意,HTML或XML模板也可以被处理TEXT,在这种情况下,它们不会被解析为标记,并且每个标记,DOCTYPE,注释等都将被视为纯文本。

JAVASCRIPT模板模式将允许在Thymeleaf应用程序的JavaScript文件的处理。这意味着能够以与HTML文件相同的方式在JavaScript文件中使用模型数据,但是使用特定于JavaScript的集成,例如专门的转义或自然脚本。该JAVASCRIPT模板模式被认为是一种文本模式,因此使用相同的特殊语法的TEXT模板模式。

CSS模板模式将允许参与Thymeleaf应用CSS文件的处理。与JAVASCRIPT模式类似,CSS模板模式也是文本模式,并使用TEXT模板模式中的特殊处理语法。

RAW模板模式将根本不处理模板。它用于将未经处理的资源(文件,URL响应等)插入到正在处理的模板中。例如,HTML格式的外部非受控资源可以包含在应用程序模板中,安全地知道这些资源可能包含的任何Thymeleaf代码都不会被执行。

Thymeleaf简单表达式

  • 变量表达式: ${...}
  • 选择变量表达式: *{...}
  • 消息表达式: #{...}
  • 链接网址表达式: @{...}
  • 片段表达式: ~{...}

变量${...}-通过${...}取值

<span th:text="${book.author.name}">:获取name这个变量的值赋值给text

 

消息#{...}

<table>

...

<th th:text=#"header.address.city">...</th>

<th th:text=#"header.address.country">...</th>

</table>

 

选择表达式*{...}

<div th:object="${book}">

...

<span th:text="*{title}">...</span>

<span th:text="*{price}">...</span>

</div>

 

  • 变量表达式不仅可以写成${...},也可以作为*{...}。但是有一个重要的区别:星号语法评估所选对象上的表达式而不是整个上下文。也就是说,只要没有选定的对象,美元和星号语法就会完全相同。

什么是选定的对象?使用th:object属性的表达式的结果。我们在用户个人资料(userprofile.html)页面中使用一个:

这完全的等同于:

当然,美元和星号可以混合使用:

当对象选择到位时,所选对象也可以用作美元表达式的#object表达式变量:

如上所述,如果没有执行任何对象选择,则美元和星号语法是等效的。

​​

 

连接表达式 @{...}

有不同类型的地址:

绝对地址:http://www.thymeleaf.org

相对地址,可以是:

  • 页面相对: user/login.html
  • 上下文相关:( /itemdetails?id=3服务器中的上下文名称将自动添加)
  • 服务器相对:( ~/billing/processInvoice允许在同一服务器中的另一个上下文(=应用程序)中调用URL)。
  • 协议相对URL: //code.jquery.com/jquery-2.0.3.min.js

 

这些表达式的实际处理及其转换为将要输出的URL是通过org.thymeleaf.linkbuilder.ILinkBuilder注册到ITemplateEngine正在使用的对象的接口的实现来完成的

让我们看看新语法,符合th:href属性:

我们的主页菜单


既然我们知道如何创建连接URL,那么在我们的主页中为网站中的其他一些页面添加小菜单

 

服务器根目录相对URL


可以使用其他语法来创建服务器根相对(而不是上下文根相对)URL,以便链接到同一服务器中的不同上下文。这些URL将被指定为@{~/path/to/something}

 

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

      th:insert 它将简单的插入指定额的片段为征文的主标签。

      th:replace 用指定实际片段来替代主标签。

      th:include 类似于th:insert,但不能插入片段它只能插入片段的内容(3.x版本后,不再推荐使用)

Thymeleaf中的迭代

迭代基础知识

要在我们的/WEB-INF/templates/product/list.html页面中显示产品,我们将使用表格。我们的每个产品都会显示在一行(一个<tr>元素),因此对于我们的模板,我们需要创建一个模板行 - 一个可以说明我们希望如何显示每个产品的模板行 - 然后指示Thymeleaf重复它,每个产品一次。

标准方言为我们提供了一个属性:th:each。

使用 th: each


​对于我们的产品列表页面,我们需要一个控制器方法,从服务器层检索产品列表并将其添加到模板上下文中:

 

 

然后我们将th:each在我们的模板中使用迭代产品列表:

  • 21
    点赞
  • 59
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值