Spring Boot 集成 Thymeleaf 模板引擎

news2024/11/18 1:26:28

Spring Boot 集成 Thymeleaf 模板引擎

1. Thymeleaf 介绍

Thymeleaf 是适用于 Web 和独立环境的现代服务器端 Java 模板引擎。
Thymeleaf 的主要目标是为开发工作流程带来优雅的自然模板,既可以在浏览器中正确显示的 HTML,也可以用作静态原型,从而在开发团队中实现更强大的协作。
传统的 JSP+JSTL 组合是已经过了,Thymeleaf 是现代服务端的模板引擎,与传统的 JSP 不同,Thymeleaf可以使用浏览器直接打开,因为可以忽略掉拓展属性,相当于打开原生页面,给前端人员也带来一定的便利。
在本地环境或者有网络的环境下,Thymeleaf 均可运行。由于 thymeleaf 支持 html 原型,也支持在 html标签里增加额外的属性来达到【模板+数据】的展示方式,所以美工可以直接在浏览器中查看页面效果,当服务启动后,也可以让后台开发人员查看带数据的动态页面效果。

<div class="ui right aligned basic segment">
<div class="ui orange basic label" th:text="${blog.flag}">静态原创信息</div>
</div>
<h2 class="ui center aligned header" th:text="${blog.title}">这是静态标题</h2>

类似于这样,在静态页面时会展示静态信息,当服务启动后,动态获取数据库中的数据后,就可以展示动态数据,th:text 标签是用来动态替换文本的。该例子说明浏览器解释 html 时会忽略 html 中未定义的标签属性,比如 th:text,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉
静态内容,使页面动态显示数据。

2. 依赖导入

在 Spring Boot 中使用 thymeleaf 模板需要引入依赖,可以在创建项目工程时勾选 Thymeleaf,也可以创建之后再手动导入

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

另外在 html 页面上如果要使用 thymeleaf 模板,需要在页面标签中引入 th 命名空间

<html xmlns:th="http://www.thymeleaf.org">

3. Thymeleaf 相关配置

因为 Thymeleaf 中已经有默认的配置了,不需要再对其做过多的配置,需要注意一下,Thymeleaf 默认是开启
页面缓存的,所以在开发的时候,需要关闭这个页面缓存

spring:
thymeleaf:
cache: false #关闭缓存

否则会有缓存,导致页面没法及时看到更新后的效果。比如修改了一个文件,已经 update 到 tomcat 了,但刷新页面还是之前的页面,就是因为缓存引起的。

4. Thymeleaf 的使用

4.1 访问静态页面

这个实际上和 Thymeleaf 没有什么关系,应该说是通用的,把它一并写到这里的原因是一般做网站时,都会做一个 404 页面和 500 页面,为了出错时给用户一个友好的展示,而不至于一堆异常信息抛出来。Spring Boot中会自动识别模板目录 templates/下的 404.html 和 500.html 文件。在 templates/目录下新建一个 error 文件夹,专门放置错误的 html 页面,然后分别打印些信息。例如 404.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>这是 404 页面</body>
</html>

再写一个 controller 来测试一下 404 和 500 页面:

@Controller
@RequestMapping("/thymeleaf")
public class ThymeleafController {
@RequestMapping("/test404")
public String test404() {
return "index";
}
@RequestMapping("/test500")
public String test500() {
int i = 1 / 0;
return "index";
}
}

当在浏览器中输入 localhost:8080/thymeleaf/test400 时,故意输入错误,找不到对应的方法,就会跳转到404.html 显示。

当在浏览器中输入 localhost:8088/thymeleaf/test505 时,会抛出异常,然后会自动跳转到 500.html 显示。【注】这里有个问题需要注意一下,在微服务应用开发中会走向前后端分离,在 Controlle 层上都是使用的@RestController 注解,自动会把返回的数据转成 json 格式。但是在使用模板引擎时,Controller 层就不能用@RestController 注解了,因为在使用 thymeleaf 模板时,返回的是视图文件名,比如上面的 Controller 中是返回到 index.html 页面,如果使用@RestController 的话,会把 index 当作 String 解析了,直接返回到页面了,而不是去找 index.html 页面,所以在使用模板时要用@Controller 注解。

