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

[SpringBoot3]视图技术Thymeleaf

news 2026/2/7 11:07:51

七、视图技术Thymeleaf

Thymeleaf是一个表现层的模板引擎，一般被使用在Web环境中，它可以处理HTML、XML、JS等文档，简单来说，它可以将JSP作为Java Web应用的表现层，有能力展示与处理数据。
这样，同一个模板文件，既可以使用浏览器直接打开，也可以放到服务器中用来显示数据，并且样式之间基本上不会存在差异，因此界面设计人员与程序设计人员可以使用同一个模板文件，来查看静态与动态数据的效果。
Thymeleaf作为视图展示模型数据，用于和用户交互操作。JSP的代替技术。比较适合做管理系统，是一种易于学习、掌握的。

7.1表达式

表达式用于在页面展示数据的，有多种表达式语法，最常用的是变量表达式、链接表达式。

表达式	作用	例子
${…}	变量表达式，可用于获取后台传过来的值	中国
@{…}	链接网址表达式	链接表达式，传递参数

1.在static/main.html中创建首页

静态资源默认放在static目录，SpringBoot按约定可直接访问。main.html就是普通的HTML文件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div style="margin-left: 200px"><h3>学习Thymeleaf</h3><a href="expression">1.使用表达式</a><a href="link">2.链接表达式</a></div>
</body>
</html>

2.创建Controller，提供数据给页面

@Controller
public class ThymeleafController {//表达式，方法的返回值表示视图，一个xxx.html页面@GetMapping("/expression")public String exp(Model model) {//model中的数据，最后放到request作用域的。model.addAttribute("name", "张三");model.addAttribute("address", "河南");return "exp";}//链接表达式@GetMapping("/link")public String link(Integer id, String name, Model model) {model.addAttribute("id", id);model.addAttribute("myname", name);return "link";}
}

3.templates/目录下创建Thymeleaf的文件

exp.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h3>表达式</h3>
<div th:text="${name}"></div>
<div th:text="${address}"></div>
<br/><br/><br/>
<h3>链接表达式</h3>
<a th:href="@{http://www.baidu.com}">链接到百度</a><br/>
<a th:href="@{/link}">链接到link地址，无参数</a><br/>
<a th:href="@{/link(id=111,name=lisi)}">链接表达式，传递参数</a>
</body>
</html>

link.html

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

7.2if-for

Thymeleaf同样支持if、for语句的使用。

表达式	作用	例子
th:if=“boolean 表达式”	th:if当条件满足时，显示代码片段。条件常用boolean表示，true满足，反之不满足。	10大于2
	th:each处理循环，类似jstl中的<c:foreach>

1.main.html

<a href="if-for">3.if和for</a>

2.创建UserVO

@Data
@NoArgsConstructor
@AllArgsConstructor
public class UserVO {private Integer id;private String name;private Integer age;
}

3.创建控制器方法

//if,for
@GetMapping("/if-for")
public String ifFor(Model model) {model.addAttribute("login", true);UserVO user = new UserVO();user.setId(10);user.setName("张三");user.setAge(20);model.addAttribute("user", user);//创建List集合UserVO user1 = new UserVO(11, "李四", 21);UserVO user2 = new UserVO(12, "王五", 22);ArrayList<UserVO> users = new ArrayList<>();users.add(user1);users.add(user2);model.addAttribute("users", users);return "base";
}

4.创建base.html模板页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h3>if</h3>
<div th:if="10>2">10大于2</div>
<div th:if="${login}">用户已经登录</div>
<div th:if="${user.age>18}">用户成年了</div>
<br/><h3>for</h3>
<table border="1px"><tr><th>id</th><th>name</th><th>age</th></tr><tr th:each="u:${users}"><td th:text="${u.id}"></td><td th:text="${u.name}"></td><td th:text="${u.age}"></td></tr>
</table>
</body>
</html>

5.浏览器访问

[SpringBoot3]视图技术Thymeleaf

七、视图技术Thymeleaf Thymeleaf是一个表现层的模板引擎，一般被使用在Web环境中，它可以处理HTML、XML、JS等文档，简单来说，它可以将JSP作为Java Web应用的表现层，有能力展示与处理数据。这样，同一个模板文…...

编程日记 2023/9/2 11:18:41

wangluobiancheng

UDP send: receive: TCP...

编程日记 2023/9/2 11:17:39

大数据之hadoop入门

大数据概念大数据：无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合，是需要新处理模式才能具有更强的决策力、洞察发现李和流程优化能力的海量、高增长率和多样化的信息资产。大的概念是相对来说的：目前来说&#xff0…...

编程日记 2023/9/2 11:16:38

浅谈多人游戏原理和简单实现。

