Thymeleaf（看这一篇就够了）

news2024/11/28 19:54:51

目录：

  • Thymeleaf
    • 变量输出
    • 操作字符串&时间
    • 条件判断
    • 迭代遍历
    • 使用状态变量
    • 获取域中的数据
    • URL写法
    • 相关配置

在这里插入图片描述

Thymeleaf

Thymeleaf是一款用于渲染XML/HTML5内容的模板引擎，类似JSP。它可以轻易的与SpringMVC等Web框架进行集成作为Web应用的模板引擎。SpringBoot推荐使用Thymeleaf编写动态页面。

Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用。

Thymeleaf在有服务和无服务的环境下皆可运行，它即可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果

没有服务时，Thymeleaf的模板可以展示静态数据；当有数据返回到页面时，Thymeleaf会动态地替换掉静态内容，使页面动态显示。

  1. 创建SpringBoot项目

  2. 引入SpringMVC和Thymeleaf起步依赖

<!--添加Thymeleaf起步依赖-->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>
  1. 创建视图index.html
<!DOCTYPE html>
<!-- 引入thymeleaf命名空间，方便使用thymeleaf属性 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>thymeleaf入门</title>
</head>
<body>
<!-- 静态页面显示中北小萌新，动态页面使用后端传来的msg数据代替 -->
<!-- thymeleaf支持el表达式 -->
<h2 th:text="${msg}">中北小萌新</h2>
</body>
</html>
  1. template中的html文件不能直接访问，需要编写Controller跳转到页面中
@Controller
public class PageController {
  // 页面跳转
  @GetMapping("/show")
  public String showPage(Model model){
    model.addAttribute("msg","Hello Thymeleaf");
    return "index";
   }
}
  1. 进行springboot配置
#日志格式
logging.pattern.console=%d{HH:mm:ss.SSS} %clr(%-5level) ---  [%-15thread] %cyan(%-50logger{50}):%msg%n
  1. 启动项目，访问http://localhost:8080/show及静态页面

变量输出

语法作用
th:text将model中的值作为内容放入标签中
th:value将model中的值放入input标签的value属性中

准备模型数据

@GetMapping("/show")
public String showPage(Model model){
  model.addAttribute("msg","Hello Thymeleaf");
  return "index";
}

在视图展示model中的值

<span th:text="${msg}"></span>
<hr/>
<input th:value="${msg}">

操作字符串&时间

Thymeleaf提供了一些内置对象可以操作数据，内置对象可直接在模板中使用，这些对象是以#引用的。

操作字符串
操作字符串的内置对象为strings。

