SpringBoot集成Thymeleaf模板引擎,为什么使用(详细介绍)

学习本技术第一件事:你为什么要使用,解决什么问题的?

1.为什么使用(使用背景)?

首先应用场景是单体项目,如果是前后端分离就不用关注这个了,因为单体项目你前后端都是写在一个项目里面的,也就是说你访问的地址都是controller的地址,然后controller再通过是解析器ViewResolver去解析视图找到你对应的html文件,一般前后端分离项目,你浏览器地址一定是前端项目的地址,并且基本上后端controller层使用的注解都是@RestController,是返回的数据,不会走视图解析器,现在基本上都是前后端分离,但是很多小公司还是很多前后端不分离,懂得都懂,公司穷的一批,不愿意花钱,后端既担任后端,又担任前端,还担任运维和测试,他奶奶的,最恶心的还是前端的框架,他喵的混合使用了很多种一点都不规范,简直不要太屎山,要不是为了这点米,我早跑路了。简单画个图看一下。

单体项目的访问

前后端就不介绍了。
 

接下来说一下为什么使用?有这样一种场景,我当我访问后端/test/login时返回login字符串,实际上会走视图解析器就会转发到login.html,但是呢我现在后端无法通过return返回给前端数据吧,因为return返回的是一个页面,但是呢我想去动态根据一些条件去渲染页面,那此时你写的静态html文件就无法解决这个问题对吧,因为静态数据就是死的,除非你访问后端获取数据去渲染,这种一般都是后端方法上加上了@Responsebody返回数据,不走视图解析器,但是我现在就是有这样一种需求:你访问后端——>转发到前端——>前端需要动态渲染页面。这个时候就需要用到我们的thymeleaf了。

总结需求问题:你访问后端/test/login——>转发到前端login.html——>前端需要动态渲染页面

解决:通过thymeleaf去解决。它是如何解决这个问题的?

其实简单来说,我后端在转发login.html的同时,我返回给前端一个model(也就是键值对)数据,前端使用${key}的形式取出来就是了,这样就实现了。

就这么简单,一般比如按条件去动态渲染,其实就是在后端在model.addAttibute的时候,按条件去添加就可以了。

上面主要是你得理解什么时候才会用thymeleaf,单体项目前后端不分离,小公司,开发周期短,任务重,需要动态渲染页面。

2.如何在SpringBoot项目中引入Thymeleaf

2.1引入thymeleaf依赖

thymeleaf是一个模板引擎,很抽象的名词,我一般很烦这种名字,简单理解就是将动态数据和模板结合渲染生成最终的页面,再形象一点就是这类似于汽车引擎将燃料和空气转化为动力,模板引擎将数据和模板转化为网页内容。

首先SpringBoot是支持Thymeleaf的,内部已经对Thymeleaf模板的版本进行控制了。此处只需要引入起步依赖即可。可以点开看一下。

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

2.2配置application.yml文件

我们的静态html文件要放到templates目录下面,因为它默认访问的路径也就是prefix就是templates,后缀是.html,所以下面这个配置可以不用配置,此处想让大家知道,它的配置属性类是哪个,ctrl+鼠标点击prefix,会进入它的属性配置类ThymeleafProperties。

spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html

可以看到它很多已经有默认值了,我们都不用配置,但是我们要知道怎么查看,其他的查看方式也是如此,并且查看它的所有配置属性类更有利于我们去了解这个技术。

2.3创建html文件

我这里直接告诉大家一个简单方法,因为我们创建完普通的html文件还要引入thymeleaf,你每创建一个文件都要引入比较麻烦,所以直接创建一个模板文件,这样每次直接创建这个模板文件即可

其实就加了一个东西,xmlns="http://www.thymeleaf.org",因为你不引入你就无法使用它的动态属性,这样我们再创建文件就可以右键选择我们定制的模板。

类似的还有mapper的映射文件,它的头部也需要这样定制一个模板。

2.4如何使用前端和后端

2.4.1前端

此处我只介绍某一个写法,其他可以自己去尝试或去b站看相关博主的视频系统的学习。

th:xxx="${key}",至于这个xxx是什么有很多,每种也有不同的用法和意思。

​​​​​​​

例如:th:text="${titleName}",就是给标签的内容赋值,如果你后端的model没有titleName前端也不会报错。容错性也很好,不会说没有导致前端页面瘫痪。

2.4.2后端

2.4.3结果展示

可见“默认的title”已经被动态的替换掉了。

3.总结

