当前位置： 首页 > news >正文

SpringBoot Thymeleaf模板引擎

news 2025/7/8 10:54:19

Thymeleaf

模板引擎

  • 前端交给我们的页面，是html页面。如果是我们以前开发，我们需要把他们转成jsp页面，jsp好处就是当我们查出一些数据转发到JSP页面以后，我们可以用jsp轻松实现数据的显示，及交互等。

  • jsp支持非常强大的功能，包括能写Java代码，但是呢，我们现在的这种情况，SpringBoot这个项目首先是以jar的方式，不是war，像第二，我们用的还是嵌入式的Tomcat，所以呢，他现在默认是不支持jsp的。

  • 那不支持jsp，如果我们直接用纯静态页面的方式，那给我们开发会带来非常大的麻烦，那怎么办呢？

SpringBoot推荐你可以来使用模板引擎：

模板引擎，我们其实大家听到很多，其实jsp就是一个模板引擎，还有用的比较多的freemarker，包括SpringBoot给我们推荐的Thymeleaf，模板引擎有非常多，但再多的模板引擎，他们的思想都是一样的，什么样一个思想呢我们来看一下这张图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vUJYTRyp-1691586159950)(SpringBoot11：Thymeleaf模板引擎.assets/1595555521951.png)]

模板引擎的作用就是我们来写一个页面模板，比如有些值呢，是动态的，我们写一些表达式。而这些值，从哪来呢，就是我们在后台封装一些数据。然后把这个模板和这个数据交给我们模板引擎，模板引擎按照我们这个数据帮你把这表达式解析、填充到我们指定的位置，然后把这个数据最终生成一个我们想要的内容给我们写出去，这就是我们这个模板引擎，不管是jsp还是其他模板引擎，都是这个思想。只不过呢，就是说不同模板引擎之间，他们可能这个语法有点不一样。其他的我就不介绍了，我主要来介绍一下SpringBoot给我们推荐的Thymeleaf模板引擎，这模板引擎呢，是一个高级语言的模板引擎，他的这个语法更简单。而且呢，功能更强大。

引入Thymeleaf

怎么引入呢，对于springboot来说，什么事情不都是一个start的事情嘛，我们去在项目中引入一下。给大家三个网址：

  • Thymeleaf 官网：https://www.thymeleaf.org/

  • Thymeleaf 在Github 的主页：https://github.com/thymeleaf/thymeleaf

  • Spring官方文档：找到我们对应的版本https://docs.spring.io/spring-boot/docs/2.6.5/reference/htmlsingle/#using-boot-starter

找到对应的pom依赖：可以适当点进源码看下本来的包！

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

Thymeleaf分析

前面呢，我们已经引入了Thymeleaf，那这个要怎么使用呢？

我们首先得按照SpringBoot的自动配置原理看一下我们这个Thymeleaf的自动配置规则，在按照那个规则，我们进行使用。

我们去找一下Thymeleaf的自动配置类：ThymeleafProperties

@ConfigurationProperties(prefix = "spring.thymeleaf"
)
public class ThymeleafProperties {private static final Charset DEFAULT_ENCODING;public static final String DEFAULT_PREFIX = "classpath:/templates/";public static final String DEFAULT_SUFFIX = ".html";private boolean checkTemplate = true;private boolean checkTemplateLocation = true;private String prefix = "classpath:/templates/";private String suffix = ".html";private String mode = "HTML";private Charset encoding;
}

我们可以在其中看到默认的前缀和后缀！
我们只需要把我们的html页面放在类路径下的templates下，thymeleaf就可以帮我们自动渲染了。
使用thymeleaf什么都不需要配置，只需要将他放在指定的文件夹下即可！

测试

  1. 编写一个TestController

    @Controller
public class TestController {@RequestMapping("/test")public String test1(){//classpath:/templates/test.htmlreturn "test";}}

  2. 编写一个测试页面 test.html 放在 templates 目录下

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>Test页面</h1>
</body>
</html>

  3. 启动项目请求测试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y808GY4o-1691586159951)(SpringBoot11：Thymeleaf模板引擎.assets/1595557596160.png)]

Thymeleaf 语法学习

要学习语法，还是参考官网文档最为准确，我们找到对应的版本看一下；

Thymeleaf 官网：https://www.thymeleaf.org/ ， 简单看一下官网！我们去下载Thymeleaf的官方文档！在线文档：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

Thymeleaf入门

我们做个最简单的练习 ：我们需要查出一些数据，在页面中展示

  1. 修改测试请求，增加数据传输；

    @RequestMapping("/t1")
public String test1(Model model){//存入数据model.addAttribute("msg","Hello,Thymeleaf");//classpath:/templates/test.htmlreturn "test";
}

  2. 我们要使用thymeleaf，需要在html文件中导入命名空间的约束，方便提示。

    我们可以去官方文档中看一下命名空间拿来过来：

 xmlns:th="http://www.thymeleaf.org"

