当前位置: 首页 > news >正文

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

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 【计算机网络】数据链路层深度解析
  • 初写MySQL四张表:(3/4)
  • 编译QT源码时的configure参数须知
  • vue使用TreeSelect设置带所有父级节点的回显
  • k8s多节点集群搭建
  • 【运维】好用的线上项目运维命令
  • Java之线程篇四
  • 知识|智能网联汽车多域电子电气架构会如何发展?
  • unity 图片置灰shader
  • Datawhale------Tiny-universe学习笔记——Qwen(1)
  • 算法——贡献法
  • k8s 微服务 ingress-nginx 金丝雀发布
  • 几种修改docker默认存储位置的方法
  • Linux:RPM软件包管理以及Yum软件包仓库
  • Leetcode—环形链表||
  • 【划重点】MySQL技术内幕:InnoDB存储引擎
  • 【每日笔记】【Go学习笔记】2019-01-10 codis proxy处理流程
  • ES6系统学习----从Apollo Client看解构赋值
  • export和import的用法总结
  • express如何解决request entity too large问题
  • Git 使用集
  • Java 实战开发之spring、logback配置及chrome开发神器(六)
  • Js基础——数据类型之Null和Undefined
  • MySQL Access denied for user 'root'@'localhost' 解决方法
  • php面试题 汇集2
  • Webpack 4x 之路 ( 四 )
  • 将回调地狱按在地上摩擦的Promise
  • 前端面试题总结
  • 前端性能优化--懒加载和预加载
  • 如何合理的规划jvm性能调优
  • 思考 CSS 架构
  • 微信开源mars源码分析1—上层samples分析
  • 项目管理碎碎念系列之一:干系人管理
  • 学习笔记TF060:图像语音结合,看图说话
  • 职业生涯 一个六年开发经验的女程序员的心声。
  • 做一名精致的JavaScripter 01:JavaScript简介
  • # 手柄编程_北通阿修罗3动手评:一款兼具功能、操控性的电竞手柄
  • #NOIP 2014#day.2 T1 无限网络发射器选址
  • #每天一道面试题# 什么是MySQL的回表查询
  • $(function(){})与(function($){....})(jQuery)的区别
  • (160)时序收敛--->(10)时序收敛十
  • (pycharm)安装python库函数Matplotlib步骤
  • (附源码)spring boot球鞋文化交流论坛 毕业设计 141436
  • (三) diretfbrc详解
  • (实测可用)(3)Git的使用——RT Thread Stdio添加的软件包,github与gitee冲突造成无法上传文件到gitee
  • (一)搭建springboot+vue前后端分离项目--前端vue搭建
  • (已解决)Bootstrap精美弹出框模态框modal,实现js向modal传递数据
  • (译) 理解 Elixir 中的宏 Macro, 第四部分:深入化
  • (转)jdk与jre的区别
  • (轉貼) 寄發紅帖基本原則(教育部禮儀司頒布) (雜項)
  • (自用)仿写程序
  • (最全解法)输入一个整数,输出该数二进制表示中1的个数。
  • .equals()到底是什么意思?
  • .Net 知识杂记
  • .net实现客户区延伸至至非客户区