你可以不熟练,毕竟我们是搞后端的,而且就算是全栈,也是前后端分离的,也不会用thymeleaf,直接就是返回数据,但是呢,我们要能看懂别人写的,毕竟有的公司项目已经经过了很多人的手了,能看懂它写的就行,然后慢慢去模仿他们使用就行,接下来自己去学习一下thymeleaf的各种常用的属性操作即可。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【CTF MISC】XCTF GFSJ1086 [简单] 简单的base编码 Writeup(Base64编码+循环解码+Base92编码)

[简单] 简单的base编码 你懂base编码吗&#xff1f; 工具 在线BASE92编码解码&#xff1a;https://ctf.bugku.com/tool/base92 解法 Vm0wd2QyUXlVWGxWV0d4V1YwZDRWMVl3WkRSV01WbDNXa1JTVjAxV2JETlhhMUpUVmpBeFYySkVUbGhoTVVwVVZtcEJlRll5U2tWVWJHaG9UVlZ3VlZadGNFSmxSbGw1V…

MySQL详解:数据类型、约束

MySQL 1. 数据类型1.1 数值类型1.1.1 bit 位类型1.1.2 整数数据类型1.1.3 小数类型floatdecimal 1.2 字符类型1.2.1 char1.2.2 varchar 可变长字符串1.2.3 日期和时间类型datedatetimetimestamp 1.2.4 enum1.2.5 set集合查询函数 find_in_set 2. 表的约束2.1 NULL 空属性2.2 默…

《Linux运维总结:基于ARM64+X86_64架构CPU使用docker-compose一键离线部署mongodb 7.0.14容器版副本集群》

总结&#xff1a;整理不易&#xff0c;如果对你有帮助&#xff0c;可否点赞关注一下&#xff1f; 更多详细内容请参考&#xff1a;《Linux运维篇&#xff1a;Linux系统运维指南》 一、部署背景 由于业务系统的特殊性&#xff0c;我们需要面向不通的客户安装我们的业务系统&…

[Visual Stuidio 2022使用技巧]2.配置及常用快捷键

使用vs2022开发WPF桌面程序时常用配置及快捷键。 语言&#xff1a;C# IDE&#xff1a;Microsoft Visual Studio Community 2022 框架&#xff1a;WPF&#xff0c;.net 8.0 一、配置 1.1 内联提示 未开启时&#xff1a; 开启后&#xff1a; 开启方法&#xff1a; 工具-选…

基于微信小程序的垃圾分类(lw+演示+源码+运行)

摘 要 随着生态文明体制改革的不断推进,可持续发展的环保理念逐渐成为社会共识,而在推行环保措施的过程中却困难重重.针对生活废弃物肆意无序投放的问题,尽管目前各大城市相继推出垃圾分类强制性执行的政策法规,但因市民欠缺对垃圾种类的正确认识而导致垃圾分类的施行难度和成…

Luban策划开源工具

一、Luban游戏配置解决方案&#xff0c;是一个强大、易用、优雅、稳定的游戏配置解决方案。它设计目标为满足从小型到超大型游戏项目的简单到复杂的游戏配置工作流需求。luban标准化了游戏配置开发工作流&#xff0c;可以极大提升策划和程序的工作效率。 二、核心特性&#xf…

【代码随想录训练营第42期 Day58打卡 - 图论Part8 - 拓扑排序

目录 一、拓扑排序介绍 定义 特点 实现方法&#xff08;2种&#xff09; 应用 二、题目与题解 题目&#xff1a;卡码网 117. 软件构建 题目链接 题解&#xff1a;拓扑排序 - Kahn算法&#xff08;BFS&#xff09; 三、小结 一、拓扑排序介绍 对于拓扑排序&#xff0c…

攻防世界 ics-05

ics-05 隐藏的变量传参&#xff0c;php弱类型比较 只有设备维护中心可以点击进去 查看源码&#xff0c;发现有个隐藏的超链接变量传参 看到变量传参&#xff0c;有可能存在文件包含漏洞读取源码&#xff0c;这个站是php的站&#xff0c;所以可以使用php伪协议读取源码 index.p…

Web 原生组件化方案:Web Components

你好&#xff0c;我是沐爸&#xff0c;欢迎点赞、收藏、评论和关注。 Web 组件化是一种将Web应用的UI部分拆分成可复用的独立组件的架构方法。这种方法有助于提高代码的可维护性、可重用性和可测试性。 而Web Components 标准则提供了一套原生的API&#xff0c;允许开发者创建…

IDEA 通义灵码 插件使用体验

