【Thymeleaf】spring boot模板引擎thymeleaf用法详解

ops/2024/10/30 0:19:57/

快速入门Thymeleaf

  • 1️⃣ 什么是Thymeleaf？
  • 1️⃣ 模板入门
    • 2️⃣ 创建测试工程
    • 2️⃣ 配置文件
    • 2️⃣ 创建controller
    • 2️⃣ 写一个html页面
    • 2️⃣ 启动测试
  • 1️⃣ Thymeleaf基础
    • 2️⃣ 实体类
    • 2️⃣ 增加接口
    • 2️⃣ $符号使用
    • 2️⃣ *符号的使用
    • 2️⃣ @符号的使用
    • 2️⃣ #符号的使用
    • 2️⃣ 集合的遍历
    • 2️⃣ thymeleaf如何定义变量
    • 2️⃣ 字面量
    • 2️⃣ 字符串拼接方式
    • 2️⃣ 比较运算符
    • 2️⃣ 逻辑运算符
    • 2️⃣ 三目运算符
    • 2️⃣ 分支结构，th:if,th:unless,th:switch,th:case
    • 2️⃣ thymeleaf的一些常用的内置对象
    • 2️⃣ 内联

Thymeleaf_1">1️⃣ 什么是Thymeleaf？

Thymeleaf 是一个流行的模板引擎，该模板引擎采用 Java 语言开发。

模板引擎是一个技术名词，是跨领域跨平台的概念，在 Java 语言体系下有模板引擎，在 C#、PHP 语言体系下也有模板引擎，甚至在 JavaScript 中也会用到模板引擎技术，Java 生态下的模板引擎有 Thymeleaf 、Freemaker、Velocity、Beetl（国产） 等。

Thymeleaf 对网络环境不存在严格的要求，既能用于 Web 环境下，也能用于非 Web 环境下。在非 Web 环境下，他能直接显示模板上的静态数据；在 Web 环境下，它能像 Jsp 一样从后台接收数据并替换掉模板上的静态数据。它是基于 HTML 的，以 HTML 标签为载体，Thymeleaf 要寄托在 HTML 标签下实现。

SpringBoot 集成了 Thymeleaf 模板技术，并且 Spring Boot 官方也推荐使用 Thymeleaf 来替代 JSP 技术，Thymeleaf 是另外的一种模板技术，它本身并不属于 Spring Boot，Spring Boot只是很好地集成这种模板技术，作为前端页面的数据展示，在过去的 Java Web 开发中，我们往往会选择使用 Jsp 去完成页面的动态渲染，但是 jsp 需要翻译编译运行，效率低。

Thymeleaf 的官方网站：Thymeleaf

Thymeleaf 官方手册：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

在这里插入图片描述

1️⃣ 模板入门

2️⃣ 创建测试工程

创建一个freemarker 的测试工程专门用于freemarker的功能测试与模板的测试。

测试环境搭建目录：

导入依赖：

<!-- SpringBoot框架集成Thymeleaf的起步依赖 -->
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2️⃣ 配置文件

配置application.yml。

application.yml内容如下：

server:port: 8088 #服务端口spring:main:allow-bean-definition-overriding: trueapplication:name: thymeleaf-demo #指定服务名thymeleaf:cache: false  #关闭模板缓存，方便测试suffix: .htmlprefix: classpath:/templates/

2️⃣ 创建controller

创建Controller类，向Map中添加name，最后返回模板文件。

UserController.java内容如下:

java">import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;/*** @author hanson.huang* @version V1.0* @date 2024/10/23 18:44**/
@Controller
public class UserController {@RequestMapping(value = "/message")public String message(Model model) {model.addAttribute("data","SpringBoot框架集成Thymeleaf模板引擎");return "message";}
}

2️⃣ 写一个html页面

HTML 页面的元素中加入以下属性：<html xmlns:th="http://www.thymeleaf.org">

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div th:text="${data}"></div>
<h2 th:text="${data}"></h2>
<p th:text="${data}"></p>
<span th:text="${data}"></span>
</body>
</html>

2️⃣ 启动测试

