Thymeleaf简介

news2025/5/13 22:06:34

在Java中，模板引擎可以帮助生成文本输出。常见的模板引擎包括FreeMarker、Velocity和Thymeleaf等

Thymeleaf是一个适用于Web和独立环境的现代服务器端Java模板引擎。

Thymeleaf 和 JSP比较：

Thymeleaf目前所作的工作和JSP有相似之处，Thymeleaf和JSP都是属于服务端渲染技术，Thymeleaf比JSP功能强大许多。

Thymeleaf就是SpringBoot 官方推荐使用的模板引擎。

搭建thymeleaf环境：

1、创建一个 SpringBoot 项目

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

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

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.14</version>
    <scope>provided</scope>
</dependency>

2、编写跳转页面的 Controller

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Student {
    private Integer id;
    private String name;
    private Integer age;
    private Date birthday;
}

@Controller
public class IndexController {
 
    @RequestMapping("/index")
    public String index(Model model) {
        model.addAttribute("message", "HelloWorld");
 
        Student student = new Student(1, "李四", 23, new Date());
        model.addAttribute("student", student);
 
        Student student1 = new Student(1, "张三1", 23, new Date());
        Student student2 = new Student(2, "张三2", 23, new Date());
        Student student3 = new Student(3, "张三3", 23, new Date());
        List<Student> list = new ArrayList<>();
        list.add(student1);
        list.add(student2);
        list.add(student3);
        model.addAttribute("list", list);
       return "index";
    }
}

3、index.html 页面

在resources/templates目录创建一个index.html页面。

注意，必须加上命名空间xmlns:th="Thymeleaf"，否则Thymeleaf的自定义标签没有提示。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--使用th:text输出-->
    <div th:text="${message}"></div>
 
    <input type="text" th:id="${student.id}" th:name="${student.name}" th:value="${student.name}"/>
      <!--循环-->
    <table border="1">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>生日</td>
        </tr>
        <tr th:each="student:${list}">
            <td th:text="${student.id}">1</td>
            <td th:text="${student.name}">张三</td>
            <td th:text="${student.age}">23</td>
            <td th:text="${#dates.format(student.birthday, 'yyyy-MM-dd')}">1990-12-13</td>
        </tr>
    </table>
 
    <!--取出集合中某一个-->
    <div th:text="${list[0].name}"></div>
</body>
</html>

疑难问题

问题：为什么thymeleaf页面放在templates文件夹里面，并且后缀要是.html呢？

SpringBoot框架会将内置支持的功能组件放在spring-boot-autoconfigure-3.2.5.jar 包下，而 Thymeleaf 框架就是内置支持的。

所以在这个包里面可以找对应的自动配置代码，如图：

如果找默认的属性配置应该找XxxxProperties类，如图所示，Thymeleaf模板的前后缀如下：

所以Thymeleaf的页面存放在templates文件夹中，并且页面的后缀为.html。

常用标签:

  1. 数学运算

二元操作：+, - , * , / , %

一元操作: - （负）

  1. 逻辑运算

一元 : and or

二元 : !,not

  1. 比较运算（为避免转义尴尬，可以使用括号中的英文进行比较运算！）

比较：> , < , >= ,

等于：== , != ( eq , ne )

  1. 简单表达式

变量表达式: ${...}

选择变量表达式: *{...}

消息表达式: #{...}

URL 表达式: @{...}

代码段表达式: ~{...}

