Thymeleaf初使用

2024-05-05 21:58
文章标签 使用 thymeleaf

本文主要是介绍Thymeleaf初使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

认识：

      最近项目后台架构采用springboot，在spring4.0中推荐使用thymeleaf来做前端模版引擎，Thymeleaf是一个java库，是XML、HTML5等格式的模板引擎，与Velocity、FreeMarker相似，可以用于Web项目和非Web项目。

       Thymeleaf可以作为Spring MVC的可选模块，也可以直接作为JSP的替代。Thymeleaf提供了两个版本，标准和spring标准两种方言,并且可以通过创建自定义方言进行扩展。thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。

布局：

定义代码片段

<footer th:fragment="copy"> 
&copy; 2016
</footer>
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

在页面任何地方引入：

<body> <div th:include="footer :: copy"></div><div th:replace="footer :: copy"></div></body>
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

th:include 和 th:replace区别，include只是加载，replace是替换

返回的HTML如下：

<body> <div> &copy; 2016 </div> <footer>&copy; 2016 </footer> 
</body>
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

下面是一个常用的后台页面布局，将整个页面分为头部，尾部、菜单栏、隐藏栏，点击菜单只改变content区域的页面

<body class="layout-fixed"><div th:fragment="navbar"  class="wrapper"  role="navigation"><div th:replace="fragments/header :: header">Header</div><div th:replace="fragments/left :: left">left</div><div th:replace="fragments/sidebar :: sidebar">sidebar</div><div layout:fragment="content" id="content" ></div><div th:replace="fragments/footer :: footer">footer</div></div>
</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

任何页面想使用这样的布局值只需要替换中见的 content模块即可

 <html xmlns:th="http://www.thymeleaf.org" layout:decorator="layout"><body><section layout:fragment="content">...
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

也可以在引用模版的时候传参

<head th:include="layout :: htmlhead" th:with="title='Hello'"></head>
  • 1
  • 1

layout 是文件地址，如果有文件夹可以这样写 fileName/layout:htmlhead 
htmlhead 是指定义的代码片段 如 th:fragment="copy"

常见用法：

1、赋值、字符串拼接

 <p  th:text="${collect.description}">description</p><span th:text="'Welcome to our application, ' + ${user.name} + '!'">
  • 1
  • 2
  • 1
  • 2

字符串拼接还有另外一种简洁的写法

<span th:text="|Welcome to our application, ${user.name}!|">
  • 1
  • 1

2、条件判断 If/Unless

Thymeleaf中使用th:if和th:unless属性进行条件判断，下面的例子中，<a>标签只有在th:if中条件成立时才显示：

<a th:if="${myself=='yes'}" > </i> </a>
<a th:unless=${session.user != null} th:href="@{/login}" >Login</a>
  • 1
  • 2
  • 1
  • 2

th:unless于th:if恰好相反，只有表达式中的条件不成立，才会显示其内容。

也可以使用 (if) ? (then) : (else) 这种语法来判断显示的内容

3、for 循环

  <tr  th:each="collect,iterStat : ${collects}"> <th scope="row" th:text="${collect.id}">1</th><td ><img th:src="${collect.webLogo}"/></td><td th:text="${collect.url}">Mark</td><td th:text="${collect.title}">Otto</td><td th:text="${collect.description}">@mdo</td><td th:text="${terStat.index}">index</td></tr>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

iterStat称作状态变量，属性有：

  • index:当前迭代对象的index（从0开始计算）
  • count: 当前迭代对象的index(从1开始计算)
  • size:被迭代对象的大小
  • current:当前迭代变量
  • even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）
  • first:布尔值，当前循环是否是第一个
  • last:布尔值，当前循环是否是最后一个

4、URL

URL在Web应用模板中占据着十分重要的地位，需要特别注意的是Thymeleaf对于URL的处理是通过语法@{…}来处理的。 
如果需要Thymeleaf对URL进行渲染，那么务必使用th:href，th:src等属性，下面是一个例子

<!-- Will produce 'http://localhost:8080/standard/unread' (plus rewriting) --><a  th:href="@{/standard/{type}(type=${type})}">view</a><!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

设置背景

<div th:style="'background:url(' + @{/<path-to-image>} + ');'"></div>
  • 1
  • 1

根据属性值改变背景

 <div class="media-object resource-card-image"  th:style="'background:url(' + @{(${collect.webLogo}=='' ? 'img/favicon.png' : ${collect.webLogo})} + ')'" ></div>
  • 1
  • 1

几点说明：

  • 上例中URL最后的(orderId=${o.id}) 表示将括号内的内容作为URL参数处理，该语法避免使用字符串拼接，大大提高了可读性
  • @{...}表达式中可以通过{orderId}访问Context中的orderId变量
  • @{/order}是Context相关的相对路径，在渲染时会自动添加上当前Web应用的Context名字，假设context名字为app，那么结果应该是/app/order

5、内联js

内联文本：[[…]]内联文本的表示方式，使用时，必须先用th:inline=”text/JavaScript/none”激活，th:inline可以在父级标签内使用，甚至作为body的标签。内联文本尽管比th:text的代码少，不利于原型显示。