😜作者：是江迪呀✒️本文关键词：websocket、网络、原理、多人游戏☀️每日一言：这世上有两种东西无法直视，一是太阳，二是人心！ 一、我的游戏史我最开始接触游戏要从一盘300游戏…...

编程日记 2023/9/2 11:15:36

活动预告 | 龙智、紫龙游戏与JFrog专家将出席龙智DevSecOps研讨会，探讨企业大规模开发创新

2023年9月8日（周五）下午13:30-19:45，龙智即将携手Atlassian与JFrog在上海共同举办主题为“大规模开发创新：如何提升企业级开发效率与质量”的线下研讨会。在此次研讨会上，龙智高级咨询顾问、Atlassian认证专家叶燕秀…...

编程日记 2023/9/2 11:14:34

米每秒和千米每小时的换算

千米每时和米每秒怎么换算?1米/秒3600米/3600秒米每秒和千米每小时的换算(米每秒和千米每小时的换算) 3.6千米/小时。 3.6千米/小时1米/秒米每秒和千米每小时的换算1 米/秒(米每秒)3.6 千米/时(千米每小时)。 1米每秒3600米每时3.6千米每时。因为1小时3600秒。小时是一个时…...

编程日记 2023/9/2 11:13:33

js实现图形验证码

图形验证码起什么作用： 可以防止：恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试。验证码一般是防止批量注册的，人眼看起来都费劲，何况是机器。不少…...

编程日记 2023/9/2 11:12:32

链接： AI Comic Factory - a Hugging Face Space by jbilcke-hfDiscover amazing ML apps made by the communityhttps://huggingface.co/spaces/jbilcke-hf/ai-comic-factory 选择类型： Japanese 输入提示词： beauty and school love st…...

编程日记 2023/9/2 11:11:31

【openGauss2.1.0 TPC-C数据导入】

openGauss2.1.0 TPC-C数据导入一、下载tpch测试数据二、导入测试数据一、下载tpch测试数据使用普通用户如omm登录服务器执行如下命令下载测试数据库：git clone https://gitee.com/xzp-blog/tpch-kit.git二、导入测试数据进入dbgen目录下，生成makef…...

编程日记 2023/9/2 11:10:30

vue+elementui表格导出

