SpringBoot(14) —— thymeleaf

最新推荐文章于 2024-09-05 23:16:39 发布

原来是小别扇

最新推荐文章于 2024-09-05 23:16:39 发布

阅读量270

点赞数

分类专栏： SpringBoot 文章标签： spring boot thymeleaf

本文链接：https://blog.csdn.net/Jzandth/article/details/108861876

版权

SpringBoot 专栏收录该内容

53 篇文章 10 订阅

订阅专栏

1.模板引擎

前端交给我们的页面，是html页面。如果是我们以前开发，我们需要把他们转成jsp页面，jsp好处就是当我们查出一些数据转发到JSP页面以后，我们可以用jsp轻松实现数据的显示，及交互等
jsp支持非常强大的功能，包括能写Java代码，但是呢，我们现在的这种情况，SpringBoot这个项目首先是以jar的方式，不是war；第二，我们用的还是嵌入式的Tomcat，所以呢，他现在默认是不支持jsp的
那不支持jsp，如果我们直接用纯静态页面的方式，那给我们开发会带来非常大的麻烦，那怎么办呢？SpringBoot推荐你可以来使用模板引擎
模板引擎，其实大家听到很多了，其实jsp就是一个模板引擎，还有用的比较多的freemarker，包括SpringBoot给我们推荐的Thymeleaf，模板引擎有非常多，但再多的模板引擎，他们的思想都是一样的，什么样一个思想呢？我们来看一下这张图：
模板引擎的作用就是我们来写一个页面模板，而页面上有些要显示的数据是动态的，需要读取后台数据，所以这些数据我们就在页面模板上写一些表达式，后台封装这些数据传到前端，并将页面模板和这些封装的数据交给我们的模板引擎，模板引擎将会帮我们把这表达式解析、并将接收到的数据填充到我们指定的位置上，最后生成一个经过数据渲染的页面返回出去，这就是模板引擎，不管是jsp还是其他模板引擎，都是这个思想/原理
只不过不同模板引擎之间，他们可能语法点不一样。其他的就不介绍了，主要来介绍一下SpringBoot给我们推荐的Thymeleaf模板引擎，这模板引擎是一个高级语言的模板引擎，它的语法相较于传统的JSP更简单，并且功能更强大

2.导入thymeleaf依赖

要使用首先就要引入，在我们创建springBoot项目的时候我们可以在选择依赖的时候引入thymeleaf模板引擎
我们也可以手动导入

首先点击上面的spring官方文档
在这里插入图片描述

        <!--thymeleaf依赖-->
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf-spring5</artifactId>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf.extras</groupId>
            <artifactId>thymeleaf-extras-java8time</artifactId>
        </dependency>

首先我们还是来分析一下springBoot项目对于thymeleaf配置的源码

@Configuration(proxyBeanMethods = false)
@EnableConfigurationProperties(ThymeleafProperties.class)
@ConditionalOnClass({ TemplateMode.class, SpringTemplateEngine.class })
@AutoConfigureAfter({ WebMvcAutoConfiguration.class, WebFluxAutoConfiguration.class })
public class ThymeleafAutoConfiguration {}

明显看到了配置参数类的注解@EnableConfigurationProperties

点进ThymeleafProperties类中查看

@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {

	private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;

	public static final String DEFAULT_PREFIX = "classpath:/templates/";

	public static final String DEFAULT_SUFFIX = ".html";
}

明显我们可以发现，ThymeleafProperties 类中有两个常量，一个是默认前缀，一个是默认后缀
所以Thymeleaf引擎在解析页面模板的时候它是会去resources文件夹下的templates文件夹下面找匹配controller返回的字符串作为名称的html页面
所以springBoot中对于controller指定的视图跳转，指定的视图需要都存储在templates文件夹下；视图解析器的配置已经设置好了，我们可以在配置文件application中进行修改，但是我们一般都使用的默认配置

提问：问什么我们导入了thymeleaf的依赖之后springBoot就可以直接使用它了呢？
因为我们的"META-INF/spring.factories"里面有一个叫ThymeleafAutoConfiguration的自动配置类的全限定名，所以当我们导入了thymeleaf的依赖之后，加载它的条件就满足了，所以我们就可以享受这个自动配置类为我们配置的服务
thymeleaf主要就是负担了原来的controller和view两层的交互(主要就是参数传递和视图跳转)，所以这也验证了上面源码中thymeleaf源码对视图解析器的前缀和后缀的设置

在templates下创建一个html页面test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>Thymeleaf模板引擎解析的页面模板</h2>
</body>
</html>

编写一个跳转这个页面模板的controller

package com.thhh.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class IndexController {
    @RequestMapping("/test01")
    public String test01(){
        return "test";
    }
}

启动项目测试

3.使用thymeleaf

首先参看官方文档给出的第一个使用案例

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>Good Thymes Virtual Grocery</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" type="text/css" media="all"
		href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" />
	</head>
	<body>
		<p th:text="#{home.welcome}">Welcome to our grocery store!</p>
	</body>
</html>

首先导入thymeleaf的约束
```
xmlns:th="http://www.thymeleaf.org"
```
使用语法
thymeleaf页面模板使用起来比较简单，在引入了上面的约束之后，我们就可以在任何标签中使用"th:属性名称"来接管这个标签的任何属性，我们就可以通过控制元素的属性，在元素的属性中使用thymeleaf指定的数据占位符取出后端传回来的数据
```
//thymeleaf页面模板取值的表达式

- Simple expressions:
	- Variable Expressions: ${...}	//变量
	- Selection Variable Expressions: *{...}	//变量表达式
	- Message Expressions: #{...}
	- Link URL Expressions: @{...}
	- Fragment Expressions: ~{...}
```

创建一个thymeleaf数据模板

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" >
    <title>Title</title>
</head>
<body>
    <h2>Thymeleaf模板引擎解析的页面模板</h2>
    <div th:text="${msg}"></div>
</body>
</html>

在这里插入图片描述

controller跳转上面这个视图的时候传递参数，供前端解析展示

package com.thhh.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class IndexController {
    @RequestMapping("/test01")
    public String test01(Model model){
        model.addAttribute("msg","Hello thymeleaf");
        return "test";
    }
}

测试效果
注意：我们不能直接在页面上使用th的取值表达式

4.小结

要使用thymeleaf，只需要导入对应的依赖，并在resources文件夹下的templates文件下创建要跳转的视图模板即可，在我们通过controller跳转视图的时候，thymeleaf引擎就会去这个文件夹下面找controller指定的那个视图模板，并将后台传回来的数据在视图模板上进行渲染，最后将渲染好的视图返回
视图模板需要导入约束之后才能使用th表达式获取后端传回来的数据