在这里插入图片描述

  1. 我们去编写下前端页面

    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>测试</title>
</head>
<body>
<h1>测试页面</h1><!--th:text就是将div中的内容设置为它指定的值，和之前学习的Vue一样-->
<div th:text="${msg}"></div>
</body>
</html>

  2. 启动测试！

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1BwAaql0-1691586159952)(SpringBoot11：Thymeleaf模板引擎.assets/1595558424003.png)]

Thymeleaf语法

1、我们可以使用任意的 th:attr 来替换Html中原生属性的值！

2、我们能写哪些表达式呢？

Simple expressions:（表达式语法）
Variable Expressions: ${...}：获取变量值；OGNL；1）、获取对象的属性、调用方法2）、使用内置的基本对象：#18#ctx : the context object.#vars: the context variables.#locale : the context locale.#request : (only in Web Contexts) the HttpServletRequest object.#response : (only in Web Contexts) the HttpServletResponse object.#session : (only in Web Contexts) the HttpSession object.#servletContext : (only in Web Contexts) the ServletContext object.3）、内置的一些工具对象：#execInfo : information about the template being processed.#uris : methods for escaping parts of URLs/URIs#conversions : methods for executing the configured conversion service (if any).#dates : methods for java.util.Date objects: formatting, component extraction, etc.#calendars : analogous to #dates , but for java.util.Calendar objects.#numbers : methods for formatting numeric objects.#strings : methods for String objects: contains, startsWith, prepending/appending, etc.#objects : methods for objects in general.#bools : methods for boolean evaluation.#arrays : methods for arrays.#lists : methods for lists.#sets : methods for sets.#maps : methods for maps.#aggregates : methods for creating aggregates on arrays or collections.
==================================================================================Selection Variable Expressions: *{...}：选择表达式：和${}在功能上是一样；Message Expressions: #{...}：获取国际化内容Link URL Expressions: @{...}：定义URL；Fragment Expressions: ~{...}：片段引用表达式Literals（字面量）Text literals: 'one text' , 'Another one!' ,…Number literals: 0 , 34 , 3.0 , 12.3 ,…Boolean literals: true , falseNull literal: nullLiteral tokens: one , sometext , main ,…Text operations:（文本操作）String concatenation: +Literal substitutions: |The name is ${name}|Arithmetic operations:（数学运算）Binary operators: + , - , * , / , %Minus sign (unary operator): -Boolean operations:（布尔运算）Binary operators: and , orBoolean negation (unary operator): ! , notComparisons and equality:（比较运算）Comparators: > , < , >= , <= ( gt , lt , ge , le )Equality operators: == , != ( eq , ne )Conditional operators:条件运算（三元运算符）If-then: (if) ? (then)If-then-else: (if) ? (then) : (else)Default: (value) ?: (defaultvalue)Special tokens:No-Operation: _

练习测试：

1、 我们编写一个Controller，放一些数据


@RequestMapping("/test2")
public String test2(Map<String,Object> map){//存入数据map.put("msg","<h1>Hello</h1>");map.put("users", Arrays.asList("qinjiang","kuangshen"));//classpath:/templates/test.htmlreturn "test";
}

2、测试页面取出数据

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div><h1>Test页面</h1><!--不转义--><div th:text="${msg}"></div><!--转义--><div th:utext="${msg}"></div><hr><!--遍历数据--><!--th:each每次遍历都会生成当前这个标签：官网#9--><h3 th:each="user:${users}" th:text="${user}"></h3><hr><!--行内写法：官网#12--><h3 th:each="user:${users}">[[ ${user} ]]</h3>
</div>
</body>
</html>

3、启动项目测试！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SsBylsdT-1691586159953)(SpringBoot11：Thymeleaf模板引擎.assets/1595560097876.png)]

我们看完语法，很多样式，我们即使现在学习了，也会忘记，所以我们在学习过程中，需要使用什么，根据官方文档来查询，才是最重要的，要熟练使用官方文档！

相关文章：

SpringBoot Thymeleaf模板引擎

Thymeleaf 模板引擎 前端交给我们的页面&#xff0c;是html页面。如果是我们以前开发&#xff0c;我们需要把他们转成jsp页面&#xff0c;jsp好处就是当我们查出一些数据转发到JSP页面以后&#xff0c;我们可以用jsp轻松实现数据的显示&#xff0c;及交互等。 jsp支持非常强大…...

编程日记 2023/8/10 8:34:35

prometheus部署

