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

【SpringBoot学习笔记】04. Thymeleaf模板引擎

news 文章来源：https://blog.csdn.net/weixin_45037690/article/details/132249643 2025/5/9 8:36:00

模板引擎

所有的html元素都可以被thymeleaf替换接管 th:元素名

templates下的只能通过Controller来跳转，templates前后端分离，需要模板引擎thymeleaf支持

模板引擎的作用就是我们来写一个页面模板，比如有些值呢，是动态的，我们写一些表达式。而这些值，从哪来呢，就是我们在后台封装一些数据。然后把这个模板和这个数据交给我们模板引擎，模板引擎按照我们这个数据帮你把这表达式解析、填充到我们指定的位置，然后把这个数据最终生成一个我们想要的内容给我们写出去，这就是我们这个模板引擎，不管是jsp还是其他模板引擎，都是这个思想。只不过呢，就是说不同模板引擎之间，他们可能这个语法有点不一样。其他的我就不介绍了，我主要来介绍一下SpringBoot给我们推荐的Thymeleaf模板引擎，这模板引擎呢，是一个高级语言的模板引擎，他的这个语法更简单。而且呢，功能更强大。

补充：什么是前后端分离

其实简单来说，就是前端和后端分开开发，分开部署。
我们以Javaweb开发为例子：在学习web开发的时候会接触到SpringMVC，Spring MVC开发的时候一般都用jsp作为页面展示，后端servlet处理请求。再到SpringBoot框架，前端使用thymeleaf或者freemarker作为模版引擎展示，后端用controller处理请求。
其中jsp和thymeleaf，freemarker都有一个共同点：页面都是可以内嵌java代码的。页面里面嵌入了java（后端程序设计语言）代码，就导致页面和后端服务的耦合度特别高——前后端开发的时候粘在一起了。而如果我们要部署spring mvc/springboot的项目的话，前后端代码也都是打包在一个war包/jar包里的，部署的时候也是一起部署的，就导致前端要修改/后端要修改的话项目都要重新打包部署——前后端部署也粘在一起了。
怎样才算分开开发呢？那当然就是前端页面只用写html + js + css，后端不用写jsp，不用使用thymeleaf等模板引擎来做html的渲染了。

引入Thymeleaf

怎么引入呢，对于springboot来说，什么事情不都是一个start的事情嘛，我们去在项目中引入一下。给大家三个网址：

Thymeleaf 官网：https://www.thymeleaf.org/

Thymeleaf 在Github 的主页：https://github.com/thymeleaf/thymeleaf

Spring官方文档：找到我们对应的版本

https://docs.spring.io/spring-boot/docs/2.2.5.RELEASE/reference/htmlsingle/#using-boot-starter

找到对应的pom依赖：可以适当点进源码看下本来的包！

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

Thymeleaf分析

我们可以在其中看到默认的前缀和后缀！

我们只需要把我们的html页面放在类路径下的templates下，thymeleaf就可以帮我们自动渲染了。

使用thymeleaf什么都不需要配置，只需要将他放在指定的文件夹下即可！

Thymeleaf 语法学习

Thymeleaf 官网：https://www.thymeleaf.org/

我们做个最简单的练习：我们需要查出一些数据，在页面中展示

1、修改测试请求，增加数据传输

@RequestMapping("/t1")
public String test1(Model model){//存入数据model.addAttribute("msg","Hello,Thymeleaf");//classpath:/templates/test.htmlreturn "test";
}

2、我们要使用thymeleaf，需要在html文件中导入命名空间的约束，方便提示。

我们可以去官方文档的#3中看一下命名空间拿来过来：

 xmlns:th="http://www.thymeleaf.org"

3、我们去编写下前端页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>狂神说</title>
</head>
<body>
<h1>测试页面</h1><!--th:text就是将div中的内容设置为它指定的值，和之前学习的Vue一样-->
<div th:text="${msg}"></div>
</body>
</html>

【SpringBoot学习笔记】04. Thymeleaf模板引擎

模板引擎

引入Thymeleaf

Thymeleaf分析

Thymeleaf 语法学习

相关文章：

【SpringBoot学习笔记】04. Thymeleaf模板引擎

【uni-app】 .sync修饰符与$emit(update:xxx)实现数据双向绑定

链表之第二回

【sgDragSize】自定义拖拽修改DIV尺寸组件，适用于窗体大小调整

Gson与FastJson详解

LeetCode150道面试经典题-- 有效的字母异位词(简单)

前端与人工智能

神经网络基础-神经网络补充概念-14-逻辑回归中损失函数的解释

UG NX二次开发（C++）-PK函数创建一条圆弧曲线

AndroidStudio中修改打包生成的apk名称

多个springboot整合使用rabbitmq(使用注解的方式)

《Effective C++中文版，第三版》读书笔记2

虫情测报系统的工作原理及功能优势

UWB定位技术详细介绍

PiplineADC学习一：

Linux elasticsearch设置为开机自启动服务

WinForm内嵌Unity3D

关于vue中v-for绑定数据重新渲染的问题

全面解析 Axios 请求库的基本使用方法

rust踩雷笔记3——生命周期的理解

windows权限维持—黄金白银票据隐藏用户远控RustDeskGotoHttp

vscode conda activate激活环境出错

信息与通信工程面试准备——数学知识｜正态分布｜中心极限定理

Mybatis多表查询与动态SQL的使用

url 和 uri 有什么区别？

HCIP VLAN实验

无涯教程-Perl - waitpid函数

Redis之缓存雪崩、缓存击穿、缓存穿透问题

九五从零开始的运维之路（其三十五）

5G科技防汛，助力守护一方平安