SpringBoot集成Thymeleaf

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、使用 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: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: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,遇到对应的标签或者方法,查阅官方文档即可。

5、总结

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

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

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

相关文章

C#+WPF上位机开发(模块化+反应式)

在上位机开发领域中&#xff0c;C#与C两种语言是应用最多的两种开发语言&#xff0c;在C语言中&#xff0c;与之搭配的前端框架通常以QT最为常用&#xff0c;而C#语言中&#xff0c;与之搭配的前端框架是Winform和WPF两种框架。今天我们主要讨论一下C#和WPF这一对组合在上位机开…

css图标 | 来自 fontawesome 字体文件的586 个小图标

1. css效果 /*!* Font Awesome 4.4.0 by davegandy - http://fontawesome.io - fontawesome* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)*/.fa-glass:before {content:"\f000"} .fa-music:before {content:"\f001"…

小白如何理解MySQL?一文吃透

从本质上来说&#xff0c;MySQL也是一个软件&#xff0c;以Java为例&#xff0c;Java通过JDBC进行MySQL驱动连接后&#xff0c;通过调用“MySQL”的“接口”将SQL语句传给MySQL&#xff0c;并获取返回结果&#xff01; 连接器 第一步&#xff0c;你会先连接到这个数据库上&…

项目管理:项目计划有哪些不可忽视的作用

为了确保项目在我们的预期范围内完成&#xff0c;编制计划是不可或缺的&#xff0c;它可以帮助项目管理团队进行提前思考、识别和管理任何疏漏和风险。 项目计划进行跟踪中有哪些不可忽视的作用&#xff1a; 1、了解成员的工作情况 分配任务后&#xff0c;项目经理应主动与…

蓝海卓越计费管理系统任意文件读取下载

看了大佬的文章&#xff0c;太牛逼啦&#xff0c;下面是大佬文章原文。 蓝海卓越计费管理系统任意文件读取下载 鹰图语法&#xff1a;web.title"蓝海卓越计费管理系统" 访问url 直接更改url就行了 /download.php?file../../../../../etc/passwd

nginx 配置多域名多站点 Ubuntu

nginx 配置多域名多站点 Ubuntu 一、安装 nginx apt install nginx二、配置文件说明 nginx 的配置文件在 /etc/nginx 目录下&#xff0c;它的默认内容是这样的 root2bd0:/etc/nginx# ll total 72 drwxr-xr-x 8 root root 4096 Jul 31 15:21 ./ drwxr-xr-x 104 root root …

需要暴雨天气安全“指南”的不仅仅是个人

昨日&#xff0c;人民日报官微发布#暴雨天气10个安全指南#&#xff0c;从居家防范、行车安全、户外出行、遇灾求救、次生灾害、防疫防病等方面给出了针对暴雨的安全建议。 以上10条指南是主要面向个人的建议&#xff0c;而在城市水利基础设施的运营和维护上&#xff0c;需要一些…

leetcode 860. 柠檬水找零

2023.8.1 简单的一个思路就是建一个大小为3的数组change &#xff0c;用于存储剩余的零钱&#xff0c;然后遍历账单&#xff0c;每次找零钱的时候判断一下是否有足够的零钱&#xff0c;不够的话直接返回false。 能坚持到结束遍历则返回true。 代码如下&#xff1a; class Solu…

【视觉SLAM入门】5.1. 特征提取和匹配--FAST,ORB(关键点描述子),2D-2D对极几何,本质矩阵,单应矩阵,三角测量,三角化矛盾

"不言而善应" 0. 基础知识1. 特征提取和匹配1.1 FAST关键点1.2 ORB的关键点--改进FAST1.3 ORB的描述子--BRIEF1.4 总结 2. 对极几何&#xff0c;对极约束2.1 本质矩阵(对极约束)2.1.1 求解本质矩阵2.1.2 恢复相机运动 R &#xff0c; t R&#xff0c;t R&#xff0c;…

【React】搭建React项目

最近自己在尝试搭建react项目&#xff0c;其实react项目搭建没有想象中的那么复杂&#xff0c;我们只需要使用一个命令把React架子搭建好&#xff0c;其他的依赖可以根据具体的需求去安装&#xff0c;比如AntDesignMobile的UI框架&#xff0c;执行npm install antd-mobile --sa…

无涯教程-Lua - 变量声明

变量的名称可以由字母&#xff0c;数字和下划线字符组成。它必须以字母或下划线开头&#xff0c;由于Lua区分大小写&#xff0c;因此大写和小写字母是不同的。 在Lua中&#xff0c;尽管无涯教程没有变量数据类型&#xff0c;但是根据变量的范围有三种类型。 全局变量(Global) …

[Linux]详解环境基础开发工具的使用

[Linux]环境基础开发工具的使用 文章目录 [Linux]环境基础开发工具的使用0. 前言1. Linux 软件包管理器 yumyum介绍yum的使用yum源 2. Linux编辑器-vimvim介绍vim基本模式底行模式下的命令汇总命令模式下的命令汇总vim简单配置 3. Linux编译器gcc/g4. Linux项目自动化构建工具-…

IO进程线程第四天(8.1)opendir,closedir,readdir

作业1&#xff1a; 从终端获取一个文件的路径以及名字。 若该文件是目录文件&#xff0c;则将该文件下的所有文件的属性显示到终端&#xff0c;类似ls -l该文件夹 若该文件不是目录文件&#xff0c;则显示该文件的属性到终端上&#xff0c;类似ls -l这单个文件 #include<…

Linux|ubuntu下运行python

参考&#xff1a;ubuntu系统下切换python版本的方法 文章目录 python版本问题查看ubuntu下的所有python版本通过apt-get install可以安装不同版本python查看python版本号更新update-alternatives替代列表查看update-alternatives下的python版本切换python版本删除python版本 p…

工作记录------单元测试(持续更新)

工作记录------单元测试 之前的工作中从来没有写过单元测试&#xff0c;新入职公司要求写单元测试&#xff0c; 个人觉得&#xff0c;作为程序员单元测试还是必须会写的 于此记录一下首次编写单元测试的过程。 首先引入单元测试相关的依赖 <dependency><groupId>…

分布式开源监控Zabbix实战

Zabbix作为一个分布式开源监控软件&#xff0c;在传统的监控领域有着先天的优势&#xff0c;具备灵活的数据采集、自定义的告警策略、丰富的图表展示以及高可用性和扩展性。本文简要介绍Zabbix的特性、整体架构和工作流程&#xff0c;以及安装部署的过程&#xff0c;并结合实战…

【爬虫逆向案例】某易云音乐(评论)js逆向—— params、encSecKey解密

声明&#xff1a;本文只作学习研究&#xff0c;禁止用于非法用途&#xff0c;否则后果自负&#xff0c;如有侵权&#xff0c;请告知删除&#xff0c;谢谢&#xff01; 【爬虫逆向案例】某易云音乐&#xff08;评论&#xff09;js逆向—— params、encSecKey解密 1、前言2、行动…

EXCEL, 用if({1,0,0} ...) 实现把给定的区域,输出为任意你想要的矩阵,数组区域!

目录 1 原材料&#xff1a;这样的一个区域 工具 if({1,0,0}) 数组公式 1.1 原始数据 1.2 原理 if(0/1,t-value,f-value)---变形--->if({},range1,range2) 1.2.1 if(0/1,t-value,f-value)---变形--->if({},range1,range2) 1.2.2 原理1&#xff1a; if 数组原理&#…

汽车后视镜反射率检测系统

随着社会的快速发展和物质生活的提供&#xff0c;机动车越来越普及&#xff0c;道路行车安全日益重要。为了保障机动车辆和行人的安全&#xff0c;在行车时不断观察后方和两侧的图像尤为重要。机动车后视镜通过反射镜面可以提供在规定视野内后方和两侧的图像&#xff0c;从而提…

【云原生】Kubernetes中deployment是什么?

目录 Deployments 更新 Deployment 回滚 Deployment 缩放 Deployment Deployment 状态 清理策略 金丝雀部署 编写 Deployment 规约 Deployments 一个 Deployment 为 Pod 和 ReplicaSet 提供声明式的更新能力。 你负责描述 Deployment 中的 目标状态&#xff0c;而 De…