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

在Spring Boot中使用Thymeleaf开发Web页面

news 2026/2/9 15:56:06

引言： 为啥写这篇文章呢？我明明就没怎么用过这个Thymeleaf进行web开发，用JSP也行，三剑客也行，或者Vue，React，PHP等等，不好吗？

那我为啥写这篇博客呢？这个写了估计也没几个人看，这是我在写之前就做好心理准备了的，毕竟很多东西都需要参照官网案例进行开发，主要写这个是因为，咱们的Spring Boot官方推荐咱们使用Thymeleaf，Thymeleaf也是有好处的，毕竟他是一种基于java的Web应用程序的服务器端模版引擎，它的主要目标是将模板和业务逻辑分离，使开发人员能够更轻松地开发可维护和可扩展的 Web 应用程序。

  • Thymeleaf：Thymeleaf 是一种服务器端模板引擎，主要用于构建基于 Java 的 Web 应用程序。它的特点是模板语法与 HTML 非常接近，易于编写和理解。Thymeleaf与Spring框架紧密集成，提供了与Spring的标准特性集成的功能。

  • Vue：Vue 是一种用于构建现代化、交互式的前端应用程序的 JavaScript 框架。它采用了组件化的开发方式，使得前端开发更加模块化和可维护。Vue 提供了响应式数据绑定、组件化开发、虚拟 DOM 等特性，使得构建复杂的前端应用变得更加简单和高效。

  • PHP：PHP 是一种服务器端脚本语言，主要用于构建动态网页和 Web 应用程序。PHP 具有广泛的应用领域，可以与各种数据库和 Web 服务器进行集成。PHP 提供了丰富的函数库和框架，使得开发 Web 应用程序变得更加便捷。

  • React：React 是一种用于构建用户界面的 JavaScript 库。它采用了组件化的开发方式，使得前端开发更加模块化和可复用。React 使用虚拟 DOM 技术来提高性能，并提供了状态管理、组件生命周期等特性，使得构建大规模、高性能的前端应用变得更加容易。

Thymeleaf主要用于服务器端模板渲染，Vue和React主要用于构建现代化的前端应用程序，而PHP是一种服务器端脚本语言，用于构建动态网页和 Web 应用程序。

就这么说吧，其实不论我们选择哪个进行开发，都有他自己的特色，根据我们的项目需求和技术团队，以及个人爱好进行选择吧。

以下是一些使用 Thymeleaf 的好处：

  • 自然的模板语法：Thymeleaf 的模板语法非常接近于 HTML，使得模板易于编写和理解。这使得前端开发人员可以更轻松地参与到模板的开发中。

  • 强大的表达式功能：Thymeleaf 提供了丰富的表达式功能，可以在模板中使用这些表达式来动态地生成内容。这些表达式可以用于访问模型数据、迭代集合、条件判断、计算等，使模板更加灵活和动态。

  • 与 Spring 框架的集成：Thymeleaf 是与 Spring 框架紧密集成的，可以无缝地与 Spring MVC、Spring Boot 等框架一起使用。它提供了与 Spring 的标准特性集成的功能，如表单绑定、国际化支持、安全性等。

  • 可扩展性：Thymeleaf 提供了丰富的扩展机制，可以通过自定义标签、方言等来扩展模板的功能。这使得开发人员可以根据项目的需求定制和扩展 Thymeleaf 的功能。

  • 良好的生态系统：Thymeleaf 拥有一个活跃的社区和广泛的用户群体，提供了大量的文档、教程和示例代码。这使得学习和使用 Thymeleaf 变得更加容易。

Thymeleaf官网

好了写了这么多，估计看文章还不如看代码来的轻松，这里只提供一个使用哪个Thymeleaf的小案例，具体的语法请参照Thymeleaf官网进行开发。

老样子第一步先引入依赖：

		<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><scope>provided</scope></dependency><!-- Spring Security --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency>

第二步，在resources目录下建立一个templates文件夹。之后建立一个login.html文件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Login</title><link rel="stylesheet" th:href="@{/css/style.css}" />
</head>
<body><h2>Login</h2><form th:action="@{/login}" method="post"><input type="text" name="username" placeholder="Username" required /><br/><input type="password" name="password" placeholder="Password" required /><br/><button type="submit">Login</button></form>
</body>
</html>