<body>
    <!-- 使用th:text属性输出 -->
    <div th:text="${message}" ></div>
    <input type="text" th:id="${student.id}" th:name="${student.name}" th:value="${student.name}"><br/>
 
    <!--循环-->
    <table border="1">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>生日</td>
        </tr>
        <tr th:each="student:${list}">
            <td th:text="${student.id}">1</td>
            <td th:text="${student.name}">张三</td>
            <td th:text="${student.age}">23</td>
            <td th:text="${#dates.format(student.birthday, 'yyyy-MM-dd')}">1990-12-13</td>
        </tr>
    </table>

    <!-- springmvc 保存了一个 model 对象: list -->
    <!-- 获取所有 list -->
    <p th:text="${list}"></p>
    <!-- 获取 list 的第一个元素 -->
    <p th:text="${list[0]}"></p>
    <!-- 获取第一个 student 对象的 name 属性 -->
    <p th:text="${list[0].name}"></p>
    <!-- 也可以用 ['name'] 来获取第一个 student 对象的 name 属性 -->
    <p th:text="${list[0]['name']}"></p>
    <!-- 甚至可以调用方法! -->
    <p th:text="${list[0].getName()}"></p>
    <p th:text="${list[0]['name'].substring(0, 1)}"></p>
 
    <!--判断
    Thymeleaf支持四种判断：th:if/th:unless、逻辑运算符（and、or、not）、三目运算符、switch。-->
    <!--第一种：if & unless-->
    <!-- 如果条件为真，执行标签内的内容 -->
    <div th:if="${false}">
        天天18
    </div>
 
    <div th:if="${list[0].name eq '张三1'}">
        张三1
    </div>
    
     <div th:if="${list[0].name == '张三1'}">
        张三1
     </div>
 
    <!-- 如果条件为假，执行标签内的内容 -->
    <div th:unless="${false}">
        unless
    </div>
 
    <!--第二种：and、or、not-->
    <div th:if="${true or false}">
        真的18岁
    </div>
 
    <div th:if="${not false}">
        真的别做梦
    </div>
 
    <!--第三种：三目运算符-->
    <span th:text="true ? '今年不是18岁' : '总算清醒了'"></span><br/>
    <span th:text="${student.age eq 23} ? '今年是23' : '不是23'"></span>
    <span th:text="${student.age eq 23 ? '今年23' : '不是23'}"></span>
    
     <!--第四种：switch-->
    <div th:switch="${student.age}">
        <div th:case="16">我今年16岁</div>
        <div th:case="17">我今年17岁</div>
        <div th:case="18">我今年18岁</div>
        <div th:case="20">我今年20岁</div>
        <div th:case="23">我今年23岁</div>
        <div th:case="*">我年年18岁</div>
    </div>
</body>

域对象

变量表达式的作用是：从web作用域里面取到对应的值，作用域包括 request、session、application。

@RequestMapping("/data")
public String data(HttpServletRequest request, HttpSession session) {
    Student student1 = new Student(1, "张三1", 23 , new Date());
    request.setAttribute("student1", student1);
 
    Student student2 = new Student(2, "张三2", 23, new Date());
    session.setAttribute("student2", student2);
 
    Student student3 = new Student(3, "张三3", 23, new Date());
    ServletContext application = request.getServletContext();
    application.setAttribute("student3", student3);
 
    return "data";
}
<body>
    request:
    <div>
        编号：<span th:text="${student1.id}"></span><br>
        姓名：<span th:text="${student1.name}"></span><br>
        年龄：<span th:text="${student1.age}"></span><br>
    </div>
    session:
    <div>
        编号：<span th:text="${session.student2.id}"></span><br>
        姓名：<span th:text="${session.student2.name}"></span><br>
        年龄：<span th:text="${session.student2.age}"></span><br>
    </div>
    application:
    <div>
        编号：<span th:text="${application.student3.id}"></span><br>
        姓名：<span th:text="${application.student3.name}"></span><br>
        年龄：<span th:text="${application.student3.age}"></span><br>
    </div>

</body>

选择变量表达式

问题：取request、session、application作用域上的属性时，可以发现，我们需要重复编写student1、session.student2和application.student3三次，

如果student对象的属性有十几个怎么办？显然写十几次相同的代码不是我们想要解决方案。

针对这种问题，Thymeleaf提供了选择变量表达式来解决。

request： <br/>
<div th:object="${student1}">
    编号： <p th:text="*{id}"></p><br/>
    姓名：<p th:text="*{name}"></p> <br/>
    年龄：<p th:text="*{age}"></p><br/>
</div>
 
session：<br/>
<div th:object="${session.student2}">
    编号： <p th:text="*{id}"></p><br/>
    姓名：<p th:text="*{name}"></p> <br/>
    年龄：<p th:text="*{age}"></p><br/>
</div>

作用域内容对象的空值处理

当获取一个作用域中不存在的对象属性，那么会返回一个null，但是有些情况下还通过点运算符获取对象属性，那么这是SpringBoot会报异常。有些情况下，就是根据某个对象是否为null来执行相应的操作。

--需求：获取session作用域中的user对象，如果不为null就输出name，如果为null，就输出空字符串，而不是报异常。

