Thymeleaf模板

最新推荐文章于 2024-03-08 17:49:08 发布
最新推荐文章于 2024-03-08 17:49:08 发布
阅读量3k 收藏 12
点赞数 2
文章标签： java spring spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39888626/article/details/122278159
版权

目录

Thymeleaf介绍

Thymeleaf是比jsp功能更加强大，效率更快的模板
SpringBoot集成了Thymeleaf模板
Thymeleaf模板是基于HTML的，以HTML标签为载体
Thymeleaf官网：Thymeleaf
Thymeleaf手册：Thymeleaf

Thymeleaf常用设置

在SpringBoot的application配置文件中
在Controller层写路径时可以省略前后缀
字符串连接可以用双||
运算符：
gt——>
lt——<
ge——>=
le——<=
==——eq
!=——ne

#模板引擎的缓存机制
#一般在开发阶段关闭，在发布阶段开启
spring.thymeleaf.cache=false

#编码格式（默认是utf-8）
spring.thymeleaf.encoding=utf-8

#模板类型（默认是HTML）
spring.thymeleaf.mode=HTML

#模板的前缀，默认是resources下的templates
spring.thymeleaf.prefix=classpath:/templates/

#模板的后缀，默认是.html
spring.thymeleaf.suffix=.html

Thymeleaf使用

在HTML的html标签中加入引用xmlns:th=“http://www.thymeleaf.org”

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
</html>

thymeleaf模板起步依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

标准变量表达式

语法格式：th:text="${key}"
作用：获取key对应的作用域数据

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <p th:text="${user}"></p>
    <br>
    <p>对象属性</p>
    <!--使用${user.id}或${user.getId()}都可以获取数据-->
    <p th:text="${user.id}">id</p>
    <p th:text="${user.name}">name</p>
    <p th:text="${user.sex}">sex</p>
</div>
</body>
</html>

选择变量表达式

语法：{key}
作用：获取key对应的作用域对象，但不能单独用，需要和th:object一起使用
注：{key}需要在th:object="${key}的标签子标签内

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:object="${user}">
    <p>对象属性</p>
    <p th:text="*{id}">id</p>
    <p th:text="*{name}">name</p>
    <p th:text="*{sex}">sex</p>
</div>
</body>
</html>

链接表达式

语法：@{url}
作用：表示超链接

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a th:href="@{http://www.baidu.com}">绝对路径</a>
<a th:href="@{/tpl/value1}">相对地址</a>
<a th:href="@{'/tpl/value1?id='+1}">相对地址带参数</a>
<a th:href="@{/tpl/value1(id=1,name='zs')}">传参数方式</a>
<!--字符串连接可以用双||-->
<a th:href="|@{/tpl/value1?id=1}|">相对地址带参数</a>
</body>
</html>

Thymeleaf属性

Thymeleaf属性是原HTML原属性加th即可

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:src="@{/js/jquery.js}"></script>
</head>
<body>

<form th:action="@{/地址}" th:method="get或post，或者${key}可以动态获取方式">
</form>

<input type="text" th:id="${key}" th:name="${name}" th:text="${text}" th:value="${value}" />

<a th:onclick="'fun('+${key}+')'" th:style="${color}"></a>

</body>
</html>

th:each循环

语法：th:each

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:src="@{/js/jquery.js}"></script>
</head>
<body>

<!--
<div th:each="集合循环成员，循环的状态变量:${key}">
    <p th:text="${集合循环成员}"></p>
</div>
循环的状态变量表示整个循环体
作用：
index：当前迭代对象的index（从0迭代）
count：当前迭代对象的个数（从1迭代）
size：被迭代的对象的大小
current：当前迭代的变量
even/odd：布尔值，当前循环是否是偶数/奇数个
first：布尔值，当前循环是否是第一个
last：布尔值，当前循环是否是最后一个
-->

<div th:each="userList,userIter:${users}">
    <p th:text="${userList.id}"></p>
    <p th:text="${userList.name}"></p>
    <p th:text="${userList.sex}"></p>
    <!--循环状态变量-->
    <p th:text="${userIter.index}"></p>
    <p th:text="${userIter.count}"></p>
    <p th:text="${userIter.size}"></p>
    <p th:text="${userIter.current}"></p>
    <p th:text="${userIter.even}"></p>
    <p th:text="${userIter.odd}"></p>
    <p th:text="${userIter.first}"></p>
    <p th:text="${userIter.last}"></p>
</div>

<!--循环Map集合-->
<div th:each="map,mapIter:${users}">
    <p th:text="${m.key}"></p>
    <p th:text="${m.value.id}"></p>
    <p th:text="${m.value.name}"></p>
    <p th:text="${m.value.sex}"></p>
</div>

</body>
</html>

if判断

语法：th:if=“boolean条件”
作用：如果表达式为真，则显示标签内容
语法：th:unless=“boolean条件”
作用：如果表达式为假，则显示标签内容

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:src="@{/js/jquery.js}"></script>
</head>
<body>