在新建一个主页，home.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Home</title>
</head>
<body><h2>欢迎来到miaow的主页!</h2><p>Logged in successfully!</p>
</body>
</html>

之后我们在src/main/resources/static/css目录下创建一个style.css文件，用于自定义登录页面的样式

body {background-color: #f2f2f2;font-family: Arial, sans-serif;text-align: center;
}h2 {color: #333333;
}form {margin-top: 50px;
}input[type="text"],
input[type="password"] {width: 200px;padding: 10px;margin-bottom: 10px;
}button {padding: 10px 20px;background-color: #333333;color: #ffffff;border: none;cursor: pointer;
}

第三步，我们创建一个LoginController类，用来处理登录页面和主页的请求

@Controller
public class LoginController {@GetMapping("/login")public String login() {return "login";}@GetMapping("/home")public String home() {return "home";}
}

第四步，我们使用Spring security创建一个SecurityConfig类，用来配置Spring Security 包括登录页面和验证逻辑：

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {@Overrideprotected void configure(HttpSecurity http) throws Exception {http.authorizeRequests().antMatchers("/login", "/css/**").permitAll().anyRequest().authenticated().and().formLogin().loginPage("/login").defaultSuccessUrl("/home").permitAll().and().logout().permitAll();}@Overrideprotected void configure(AuthenticationManagerBuilder auth) throws Exception {auth.inMemoryAuthentication().withUser("admin").password("{noop}admin").roles("USER");}
}

在上述代码中，我们配置了登录页面为/login，主页为/home。用户名为admin，密码为admin

ok，至此，我们就简单实现了一个登录页面跳转到主页了，可以通过直接访问：http://localhost:8080/login,账号密码均为admin,输入后跳转到主页：

在这里插入图片描述
在这里插入图片描述
如果账号密码不对是跳不进去主页的。

关于更多的Thymeleaf语法请参照官网，这里给出我们常用的：

th:text：用于将文本内容设置到元素的文本中。

<span th:text="${variable}">Default Text</span>

th:if：用于条件性地显示或隐藏元素。

<div th:if="${condition}">Visible if condition is true</div>

th:each：用于迭代集合或数组中的元素，并生成相应的HTML。

<ul><li th:each="item : ${items}" th:text="${item}">Item</li>
</ul>

th:href：用于设置链接的目标URL。

<a th:href="@{/path/to/page}">Link</a>

th:src：用于设置图像或脚本的源URL。

<img th:src="@{/path/to/image.jpg}" alt="Image">

th:style：用于设置元素的样式。

<div th:style="'color: red; font-size: 14px'">Styled Text</div>

th:class：用于设置元素的CSS类。

<div th:class="${condition} ? 'class1' : 'class2'">Conditional Class</div>

th:switch、th:case和th:default：用于实现类似于Java的switch-case语句的逻辑。

<div th:switch="${variable}"><p th:case="'value1'">Case 1</p><p th:case="'value2'">Case 2</p><p th:default>Default Case</p>
</div>

需要更多请参照官方文档

相关文章：

在Spring Boot中使用Thymeleaf开发Web页面

引言&#xff1a; 为啥写这篇文章呢&#xff1f;我明明就没怎么用过这个Thymeleaf进行web开发&#xff0c;用JSP也行&#xff0c;三剑客也行&#xff0c;或者Vue&#xff0c;React&#xff0c;PHP等等&#xff0c;不好吗&#xff1f; 那我为啥写这篇博客呢&#xff1f;这个写了…...

编程日记 2023/11/21 14:52:12

2023年亚太杯数学建模思路 - 案例：感知机原理剖析及实现

文章目录 1 感知机的直观理解2 感知机的数学角度3 代码实现 4 建模资料 # 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 感知机的直观理解 感知机应该属于机器学习算法中最简单的一种算法&#xff0c;其…...

编程日记 2023/11/21 14:51:10

linux高级篇基础理论五（用户安全，口令设置，JR暴力破解用户密码，NMAP端口扫描）