--分析：可以在调用对象或者方法的点（.）前面，使用问号（?）来判断null

编号：

内置工具对象：# 符号直接使用

除了基本对象, thymeleaf 还提供了一组工具对象，其实和java中对应的方法大同小异。

@RequestMapping(value = "/util")
public String set(Model model) {
    Set<String> names = new HashSet<String>() ;
    List<Integer> ids = new ArrayList<Integer>() ;
    for (int i = 0 ; i < 5 ; i ++) {
        names.add("boot-" + i) ;
        ids.add(i) ;
    }
    model.addAttribute("names", names) ;
    model.addAttribute("ids", ids) ;
    model.addAttribute("mydate", new Date()) ;
    return "util" ;
}
<body>
    <p th:text="${#dates.format(mydate,'yyyy-MM-dd')}"/>
    <p th:text="${#dates.format(mydate,'yyyy-MM-dd HH:mm:ss.SSS')}"/>
    <hr/>
    <p th:text="${#strings.replace('www.baidu.cn','.','$')}"/>
    <p th:text="${#strings.toUpperCase('www.baidu.cn')}"/>
    <p th:text="${#strings.trim('www.baidu.cn')}"/>
    <hr/>
    <p th:text="${#sets.contains(names,'boot-0')}"/>
    <p th:text="${#sets.contains(names,'boot-9')}"/>
    <p th:text="${#sets.size(names)}"/>
    <hr/>
    <p th:text="${#lists.contains(ids,0)}"/>
</body>

Link URL

链接 URL 表达式语法是 @{...}

反斜杠 ”/“ 开头，代表static目录下的静态资源文件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}">
    <script type="text/javascript" th:src="@{/jquery-2.1.4.js}"></script>
    <script type="text/javascript" th:src="@{/mylayer.js}"></script>
</head>
<body>
    <a class="btn btn-primary" href="/">返回首页</a> <br/>
    <a class="btn btn-primary" href="#" th:href="@{/}">返回首页</a> <br/>
    <a href="/student/search">访问StudentController下面的search方法</a> <br/>
    <a href="#" th:href="@{/student/search}">访问StudentController下面的search方法</a><br/>
    <!-- 会生成 url: http://localhost:8888/student/search?id=2&name=zhangsan -->
    <a href="#" th:href="@{/student/search(id=${student.id},name=${student.name})}">访问UrlController下面的demo方法带参数</a>
</body>
</html>
@Controller
@RequestMapping("/student")
public class StudentController {

    @RequestMapping("/search")
    public String search(Integer id, String name) {
        System.out.println("StudentController.search");
        System.out.println("id: " + id);
        System.out.println("name: " + name);
        return "index";
    }
}

如何引入另一个html页面：

header.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div th:fragment="common_resource">
        <link rel="stylesheet" th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}">
        <script type="text/javascript" th:src="@{/jquery-2.1.4.js}"></script>
        <script type="text/javascript" th:src="@{/mylayer.js}"></script>
    </div>
</body>
</html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <!--<link rel="stylesheet" th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}">
    <script type="text/javascript" th:src="@{/jquery-2.1.4.js}"></script>
    <script type="text/javascript" th:src="@{/mylayer.js}"></script>-->
    <div th:replace="header::common_resource"></div>
</head>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2338234.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

o3和o4-mini的升级有哪些亮点？

o3和o4-mini的升级有哪些亮点？

ChatGPT是基于OpenAI GPT系列的高性能对话生成AI&#xff0c;经过多代迭代不断提升自然语言理解和生成能力。 在过去的一年中&#xff0c;OpenAI先后发布了GPT-4、GPT‑4.1及多种mini版本&#xff0c;为不同使用场景提供灵活选择。​ 随着用户需求向更高效、更精准的推理和视觉…
阅读更多...
MATLAB 控制系统设计与仿真 - 36

MATLAB 控制系统设计与仿真 - 36

鲁棒工具箱定义了个新的对象类ureal,可以定义在某个区间内可变的变量。 函数的调用格式为&#xff1a; p ureal(name,nominalvalue) % name为变量名,nominalValue为标称值&#xff0c;默认变化值为/-1 p ureal(name,nominalvalue,PlusMinus,plusminus) p ureal(name,nomin…
阅读更多...
Spring数据访问全解析：ORM整合与JDBC高效实践