htmlToExcel.js import FileSaver from file-saver import XLSX from xlsxconst htmlToExcel {getExcel(dom, title 默认标题) {var excelTitle titlevar wb XLSX.utils.table_to_book(document.querySelector(dom))/* 获取二进制字符串作为输出 */var wbout XLSX.write(w…...

编程日记 2023/9/2 11:09:29

掌握前端利器：JavaScript页面渲染高阶方法解析与实战

引言前端开发中，页面渲染的速度和质量是衡量一个开发者水平的重要标准。而在众多的前端技术中，JavaScript以其强大的页面渲染能力独占鳌头。本文将深入探讨JavaScript在页面渲染中的应用，并通过实例展示其高阶方法，旨在帮助读者…...

编程日记 2023/9/2 11:08:28

面试题——网络IO模型

一、socket socket是在应用层和传输层中间的抽象层，它把传输层（TCP/UDP）的复杂操作抽象成一些简单的接口，供应用层调用实现进程在网络中的通信。Socket起源于UNIX，在Unix一切皆文件的思想下，进程间通信就被…...

编程日记 2023/9/2 11:07:27

【JUC基础】JUC入门基础（二）

目录异步回调JMM 理解对 volatile 的理解1、保证可见性2、不保证原子性3、禁止指令重排对 JMM 的理解详解单例模式饿汉式懒汉式DCL懒汉式：双重检测锁模式的懒汉式单例静态内部类实现单例通过反射破坏单例，修改后的DCL饿汉式枚举实现单例防止反射破坏 …...

编程日记 2023/9/2 11:06:26

Git Bash 和 Git GUI中文汉化

目录为什么要中文汉化？Git Bash的汉化Git GUI的汉化为什么要中文汉化？ 看到中文大概能猜出是什么意思，便于使用，特别是Git GUI，中文版的菜单很容易理解是要做什么，如下图： Git Bash的汉化 …...

编程日记 2023/9/2 11:05:25

【Ubuntu】Ubuntu常用软件部署

1.安装jdk1.8 (1).apt方式安装 1).安装 1.在终端中输入以下命令，以更新软件包列表 sudo apt-get update2.在终端中输入以下命令，以安装JDK 1.8 sudo apt-get install openjdk-8-jdk3.将Java 1.8设置为默认版本。在终端中输入以下命令 sudo update-…...

编程日记 2023/9/2 11:04:23

Hadoop HA模式切换

Hadoop HA模式下主从的切换（操作命令） YARN HA 获取所有RM节点的状态 yarn rmadmin -getAllServiceState获取 rm1 节点的状态 yarn rmadmin -getServiceState rm1手动将 rm1 的状态切换到STANDBY yarn rmadmin -transitionToStandby rm1 ##或者 y…...

编程日记 2023/9/2 11:03:22

自然语言处理(四)：全局向量的词嵌入（GloVe）

全局向量的词嵌入（GloVe） 全局向量的词嵌入（Global Vectors for Word Representation），通常简称为GloVe，是一种用于将词语映射到连续向量空间的词嵌入方法。它旨在捕捉词语之间的语义关系和语法关系&#…...

编程日记 2023/9/2 11:02:21

Flink中RPC实现原理简介

前提知识 Akka是一套可扩展、弹性和快速的系统，为此Flink基于Akka实现了一套内部的RPC通信框架；为此先对Akka进行了解 Akka Akka是使用Scala语言编写的库，基于Actor模型提供一个用于构建可扩展、弹性、快速响应的系统；并被应用…...

编程日记 2023/9/2 11:01:19

ELK安装、部署、调试（五）filebeat的安装与配置

1.介绍 logstash 也可以收集日志，但是数据量大时太消耗系统新能。而filebeat是轻量级的，占用系统资源极少。 Filebeat 由两个主要组件组成：harvester 和 prospector。采集器 harvester 的主要职责是读取单个文件的内容。读取每个文件&…...

编程日记 2023/9/2 11:00:18

Python数据分析案例30——中国高票房电影分析（爬虫获取数据及分析可视化全流程）

案例背景最近总看到《消失的她》票房多少多少，《孤注一掷》票房又破了多少多少..... 于是我就想自己爬虫一下获取中国高票房的电影数据，然后分析一下。数据来源于淘票票：影片总票房排行榜 (maoyan.com) 爬它就行。代码实现首先爬虫获…...

编程日记 2023/9/2 10:59:17

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2026/2/4 16:30:39

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统，智慧工地全套源码，java版智慧工地源码，支持PC端、大屏端、移动端。智慧工地聚焦建筑行业的市场需求，提供“平台网络终端”的整体解决方案，提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2026/1/30 15:16:32

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明：server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2026/1/23 4:15:03

基于服务器使用 apt 安装、配置 Nginx

🧾 一、查看可安装的 Nginx 版本首先，你可以运行以下命令查看可用版本： apt-cache madison nginx-core输出示例： nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2026/1/9 12:53:59

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块，它提供了一个轻量级的 HTTP 服务器实现，主要用于构建基于 HTTP 的应用程序和服务。功能介绍： 主要功能 HTTP服务器功能： 支持 HTTP/1.1 协议简单的请求/响应处理模型支持 GET…...

编程新知 2025/10/17 21:16:57

数据链路层的主要功能是什么

数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装封装： 将网络层下发…...

编程新知 2026/2/1 7:31:51

汇编常见指令

汇编常见指令一、数据传送指令指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX（不访问内存）XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2026/1/23 2:04:44

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库，专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性，并提供了一个通用的框架&…...

编程新知 2025/11/28 5:32:31

Python Ovito统计金刚石结构数量

大家好，我是小马老师。本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...

编程新知 2026/1/26 5:39:08

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/9/26 12:26:35

[SpringBoot3]视图技术Thymeleaf

七、视图技术Thymeleaf

7.1表达式

7.2if-for

相关文章：

[SpringBoot3]视图技术Thymeleaf

wangluobiancheng

大数据之hadoop入门

浅谈多人游戏原理和简单实现。

活动预告 | 龙智、紫龙游戏与JFrog专家将出席龙智DevSecOps研讨会，探讨企业大规模开发创新

米每秒和千米每小时的换算

js实现图形验证码

一句话画出动漫效果

【openGauss2.1.0 TPC-C数据导入】

vue+elementui表格导出

掌握前端利器：JavaScript页面渲染高阶方法解析与实战

面试题——网络IO模型

【JUC基础】JUC入门基础（二）

Git Bash 和 Git GUI中文汉化

【Ubuntu】Ubuntu常用软件部署

Hadoop HA模式切换

自然语言处理(四)：全局向量的词嵌入（GloVe）

Flink中RPC实现原理简介

ELK安装、部署、调试（五）filebeat的安装与配置

Python数据分析案例30——中国高票房电影分析（爬虫获取数据及分析可视化全流程）

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

Docker 运行 Kafka 带 SASL 认证教程

基于服务器使用 apt 安装、配置 Nginx

Qt Http Server模块功能及架构

数据链路层的主要功能是什么

汇编常见指令

Pinocchio 库详解及其在足式机器人上的应用

Python Ovito统计金刚石结构数量

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join