♥️作者&#xff1a;小刘在C站 ♥️个人主页&#xff1a; 小刘主页 ♥️不能因为人生的道路坎坷,就使自己的身躯变得弯曲;不能因为生活的历程漫长,就使求索的 脚步迟缓。 ♥️学习两年总结出的运维经验&#xff0c;以及思科模拟器全套网络实验教程。专栏&#xff1a;云计算技…...

编程日记 2023/11/21 14:49:07

鸿蒙原生应用/元服务开发-AGC分发如何配置版本信息（上）

1.配置HarmonyOS应用的“发布国家或地区”。 2.设置是否为开放式测试版本。 注意&#xff1a;HarmonyOS应用开放式测试当前仅支持手机、平板、智能手表。如开发者想发布为开放式测试版本&#xff0c;选择“是”。正式发布的版本请选择“否”。 3.在“软件版本”下点击“软件包…...

编程日记 2023/11/21 14:48:06

探索Scrapy中间件：自定义Selenium中间件实例解析

简介 Scrapy是一个强大的Python爬虫框架&#xff0c;可用于从网站上抓取数据。本教程将指导你创建自己的Scrapy爬虫。其中&#xff0c;中间件是其重要特性之一&#xff0c;允许开发者在爬取过程中拦截和处理请求与响应&#xff0c;实现个性化的爬虫行为。 本篇博客将深入探讨…...

编程日记 2023/11/21 14:47:06

渗透测试--3.中间人攻击

渗透测试--3.中间人攻击 一 .中间人攻击arp欺骗DNS欺骗无线局域网漏洞利用使用 Ettercap 执行欺骗攻击arp欺骗实例1、首先查看欺骗之前靶机ip以及默认网关，2、查看kali的IP地址（192.168.76.134），MAC：000c294079903、使用Ettercap，将A主机和B主机加入到target中4、点击右上…...

编程日记 2023/11/21 14:46:05

nginx/html关闭网页缓存方法

【问题】 通常代理服务器默认是有缓存的&#xff0c;即用户访问网址的时候默认获取到的是缓存&#xff0c;只有刷新之后才能得到服务器端的最新文件 【解决】 以nginx为例&#xff0c;找到配置文件nginx.conf&#xff0c;找到http {}&#xff0c;在其花括号之内添加命令&…...

编程日记 2023/11/21 14:45:01

华为防火墙 Radius认证

实现的功能&#xff1a;本地内网用户上网时必须要进行Radius验证&#xff0c;通过后才能上网 前置工作请按这个配置&#xff1a;华为防火墙 DMZ 设置-CSDN博客 Windows 服务器安装 Radius 实现上网认证 拓扑图如下&#xff1a; 一、服务器配置 WinRadius 1、安装WinRadius …...

编程日记 2023/11/21 14:44:00

用spring发送http请求

在Spring中&#xff0c;你可以使用RestTemplate或WebClient来发送HTTP请求。下面分别给出使用这两个类的简单示例。 现在pom.xml中导入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artif…...

编程日记 2023/11/21 14:42:58

赴日开发工程师是做什么的？

日本的软件开发岗位对技术要求和沟通能力都有较高的要求&#xff0c;赴日开发工程师主要负责软件设计、开发和测试&#xff0c;包括编写代码、测试代码和修复漏洞等工作。开发人员必须对软件架构、设计模式和业务逻辑有深入的理解&#xff0c;并能做出合适的技术决策。 当然&a…...

编程日记 2023/11/21 14:41:57

Wireshark的数据包它来啦！

通过Wireshark工具&#xff0c;可以轻松的看到网卡的数据信息。通过Wireshark显示的数据包内容信息&#xff0c;通常分七栏&#xff0c;介绍一下&#xff1a; 1No.&#xff1a; 数据包编号。 2.Time Time显示时间&#xff0c;以1号数据包发生开始计时。 3.Source Source显示内容…...

编程日记 2023/11/21 14:40:56

接口测试需要验证数据库么？

有的接口会返回很多数据&#xff0c;有的接口可能就返回一个状态码及success之类的消息&#xff0c;这些需要验证数据库么&#xff1f;现在在写一个测试框架&#xff0c;配置接口参数和预期返回值&#xff0c;生成xml文件管理用例&#xff0c;用一个比较方法对预期和返回作比较…...