Spring数据访问全解析：ORM整合与JDBC高效实践

目录 一、Spring ORM集成深度剖析 &#x1f31f; ORM模块架构设计 核心集成特性&#xff1a; 整合MyBatis示例配置&#xff1a; 二、Spring JDBC高效实践指南 &#x1f31f; 传统JDBC vs Spring JDBC对比 &#x1f31f; JdbcTemplate核心操作示例 批量操作优化&#xf…
阅读更多...
【HCIA】使用Access port实现简易的VLAN间通信

【HCIA】使用Access port实现简易的VLAN间通信

前言 当我们拥有一台三层交换机与两个vlan&#xff0c;我们可以使用简易的Vlanif配置实现VLAN间通信。 文章目录 前言1. 拓扑图2. 配置交换机3. 配置PC1与PC2的网络4. port link-type后记修改记录 1. 拓扑图 2. 配置交换机 <Huawei>system-view [Huawei]undo info-cent…
阅读更多...
6.VTK 颜色

6.VTK 颜色

文章目录 概念RGB示例HSV示例 概念 RGB颜色系统&#xff1a;通过红(R)、绿(G)、蓝(B)三个颜色分量的组合来定义颜色。每个分量的取值范围是0到1&#xff0c;其中(0, 0, 0)代表黑色&#xff0c;而(1, 1, 1)代表白色。可以使用vtkProperty::SetColor(r, g, b)方法为Actor设置颜色…
阅读更多...
shiro使用

shiro使用

shiro是apache提供的一种安全框架。他可以将登录&#xff0c;权限这一方面简单化。 使用shiro需要引入 <dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-core</artifactId><version>1.9.0</version></depend…
阅读更多...
光谱相机的成像方式

光谱相机的成像方式

光谱相机的成像方式决定了其如何获取物体的空间与光谱信息&#xff0c;核心在于分光技术与扫描模式的结合。以下是主要成像方式的分类解析&#xff1a; ‌一、滤光片切换型‌ ‌1. 滤光片轮&#xff08;Filter Wheel&#xff09;‌ ‌原理‌&#xff1a;通过旋转装有多个窄带…
阅读更多...
算法-链表

算法-链表

小细节 初始化问题 我们这样子new一个ListNode 它里面的默认值是0&#xff0c;所以我们不能这样 如果我们为空&#xff0c;我们要返回null 节点结束条件判断&#xff08;多创建节点问题&#xff09; 参考示例3217 解析&#xff1a; 我的答案是多了一个无用节点 这是因为我每…
阅读更多...
3.8/Q1，GBD数据库最新文章解读

3.8/Q1，GBD数据库最新文章解读

文章题目&#xff1a;Regional and National Burden of Traumatic Brain Injury and Spinal Cord Injury in North Africa and Middle East Regions, 1990-2021: A Systematic Analysis for The Global Burden of Disease Study 2021 DOI&#xff1a;10.1007/s44197-025-00372-…
阅读更多...
51单片机实验二：数码管静态显示

51单片机实验二：数码管静态显示

目录 一、实验环境与实验器材 二、实验内容及实验步骤 1.单个数码管显示 2.六个数码管依次从0~F变换显示 3.proteus仿真 一、实验环境与实验器材 环境&#xff1a;Keli&#xff0c;STC-ISP烧写软件,Proteus. 器材&#xff1a;TX-1C单片机&#xff08;STC89C52RC…
阅读更多...
Linux驱动开发进阶（八）- GPIO子系统BSP驱动

Linux驱动开发进阶（八）- GPIO子系统BSP驱动

文章目录 1、前言2、pinctrl子系统3、pinctrl bsp驱动4、gpio子系统5、gpio bsp驱动 1、前言 学习参考书籍以及本文涉及的示例程序&#xff1a;李山文的《Linux驱动开发进阶》本文属于个人学习后的总结&#xff0c;不太具备教学功能。 2、pinctrl子系统 在讨论gpio子系统时&…
阅读更多...
【Windows】安装或者点击OneDrive没有任何反应的解决方案

【Windows】安装或者点击OneDrive没有任何反应的解决方案