目录 前言 主要功能 演示代码 解释代码 生成单元测试 生成代码注释 生成优化建议 代码片段补全 总结 前言 自从 AI 技术开始大规模应用&#xff0c;老板就想让下面的牛马借助 AI 工具来提高编码效率&#xff0c;由于团队都没有在实际编码中深度使用过 AI 工具&#x…

视频推拉流/直播点播EasyDSS平台安装失败并报错“install mediaserver error”是什么原因?

TSINGSEE青犀视频推拉流/直播点播EasyDSS平台支持音视频采集、视频推拉流、播放H.265编码视频、存储、分发等视频能力服务&#xff0c;在应用场景中可实现视频直播、点播、转码、管理、录像、检索、时移回看等。此外&#xff0c;平台还支持用户自行上传视频文件&#xff0c;也可…

【物联网技术大作业】设计一个智能家居的应用场景

前言&#xff1a; 本人的物联网技术的期末大作业&#xff0c;希望对你有帮助。 目录 大作业设计题 &#xff08;1&#xff09;智能家居的概述。 &#xff08;2&#xff09;介绍智能家居应用。要求至少5个方面的应用&#xff0c;包括每个应用所采用的设备&#xff0c;性能&am…

【深度学习】神经网络-怎么分清DNN、CNN、RNN?

怎么分清DNN、CNN、RNN&#xff1f; 最“大”的概念是人工神经网络&#xff08;Artificial Neural Network, ANN&#xff09;&#xff0c;它是较为广泛的术语&#xff0c;通常指的是一类模拟生物神经网络的数学模型&#xff0c;其中包括神经元、权重和连接。在这个术语下&#…

【Redis】主从复制 - 源码

因为主从复制的过程很复杂, 同时核心逻辑主要集中在 replication.c 这个文件中, 避免篇幅过大, 所以将主从复制中涉及这个文件的代码集中到了另一篇文章。 在当前文章主要分析主从复制的大体代码逻辑, 如果需要了解整体的过程, 可以配合 Redis 主从复制 - relication 源码分析 …

iOS 知识点记录

王巍 博客地址&#xff1a;OneVs Den git地址&#xff1a;onevcat (Wei Wang) GitHub 江湖人称喵神&#xff0c;目前就职于line。喵神的博客涉及方面比较广, 有Obejctive-C, Swift, SwiftUI, Unity等等。博客内容很有深度&#xff0c;非常值得关注。 戴铭 博客地址&#xff1…

ESP32-WROOM-32 开篇(刚买)

简介 买了一个ESP32-WROOM-32模块的开发板, 记录板初上机细节。 模块简介 Look 连接PC 1. 解决驱动问题 https://www.silabs.com/developers/usb-to-uart-bridge-vcp-drivers?tabdownloads 下载驱动, 如下图 解压缩下载的包&#xff0c; 然后电机64位的版本&#xff0c; 一直…

汽车无钥匙启动功能工作原理

移‌动管家无钥匙启动‌是一种科技化的汽车启动方式&#xff0c;它允许车主在不使用传统钥匙的情况下启动车辆。这种技术通过智能感应系统实现&#xff0c;车主只需携带智能钥匙&#xff0c;当靠近车辆时&#xff0c;车辆能够自动解锁并准备启动。启动车辆时&#xff0c;车主无…

友思特方案 | 搭建红外桥梁:嵌入式视觉接口助力红外热像仪传输

导读 为红外成像设备数据传输快速搭桥&#xff01;友思特嵌入式视觉接口能帮助用户快速享有 GigE Vision 协议优势&#xff0c;是红外成像设备视觉接口集成、开发高性能相机的高效快捷方案。 引言 红外热像仪作为一种非接触式设备&#xff0c;能够检测红外能量&#xff08;热量…

CSS实现前端布局更巧妙的方案!在 flex 布局中通过使用 margin 实现水平垂直居中以及其他常见的前端布局

在前端开发中&#xff0c;实现水平垂直居中一直是个热门话题。随着 CSS Flexbox 布局的普及&#xff0c;开发者们开始更多地使用 justify-content 和 align-items 这两个属性来解决这个问题。 然而&#xff0c;还有一种更加简洁、灵活的方式——使用 margin: auto; 来实现居中以…

Grafana面板-linux主机详情(使用标签过滤主机监控)

1. 采集器添加labels标签区分业务项目 targets添加labels &#xff08;模板中使用的project标签&#xff09; … targets: [‘xxxx:9100’] labels: project: app2targets: [‘xxxx:9100’] labels: project: app1 … 2. grafana面板套用 21902 模板 演示