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

[SpringBoot3]视图技术Thymeleaf

news 2026/3/31 7:40:54

七、视图技术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

佰力博金属电导率测试：精准赋能金属材料性能评估

金属电导率是衡量材料导电能力的核心指标，直接决定铜、铝、合金等在电子、电力、航空航天等领域的应用价值。佰力博检测依托专业技术与自研设备，构建了覆盖多场景、高精度的金属电导率测试体系，为材料研发、质量管控与工艺优化提供权威数据支…...

编程新知 2026/3/31 7:31:20

程序员做量化交易详解

程序员做量化交易详解量化交易是程序员将编程能力与金融市场相结合的典型应用场景。作为系统分析师，理解量化交易的全貌有助于在金融IT系统设计中把握关键要素。下面为你全面解析。 📌 一、什么是量化交易？量化交易是指利用数学模型、统计方法和计算机技术，通过程序化…...

编程新知 2026/3/31 6:48:53

基于STM32的智能药箱系统开发实战：从硬件搭建到云端互联

1. 为什么需要智能药箱记得去年我奶奶因为忘记吃药导致血压飙升住院，当时我就在想，如果能有个自动提醒吃药的装置该多好。后来发现这个问题其实困扰着很多家庭——据统计，65岁以上老年人中，有超过60%存在漏服、错服药物的情况。这…...

编程新知 2026/3/31 6:28:42

AD20 原理图与PCB的协同设计：从单向更新到双向同步的进阶指南

1. AD20协同设计的基础概念刚接触AD20时，最让我头疼的就是原理图和PCB之间的同步问题。记得第一次做多板卡项目，光是处理不同原理图之间的元件冲突就折腾了一整天。AD20的协同设计功能远比我们想象的强大，但要用好它，得先理解几个…...

编程新知 2026/3/31 6:06:32

知识科普短片，AI如何“看懂”并剪出逻辑？揭秘分段剪辑的内在逻辑链

傍晚，你面对电脑屏幕，刚刚录完一段长达2小时的行业知识分享。你的目标是将其剪成一部15分钟、节奏明快的知识科普短片。手动操作意味着你要反复聆听，识别核心论点，标记关键转折，再小心翼翼地将碎片串联——这个过程动辄…...

编程新知 2026/3/31 6:06:32

GLM-4.1V-9B-Base行业落地：建筑图纸局部区域语义理解与标注建议

GLM-4.1V-9B-Base行业落地：建筑图纸局部区域语义理解与标注建议 1. 建筑行业的AI视觉理解需求建筑设计和施工过程中，图纸理解与标注是一项耗时且容易出错的工作。传统方式需要经验丰富的工程师手动识别图纸中的各个元素，不仅效率低下&…...

编程新知 2026/3/31 5:36:20

用Python+Matplotlib动手验证：标准DH和改进DH建模同一机械臂，结果真的相同吗？

PythonMatplotlib实战：标准DH与改进DH建模机械臂的等价性验证机械臂运动学建模是机器人学中的基础课题，而Denavit-Hartenberg（DH）参数法则是其中最经典的建模方法之一。标准DH（sDH）与改进DH（mD…...

编程新知 2026/3/31 3:24:26

从HTTP到字节流：ESP32与App Inventor通信协议的效率优化实践

1. 为什么需要优化ESP32与App Inventor的通信协议？ 当你用ESP32和App Inventor做一个遥控小车时，最让人抓狂的就是按下按钮后小车要等半秒才有反应。这种延迟问题在HTTPJSON通信方案中非常典型。我去年做过一个智能家居控制系统，最初用的就是…...

编程新知 2026/3/31 3:20:18

Analog离线引擎：从原理到实践的抗断网解决方案

Analog离线引擎：从原理到实践的抗断网解决方案【免费下载链接】analog Meet the calendar that changes everything 项目地址: https://gitcode.com/gh_mirrors/analog4/analog 在数字化办公环境中，日程管理工具的网络依赖性常常成为效率瓶颈。远…...

编程新知 2026/3/31 3:14:16

保姆级教程：用Qt的QNetworkAccessManager实现网络延迟与带宽的简易测试工具（附完整源码）

从零构建Qt网络性能测试工具：延迟与带宽测量的实战指南在开发网络应用时，我们常常需要了解当前网络环境对应用性能的影响。无论是评估服务器响应速度，还是测试用户在不同网络条件下的体验，一个轻量级的网络测试工具都能派上大用场…...

编程新知 2026/3/31 2:46:04

[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——中国高票房电影分析（爬虫获取数据及分析可视化全流程）

佰力博金属电导率测试：精准赋能金属材料性能评估

程序员做量化交易详解

基于STM32的智能药箱系统开发实战：从硬件搭建到云端互联

AD20 原理图与PCB的协同设计：从单向更新到双向同步的进阶指南

知识科普短片，AI如何“看懂”并剪出逻辑？揭秘分段剪辑的内在逻辑链

GLM-4.1V-9B-Base行业落地：建筑图纸局部区域语义理解与标注建议

用Python+Matplotlib动手验证：标准DH和改进DH建模同一机械臂，结果真的相同吗？

从HTTP到字节流：ESP32与App Inventor通信协议的效率优化实践

Analog离线引擎：从原理到实践的抗断网解决方案

保姆级教程：用Qt的QNetworkAccessManager实现网络延迟与带宽的简易测试工具（附完整源码）