一些Windows企业版或者神州网信政府版的策略会禁止使用OneDrive&#xff0c;双击OneDrive安装程序或者点击OneDrive软件会没有任何反应。通过下面的设置可以解除相关的限制。 1、修改注册表 打开注册表管理器。依次HKEYLOCAL_MACHINE\Software\Policies\Microsoft\Windows\One…
阅读更多...
Python爬虫第17节-动态渲染页面抓取之Selenium使用下篇

Python爬虫第17节-动态渲染页面抓取之Selenium使用下篇

目录 引言 一、获取节点信息 1.1 获取属性 1.2 获取文本值 1.3 获取ID、位置、标签名、大小 二、切换Frame 三、延时等待 3.1 隐式等待 3.2 显式等待 四、前进后退 五、Cookies 六、选项卡管理 七、异常处理 引言 这一节我们继续讲解Selenium的使用下篇&#xff0…
阅读更多...
HarmonyOS 第2章 Ability的开发，鸿蒙HarmonyOS 应用开发入门

HarmonyOS 第2章 Ability的开发，鸿蒙HarmonyOS 应用开发入门

第2章 Ability的开发 本章内容 本章介绍HarmonyOS的核心组件Ability的开发。 2.1 Ability概述 2.2 FA模型介绍 2.3 Stage模型介绍 2.4 Ability内页面的跳转和数据传递 2.5 Want概述 2.6 实战：显式Want启动Ability 2.7 实战：隐式Want打开应用管理 2.8 小结 2.9 习题 2.1 Abili…
阅读更多...
day2-小白学习JAVA---java第一个程序

day2-小白学习JAVA---java第一个程序

java第一个程序 1、新建一个文件&#xff0c;以.java为结尾2、用编辑器打开后写入代码&#xff08;本人写前端&#xff0c;所以用vscode&#xff0c;也可用其他&#xff09;3、编译文件4、运行文件5、HelloWorld代码解释6、文档注释 1、新建一个文件&#xff0c;以.java为结尾 …
阅读更多...
Rockchip 新一代 64 位处理器 RK3562--九鼎开发板

Rockchip 新一代 64 位处理器 RK3562--九鼎开发板

RK3562 是 Rockchip 新一代 64 位处理器 RK3562&#xff08;Quad-core ARM Cortex-A53&#xff0c;主频 最高 2.0GHz&#xff09;&#xff0c;最大支持 8GB 内存&#xff1b;内置独立的 NPU&#xff0c;可用于轻量级人工智能应用&#xff0c;RK3562 拥有 PCIE2.1/USB3.0 OTG/…
阅读更多...
z-library电子图书馆最新地址的查询方法

z-library电子图书馆最新地址的查询方法

对于喜欢读书的伙伴们&#xff0c;应该都听说过z站&#xff08;z-library&#xff09;&#xff0c;优点多多&#xff0c;缺点就是地址不稳定&#xff0c;经常会变化网站地址。然后我最近发现了一个工具&#xff0c;可以不间断更新官方可用的z站地址&#xff1a;电子书最新地址
阅读更多...
Spring Boot 3 + SpringDoc：打造接口文档

Spring Boot 3 + SpringDoc：打造接口文档

1、背景公司 新项目使用SpringBoot3.0以上构建&#xff0c;其中需要对外输出接口文档。接口文档一方面给到前端调试&#xff0c;另一方面给到测试使用。 2、SpringDoc 是什么&#xff1f; SpringDoc 是一个基于 Spring Boot 项目的库&#xff0c;能够自动根据项目中的配置、…
阅读更多...
Json 在线格式化 - 加菲工具

Json 在线格式化 - 加菲工具

Json 在线格式化 打开网站 加菲工具 选择“Json 在线格式化” 或者直接进入 https://www.orcc.top/tools/json 输入Json&#xff0c;点击左上角的“格式化”按钮 得到格式化后的结果
阅读更多...
HarmonyOS-ArkUI V2装饰器： @Monitor装饰器：状态变量修改监听

HarmonyOS-ArkUI V2装饰器： @Monitor装饰器：状态变量修改监听

Monitor作用 Monitor的作用就是来监听状态变量的值变化的。被Monitor修饰的函数，会在其对应监听的变量发生值的变化时，回调此函数，从而可以让您知道是什么值发生变化了，变化前是什么值，变化后是什么值。 V1版本的装饰器，有个叫@Watch的装饰器，其实也有监听变化的能力，…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023