<script th:inline="javascript">
/*<![CDATA[*/
...
var username = /*[[${sesion.user.name}]]*/ 'Sebastian';
var size = /*[[${size}]]*/ 0;
...
/*]]>*/
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

js附加代码：

/*[+
var msg = 'This is a working application';
+]*/
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

js移除代码：

/*[- */
var msg = 'This is a non-working template';
/* -]*/


这篇关于Thymeleaf初使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/962771。

相关文章

Java中流式并行操作parallelStream的原理和使用方法

Java中流式并行操作parallelStream的原理和使用方法

《Java中流式并行操作parallelStream的原理和使用方法》本文详细介绍了Java中的并行流（parallelStream）的原理、正确使用方法以及在实际业务中的应用案例,并指出在使用并行流... 目录Java中流式并行操作parallelStream0. 问题的产生1. 什么是parallelS
阅读更多...
Linux join命令的使用及说明

Linux join命令的使用及说明

《Linuxjoin命令的使用及说明》`join`命令用于在Linux中按字段将两个文件进行连接,类似于SQL的JOIN,它需要两个文件按用于匹配的字段排序,并且第一个文件的换行符必须是LF,`jo... 目录一. 基本语法二. 数据准备三. 指定文件的连接key四.-a输出指定文件的所有行五.-o指定输出
阅读更多...
Linux jq命令的使用解读

Linux jq命令的使用解读

《Linuxjq命令的使用解读》jq是一个强大的命令行工具,用于处理JSON数据,它可以用来查看、过滤、修改、格式化JSON数据,通过使用各种选项和过滤器,可以实现复杂的JSON处理任务... 目录一. 简介二. 选项2.1.2.2-c2.3-r2.4-R三. 字段提取3.1 普通字段3.2 数组字段四.
阅读更多...
Linux kill正在执行的后台任务 kill进程组使用详解

Linux kill正在执行的后台任务 kill进程组使用详解

《Linuxkill正在执行的后台任务kill进程组使用详解》文章介绍了两个脚本的功能和区别,以及执行这些脚本时遇到的进程管理问题,通过查看进程树、使用`kill`命令和`lsof`命令,分析了子... 目录零. 用到的命令一. 待执行的脚本二. 执行含子进程的脚本，并kill2.1 进程查看2.2 遇到的
阅读更多...
详解SpringBoot+Ehcache使用示例

详解SpringBoot+Ehcache使用示例

《详解SpringBoot+Ehcache使用示例》本文介绍了SpringBoot中配置Ehcache、自定义get/set方式,并实际使用缓存的过程,文中通过示例代码介绍的非常详细,对大家的学习或者... 目录摘要概念内存与磁盘持久化存储：配置灵活性：编码示例引入依赖：配置ehcache.XML文件：配置
阅读更多...
Java 虚拟线程的创建与使用深度解析

Java 虚拟线程的创建与使用深度解析

《Java虚拟线程的创建与使用深度解析》虚拟线程是Java19中以预览特性形式引入,Java21起正式发布的轻量级线程,本文给大家介绍Java虚拟线程的创建与使用,感兴趣的朋友一起看看吧... 目录一、虚拟线程简介1.1 什么是虚拟线程？1.2 为什么需要虚拟线程？二、虚拟线程与平台线程对比代码对比示例：三
阅读更多...
k8s按需创建PV和使用PVC详解

k8s按需创建PV和使用PVC详解

《k8s按需创建PV和使用PVC详解》Kubernetes中,PV和PVC用于管理持久存储,StorageClass实现动态PV分配,PVC声明存储需求并绑定PV,通过kubectl验证状态,注意回收... 目录1.按需创建 PV（使用 StorageClass）创建 StorageClass2.创建 PV
阅读更多...
Redis 基本数据类型和使用详解

Redis 基本数据类型和使用详解

《Redis基本数据类型和使用详解》String是Redis最基本的数据类型,一个键对应一个值,它的功能十分强大,可以存储字符串、整数、浮点数等多种数据格式,本文给大家介绍Redis基本数据类型和... 目录一、Redis 入门介绍二、Redis 的五大基本数据类型2.1 String 类型2.2 Hash
阅读更多...
Redis中Hash从使用过程到原理说明

Redis中Hash从使用过程到原理说明

《Redis中Hash从使用过程到原理说明》RedisHash结构用于存储字段-值对,适合对象数据,支持HSET、HGET等命令,采用ziplist或hashtable编码,通过渐进式rehash优化... 目录一、开篇：Hash就像超市的货架二、Hash的基本使用1. 常用命令示例2. Java操作示例三
阅读更多...
Linux创建服务使用systemctl管理详解

Linux创建服务使用systemctl管理详解

《Linux创建服务使用systemctl管理详解》文章指导在Linux中创建systemd服务,设置文件权限为所有者读写、其他只读,重新加载配置,启动服务并检查状态,确保服务正常运行,关键步骤包括权... 目录创建服务 /usr/lib/systemd/system/设置服务文件权限：所有者读写js，其他
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2