方法说明
${#strings.isEmpty(key)}判断字符串是否为空，如果为空返回true，否则返回false
${#strings.contains(msg,‘T’)}判断字符串是否包含指定的子串，如果包含返回true，否则返回false
${#strings.startsWith(msg,‘a’)}判断当前字符串是否以子串开头，如果是返回true，否则返回false
${#strings.endsWith(msg,‘a’)}判断当前字符串是否以子串结尾，如果是返回true，否则返回false
${#strings.length(msg)}返回字符串的长度
${#strings.indexOf(msg,‘h’)}查找子串的位置，并返回该子串的下标，如果没找到则返回-1
${#strings.substring(msg,2,5)}截取子串，用法与JDK的subString方法相同
${#strings.toUpperCase(msg)}字符串转大写
${#strings.toLowerCase(msg)}字符串转小写

使用方式：

<span th:text="${#strings.isEmpty(msg)}"></span>
<hr/>
<span th:text="${#strings.contains(msg,'s')}"></span>
<hr/>
<span th:text="${#strings.length(msg)}"></span>

操作时间
操作时间的内置对象为dates

方法说明
${#dates.format(key)}格式化日期，默认的以浏览器默认语言为标准进行格式化
${#dates.format(key,‘yyyy/MM/dd’)}按照自定义的格式做日期转换
${#dates.year(key)}取年
${#dates.month(key)}取月
${#dates.day(key)}取日

准备数据

model.addAttribute("date",new Date(130,0,1));

使用内置对象操作时间

<span th:text="${#dates.format(date)}"></span>
<hr/>
<span th:text="${#dates.format(date,'yyyy/MM/dd')}"></span>
<hr/>
<span th:text="${#dates.year(date)}"></span>
<span th:text="${#dates.month(date)}"></span>
<span th:text="${#dates.day(date)}"></span>

条件判断

语法作用
th:if条件判断

准备数据

model.addAttribute("sex","女");

进行条件判断

<div>
  <span th:if="${sex} == '男'">
     性别：男
  </span>
  <span th:if="${sex} == '女'">
     性别：女
  </span>
</div>
语法作用
th:switch/th:caseth:switch/th:case与Java中的switch语句等效。th:case="“表示Java中switch的default，即没有case的值为true时显示th:case=”"的内容。

准备数据

model.addAttribute("id","12");

进行条件判断

<div th:switch="${id}">
  <span th:case="1">ID为1</span>
  <span th:case="2">ID为2</span>
  <span th:case="3">ID为3</span>
  <span th:case="*">ID为*</span>
</div>

迭代遍历

语法作用
th:each迭代器，用于循环迭代集合

遍历集合
编写实体类

public class User {
  private String id;
  private String name;
  private int age;
  // 省略getter/setter/构造方法
}

准备数据

List<User> users = new ArrayList();
users.add(new User("1","sxt",23));
users.add(new User("2","baizhan",22));
users.add(new User("3","admin",25));
model.addAttribute("users",users);

在页面中展示数据

<table border="1" width="50%">
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <!-- 遍历集合的每一项起名为user -->
  <tr th:each="user : ${users}">
    <td th:text="${user.id}"></td>
    <td th:text="${user.name}"></td>
    <td th:text="${user.age}"></td>
  </tr>
</table>

遍历Map
准备数据

Map<String,User> map = new HashMap();
map.put("user1",new User("1","sxt",23));
map.put("user2",new User("2","baizhan",22));
map.put("user3",new User("3","admin",25));
model.addAttribute("map",map);

遍历map

<table border="1" width="50%">
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Age</th>
    <th>Key</th>
  </tr>
  <!-- 遍历出的是一个键值对对象，key获取键，value获取值 -->
  <tr th:each="m : ${map}">
    <td th:text="${m.value.id}"></td>
    <td th:text="${m.value.name}"></td>
    <td th:text="${m.value.age}"></td>
    <td th:text="${m.key}"></td>
  </tr>
</table>

使用状态变量

thymeleaf将遍历的状态变量封装到一个对象中，通过该对象的属性可以获取状态变量：

状态变量含义
index当前迭代器的索引，从0开始
count当前迭代对象的计数，从1开始
size被迭代对象的长度
odd/even布尔值，当前循环是否是偶数/奇数，从0开始
first布尔值，当前循环的是否是第一条，如果是返回true，否则返回false
last布尔值，当前循环的是否是最后一条，如果是则返回true，否则返回false

使用状态变量

<!--冒号前的第一个对象是遍历出的对象，第二个对象是封装状态变量的对象-->
<tr th:each="user,status : ${users}">
  <td th:text="${user.id}"></td>
  <td th:text="${user.name}"></td>
  <td th:text="${user.age}"></td>
  <td th:text="${status.index}"></td>
  <td th:text="${status.count}"></td>
  <td th:text="${status.size}"></td>
  <td th:text="${status.odd}"></td>
  <td th:text="${status.even}"></td>
  <td th:text="${status.first}"></td>
  <td th:text="${status.last}"></td>
</tr>

获取域中的数据

thymeleaf也可以获取request，session，application域中的数据，方法如下：

准备数据

request.setAttribute("req","HttpServletRequest");
session.setAttribute("ses","HttpSession");
session.getServletContext().setAttribute("app","application");

获取域数据

request:<span th:text="${req}"></span><hr/>
session: <span th:text="${session.ses}"/><hr/>
application: <span th:text="${application.app}"/>

URL写法

在Thymeleaf中路径的写法为@{路径}

<a th:href="@{http://www.baidu.com}">百度</a>
<a th:href="@{http://www.baidu.com?id=1&name=sxt}">静态参数一</a>
<a th:href="@{http://www.baidu.com(id=2,name=bz)}">静态参数二</a>

添加动态参数
准备数据

model.addAttribute("id","100");
model.addAttribute("name","bzcxy");

在URL中添加参数

<a th:href="@{'http://www.baidu.com?id='+${id}+'&name='+${name}}">动态参数一</a>
<a th:href="@{http://www.baidu.com(id=${id},name=${name})}">动态参数二</a>

添加RESTful风格的参数

<a th:href="@{http://www.baidu.com/{id}/{name}(id=${id},name=${name})}">restful格式传递参数方式</a>

相关配置

在SpringBoot配置文件中可以进行Thymeleaf相关配置

配置项含义
spring.thymeleaf.prefix视图前缀
spring.thymeleaf.suffix视图后缀
spring.thymeleaf.encoding编码格式
spring.thymeleaf.servlet.content-type响应类型
spring.thymeleaf.cache=false页面缓存，配置为false则不启用页面缓存，方便测试
spring:
  thymeleaf:
   prefix: classpath:/templates/
   suffix: .html
   encoding: UTF-8
   cache: false
   servlet:
    content-type: text/html

如果我的内容对你有帮助，请点赞，评论，收藏。创作不易，大家的支持就是我坚持下去的动力
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1961421.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

暄桐林曦老师推荐书单——《菜根谭》

暄桐林曦老师推荐书单——《菜根谭》

暄桐是一间传统美学教育教室&#xff0c;创办于2011年&#xff0c;林曦是创办人和授课老师&#xff0c;教授以书法为主的传统文化和技艺&#xff0c;皆在以书法为起点&#xff0c;亲近中国传统之美&#xff0c;以实践和所得&#xff0c;滋养当下生活。 　　 　　在暄桐教室的课…
阅读更多...
机械运动、工控机概念整理

机械运动、工控机概念整理

Signal &#xff1a; 信号 pul 【pulse】是驱动脉冲信号&#xff0c;发一个脉冲&#xff0c;电机走一步。 dir是方向控制信号&#xff0c;控制电机正转或反转。 ena是使能信号&#xff0c;这个信号必须开启&#xff0c;才能驱动电机。 voltage&#xff1a; 电压 VCC&#…
阅读更多...
Python软件开发：AI毕业设计生成器引领未来

Python软件开发：AI毕业设计生成器引领未来

&#x1f31f; 革新软件开发&#xff1a;Python毕业设计生成器引领未来 &#x1f680; 目录 &#x1f31f; 革新软件开发&#xff1a;Python毕业设计生成器引领未来 &#x1f680;&#x1f393; 课题简介&#x1f31f; 开发目的&#x1f4c8; 开发意义 &#x1f4da; 研究方法&…
阅读更多...
[ BLE4.0 ] 伦茨ST17H66开发-串口UART0的接收与发送

[ BLE4.0 ] 伦茨ST17H66开发-串口UART0的接收与发送

目录 一、前言 二、实现步骤 1.设置回调函数 2.关闭睡眠模式 三、效果展示 四、工程源代码 一、前言 串口通信在任何一款单片机开发中都是尤为重要的。本文涉及的开发所使用的例程依然是基于[ BLE4.0 ] 伦茨ST17H66开发-OSAL系统中添加自己的Task任务文章的工程源码&#x…
阅读更多...
进程间通信--套接字socket

进程间通信--套接字socket

前面提到的管道、消息队列、共享内存、信号和信号量都是在同一台主机上进行进程间通信&#xff0c;那要想跨网络与不同主机上的进程之间通信&#xff0c;就需要Socket通信了。 实际上&#xff0c;Socket通信不仅可以跨网络与不同主机的进程间通信&#xff0c;还可以在同主机上…
阅读更多...
一键升级GIS场景视觉效果，告别繁琐操作

一键升级GIS场景视觉效果，告别繁琐操作

在当今的数字化时代&#xff0c;GIS&#xff08;地理信息系统&#xff09;不再仅仅只能通过一些二维示意图或简陋的三维地形图表示&#xff0c;它可以通过专业的软件简单升级视效。想象一下&#xff0c;在你的GIS场景中&#xff0c;阳光明媚的天气、突如其来的暴风雨、缭绕的晨…
阅读更多...
工时管理平台核心功能解析：你需要了解的

工时管理平台核心功能解析：你需要了解的

国内外主流的10款工时管理平台对比&#xff1a;PingCode、Worktile、Todoist、ClickUp、滴答清单、专注清单、一木清单、NarTick、Tweek、朝暮计划。 在选择合适的工时管理平台时&#xff0c;你是否感到挑战重重&#xff1f;市场上的各种选项似乎都声称能够提升效率和减轻管理负…
阅读更多...
【SQL Server点滴积累】SQL Server 2016数据库邮件(Database Mail)功能故障的解决方法

【SQL Server点滴积累】SQL Server 2016数据库邮件(Database Mail)功能故障的解决方法

今天和大家分享SQL Server 2016数据库邮件(Database Mail)功能故障的解决方法 故障现象&#xff1a; 在SQL Server 2016中配置完成数据库邮件(Database Mail)功能后&#xff0c;当你尝试发送测试邮件后&#xff0c;既收不到测试邮件&#xff0c;也不显示错误消息 KB3186435 -…
阅读更多...
Python数值计算（11）——拉格朗日插值

Python数值计算（11）——拉格朗日插值

本篇介绍一下多项式插值中&#xff0c;拉格朗日法的原理及其实现。 1. 一点数学知识 先引用数学背景。如果给定N个点&#xff0c;然后要求一个多项式通过这N个点&#xff0c;最简单直接的方式是列出线性方程求解&#xff0c;N个点可以确定N个未知量&#xff0c;则所求的拟合多…
阅读更多...
下面关于枚举的描述正确的一项是？

下面关于枚举的描述正确的一项是？

A. 枚举中定义的每一个枚举项其类型都是String&#xff1b; B. 在Java中可以直接继承java.util.Enum类实现枚举类的定义&#xff1b; C. 利用枚举类中的values()方法可以取得全部的枚举项&#xff1b; D. 枚举中定义的构造方法只能够使用private权限声明&#xff1b; 答案选择…
阅读更多...
springboot山东外事职业大学校园食堂点餐系统-计算机毕业设计源码10417

springboot山东外事职业大学校园食堂点餐系统-计算机毕业设计源码10417

摘 要 近年来&#xff0c;随着国民收入的提高&#xff0c;各行业取得长足进步&#xff0c;也带动了互联网行业的快速发展&#xff0c;许多传统行业开始与互联网相结合&#xff0c;通过数字化转型打造新的发展生态。 本文针对山东外事大学校园食堂点餐系统的需求&#xff0c;基于…
阅读更多...
Java内存区域与内存溢出异常详解

Java内存区域与内存溢出异常详解

在Java编程中&#xff0c;理解Java虚拟机的内存布局及其管理机制对于开发高效、稳定的应用程序至关重要。Java虚拟机的内存主要分为几个运行时区域&#xff0c;这些区域各司其职&#xff0c;共同支撑起Java程序的运行。本文将详细探讨Java虚拟机的内存区域以及这些区域如何与内…
阅读更多...
Yolov模型的使用及数据集准备（1）LabelImg的下载和使用

Yolov模型的使用及数据集准备（1）LabelImg的下载和使用

1、LabelImg下载&#xff1a; labelimg简单来说就是打标签用的软件&#xff0c;当需要使用自定义数据集进行模型训练时&#xff0c;往往需要使用该软件来打标签。 下载地址&#xff1a;GitHub - HumanSignal/labelImg 1.1下载之后对压缩包进行解压 2、打开电脑的anaconda pro…
阅读更多...
MyBatis XML配置文件

MyBatis XML配置文件

目录 一、引入依赖 二、配置数据库的连接信息 三、实现持久层代码 3.1 添加mapper接口 3.2 添加UserInfoXMLMapper.xml 3.3 增删改查操作 3.3.1 增(insert) 3.3.2 删(delete) 3.3.3 改(update) 3.3.4 查(select) 本篇内容仍然衔接上篇内容&#xff0c;使用的代码及案…
阅读更多...
8G 显存玩转书生大模型 Demo

8G 显存玩转书生大模型 Demo

创建可用环境 # 创建环境 conda create -n demo python3.10 -y # 激活环境 conda activate demo # 安装 torch conda install pytorch2.1.2 torchvision0.16.2 torchaudio2.1.2 pytorch-cuda12.1 -c pytorch -c nvidia -y # 安装其他依赖 pip install transformers4.38 pip in…
阅读更多...
Moving Object Segmentation: All You Need Is SAM(and Flow) 论文详解

Moving Object Segmentation: All You Need Is SAM(and Flow) 论文详解

系列文章目录 文章目录 系列文章目录前言摘要1 引言2 相关工作3 SAM Preliminaries4 帧级分割Ⅰ&#xff1a;以流作为输入5 帧级分割Ⅱ&#xff1a;以流为提示6 序列级掩膜关联7 实验7.1 数据集7.2 评价指标7 .3 实施细节7.4 消融实验7.5 定量结果7 .定性可视化 8 结论致谢附录…
阅读更多...
01 - 计算机组成原理与体系结构

01 - 计算机组成原理与体系结构

文章目录 一&#xff0c;计算机系统硬件基本组成硬件软件 二&#xff0c;CPU的功能与组成功能组成运算器控制器 三&#xff0c;数据表示计算机的基本单位进制转换原码&#xff0c;反码&#xff0c;补码&#xff0c;移码数值表示范围浮点数表示 四&#xff0c;寻址五&#xff0c…
阅读更多...
【Unity模型】古代亚洲建筑

【Unity模型】古代亚洲建筑

在Unity Asset Store上&#xff0c;一款名为"Ancient Asian Buildings Pack"&#xff08;古代亚洲建筑包&#xff09;的3D模型资源包&#xff0c;为广大开发者和设计师提供了一个将古代亚洲建筑风格融入Unity项目的机会。本文将详细介绍这款资源包的特点、使用方式以…
阅读更多...
如何选择合适的自动化测试工具！

如何选择合适的自动化测试工具！

选择合适的自动化测试工具是一个涉及多方面因素的决策过程。以下是一些关键步骤和考虑因素&#xff0c;帮助您做出明智的选择&#xff1a; 一、明确测试需求和目标 测试范围&#xff1a;确定需要自动化的测试类型&#xff08;如单元测试、集成测试、UI测试等&#xff09;和测试…
阅读更多...
AI视频实战教程：DiffIR2VR-Zero-模糊视频8K高清修复技术

AI视频实战教程：DiffIR2VR-Zero-模糊视频8K高清修复技术

〔探索AI的无限可能&#xff0c;微信关注“AIGCmagic”公众号&#xff0c;让AIGC科技点亮生活〕 本文作者&#xff1a;AIGCmagic社区 猫先生 一、简 介 DiffIR2VR-Zero&#xff1a;一种创新的零样本视频恢复技术&#xff0c;该技术利用预训练的图像恢复模型&#xff0c;解决…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023