java">import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
public class ThymeleafDemoApplication {public static void main(String[] args) {SpringApplication.run(ThymeleafDemoApplication.class, args);}}

测试结果：

在这里插入图片描述

在页面的源代码中，可以看到在html文件中，通过 th:text 获取到的数据是存放在标签体中的。

注 意 ： Springboot 用 使 用 thymeleaf 作 为 视 图 展 示 ， 约 定 将 模 板 文 件 放 置
在src/main/resource/templates 目录下，静态资源放置在 src/main/resource/static 目录下。

在这里插入图片描述

Thymeleaf_131">1️⃣ Thymeleaf基础

2️⃣ 实体类

java">@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {private int id;private String name;private int age;
}

2️⃣ 增加接口

java">@GetMapping("/hello")
public String hello(Model model, HttpSession session) {session.setAttribute("name","Hanson");List<User> list = new ArrayList<>();for (int i = 0 ; i < 5; i++) {User user = new User();user.setId(i);user.setName("黄汉升"+i);user.setAge(18);list.add(user);}model.addAttribute("users",list);User user = new User();user.setId(11);user.setAge(18);user.setName("赵子龙");model.addAttribute("user",user);return "hello";
}

2️⃣ $符号使用

$符号主要是取对象中的数据

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div th:text="${user.id}"></div>
<div th:text="${user.name}"></div>
<div th:text="${user.age}"></div>
</body>
</html>

测试结果：

在这里插入图片描述

2️⃣ *符号的使用

符号也可以取对象中的数据

<!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}"><div th:text="*{id}"></div><div th:text="*{name}"></div><div th:text="*{age}"></div>
</div><div th:text="*{user.id}"></div>
<div th:text="*{user.name}"></div>
<div th:text="*{user.age}"></div>
</body>
</html>

测试结果：

在这里插入图片描述

2️⃣ @符号的使用

@符号主要是用于引入文件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--可以是全路径-->
<script th:Src="@{http://localhost:8088/hello.js}"></script>
<!--可以带参数-->
<script th:Src="@{http://localhost:8088/hello.js(name='yl',age=19)}"></script>
<!--~代表当前项目-->
<script th:Src="@{~/hello.js}"></script>
<!--也可以省略协议-->
<script th:Src="@{//localhost:8088/hello.js}"></script><img th:src="@{https://img01.51jobcdn.com/im/2021/avatar/female/avatar_toc_female12.png}" th:title="${user.name}" th:alt="${user.name}"/><script>javascript">// 确保在页面加载完成后调用 sayHello('Hanson')window.onload = function() {sayHello('Hanson');};
</script></body>
</html>

测试结果：

在这里插入图片描述

2️⃣ #符号的使用

#符号主要是根据当前浏览器的语言去相对应的国际化配置文件中取值

在这里插入图片描述

在这里插入图片描述

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

2️⃣ 集合的遍历

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div><table border="1px"><tr th:each="u,state : ${users}"><td th:text="${u.id}"></td><td th:text="${u.name}"></td><td th:text="${u.age}"></td><!--当前的遍历索引，从0开始--><td th:text="${state.index}"></td><!--当前的遍历索引，从1开始--><td th:text="${state.count}"></td><!--集合元素的总个数--><td th:text="${state.size}"></td><!--当前遍历的对象--><td th:text="${state.current}"></td><!--当前遍历是否为奇数次遍历--><td th:text="${state.even}"></td><!--当前遍历是否为偶数次遍历--><td th:text="${state.odd}"></td><!--当前是否为第一次遍历--><td th:text="${state.first}"></td><!--当前是否为最后一次遍历--><td th:text="${state.last}"></td></tr></table>
</div></body>
</html>

测试结果：

在这里插入图片描述

2️⃣ thymeleaf如何定义变量

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--th:with可以定义变量-->
<div th:with="num=(100+100/100+90-1)"><div th:text="${num}"></div>
</div></body>
</html>

测试结果：

在这里插入图片描述

2️⃣ 字面量

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div th:text="'枪出如龙'"></div>
<div th:text="100"></div>
<div th:text="true"></div>
<div th:text="hellohanson"></div></body>
</html>

