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

[SpringBoot3]视图技术Thymeleaf

news 2026/3/31 12:20:18

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

从云端到指尖：巧用Aspose组件实现Office/PDF文档秒级HTML预览，攻克移动端大文件访问瓶颈

1. 移动端大文件预览的痛点与解决思路最近接手一个企业级项目时，遇到了一个非常典型的场景：用户通过PC端上传各种办公文档（Word、Excel、PPT、PDF），需要在移动端随时查看。但当文件体积较大时（比如超过50M…...

编程新知 2026/3/31 11:17:09

intv_ai_mk11行业落地：教育机构课件辅助生成、HR招聘文案批量产出案例

intv_ai_mk11行业落地：教育机构课件辅助生成、HR招聘文案批量产出案例 1. 模型能力与行业价值 intv_ai_mk11作为一款基于Llama架构的文本生成模型，在教育培训和人力资源领域展现出独特的实用价值。这个开箱即用的解决方案特别适合需要快速处理大量文本…...

编程新知 2026/3/31 10:30:44

Qwen3-ASR-0.6B方言识别效果展示：粤语、四川话实测

Qwen3-ASR-0.6B方言识别效果展示：粤语、四川话实测 1. 引言语音识别技术发展至今，已经能够很好地处理普通话和英语等主流语言，但方言识别一直是技术难点。不同地区的方言在发音、语调、词汇上都有很大差异，让机器准确识别并非易…...

编程新知 2026/3/31 9:46:14

突破B站缓存限制：m4s-converter视频格式转换完全指南

突破B站缓存限制：m4s-converter视频格式转换完全指南【免费下载链接】m4s-converter 一个跨平台小工具，将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 当旅行途中想离线观看缓存视频却…...

编程新知 2026/3/31 9:36:08

从零搭建无人船：两年实战后，我总结的ArduPilot+Pixhawk避坑全流程

从零搭建无人船：两年实战后，我总结的ArduPilotPixhawk避坑全流程第一次把无人船放进水里时，GPS信号突然丢失，船体在河中央失控打转——这个惊心动魄的瞬间让我意识到，开源飞控的实战应用远不是下载代码、连接硬件那么…...

编程新知 2026/3/31 8:59:52

为什么92%的FastAPI流式AI项目在高并发下崩溃？深度解析event loop争用、response.body迭代器生命周期与uvicorn worker模型冲突

第一章：FastAPI 2.0流式AI响应的高并发失效现象全景透视当FastAPI 2.0被用于承载大语言模型（LLM）的SSE（Server-Sent Events）或分块Transfer-Encoding: chunked流式响应时，大量并发请求下常出现连接提前终止…...

编程新知 2026/3/31 7:59:26

STM32F767串口接收不定长数据实战：超时中断与空闲中断的配置与性能对比

1. STM32F767串口接收不定长数据的痛点与解决方案在嵌入式开发中，处理串口不定长数据就像在餐厅等一份不知道有多少道菜的套餐——你永远不知道下一口是什么，也不知道什么时候结束。STM32F767作为高性能MCU，面对RS485、Modbus等协议时&#…...

编程新知 2026/3/31 7:51:25

告别混乱文件管理：用NERDTree打造VIM项目导航系统

告别混乱文件管理：用NERDTree打造VIM项目导航系统每次打开一个包含数百个文件的复杂项目时，你是否会感到一阵眩晕？当你在多个目录间反复切换查找某个配置文件时，是否觉得时间在指尖悄然流逝？对于资深VIM用户而言&…...

编程新知 2026/3/31 7:29:17

ComputeSharp未来展望：GPU计算在.NET生态中的发展路线图

ComputeSharp未来展望：GPU计算在.NET生态中的发展路线图【免费下载链接】ComputeSharp A .NET library to run C# code in parallel on the GPU through DX12, D2D1, and dynamically generated HLSL compute and pixel shaders, with the goal of making GPU comp…...

编程新知 2026/3/31 7:05:00

SinricPro Business SDK：面向量产的ESP32物联网固件开发套件

1. SinricPro Business SDK 概述SinricPro Business SDK 是专为商业化物联网产品设计的嵌入式软件开发套件，其核心定位并非面向 hobbyist 的快速演示工具，而是面向量产级硬件产品的固件基础设施。与社区版 SinricPro SDK 不同，Business SDK 在…...

编程新知 2026/3/31 5:26:13

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

从云端到指尖：巧用Aspose组件实现Office/PDF文档秒级HTML预览，攻克移动端大文件访问瓶颈

intv_ai_mk11行业落地：教育机构课件辅助生成、HR招聘文案批量产出案例

Qwen3-ASR-0.6B方言识别效果展示：粤语、四川话实测

突破B站缓存限制：m4s-converter视频格式转换完全指南

从零搭建无人船：两年实战后，我总结的ArduPilot+Pixhawk避坑全流程

为什么92%的FastAPI流式AI项目在高并发下崩溃？深度解析event loop争用、response.body迭代器生命周期与uvicorn worker模型冲突

STM32F767串口接收不定长数据实战：超时中断与空闲中断的配置与性能对比

告别混乱文件管理：用NERDTree打造VIM项目导航系统

ComputeSharp未来展望：GPU计算在.NET生态中的发展路线图

SinricPro Business SDK：面向量产的ESP32物联网固件开发套件