4.2 Thymeleaf 中处理对象

thymeleaf 模板中应该如何处理对象信息呢?假如在做个人博客的时候,需要给前端传博主相关信息来展示,那么会封装成一个博主对象,比如:

public class Blogger {
private Long id;
private String name;
private String pass;
// 省去 set 和 get
}

然后在 controller 层中初始化一下:

@GetMapping("/getBlogger")
public String getBlogger(Model model) {
Blogger blogger = new Blogger(1L, "闫峻", "123456");
model.addAttribute("blogger", blogger);
return "blogger";
}

先初始化一个 Blogger 对象,然后将该对象放到 Model 中,然后返回到 blogger.html 页面去渲染。接下来再写一个 blogger.html 来渲染 blogger 信息:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博主信息</title>
</head>
<body>
<form action="" th:object="${blogger}" >
用户编号:<input name="id" th:value="${blogger.id}"/><br>
用户姓名:<input type="text" name="username" th:value="${blogger.getName()}" /><br>
登陆密码:<input type="text" name="password" th:value="*{pass}" />
</form>
</body>
</html>

可以看出,在 thymeleaf 模板中,使用 th:object=“ " 来获取对象信息,然后在表单里面可以有三种方式来获取对象属性。 1 、使用 t h : v a l u e = " ∗ 属性名 " 2 、使用 t h : v a l u e = " {}"来获取对象信息,然后在表单里面可以有三种方式来获取对象属性。 1、使用 th:value="*{属性名}" 2、使用 th:value=" "来获取对象信息,然后在表单里面可以有三种方式来获取对象属性。1、使用th:value="属性名"2、使用th:value="{对象.属性名}”,对象指的是上面使用 th:object 获取的对象
3、使用 th:value=“${对象.get 方法}”,对象指的是上面使用 th:object 获取的对象
可 以 看 出 , 在 Thymeleaf 中 可 以 像 写 java 一 样 写 代 码 , 很 方 便 。 在 浏 览 器 中 输 入localhost:8080/thymeleaf/getBlogger 来测试一下数据:

4.3 Thymeleaf 中处理 List

处理 List 和处理对象差不多,但是需要在 thymeleaf 中进行遍历。先在 Controller 中模拟一个 List。

@GetMapping("/getList")
public String getList(Model model) {
Blogger blogger1 = new Blogger(1L, "闫峻", "123456");
Blogger blogger2 = new Blogger(2L, "死胖子", "123456");
List<Blogger> list = new ArrayList<>();
list.add(blogger1);
list.add(blogger2);
model.addAttribute("list", list);
return "list";
}

接下来写一个 list.html 来获取该 list 信息,然后在 list.html 中遍历这个 list

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博主信息</title>
</head>
<body>
<form action="" th:each="blogger : ${list}" >
用户编号:<input name="id" th:value="${blogger.id}"/><br>
用户姓名:<input type="text" name="password" th:value="${blogger.name}"/><br>
登录密码:<input type="text" name="username" th:value="${blogger.getPass()}"/>
</form>
</body>
</html>

可以看出,其实和处理单个对象信息差不多,Thymeleaf 使用 th:each 进行遍历, 取 m o d e l 中传过来的参数,然后自定义 l i s t 中取出来的每个对象,这里定义为 b l o g g e r 。表单里面可以直接使用 {}取 model 中传过来的参数,然后自定义 list 中取出来的每个对象,这里定义为 blogger。表单里面可以直接使用 model中传过来的参数,然后自定义list中取出来的每个对象,这里定义为blogger。表单里面可以直接使用{对象.属性名}来获取
list 中对象的属性值,也可以使用${对象.get 方法}来获取,这点和处理对象信息是一样的,但是不能使用*{属性名}来获取对象中的属性,thymeleaf 模板获取不到。

4.4 其他常用 thymeleaf 操作

thymeleaf 中的一些常用的标签操作
在这里插入图片描述Thymeleaf 还 有 很 多 其 他 用 法 , 这 里 就 不 总 结 了 , 具 体 的 可 以 参 考 Thymeleaf 的 官 方 文 档https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html。主要要学会如何在 Spring Boot 中去使用thymeleaf,遇到对应的标签或者方法,查阅官方文档即可。