测试结果：

在这里插入图片描述

2️⃣ 字符串拼接方式

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div th:text="'java' + 'js'"></div>
<div th:text="'java' + ${user.name}"></div>
<div th:text="|java ${user.name}|"></div></body>
</html>

测试结果：

在这里插入图片描述

2️⃣ 比较运算符

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div th:with="num=(100+100/100+90-1)"><!--第一，第四和第六为true--><div th:text="${num} eq 190"></div><div th:text="${num} ne 190"></div><div th:text="${num} lt 190"></div><div th:text="${num} le 190"></div><div th:text="${num} gt 190"></div><div th:text="${num} ge 190"></div>
</div></body>
</html>

测试结果：

在这里插入图片描述

2️⃣ 逻辑运算符

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--false-->
<div th:text="9 eq 9 and 8 ne 8"></div>
<!--true-->
<div th:text="9 eq 9 or 8 ne 8"></div>
<!--false-->
<div th:text="not(9 eq 9 or 8 ne 8)"></div>
<!--false-->
<div th:text="!(9 eq 9 or 8 ne 8)"></div></body>
</html>

测试结果：

在这里插入图片描述

2️⃣ 三目运算符

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div th:with="score=57"><div th:text="(${score} ge 60) ? '及格' : '不及格'"></div>
</div></body>
</html>

测试结果：

在这里插入图片描述

2️⃣ 分支结构，th:if,th:unless,th:switch,th:case

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div><table border="1px"><!--th:if只显示偶次数出现的数据，th:unless则是取反--><tr th:each="u,state : ${users}" th:if="${state.odd}"><td th:text="${u.id}"></td><td th:text="${u.name}"></td><td th:text="${u.age}"></td><!--当前的遍历索引，从0开始--><td th:text="${state.index}"></td><!--当前的遍历索引，从1开始--><td th:text="${state.count}"></td><!--集合元素的总个数--><td th:text="${state.size}"></td><!--当前遍历的对象--><td th:text="${state.current}"></td><!--当前遍历是否为奇数次遍历--><td th:text="${state.even}"></td><!--当前遍历是否为偶数次遍历--><td th:text="${state.odd}"></td><!--当前是否为第一次遍历--><td th:text="${state.first}"></td><!--当前是否为最后一次遍历--><td th:text="${state.last}"></td></tr></table>
</div><!--switch case语句-->
<div><table border="1px"><tr th:each="u,state : ${users}"><td th:text="${u.id}"></td><td th:text="${u.name}"></td><td th:text="${u.age}"></td><!--当前的遍历索引，从0开始--><td th:text="${state.index}"></td><!--当前的遍历索引，从1开始--><td th:text="${state.count}"></td><!--集合元素的总个数--><td th:text="${state.size}"></td><!--当前遍历的对象--><td th:text="${state.current}"></td><!--当前遍历是否为奇数次遍历--><td th:text="${state.even}"></td><!--当前遍历是否为偶数次遍历--><td th:text="${state.odd}"></td><!--当前是否为第一次遍历--><td th:text="${state.first}"></td><!--当前是否为最后一次遍历--><td th:text="${state.last}"></td><td th:switch="${state.odd}"><span th:case="true">偶数</span><span th:case="*">基数</span></td></tr></table>
</div></body>
</html>

测试结果：

在这里插入图片描述

2️⃣ thymeleaf的一些常用的内置对象

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--thymeleaf的一些常用的内置对象-->
<!--session对象-->
<div th:text="${#session.getAttribute('name')}"></div>
<!--lists对象-->
<div th:text="${#lists.size(users)}"></div>
<!--execInfo对象-->
<div th:text="${#execInfo.getProcessedTemplateName}"></div></body>
</html>

测试结果：

在这里插入图片描述