编程日记 2023/11/21 14:39:55

配置 `PostgreSQL` 与 `Keepalived` 以实现高可用性

配置 PostgreSQL 与 Keepalived 以实现高可用性通常包括以下步骤&#xff1a; PostgreSQL 配置 安装 PostgreSQL&#xff1a;在两台服务器上安装相同版本的 PostgreSQL。 sudo yum install postgresql-server postgresql-contrib初始化数据库&#xff1a;在两台服务器上初始化…...

编程日记 2023/11/21 14:38:54

C++： int转换成LPCSTR

LPCSTR类型是指向字符常量的指针&#xff0c;因此需要将int类型转换为字符串类型&#xff0c;然后再将字符串类型转换为LPCSTR类型。 以下是一个示例代码&#xff1a; int num 123; char str[10]; sprintf(str, "%d", num); // 将int类型转换为字符串类型 LPCSTR …...

编程日记 2023/11/21 14:36:52

kettle官网和中文网地址

整理的kettle相关的网站地址&#xff1a; github 地址&#xff1a; https://github.com/pentaho/pentaho-kettle kettle下载目录&#xff1a; https://sourceforge/projects/pentaho/files/ kettle9.2下载地址&#xff1a; https://sourceforge/projects/pentaho/files/Penta…...

编程日记 2023/11/21 14:35:51

纽扣电池类产品上架亚马逊澳大利站认证标准要求AS/NZS 62368

纽扣电池一般来说常见的有充电的和不充电的两种&#xff0c; 充电的包括3.6V可充锂离子扣式电池(LIR系列)&#xff0c;3V可充锂离子扣式电池(ML或VL系列)&#xff1b;不充电的包括3V锂锰扣式电池(CR系列)及1.5V碱性锌锰扣式电池(LR及SR系列)。 澳大利亚*已经发布了经批准的《消…...

编程日记 2023/11/21 14:34:50

网站监控的重要性及实施策略

随着互联网的快速发展&#xff0c;网站已经成为企业和个人不可或缺的在线服务平台。然而&#xff0c;网站的安全性和稳定性一直是企业及个人非常关注的问题。一旦网站出现故障或者被攻击&#xff0c;将会给企业和个人带来严重的损失。因此&#xff0c;实施有效的网站监控策略对…...

编程日记 2023/11/21 14:30:44

亚马逊车灯外贸出口CE认证标准办理解析

车灯是车辆夜间行驶在道路照明的工具&#xff0c;也是发出各种车辆行驶信号的提示工具。车灯一般分为前照灯、尾灯、转向灯等。车灯出口欧盟需要办理CE认证。 CE认证是欧盟对进入欧洲市场的产品强制性的认证标志&#xff0c;是指符合欧盟安全、健康、环境保护等标准和要求的产…...

编程日记 2023/11/21 14:29:43

windows 查看防火墙设置命令使用方法

点击键盘上windows键&#xff0c;输入cmd&#xff0c;选择以管理员身份运行 输入下面命令查看使用说明 netsh advfirewall firewall add rule ? 发现显示不全&#xff0c;不方便看 可以输入下面命令&#xff0c;生成文件&#xff0c;方便查看 netsh advfirewall firewall ad…...

编程日记 2023/11/21 14:28:43

[Linux版本Debian系统]安装cuda 和对应的cudnn以cuda 12.0为例

写在前面 先检查自己有没有安装使用wget的命令&#xff0c;没有的话输入下面命令安装&#xff1a; apt-get install wget -y查看gcc的安装 sudo apt install gcc #安装gcc gcc --version #查看gcc是否安装成功 #若上述命令不成功使用下面的命令尝试之后再执行上面…...

编程日记 2023/11/21 14:26:41

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2026/2/4 12:35:34

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/10/30 4:58:11

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2026/1/4 5:02:00

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/12/5 20:57:13

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/12/23 11:20:24

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/15 0:25:46

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

编程新知 2026/2/7 22:13:48

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2026/1/25 14:31:47

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

编程新知 2025/10/21 1:07:59

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

编程新知 2026/1/29 10:37:37