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

Java Web开发进阶——Spring Boot与Thymeleaf模板引擎

Thymeleaf 是一个现代化的、功能强大的 Java 模板引擎,常用于生成 Web 应用程序的视图。它与 Spring Boot 的集成十分方便,并且提供了丰富的功能,能够帮助开发者实现动态渲染数据、处理表单、页面控制等操作。下面,我们将详细探讨如何在 Spring Boot 项目中集成 Thymeleaf,并使用它进行动态页面渲染。


1. Thymeleaf简介与应用场景
1.1 什么是Thymeleaf?

Thymeleaf 是一个专为服务器端应用设计的 Java 模板引擎,最初是为了替代 JSP 和 Velocity 等模板引擎。与其他模板引擎相比,Thymeleaf 具有如下优势:

  • 简洁的语法:Thymeleaf 采用的是自然模板语法,使得模板文件既能在浏览器中以静态形式呈现,又能在服务器端作为动态视图渲染。
  • 强大的表达式语言:Thymeleaf 提供了丰富的表达式语言 (Standard Expression Language, SEL),支持变量、条件判断、循环、文本格式化等操作。
  • 与 Spring 完美集成:Thymeleaf 与 Spring Boot 的集成非常顺畅,可以轻松处理 Spring MVC 控制器传递的数据,并渲染到页面。
1.2 Thymeleaf的应用场景

Thymeleaf 主要应用于以下几个场景:

  • Web应用程序视图层:作为 Spring Boot 应用中的前端模板引擎,用于生成动态的 HTML 页面。
  • 邮件模板:由于 Thymeleaf 的模板文件支持静态渲染,因此它也常用于生成 HTML 邮件的模板。
  • 客户端渲染:Thymeleaf 可以结合 JavaScript 与 Ajax 一起使用,来处理客户端数据动态渲染。

2. 集成Thymeleaf与Spring Boot
2.1 使用Spring Initializr创建Spring Boot项目

在集成 Thymeleaf 之前,首先使用 Spring Initializr 创建一个 Spring Boot 项目,并选择以下依赖:

  • Spring Web:用于构建 RESTful 服务和处理 HTTP 请求。
  • Thymeleaf:用于在 Spring Boot 中渲染 HTML 页面。
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2.2 配置Thymeleaf

在 Spring Boot 中,Thymeleaf 默认配置良好,通常无需做额外配置。Spring Boot 会自动根据 application.propertiesapplication.yml 中的配置来解析 Thymeleaf 模板。

例如,以下是默认配置:

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8

这些配置指定了模板文件所在目录、后缀名、渲染模式等参数。

2.3 创建Thymeleaf模板

src/main/resources/templates 目录下创建 .html 模板文件。比如创建一个简单的 index.html 页面:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>Thymeleaf Example</title>
</head>
<body><h1>Welcome to Thymeleaf!</h1><p th:text="'Hello, ' + ${name} + '!'" />
</body>
</html>

在此模板中,th:text 是 Thymeleaf 的标签属性,用于动态渲染变量的值。

2.4 创建控制器(Controller)

在 Spring Boot 中,我们使用 @Controller 注解来标记一个控制器,并通过 @GetMapping@RequestMapping 方法映射请求。在控制器中,我们将数据传递给 Thymeleaf 模板。

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;@Controller
public class HomeController {@GetMapping("/")public String home(Model model) {model.addAttribute("name", "Spring Boot");return "index";  // 返回 "index.html" 视图}
}

这里,home 方法会将 name 变量添加到 Model 中,然后返回模板名 index,Thymeleaf 将会渲染 index.html 文件,并将 name 的值动态插入。


3. 动态渲染数据与页面控制
3.1 渲染动态数据

Thymeleaf 强大的表达式语言 (Thymeleaf Standard Expression Language, SEL) 允许我们渲染 Java 对象的属性、集合元素等。

例如,渲染列表数据:

@GetMapping("/list")
public String showList(Model model) {List<String> items = Arrays.asList("Item1", "Item2", "Item3");model.addAttribute("items", items);return "list";
}

list.html 中渲染列表:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>List Example</title>
</head>
<body><h1>Items List</h1><ul><li th:each="item : ${items}" th:text="${item}"></li></ul>
</body>
</html>

在此例中,th:each 是 Thymeleaf 的迭代器,用来遍历 items 列表,并动态渲染每个 item

3.2 条件判断与逻辑控制

Thymeleaf 支持条件判断和逻辑控制,例如:

  • th:if:用于根据条件渲染元素。
  • th:unless:与 th:if 相反,只有条件为 false 时才会渲染该元素。

例如:

<p th:if="${user != null}" th:text="'Hello, ' + ${user.name}"></p>
<p th:unless="${user != null}" th:text="'Please log in'"></p>

这段代码会根据 user 对象是否为空来决定渲染哪一条消息。

3.3 表单处理

Thymeleaf 也可以用来渲染和提交 HTML 表单。在表单提交时,Thymeleaf 会自动绑定表单数据到模型对象上。

示例:

@GetMapping("/userForm")
public String showForm(Model model) {model.addAttribute("user", new User());return "userForm";
}@PostMapping("/submitForm")
public String submitForm(@ModelAttribute User user) {// 处理提交的表单数据return "result";
}

对应的 userForm.html

<form th:action="@{/submitForm}" th:object="${user}" method="post"><label for="name">Name:</label><input type="text" th:field="*{name}" id="name" /><label for="email">Email:</label><input type="email" th:field="*{email}" id="email" /><button type="submit">Submit</button>
</form>

在这里,th:field 会自动将表单字段与 User 对象的属性绑定。

3.4 页面控制与布局

Thymeleaf 还支持布局功能,可以使用 fragments 来分离公共部分(如头部、导航栏、页脚等)。例如:

header.html 中定义布局片段:

<div th:fragment="header"><h1>Welcome to Our Website</h1>
</div>

在其他页面中调用这个布局片段:

<div th:replace="~{fragments/header}"></div>

这种方式可以帮助我们减少重复代码,提高页面的可维护性。


总结

Thymeleaf 是 Spring Boot 应用中常用的模板引擎,它提供了丰富的动态渲染功能,使得开发者能够在后端轻松地处理和渲染数据。通过集成 Thymeleaf,开发者可以利用模板语法来渲染动态数据、处理表单、进行页面控制等操作。对于复杂的 Web 应用,Thymeleaf 还支持布局和片段功能,有助于提高代码的重用性和可维护性。

关于作者:

15年互联网开发、带过10-20人的团队,多次帮助公司从0到1完成项目开发,在TX等大厂都工作过。当下为退役状态,写此篇文章属个人爱好。本人开发期间收集了很多开发课程等资料,需要可联系我

相关文章:

Java Web开发进阶——Spring Boot与Thymeleaf模板引擎

Thymeleaf 是一个现代化的、功能强大的 Java 模板引擎&#xff0c;常用于生成 Web 应用程序的视图。它与 Spring Boot 的集成十分方便&#xff0c;并且提供了丰富的功能&#xff0c;能够帮助开发者实现动态渲染数据、处理表单、页面控制等操作。下面&#xff0c;我们将详细探讨…...

论文笔记(四十七)Diffusion policy: Visuomotor policy learning via action diffusion(下)

Diffusion policy: Visuomotor policy learning via action diffusion&#xff08;下&#xff09; 文章概括5. 评估5.1 模拟环境和数据集5.2 评估方法论5.3 关键发现5.4 消融研究 6 真实世界评估6.1 真实世界Push-T任务6.2 杯子翻转任务6.3 酱汁倒入和涂抹任务 7. 实际双臂任务…...

开始使用Panuon开源界面库环境配置并手写VS2019高仿界面

1. Panuon环境配置 1.1. 通过Nuget 安装 Panuon.WPF.UI1.2. xaml引用命名空间1.3. using Panuon.WPF.UI; 2. VS2019 view 2.1. 设置窗体尺寸和title2.2. 添加静态资源 2.2.1. 什么是静态资源 2.3. 主Grid 2.3.1. 盒子模型2.3.2. 嵌套布局 3. 总结 1. Panuon环境配置 1.1. 通…...

新垂直电商的社交传播策略与AI智能名片2+1链动模式S2B2C商城小程序的应用探索

摘要&#xff1a;随着互联网技术的不断进步和电商行业的快速发展&#xff0c;传统电商模式已难以满足消费者日益增长的个性化和多元化需求。新垂直电商在此背景下应运而生&#xff0c;通过精准定位、用户细分以及深度社交传播策略&#xff0c;实现了用户群体的快速裂变与高效营…...

WPS计算机二级•表格函数计算

听说这里是目录哦 函数基础知识 相对绝对混合引用&#x1f32a;️相对引用绝对引用混合引用 常用求和函数 SUM函数&#x1f326;️语法说明 函数快速求 平均数最值⚡平均数最值 实用统计函数 实现高效统计&#x1f300;COUNTCOUNTIF 实用文本函数 高效整理数据&#x1f308;RIG…...

ESP32S3官方例程如何使用

一、WIFI 找到app_wifi.c文件 wifi_config_t wifi_config; 把上面代码修改为下面代码 wifi_config_t wifi_config { .sta {.ssid DEFAULT_ESP_WIFI_SSID, //WIFI的SSID.password DEFAULT_ESP_WIFI_PASS, //WIFI密码.threshold.authmode WIFI_AUTH_WPA…...

新版 MacOS 无法从 /usr/local/lib 加载动态链接库的解决办法

自己编写的动态链接库在Unix规范下一般位于/usr/local/lib&#xff0c;在2023年及之前的MacOS版本中&#xff0c;直接将动态库安装到该位置即可在程序运行时加载&#xff0c;可是升级MacOS版本后&#xff0c;ld就报错。 错误现象 运行程序&#xff0c;报错 dyld[6376]: Libra…...

【Varnish】:解决 Varnish 7.6 CDN 静态资源缓存失效问题

项目场景&#xff1a; 在一个使用Varnish作为反向代理的Web应用中&#xff0c;我们依赖CDN&#xff08;内容分发网络&#xff09;来缓存静态资源&#xff08;如图片、CSS、JavaScript文件等&#xff09;&#xff0c;以提高全球用户的访问速度并减轻源站服务器的负载。然而&…...

【记录】篡改猴插件下载网页m3u8视频

1.打开浏览器【管理扩展】页面&#xff08;edge://extensions/&#xff09;&#xff0c;打开开发人员模式 2.Edge浏览器添加篡改猴插件 3.下载需要的脚本 可以从篡改猴首页找下载网站 https://www.tampermonkey.net/scripts.php?localezh_CN 4.安装成功重启浏览器&#x…...

PID控制器 (Proportional-Integral-Derivative Controller) 算法详解及案例分析

PID控制器 (Proportional-Integral-Derivative Controller) 算法详解及案例分析 目录 PID控制器 (Proportional-Integral-Derivative Controller) 算法详解及案例分析1. 引言2. PID控制器的基本概念2.1 PID控制器的定义2.2 PID控制器的核心思想2.3 PID控制器的应用领域 3. PID控…...

【Java设计模式-5】装饰模式:给咖啡加点“佐料”

今天咱们要探索一下Java世界里的装饰模式&#xff08;Decorator Pattern&#xff09;。为了让这个过程更加生动易懂&#xff0c;咱们就以大家都熟悉的咖啡饮品来举例吧&#xff0c;想象一下&#xff0c;你就是那个咖啡大师&#xff0c;要给顾客调制出各种独特口味的咖啡哦&…...

C++ using(八股总结)

using作用&#xff1a; 类型别名using声明using指示 类型别名 using 可以用来创建类型别名&#xff0c;替代传统的 typedef。这在定义复杂类型时尤其有用&#xff0c;例如模板类型。 // 使用 typedef 创建类型别名 typedef long long ll;// 使用 using 创建类型别名 using …...

《分布式光纤传感:架设于桥梁监测领域的 “智慧光网” 》

桥梁作为交通基础设施的重要组成部分&#xff0c;其结构健康状况直接关系到交通运输的安全和畅通。随着桥梁建设规模的不断扩大和服役年限的增长&#xff0c;桥梁结构的安全隐患日益凸显&#xff0c;传统的监测方法已难以满足对桥梁结构健康实时、全面、准确监测的需求。分布式…...

C++(5)

1.运算符重载 头文件 #ifndef MYSTRING_H #define MYSTRING_H#include <iostream> #include <cstring>using namespace std;class myString { private:char *str;//C风格字符串int size0; public:std::string s_str;//转换构造函数myString(const std::string &a…...

【进程与线程】程序和进程在内存中的表现

在计算机系统中&#xff0c;程序和进程是两个密切相关但又有本质区别的概念&#xff0c;尤其在内存中的表现上有显著不同&#xff1a; 在这张图中可以直观地看出程序和进程在内存中的结构区别。 基本定义 程序 程序 是一个 静态实体&#xff0c;表示一组写好的指令和数据的…...

个人主页搭建全流程(Nginx部署+SSL配置+DCDN加速)

前言 最近开始准备秋招&#xff0c;打算做一个个人主页&#xff0c;以便在秋招市场上更有竞争力。 目前&#xff0c;现有的一些搭建主页的博文教程存在以下一些问题&#xff1a; 使用Github Page进行部署&#xff0c;这在国内访问容易受阻使用宝塔面板等框架&#xff0c;功能…...

语音合成的预训练模型

语音合成的预训练模型 与 ASR(语音识别)和音频分类任务相比,语音合成的预训练模型检查点明显较少。在 Hugging Hub 上,可以找到近 300 个适合的检查点。 在这些预训练模型中,重点关注两种在 Huggingface Transformers 库中开箱即用的架构——SpeechT5 和 Massive Multili…...

前端组件开发:组件开发 / 定义配置 / 配置驱动开发 / 爬虫配置 / 组件V2.0 / form表单 / table表单

一、最早的灵感 最早的灵感来自sprider / 网络爬虫 / 爬虫配置&#xff0c;在爬虫爬取网站文章时候&#xff0c;会输入给爬虫一个配置文件&#xff0c;里边的内容是一个json对象。里边包含了所有想要抓取的页面的信息。爬虫通过这个配置就可以抓取目标网站的数据。其实本文要引…...

Swagger生成Api文档的增强解决方案--knife4j

方法一&#xff1a; 使用步骤 1.导入 knife4j 的maven坐标 在pom.xml中添加依赖 <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-openapi3-jakarta-spring-boot-starter</artifactId><version>4.5.0</ver…...

Node.js - HTTP

1. HTTP请求 HTTP&#xff08;Hypertext Transfer Protocol&#xff0c;超文本传输协议&#xff09;是客户端和服务器之间通信的基础协议。HTTP 请求是由客户端&#xff08;通常是浏览器、手机应用或其他网络工具&#xff09;发送给服务器的消息&#xff0c;用来请求资源或执行…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...

若依登录用户名和密码加密

/*** 获取公钥&#xff1a;前端用来密码加密* return*/GetMapping("/getPublicKey")public RSAUtil.RSAKeyPair getPublicKey() {return RSAUtil.rsaKeyPair();}新建RSAUti.Java package com.ruoyi.common.utils;import org.apache.commons.codec.binary.Base64; im…...

LangChain 中的文档加载器(Loader)与文本切分器(Splitter)详解《二》

&#x1f9e0; LangChain 中 TextSplitter 的使用详解&#xff1a;从基础到进阶&#xff08;附代码&#xff09; 一、前言 在处理大规模文本数据时&#xff0c;特别是在构建知识库或进行大模型训练与推理时&#xff0c;文本切分&#xff08;Text Splitting&#xff09; 是一个…...

AD学习(3)

1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分&#xff1a; &#xff08;1&#xff09;PCB焊盘&#xff1a;表层的铜 &#xff0c;top层的铜 &#xff08;2&#xff09;管脚序号&#xff1a;用来关联原理图中的管脚的序号&#xff0c;原理图的序号需要和PCB封装一一…...