2️⃣ 内联

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--内联-->
<!--其实取对象里的值还有以下这两种方式-->
<div>hello [[${user.name}]]</div>
<div>hello [(${user.name})]</div>
<hr/><!--如下，第一种方式对内容进行转义了，第二种方式没有对内容进行转义-->
<div th:with="str='jq <b>a better language</b>'"><div>[[${str}]]</div><div>[(${str})]</div>
</div><script th:inline="javascript">javascript">var name = [[${user.name}]]console.log(name)
</script></body>
</html>

测试结果：

在这里插入图片描述

至此便是本文章关于Thymeleaf简单的基础入门＜(▰˘◡˘▰)

本文代码：github

往期文章推荐《【FreeMarker】一文快速入门FreeMarker》

后期会更新模型到引擎最后导出pdf整个流程!!!

在这里插入图片描述


http://www.ppmy.cn/ops/129448.html

相关文章

Java知识巩固(十二)

Java知识巩固(十二)

I/O JavaIO流了解吗&#xff1f; IO 即 Input/Output&#xff0c;输入和输出。数据输入到计算机内存的过程即输入&#xff0c;反之输出到外部存储&#xff08;比如数据库&#xff0c;文件&#xff0c;远程主机&#xff09;的过程即输出。数据传输过程类似于水流&#xff0c;因…
阅读更多...
基于SSM考研助手系统的设计

基于SSM考研助手系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;学生管理&#xff0c;教学秘书管理&#xff0c;考研资讯管理&#xff0c;考研名师管理&#xff0c;考研信息管理&#xff0c;系统管理 教学秘书账号功能包括&#xff1a;系统首页&#xff0c;个人中心…
阅读更多...
关于sse、websocket与流式渲染

关于sse、websocket与流式渲染

一、SSE是什么&#xff1f; 网络中的 SSE (Server-Sent Events) 是一种服务器向浏览器单向推送数据的机制&#xff0c;常用于需要实时更新的数据传输&#xff0c;如新闻推送、股票行情、聊天应用等。 SSE 的特点&#xff1a; 单向通信&#xff1a;服务器向客户端推送数据&…
阅读更多...
CSS3新增长度单位

CSS3新增长度单位

CSS3新增长度单位 rem&#xff1a;根元素字体的倍数&#xff0c;只与根元素字体大小有关&#xff1b;vw&#xff1a;占视口宽度的百分比&#xff1b;vh&#xff1a;占视口高度的百分比&#xff1b;vmax&#xff1a;占视口中宽和高最大的百分比&#xff1b;vmin&#xff1a;占视…
阅读更多...
初识WebGL

初识WebGL

思路&#xff1a; 构建<canvas>画布节点&#xff0c;获取其的实例。使用getWebGLContext() 拿到画布上下文。拿到上下文用clearColor() 设置背景颜色。最后清空canvas画布,是为了清除颜色缓冲区。 html结构&#xff1a; <!DOCTYPE html> <html lang"en&…
阅读更多...
【Hadoop】hadoop的路径分不清？HDFS路径与本地文件系统路径的区别

【Hadoop】hadoop的路径分不清？HDFS路径与本地文件系统路径的区别

/usr/local/hadoop /user/hadoop /home/hadoop/ 这里有些路径名很相似&#xff0c;帮我区分&#xff1f; 在Hadoop生态系统中&#xff0c;理解文件存储的位置对于有效管理数据至关重要。Hadoop分布式文件系统&#xff08;HDFS&#xff09;提供了一个高度可靠的存储系统&#xf…
阅读更多...
Kafka-代码示例

Kafka-代码示例

一、构建开发环境 File > New > Project 选择一个最简单的模板 项目和坐标命名 配置maven路径 添加maven依赖 <dependencies><!-- https://mvnrepository.com/artifact/org.apache.kafka/kafka-clients --><dependency><groupId>org.apache.kaf…
阅读更多...
Es可视化界面 ElasticHd

Es可视化界面 ElasticHd

前言 在开发的过程中&#xff0c;有一个可视化界面工具&#xff0c;以及一个可执行的es相关语句的工具十分重要&#xff0c;主要有以下这些 1. Kibana‌&#xff1a;○ Kibana是Elastic官方提供的数据可视化工具&#xff0c;功能强大&#xff0c;支持多种图表类型&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023