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的各种常用的属性操作即可。

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

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

相关文章

性能小白终于能看懂Jmeter报告了

对于刚接触性能测试的初学者来说&#xff0c;分析JMeter生成的测试报告无疑是一个巨大的挑战。面对大量的数据信息&#xff0c;如何快速理解响应时间、吞吐量、错误率等关键指标&#xff0c;往往让人感到困惑。今天&#xff0c;让我们一起探讨如何轻松看懂JMeter的性能测试报告…

多线程篇(其它容器- CopyOnWriteArrayList)(持续更新迭代)

一、CopyOnWriteArrayList&#xff08;一&#xff09; 1. 简介 并发包中的并发List只有CopyOnWriteArrayList。 CopyOnWriteArrayList是一个线程安全的ArrayList&#xff0c;对其进行的修改操作都是在底层的一个复制的数 组&#xff08;快照&#xff09;上进行的&#xff0…

基于STM32C8T6的CubeMX:HAL库点亮LED

三个可能的问题和解决方法&#xff1a; 大家完成之后回来看&#xff0c;每一种改错误都是一种成长&#xff0c;不要畏惧&#xff0c;要快乐&#xff0c;积极面对&#xff0c;要耐心对待 STMCuBeMX新建项目的两种匪夷所思的问题https://mp.csdn.net/mp_blog/creation/editor/1…

【Android 13源码分析】WindowContainer窗口层级-1-初识窗口层级树

在安卓源码的设计中&#xff0c;将将屏幕分为了37层&#xff0c;不同的窗口将在不同的层级中显示。 对这一块的概念以及相关源码做了详细分析&#xff0c;整理出以下几篇。 【Android 13源码分析】WindowContainer窗口层级-1-初识窗口层级树 【Android 13源码分析】WindowCon…

前端技术(七)——less 教程

一、less简介 1. less是什么&#xff1f; less是一种动态样式语言&#xff0c;属于css预处理器的范畴&#xff0c;它扩展了CSS语言&#xff0c;增加了变量、Mixin、函数等特性&#xff0c;使CSS 更易维护和扩展LESS 既可以在 客户端 上运行 &#xff0c;也可以借助Node.js在服…

Semaphore UI --Ansible webui

1、安装python python下载地址 https://www.python.org/downloads/ 选好版本下载 wget https://www.python.org/ftp/python/3.11.9/Python-3.11.9.tar.xz安装编译工具 sudo dnf groupinstall "Development Tools"安装依赖包 dnf install bzip2-devel ncurses-deve…

IDEA 常用配置和开发插件

件市场中搜索并安装“Git Integration”插件。 一、前言 在本篇文章中我会为大家总结一些我自己常用的配置和开发插件&#xff0c;此外也给大家提供一个建议&#xff0c;可以根据自己的项目需求和个人偏好选择适合的插件。另外&#xff0c;IDEA 也在不断更新&#xff0c;可能会…

哈希表、算法

哈希表 hash&#xff1a; 在编程和数据结构中&#xff0c;"hash" 通常指的是哈希函数&#xff0c;它是一种算法&#xff0c;用于将数据&#xff08;通常是字符 串&#xff09;映射到一个固定大小的数字&#xff08;哈希值&#xff09;。哈希函数在哈希表中尤为重要…

使用vue2+axios+chart.js画折线图 ,出现 RangeError: Maximum call stack size exceeded 错误

目录 效果图 解决方案 修正要点 效果图 修改前App.vue代码&#xff1a; <template><div id"app"><canvas id"myChart"></canvas></div> </template><script> import axios from axios; import { Chart, regis…

stm32 W25Q数据存储

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、cubemx配置二、keil中文件修改与配置三、几个重要函数的说明四、DMA方式传输&#xff08;待写&#xff09;总结 前言 W25Q128 容量为128位 128/8 16 也就…

Mac 上终端使用 MySql 记录