总结

Thymeleaf 在 Spring Boot 中使用非常广泛,主要分析 thymeleaf 的优点,以及如何在 SpringBoot 中集成并使
用 thymeleaf 模板,包括依赖、配置,相关数据的获取、以及一些注意事项等。最后列举了一些 thymeleaf 中常用的标签,在实际项目中多使用,多查阅就能熟练掌握,thymeleaf 中的一些标签或者方法不用死记硬背,用到什么去查阅什么,关键是要会在 Spring Boot 中集成,用的多了就熟能生巧。

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

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

相关文章

【芯片设计- RTL 数字逻辑设计入门 3- Verdi 常用使用命令】

文章目录 Verdi 全局显示Verdi 前导 0 的显示Verdi 数据笔数统计Verdi 波形数据dump Verdi 全局显示 bsubi -n 16 -J sam visualizer -tracedir ./veloce.wave/debug_waveform.stw 打开波形后&#xff0c;如果想要看到所有信号的数据&#xff0c;可以点击下图中红框中的按钮&a…

DASCTF 2023 0X401七月暑期挑战赛web复现

目录 <1> Web (1) EzFlask(python原型链污染&flask-pin) (2) MyPicDisk(xpath注入&文件名注入) (3) ez_cms(pearcmd文件包含) (4) ez_py(django框架 session处pickle反序列化) <1> Web (1) EzFlask(python原型链污染&flask-pin) 进入题目 得到源…

系统接口自动化测试方案

XXX接口自动化测试方案 1、引言 1.1 文档版本 版本 作者 审批 备注 V1.0 XXXX 创建测试方案文档 1.2 项目情况 项目名称 XXX 项目版本 V1.0 项目经理 XX 测试人员 XXXXX&#xff0c;XXX 所属部门 XX 备注 1.3 文档目的 本文档主要用于指导XXX-Y…

C++ __builtin_popcount函数作用

__builtin_popcount函数是系统自带的一个返回值是int/long/long long二进制1的个数的函数。 对于int&#xff0c;long&#xff0c; long long分别用一下三种函数&#xff1a; __builtin_popcount(unsigned int n)//返回值为int __builtin_popcountl(unsigned int n)//返回值为…

【共享广告主】小白的创业项目:互联网广告,详细介绍

科思创业汇 大家好&#xff0c;这里是科思创业汇&#xff0c;一个轻资产创业孵化平台。赚钱的方式有很多种&#xff0c;我希望在科思创业汇能够给你带来最快乐的那一种&#xff01; 互联网广告做什么生意&#xff1f; 互联网广告行业面向哪些客户群体&#xff1f; 互联网广…

Anaconda创建虚拟环境

参考文章 1 Win10RTX3060配置CUDA等深度学习环境 pytorch 管网&#xff1a;PyTorch 一 进入 Anaconda 二 创建虚拟环境 conda create -n pytorch python3.9注意要注意断 VPN切换镜像&#xff1a; 移除原来的镜像 # 查看当前配置 conda config --show channels conda config…

leetcode 46. Permutations(排列)

返回数组nums中数字的所有可能的排列组合。 思路&#xff1a; 排列组合这种一般会想到DFS。 这个排列中每个数字只能用一次&#xff0c; 可用如下DFS流程 stack.push(num); dfs(nums, num); stack.pop();退出条件&#xff1a; 当stack的size和nums数组一样时&#xff0c;说…

P1257 平面上的最接近点对

题目 思路 详见加强加强版 代码 #include<bits/stdc.h> using namespace std; #define int long long const int maxn4e510; pair<int,int> a[maxn]; int n; double d1e16; pair<int,int> vl[maxn],vr[maxn]; void read() { cin>>n;for(int i1;i<…

/lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.28‘ not found

某项目中&#xff0c;我要给别人封装一个深度学习算法的SDK接口&#xff0c;运行在RK3588平台上&#xff0c;然后客户给我的交叉编译工具链是 然后我用他们给我的交叉编译工具链报下面的错误&#xff1a; aarch64-buildroot-linux-gnu-gcc --version /data/chw/aarch64/bin/cca…

