首页 > 其他分享 >Thymeleaf 模板引擎

Thymeleaf 模板引擎

时间:2023-10-17 23:35:42浏览次数:41  
标签:片段 Spring Thymeleaf 引擎 模板 th 表达式

Thymeleaf 简介

Thymeleaf (https://www.thymeleaf.org/ Thymeleaf 3.0.15) 是一个XML/XHTML/HTML5模板引擎,可用于Web与非Web环境中的应用开发。它是一个开源的Java库,基于Apache License 2.0许可。

Thymeleaf提供了一个用于整合Spring MVC的可选模块,在应用开发中,你可以使用Thymeleaf来完全代替JSP,或其他模板引擎,如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码,开发者只需将标签属性添加到模板中即可。接下来,这些标签属性就会在DOM(文档对象模型)上执行预先制定好的逻辑。

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

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

示例模板:

<table>
  <thead>
    <tr>
      <th th:text="#{msgs.headers.name}">Name</td>
      <th th:text="#{msgs.headers.price}">Price</td>
    </tr>
  </thead>
  <tbody>
    <tr th:each="prod : ${allProducts}">
      <td th:text="${prod.name}">Oranges</td>
      <td th:text="${#numbers.formatDecimal(prod.price,1,2)}">0.99</td>
    </tr>
  </tbody>
</table>

 

 

Thymeleaf 的特点

  • 动静结合:Thymeleaf 既可以直接使用浏览器打开,查看页面的静态效果,也可以通过 Web 应用程序进行访问,查看动态页面效果。

  • 开箱即用:Thymeleaf 提供了 Spring 标准方言以及一个与 Spring MVC 完美集成的可选模块,可以快速地实现表单绑定、属性编辑器、国际化等功能。

  • 多方言支持:它提供了 Thymeleaf 标准和 Spring 标准两种方言,可以直接套用模板实现 JSTL、 OGNL 表达式;必要时,开发人员也可以扩展和创建自定义的方言。

  • 与 Spring Boot 完美整合:Spring Boot 为 Thymeleaf 提供了的默认配置,并且还为 Thymeleaf 设置了视图解析器,因此 Thymeleaf 可以与 Spring Boot 完美整合。

 

Thymeleaf常用标签

 

Thymeleaf标准表达式

变量表达式 ${}

使用方法:直接使用th:xx = "${}" 获取对象属性 。例如:

复制代码 复制代码
<form id="userForm">
    <input id="id" name="id" th:value="${user.id}"/>
    <input id="username" name="username" th:value="${user.username}"/>
    <input id="password" name="password" th:value="${user.password}"/>
</form>

<div th:text="hello"></div>

<div th:text="${user.username}"></div>
复制代码 复制代码

 

选择变量表达式 *{}

使用方法:首先通过th:object 获取对象,然后使用th:xx = "*{}"获取对象属性。

这种简写风格极为清爽,推荐大家在实际项目中使用。 例如:

<form id="userForm" th:object="${user}">
    <input id="id" name="id" th:value="*{id}"/>
    <input id="username" name="username" th:value="*{username}"/>
    <input id="password" name="password" th:value="*{password}"/>
</form>

 

URL表达式 @{}

使用方法:通过链接表达式@{}直接拿到应用路径,然后拼接静态资源路径。例如:

<script th:src="@{/webjars/jquery/jquery.js}"></script>
<link th:href="@{/webjars/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css">

 

片段表达式 ~{}

片段表达式是Thymeleaf的特色之一,细粒度可以达到标签级别,这是JSP无法做到的。
片段表达式拥有三种语法:

  • ~{ viewName } 表示引入完整页面
  • ~{ viewName ::selector} 表示在指定页面寻找片段 其中selector可为片段名、jquery选择器等
  • ~{ ::selector} 表示在当前页寻找

使用方法:首先通过th:fragment定制片段 ,然后通过th:replace 填写片段路径和片段名。例如:

复制代码 复制代码
<!-- /views/common/head.html-->
<head th:fragment="static">
        <script th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
</head>

<!-- /views/your.html -->
<div th:replace="~{common/head::static}"></div>
复制代码 复制代码

在实际使用中,我们往往使用更简洁的表达,去掉表达式外壳直接填写片段名。例如:

<!-- your.html -->
<div th:replace="common/head::static"></div>

注意:使用替换路径th:replace 开头请勿添加斜杠,避免部署运行的时候出现路径报错。(因为默认拼接的路径为spring.thymeleaf.prefix = classpath:/templates/

 

消息表达式

即通常的国际化属性:#{msg} 用于获取国际化语言翻译值。例如:

 <title th:text="#{user.title}"></title>

 

其它表达式

在基础语法中,默认支持字符串连接、数学运算、布尔逻辑和三目运算等。例如:

<input name="name" th:value="${'I am '+(user.name!=null?user.name:'NoBody')}"/>

 

Thymeleaf模板基本配置

 

Thymeleaf静态资源的访问

 

 

 

 

 

=================================== https://www.jianshu.com/p/ac8201031334     Thymeleaf【快速入门】 https://www.cnblogs.com/jiangbei/p/8462294.html    Thymeleaf入门(一)——入门与基本概述   https://www.oschina.net/p/thymeleaf?hmsr=aladdin1e1

https://baijiahao.baidu.com/s?id=1715241442804420499&wfr=spider&for=pc

https://www.cnblogs.com/youngdeng/p/12858055.html

 

标签:片段,Spring,Thymeleaf,引擎,模板,th,表达式
From: https://www.cnblogs.com/emanlee/p/16096916.html

相关文章

  • 考前模板整理
    有用的板子常用技巧inlinellread(){ llx=0,w=1; charch=getchar(); while(ch<'0'||ch>'9'){ if(ch=='-') w=-1; ch=getchar(); } while(ch>='0'&&ch<='9'){ x=(x......
  • 搜索引擎与程序化广告:原理、设计与实战pdf电子版2023 杨敏
    搜索引擎与程序化广告:原理、设计与实战pdf电子版2023杨敏出版年: 2023-9ISBN: 9787115617002下栽连接通读全书,可以感受到的是作者多年的工作经验的汇集和多方面的技术积累,不仅让我了解了当前多种流行的数据结构的实现原理和一些技术的底层实现,更让我感受到这些我们耳熟能......
  • laravel 中layout模板
    Blade布局是指具有多个公共部分的布局,可以在整个应用程序中使用,无需为此加载多个文件。公共区域包括页眉、页脚、侧边栏等。它包括Blade语法。我们也使用相同的文件夹结构/resources/views来存储布局。让我们创建一个简单的基本Blade布局。在/resources/views/layouts/app.blade.p......
  • 人工智能结合模板实现表格信息提取
    人工智能结合模板实现表格信息提取一、项目介绍本项目基于是OCR(文本识别)、表格识别的人工智能技术应用,通过表格识别,实现快速制作模板;模板单元格信息,结合OCR识别结果,将表格内容提取为结构化信息输出。与KIE(KeyInformationExtraction,关键信息抽取)模型对比,本项目准确率更高,效率......
  • Windows Server 2016 OVF, updated Oct 2023 (sysin) - VMware 虚拟机模板
    WindowsServer2016OVF,updatedOct2023(sysin)-VMware虚拟机模板2023年10月版本更新,现在自动运行sysprep,支持ESXiHostClient部署请访问原文链接:https://sysin.org/blog/windows-server-2016-ovf/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org现在......
  • Windows Server 2019 OVF, updated Oct 2023 (sysin) - VMware 虚拟机模板
    WindowsServer2019OVF,updatedOct2023(sysin)-VMware虚拟机模板2023年10月版本更新,现在自动运行sysprep,支持ESXiHostClient部署请访问原文链接:https://sysin.org/blog/windows-server-2019-ovf/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.orgWind......
  • Modbus主机模板
    #ifndefMODBUS_MASTER_H#defineMODBUS_MASTER_H#include"main.h"#ifdefMODBUS_MASTER_C#include"stm32f10x_usart.h"#include"crc.h"#definePrioritySize3#defineMissionSize10#defineBps115200#defineRecSize......
  • 火山引擎 ByteHouse:双十一即将到来,直播商家如何用数据“点播成金”?
    更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群“双十一”电商大促脚步渐近,各大平台的战火又将燃起。直播电商以低成本、高转化率等优势备受商家青睐。据智研咨询数据显示,2022年我国直播电商市场规模为34879亿元,较2017年的196.4亿元增长......
  • 火山引擎 ByteHouse:双十一即将到来,直播商家如何用数据“点播成金”?
    更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群“双十一”电商大促脚步渐近,各大平台的战火又将燃起。直播电商以低成本、高转化率等优势备受商家青睐。据智研咨询数据显示,2022年我国直播电商市场规模为34879亿元,较2017年的196.4亿元......
  • React-Admin后台管理模板|react18+arco+zustand后台解决方案
    基于react18.x+vite4+arco-design自研中后台管理系统解决方案ReactAdmin。react-vite-admin基于vite4搭建react18.x后台管理项目。使用了react18hooks+arco.design+zustand+bizcharts等技术实现权限管理模板框架。支持暗黑/亮色主题、i18n国际化、动态权限鉴定、3种布局模板、t......