一、前言 Prometheus 是一个开源的系统监控和警报工具&#xff0c;用于收集、存储和查询时间序列数据。它旨在提供高效的多维数据收集和查询功能&#xff0c;帮助用户监控其应用程序和基础设施的性能&#xff0c;并在出现问题时触发警报&#xff0c;总来得说prometheus是用来收…...

编程日记 2023/8/10 8:33:34

Flink-Window详细讲解-countWindow

一.countWindow和countWindowall区别 1.countWindow&#xff1a; 如果您使用 countWindow(5)&#xff0c;这意味着您将数据流划分成多个大小为 5 的窗口。划分后的窗口如下&#xff1a; 窗口 1: [1, 2, 3, 4, 5]窗口 2: [6, 7, 8, 9, 10] 当每个窗口中的元素数量达到 5 时&…...

编程日记 2023/8/10 8:32:31

React 18 state 如同一张快照

参考文章 state 如同一张快照 也许 state 变量看起来和一般的可读写的 JavaScript 变量类似。但 state 在其表现出的特性上更像是一张快照。设置它不会更改已有的 state 变量&#xff0c;但会触发重新渲染。 设置 state 会触发渲染 可能会认为用户界面会直接对点击之类的用…...

编程日记 2023/8/10 8:31:29

EasyPoi导出 导入(带校验)简单示例 EasyExcel

官方文档 : http://doc.wupaas.com/docs/easypoi pom的引入: <!-- easyPoi--><dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-spring-boot-starter</artifactId><version>4.0.0</version></dep…...

编程日记 2023/8/10 8:30:27

八大排序

目录 选择排序-直接插入排序 插入排序-希尔排序 选择排序-简单选择排序 选择排序-堆排序 交换排序-冒泡排序 交换排序-快速排序 归并排序 基数排序 选择排序-直接插入排序 基本思想: 如果碰见一个和插入元素相等的&#xff0c;那么插入元素把想插入的元素放在相等元素…...

编程日记 2023/8/10 8:29:26

网络安全【黑客技术】自学

1.网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 掌握技术的听说也需要心怀正义&#xff0c;不要利用技术行不轨之事&…...

编程日记 2023/8/10 8:28:25

【网络通信】socket编程——TCP套接字

TCP依旧使用代码来熟悉对应的套接字&#xff0c;很多接口都是在udp中使用过的 所以就不会单独把他们拿出来作为标题了&#xff0c;只会把第一次出现的接口作为标题 文章目录 服务端 tcp_servertcpserver.hpp(封装)初始化 initServer1. 创建socket2. 绑定 bindhtons —— 主机序…...

编程日记 2023/8/10 8:27:23

ROS2系统学习番外篇2---用VSCode开发ROS2程序

在ROS2系统学习3—第一个“Hello World”程序—即工作空间创建与包创建中已经介绍了如何创建ROS的工作空间以及包。在开发大型工程时，往往需要在IDE下面进行开发，因此本篇介绍使用VSCode来搭建ROS2开发环境的方法。 首先用VSCode打开ROS2的工作空间。 使用快捷键编译ROS2 …...

编程日记 2023/8/10 8:26:22

06 - Stream如何提高遍历集合效率？

前面我们讲过 List 集合类&#xff0c;那我想你一定也知道集合的顶端接口 Collection。 在 Java8 中&#xff0c;Collection 新增了两个流方法&#xff0c;分别是 Stream() 和 parallelStream()。 1、什么是 Stream&#xff1f; 现在很多大数据量系统中都存在分表分库的情况…...

编程日记 2023/8/10 8:25:20

【Spring】使用注解的方式获取Bean对象（对象装配）

目录 一、了解对象装配 1、属性注入 1.1、属性注入的优缺点分析 2、setter注入 2.1、setter注入的优缺点分析 3、构造方法注入 3.1、构造方法注入的优缺点 二、Resource注解 三、综合练习 上一个博客中&#xff0c;我们了解了使用注解快速的将对象存储到Spring中&#x…...

编程日记 2023/8/10 8:24:19

[webpack] 基本配置 (一)

文章目录 1.基本介绍2.功能介绍3.简单使用3.1 文件目录和内容3.2 下载依赖3.3 启动webpack 4.基本配置4.1 五大核心概念4.2 基本使用 1.基本介绍 Webpack 是一个静态资源打包工具。它会以一个或多个文件作为打包的入口, 将我们整个项目所有文件编译组合成一个或多个文件输出出去…...

编程日记 2023/8/10 8:23:18

模板学堂｜SQL数据集动态参数使用场景及功能详解

DataEase开源数据可视化分析平台于2022年6月正式发布模板市场&#xff08;https&#xff1a;//dataease.io/templates/&#xff09;。模板市场旨在为DataEase用户提供专业、美观、拿来即用的仪表板模板&#xff0c;方便用户根据自身的业务需求和使用场景选择对应的仪表板模板&a…...

