Thymeleaf学习总结——前后端的桥梁

最新推荐文章于 2023-11-02 10:06:15 发布

福建选手阿俊

最新推荐文章于 2023-11-02 10:06:15 发布

阅读量3.3k

点赞数 7

分类专栏：开发实战

本文链接：https://blog.csdn.net/qq_44891295/article/details/104145307

版权

本文介绍了Thymeleaf模板引擎的原理和在Spring Boot中的应用。Thymeleaf作为HTML的模板引擎，适用于web和非web环境。Spring Boot集成Thymeleaf，模板文件存放在resources/templates目录下。文章详细讲解了Thymeleaf的语法，包括标准表达式、选择变量表达式、URL表达式等，并通过实例展示了如何在Spring Boot中配置和使用Thymeleaf。

摘要由CSDN通过智能技术生成

1：认识Thymeleaf

Thymeleaf是一个流行的模板引擎，该模板引擎采用Java语言开发；
模板引擎是一个技术名词，是跨领域跨平台的概念，在Java语言体系下有模板引擎，在C#、PHP语言体系下也有模板引擎，甚至在JavaScript中也会用到模板引擎技术；
Java生态下的模板引擎有 Thymeleaf 、Freemaker、Velocity、Beetl（国产）等；
Thymeleaf模板既能用于web环境下，也能用于非web环境下，在非web环境下， 它能直接显示模板上的静态数据，在web环境下，它能像JSP一样从后台接收数据并替换掉模板上的静态数据；
Thymeleaf 它是基于HTML的，以HTML标签为载体，Thymeleaf 要寄托在HTML的标签下实现对数据的展示；
Spring boot 集成了thymeleaf模板技术，并且spring boot官方也推荐使用thymeleaf来替代JSP技术。
thymeleaf是另外的一种模板技术，它本身并不属于springboot，springboot只是很好地集成这种模板技术，作为前端页面的数据展示；

2：Spring boot 集成 Thymeleaf

Springboot使用thymeleaf作为视图展示，约定将模板文件放置在src/main/resource/templates目录下，静态资源放置在src/main/resource/static目录下

Spring boot 集成 Thymeleaf的步骤：
第一步：在Maven中引入Thymeleaf的依赖，加入以下依赖配置即可：
pom.xml

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

第二步：在Spring boot的核心配置文件application.properties中对Thymeleaf进行配置：

application.properties

#开发阶段，建议关闭thymeleaf的缓存（为热部署做准备）
spring.thymeleaf.cache=false

#使用遗留的html5以去掉对html标签的校验
spring.thymeleaf.mode=LEGACYHTML5

注意：1：在使用springboot的过程中，如果使用thymeleaf作为模板文件，则要求HTML格式必须为严格的html5格式，必须有结束标签，否则会报错；
:2：如果不想对标签进行严格的验证，使用spring.thymeleaf.mode=LEGACYHTML5（在application.properties中配置）去掉验证，去掉该验证，则需要引入如下依赖，否则会报错：

pom.xml

<dependency>
    <groupId>net.sourceforge.nekohtml</groupId>
    <artifactId>nekohtml</artifactId>
</dependency>

NekoHTML是一个Java语言的 HTML扫描器和标签补全器 ,这个解析器能够扫描HTML文件并“修正”HTML文档中的常见错误。NekoHTML能增补缺失的父元素、自动用结束标签关闭相应的元素，修复不匹配的内嵌元素标签等；

第三步：测试
写一个Controller去映射到模板页面（和SpringMVC基本一致），

@Controller
public class HelloController {
   

    @GetMapping("/thymeleaf")
    public String hello(Model model){
   
        model.addAttribute("msg","你好thymeleaf");
        return "success";
    }
}

在src/main/resources的templates下新建一个index.html页面用于展示数据：
success.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a th:text="${msg}">demo</a>
</body>
</html>

在这里插入图片描述

3：Thymeleaf语法

3.1 Thymeleaf 的标准表达式

3.1.1 标准变量表达式

语法：${…}
变量表达式用于访问容器（tomcat）上下文环境中的变量，功能和 JSTL 中的 ${} 相同；
Thymeleaf 中的变量表达式使用 ${变量名} 的方式获取其中的数据
举例：在Spring mvc 的 Controllar中使用map.put向前端传输数据，代码如下：

HelloController .java

@Controller
public class HelloController {
   

   @RequestMapping("/hello")
   public String hello(Map<Object,Object> map){
   
       Student student=new Student("zzz",14,"90");
       map.put("msg",student);
        return "sucess";
   }
}

前端接受代码
sucess.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
<a th:text="${msg.getName()}">ad</a>
<a th:text="${msg.getAge()}">ad</a>
<a th:text="${msg.getCore()}">ad</a>
</body>
</html>

在这里插入图片描述

3.1.2 选择变量表达式

语法：{…}
选择变量表达式，也叫星号变量表达式，使用 th:object 属性来绑定对象，

选择表达式首先使用th:object来邦定后台传来的User对象，然后使用 * 来代表这个对象，后面 {} 中的值是此对象中的属性；

举例：
HelloController .java

@Controller
public class HelloController {
   

   @RequestMapping("/hello")
   public String hello(Map<Object,Object> map){
   
       Student student=new Student("zzz",14,"90");
       map.put("msg",student);
        return "sucess"