Race竞争型漏洞

Race竞争介绍 竞争型漏洞&#xff08;Race Condition Vulnerability&#xff09;是一种存在于并发编程中的安全漏洞。它通常发生在多个线程或进程同时访问和修改共享资源时&#xff0c;由于执行顺序的不确定性而导致意外的结果。 竞争型漏洞的原理可以用以下步骤来解释&#x…

该选择WPF 还是 Winform?

WPF和WinForms都是.NET平台下的桌面应用程序开发框架&#xff0c;它们各有特点&#xff0c;适用于不同的场景和需求。下面是对WPF和WinForms的一些比较和优劣势&#xff1a;WPF&#xff08;Windows Presentation Foundation&#xff09;&#xff1a;WPF具有强大的图形渲染能力&…

ssm客户关系管理系统java公司企业房屋销售出租jsp源代码mysql

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 ssm客户关系管理系统 系统有1权限&#xff1a;管理员…

计算机网络(3) --- 网络套接字TCP

计算机网络&#xff08;2&#xff09; --- 网络套接字UDP_哈里沃克的博客-CSDN博客https://blog.csdn.net/m0_63488627/article/details/131977544?spm1001.2014.3001.5501 目录 1.TCP 1.服务端接口介绍 1.listen状态 2.accept获取链接 2.客户端接口介绍 2.TCP的服务器…

力扣:48. 旋转图像(Python3)

题目&#xff1a; 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&…

基于ANACONDA安装用于Python编程的Spyder集成开发环境的方法步骤详解

基于ANACONDA安装用于Python编程的Spyder集成开发环境的方法步骤详解 Python作为一种当下流行的编程语言&#xff0c;其编辑器有很多种&#xff0c;本文介绍基于ANACONDA的安装Spyder编辑器的方法步骤。Spyder集成开发环境&#xff0c;和其他的Python开发环境相比&#xff0c;…

django bootstrap html实现左右布局,带折叠按钮,左侧可折叠隐藏

一、实现的效果 在django项目中,需要使用bootstrap 实现一个左右分布的布局,左侧区域可以折叠隐藏起来,使得右侧的显示区域变大。(为了区分区域,左右加了配色,不好看的修改颜色即可) 点击折叠按钮,左侧区域隐藏,右侧区域铺满: 二、实现思路 1、使用col-md属性,让左…

JavaEE初阶之文件操作 —— IO

目录 一、认识文件 1.1认识文件 1.2树型结构组织 和 目录 1.3文件路径(Path) 1.4其他知识 二、Java 中操作文件 2.1File 概述 2.2代码示例 三、文件内容的读写 —— 数据流 3.1InputStream 概述 ​3.2FileInputStream 概述 3.3代码示例 3.4利用 Scanner 进行字…

procreate怎么插入图片?如何将图片插入到procreate图层里?

Procreate是一款运行在iPadOS上的强大的绘画应用软件&#xff0c;让创意人士随时把握灵感&#xff0c;通过简易的操作系统&#xff0c;专业的功能集合进行素描、填色、设计等艺术创作。procreate怎么插入图片&#xff1f;如何将图片插入到procreate图层里&#xff1f; 打开平板…

【二分+滑动窗口优化DP】CF883 I

Problem - 883I - Codeforces 题意&#xff1a; 思路&#xff1a; 首先&#xff0c;要让最大值最小&#xff0c;很显然要二分 那么就相当于有了一个极差的限制&#xff0c;看能不能分组&#xff0c;每组至少m个元素 那么就是考虑分段DP&#xff0c;直接n^2很容易写 但是n …

偶发odbc.ini文件被清空

现象&#xff1a;某个现场 odbc.ini 莫名其妙被清空&#xff0c;偶发情况&#xff0c;大概几周出现一次。 unixodbc官网地址–> https://www.unixodbc.org/ //2.3.7 BOOL _odbcinst_SystemINI( char *pszFileName, BOOL bVerify ) {FILE *hFile;char …