编程日记 2023/8/10 8:22:16

Wlan——射频和天线基础知识

目录 射频的介绍 射频和Wifi 射频的相关基础概念 射频的传输 信号功率的单位 射频信号传输行为 天线的介绍 天线的分类 天线的基本原理 天线的参数 射频的介绍 射频和Wifi 什么是射频 从射频发射器产生一个变化的电流&#xff08;交流电&#xff09;&#xff0c;通过…...

编程日记 2023/8/10 8:21:14

前端实习周记第三周周记

第二周总结 第二周主要是做了一些PC端细节内容。大的地方改的不多&#xff0c;但是小的细节蛮多。 值得一提的是&#xff0c;第二周做的微信小程序&#xff0c;改了很多逻辑。改逻辑需要与后端进行联调&#xff0c;收获很大&#xff0c;思路也愈发清楚。 记录做了什么是好习…...

编程日记 2023/8/10 8:20:13

Android 13 Launcher界面——移除Launcher的删除和卸载功能

目录 一.背景 二.将卸载功能进行屏蔽 三.将移除功能屏蔽 四.将Remove按钮与Uninstall按钮屏蔽...

编程日记 2023/8/10 8:19:13

深度学习：使用卷积神经网络CNN实现MNIST手写数字识别

引言 本项目基于pytorch构建了一个深度学习神经网络&#xff0c;网络包含卷积层、池化层、全连接层&#xff0c;通过此网络实现对MINST数据集手写数字的识别&#xff0c;通过本项目代码&#xff0c;从原理上理解手写数字识别的全过程&#xff0c;包括反向传播&#xff0c;梯度…...

编程日记 2023/8/10 8:18:12

docker search 镜像报错： connect: no route to host (桥接模式配置静态IP)

如下 原因 可能有多种&#xff1a; ① 没有开放防火墙端口 ② ip地址配置有误 解决 我是因为虚拟机采用了桥接模式&#xff0c;配置静态ip地址有问题。 先确认虚拟机采用的是 桥接模式&#xff0c;然后启动虚拟机。 1、打开命令行&#xff0c;输入下面指令&#xff0c;打开…...

编程日记 2023/8/10 8:17:11

【VUE】[Violation] Added non-passive event listener to a scroll-blocking...

环境 chrome: 115.0.5790.170vue: ^3.3.4element-plus: ^2.3.4vite: ^4.4.7 问题 [Violation] Added non-passive event listener to a scroll-blocking <某些> 事件. Consider marking event handler as passive to make the page more responsive. See <URL> …...

编程日记 2023/8/10 8:16:09

runit-docker中管理多个服务

runit-docker中管理多个服务 介绍Runit, systemctl和supervisor是三种不同的服务管理工具区别runit优点程序构成快速开始runit实现服务退出执行指定操作runit监管服务打印日志到syslogrunit监管服务后台运行runit监管服务一些错误总结 介绍 runit 是一个轻量级的、稳定的、跨平…...

编程日记 2023/8/10 8:15:08

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/6/19 11:42:45

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/7/7 1:17:02

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/7/7 10:52:48

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2025/7/6 1:55:51

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

编程新知 2025/6/21 14:09:32

数学建模-滑翔伞伞翼面积的设计，运动状态计算和优化 ！

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态，并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

编程新知 2025/7/5 18:16:21

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

编程新知 2025/7/5 6:27:42

32单片机——基本定时器

STM32F103有众多的定时器&#xff0c;其中包括2个基本定时器&#xff08;TIM6和TIM7&#xff09;、4个通用定时器&#xff08;TIM2~TIM5&#xff09;、2个高级控制定时器&#xff08;TIM1和TIM8&#xff09;&#xff0c;这些定时器彼此完全独立&#xff0c;不共享任何资源 1、定…...

编程新知 2025/7/7 21:36:41

Linux入门(十五)安装java安装tomcat安装dotnet安装mysql

安装java yum install java-17-openjdk-devel查找安装地址 update-alternatives --config java设置环境变量 vi /etc/profile #在文档后面追加 JAVA_HOME"通过查找安装地址命令显示的路径" #注意一定要加$PATH不然路径就只剩下新加的路径了&#xff0c;系统很多命…...

编程新知 2025/7/5 14:22:51

英国云服务器上安装宝塔面板（BT Panel）

在英国云服务器上安装宝塔面板&#xff08;BT Panel&#xff09; 是完全可行的&#xff0c;尤其适合需要远程管理Linux服务器、快速部署网站、数据库、FTP、SSL证书等服务的用户。宝塔面板以其可视化操作界面和强大的功能广受国内用户欢迎&#xff0c;虽然官方主要面向中国大陆…...

编程新知 2025/7/8 0:37:14