<div th:if="1==1">第一个div</div>

<div th:if="1==2">unless</div>

</body>
</html>

switch判断

语法：th:switch="${key}" th:case=“值”
作用：显示case相等的

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:src="@{/js/jquery.js}"></script>
</head>
<body>

<div th:switch="${key}">
    <p th:case="id1">显示zs</p>
    <p th:case="id2">显示ls</p>
    <p th:case="id3">显示ww</p>
</div>

</body>
</html>

th:inline内联

语法：th:inline=“text”
语法：th:inline=“javascript”
作用：可以直接用内联内容显示表达式结果

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--使用JavaScript内联必须加th:inline="javascript"-->
    <script type="text/javascript" th:inline="javascript">
        //获取作用域的值
        var name = [[${user.name}]];
        var sex = [[${user.sex}]];
        alert(name+sex);
    </script>
</head>
<body>
<!--注：th:inline="text"可以省略不写-->
<div th:inline="text">
    <p>我是[[${user.name}]]</p>
</div>
</body>
</html>

Thymeleaf基本对象

#request表示HttpServletRequest对象
#session表示HttpSession对象
session表示HttpSession对象

#request对象/#session对象/session对象

语法：${#request.key}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:inline="javascript">

    </script>
</head>
<body>

<p th:text="${#request.getAttribute('user')}"></p>
<p th:text="${#request.getAttribute('user').name}"></p>

<p th:text="${#session.getAttribute('user')}"></p>
<p th:text="${#session.getAttribute('user').name}"></p>

<!--session获取属性值-->
<p th:text="${session.user}"></p>
<p th:text="${session.user.id}"></p>
<p th:text="${session.user.name}"></p>
<p th:text="${session.user.sex}"></p>

<!--获取请求参数-->
<p th:text="${param.id}"></p>
<!--参数数量-->
<p th:text="${param.size()}"></p>
</body>
</html>

Thymeleaf内置工具类

#dates

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:inline="javascript">

    </script>
</head>
<body>

<!--format内的date是作用域参数，不需要加单双引号-->
<p th:text="${#dates.format(date)}"></p>
<!--格式化-->
<p th:text="${#dates.format(date,'yyyy-MM-dd')}"></p>

</body>
</html>

#numbers

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:inline="javascript">

    </script>
</head>
<body>

<p th:text="${#numbers.formatCurrency(23.4324)}"></p>
<p th:text="${#numbers.formatDecimal(1000,5,2)}"></p>
</body>
</html>

#strings

${#strings.toString(obj)}
${#strings.isEmpty(name)}
${#strings.arrayIsEmpty(nameArr)}
${#strings.listIsEmpty(nameList)}
${#strings.setIsEmpty(nameSet)}
${#strings.indexOf(name,frag)}
${#strings.substring(name,3,5)}
${#strings.substringAfter(name,prefix)}
${#strings.substringBefore(name,suffix)}
${#strings.replace(name,'las','ler')}

#lists

${#lists.toList(object)}
${#lists.size(list)}
${#lists.isEmpty(list)}
${#lists.contains(list, element)}
${#lists.containsAll(list, elements)}
${#lists.sort(list)}

null处理

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:inline="javascript">

    </script>
</head>
<body>

<!--如果key为null则显示在页面为null处理-->
<p th:text="${user?.name}"></p>

</body>
</html>

Thymeleaf自定义模板（内容复用）

定义模板语法：th:fragment=“模板自定义名称”
引用模板语法：~{模板的文件名称 :: 自定义模板名称}
第二种格式：模板的文件名称 :: 自定义模板名称

模板的使用：包含模板（th:include），插入模板（th:insert）

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div th:fragment="top">
    <p>自定义模板</p>
    <p>www.localhost.com</p>
</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div th:insert="~{ head :: top }">
    insert方式使用模板
</div>

<div th:insert="head :: top">
    insert方式使用模板
</div>

<div th:include="~{ head :: top }">
    include方式
</div>

<div th:include="head :: top">
    include方式
</div>

<div th:include="footer :: html">
    整个html文件当做模板使用
</div>

<div th:include="footer">
    整个html文件当做模板使用
</div>

<div th:include="fragment :: html">
    使用其他目录中的模板
</div>

<div th:include="fragment">
    使用其他目录中的模板
</div>

</body>
</html>
小英雄没有大肚腩
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaEE:Thymeleaf模板引擎
weixin_63831348的博客
06-21 570
JavaEE:Thymeleaf模板引擎
浅浅入门SpringBoot之Thymeleaf模板
weixin_47268883的博客
04-27 2244
浅浅入门SpringBoot之Thymeleaf模板
引擎模板——Thymeleaf
weixin_55689501的博客
03-08 2170
适用于Web和独立环境的现代服务器端Java引擎模板——Thymeleaf
Spring Boot集成Thymeleaf模板引擎的完整步骤
08-26
Spring Boot集成Thymeleaf模板引擎的完整步骤 本文将为大家介绍Spring Boot集成Thymeleaf模板引擎的完整步骤，从基本概念到实际配置，详细地介绍了Thymeleaf模板引擎的使用方法。 一、Thymeleaf模板引擎概述 ...
Thymeleaf模板引擎
05-11
Thymeleaf 模板引擎 Thymeleaf 是一款功能强大且灵活的 Java 模板引擎，自 2011 年发布以来，它已经成为了 Java Web 开发中最流行的模板引擎之一。Thymeleaf 的主要特点是它支持 HTML 原型，可以让前端工程师在...
SpringBoot使用thymeleaf模板过程解析
08-25
SpringBoot使用Thymeleaf模板过程解析 本文主要介绍了SpringBoot使用Thymeleaf模板过程解析的详细步骤，通过示例代码对大家的学习或者工作具有一定的参考学习价值。下面将对标题、描述、标签和部分内容进行详细的...
spring-boot-Thymeleaf 模板
最新发布
03-08
Spring Boot Thymeleaf是一个集成了Thymeleaf模板引擎的Spring Boot Starter，用于简化在Spring Boot应用程序中使用Thymeleaf的过程。 Thymeleaf是一个现代服务器端Java模板引擎，可以处理HTML、XML、JavaScript、...
Thymeleaf模板驱动web1
08-08
Thymeleaf 模板驱动 web1 Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎，类似 JSP，Velocity，FreeMaker 等，它也可以轻易的与 Spring MVC 等 Web 框架进行集成作为 Web 应用的模板引擎。Thymeleaf ...
Thymeleaf实现行内背景样式，补充行内样式属性
debugtoday的博客
02-18 1950
Thymeleaf实现行内背景样式，补充行内样式属性
【Spring Boot】Thymeleaf模板引擎 — Thymeleaf入门
衍生星球的博客
08-03 2244
Thymeleaf是一款非常优秀的服务器端页面模板引擎，适用于Web和独立环境，具有丰富的标签语言和函数，能够处理HTML、XML、JavaScript甚至文本。Thymeleaf相较于其他模板引擎更加优雅。它强调自然模板化（允许模板成为工作原型，而Velocity、FreeMarker模板不允许这样做），所以它的语法更干净，更符合当前Web开发的趋势。
SpringBoot系列——Thymeleaf模板
ITSM/ITIL/网络安全/IT运维
04-20 4427
　　前言 　　thymeleaf是springboot官方推荐使用的java模板引擎，在springboot的参考指南里的第28.1.10Template Engines中介绍并推荐使用thymeleaf，建议我们应该避免使用jsp，jsp的本质是一个java的servlet类，jsp引擎将jsp的内容编译成.class，"out.write"输出到response再响应到浏览器，虽然java是一次编译，到处运行，但也大大增加了服务器压力，而且jsp将后台java语言嵌入页面，还要放入服务容器才能打...
Thymeleaf模板（全程案例详解）
热门推荐
客官不爱喝酒的博客
03-01 1万+
Thymeleaf1.thymeleaf简介2.thymeleaf的使用3.i18n国际化4.thymeleaf变量获取 1.thymeleaf简介 Thymeleaf 是个什么？ 简单说， Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下三个极吸引人的特点： 1、Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于
springboot+thymeleaf+maven+html+css实现精美大方好看官网模板完整源码
lucky_fang的博客
07-09 1717
很多时候，我们在网上搜索官网demo源码时，总是找不到适合自己的，要么不好看要么源码复杂要么跟自己擅长的开发语言不同。 本人最近纯手工开发了一个官网，前端+后台，为了简单就省略了数据库，需要数据库交互的可以自己后期补充叠加，也是很方便的，保证新手一看就会。 springboot真的很受欢迎，所以本人也采用了 springboot+thymeleaf+maven+html+css
Thymeleaf引擎模板
m0_51228846的博客
06-08 1319
Thymeleaf大家好，我是bigsai，今天我们来学习Thymeleaf，如果你对Thymeleaf比较陌生也不要紧，它很容易学习与理解，并有着自己鲜明的特色。什么是Thymeleaf？Thymeleaf 官网是这么解释的：Thymeleaf is a modern server-side Java template engine for both web and standalone environments.译过来就是：Thymeleaf是适用于Web和独立环境的现代服务器端。
javaweb基础：模板thymeleaf入门
u011863822的博客
03-24 1339
发现很多thymeleaf入门都是先上和spring等整合，然后让很多觉得无从入手。这样会让人不知道thymeleaf是干嘛的，所以直接单纯javaweb项目，直接使用thymeleaf，从而入门thymeleaf这个模板框架。通过实例演示，同时例子代码直接可以黏贴复制使用。
thymeleaf模板
03-07
如何在 Spring Boot 中使用 Thymeleaf 模板引擎？ Thymeleaf 是一种流行的模板引擎，可以与 Spring Boot 集成使用。您可以在 Spring Boot 中使用 Thymeleaf 来生成动态 HTML 页面。要使用 Thymeleaf，您需要在 pom....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值