文章目录 下载安装终端进入 MySql常用操作查看数据库选择一个数据库查看当前选择的数据库Navcat 打开提示报错参考文章 下载安装 先下载社区版的 MySql 安装的过程需要设置 root 的密码&#xff0c;这个是要进入数据库所设定的&#xff0c;所以要记住 终端进入 MySql 首先输…

Linux基础-Makefile的编写、以及编写第一个Linux程序:进度条(模拟在 方便下载的同时,更新图形化界面)

目录 一、Linux项目自动化构建工具-make/Makefile ​编辑 背景&#xff1a; makefile小技巧&#xff1a; 二、Linux第一个小程序&#xff0d;进度条 先导&#xff1a; 1.如何利用/r,fflush(stdout)来实现我们想要的效果&#xff1b; 2.写一个倒计时&#xff1a; 进度条…

智能家居环境监测系统设计(论文+源码)

1. 系统方案 系统由9个部分构成&#xff0c;分别是电源模块、烟雾传感器模块、GSM发送短信模块、报警模块、温度传感器模块、人体红外感应模块、按键设置模块、显示模块、MCU模块。各模块的作用如下&#xff1a;电源模块为系统提供电力&#xff1b;烟雾传感器模块检测烟雾浓度&…

猫狗识别大模型——基于python语言

目录 1.猫狗识别 2.数据集介绍 3.猫狗识别核心原理 4.程序思路 4.1数据文件框架 4.2 训练模型 4.3 模型使用 4.4 识别结果 5.总结 1.猫狗识别 人可以直接分辨出图片里的动物是猫还是狗&#xff0c;但是电脑不可以&#xff0c;要想让电脑也分辨出图片里的动物是猫还是小…

C++面试3

一、常用设计模式 https://blog.csdn.net/m0_71530237/article/details/141140118?spm1001.2014.3001.5501 二、死锁以及解决方式&#xff1f; 死锁&#xff1a;一种常见的并发问题&#xff0c;发生在多个进程或线程因为竞争资源而陷入相互等待的状态&#xff0c;导致这些进…

Flutter之SystemChrome全局设置

一、简介 SystemChrome作为一个全局属性&#xff0c;很像 Android 的 Application&#xff0c;功能很强大。 二、使用详解 2.1 setPreferredOrientations 设置屏幕方向 在我们日常应用中可能会需要设置横竖屏或锁定单方向屏幕等不同要求&#xff0c;通过 setPreferredOrien…

JavaScript高级——作用域和作用链

1、概念理解&#xff1a; —— 就是一块“地盘”&#xff0c;一个代码所在的区域 —— 静态的&#xff08;相对于上下文对象&#xff09;&#xff0c;在编写代码时就确定了 2、分类 ① 全局作用域 ② 函数作用域 ③ 没有块作用域&#xff08;ES6有了&#xff09; 3、作用 …

WPF利用Path自定义画头部导航条(TOP)样式

1;新建两个多值转换器&#xff0c;都有用处&#xff0c;用来动态确定PATH的X,Y州坐标的。 EndPointConverter 该转换器主要用来动态确定X轴&#xff0c;和Y轴。用于画线条的。 internal class EndPointConverter : IMultiValueConverter {public object Convert(object[] val…

GIS 中的 3D 分析

GIS 中的 3D 分析 3D 分析已成为 GIS 的一个发展趋势&#xff0c;因为它能够更好地表现现实世界。 这不仅仅是为了得到漂亮的图片。对于某些类型的问题&#xff0c;3D 分析有时是解决它们的唯一方法。 3D 数据类型的激增也推动了这一需求。例如&#xff0c;LiDAR、BIM、UAV、…

VS Code 配置 Rust-Analyzer 报错

报错信息&#xff1a; Bootstrap Error" rust-analyzer requires glibc > 2.28 in latest build. 参考了好多地方&#xff0c; https://github.com/rust-lang/rust-analyzer/issues/11558 https://blog.csdn.net/aLingYun/article/details/120923694 https://rust-anal…