SpringBoot-06-模板引擎Thymeleaf

6. 模板引擎 Thymeleaf

Thyme leaf 英译为百里香的叶子。

模板引擎

以前开发中使用的jsp就是一个模板引擎，但是springboot 以jar的方式，并且使用嵌入式的tomcat，所以默认不支持jsp。

Springboot推荐使用模板引擎，除了jsp，还有用的比较多的freemarker，包括springboot推荐的Thymeleaf。它们的思想都是一样的，如下：

在这里插入图片描述

模板引擎的作用：

写一个页面模板，加上后台封装好的数据，交给模板引擎。它按照我们的数据进行表达式解析，填充到指定位置，最终生成想要的内容再写出去。

引入Thymeleaf

怎么引入呢，对于springboot来说，只是一个start的事情。我们在项目中引入一下。

提供三个网址：

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

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

Spring官方文档:https://docs.spring.io/spring-boot/docs/2.3.2.RELEASE/reference/htmlsingle/#using-boot-starter

找到对应的pom依赖：

<!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf-spring5 -->
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
    <version>3.0.11.RELEASE</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.thymeleaf.extras/thymeleaf-extras-java8time -->
<dependency>
    <groupId>org.thymeleaf.extras</groupId>
    <artifactId>thymeleaf-extras-java8time</artifactId>
    <version>3.0.4.RELEASE</version>
</dependency>

Maven会自动下载jar包，我们可以看到：

在这里插入图片描述

Thymeleaf分析

我们首先按照springboot的自动配置原理看一下Thymeleaf的自动配置规则，找到自动配置类：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";
   private boolean checkTemplate = true;
   private boolean checkTemplateLocation = true;
   private String prefix = DEFAULT_PREFIX;
   private String suffix = DEFAULT_SUFFIX;
   private String mode = "HTML";
   private Charset encoding = DEFAULT_ENCODING;
}

我们可以看到默认的前后缀！

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

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

测试

测试步骤：

编写一个TestController

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

编写一个测试页面 test.html放在templates目录下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>test</h1>
</body>
</html>

启动项目请求测试

小结：

如果使用thymeleaf，只需要导入对应的依赖即可！

html放在templates目录下。

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

Thymeleaf语法学习

要学习语法，参考官网文档为准，我们找到对应的版本看看：

【做一个简单的练习：我们需要查出一些数据，在页面中展示】步骤如下：

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

model.addAttribute("msg","hello thymeleaf");

我们要使用thymeleaf，需要在html文件中导入命名空间的约束，方便提示。我们可以去官方文档#3看一下命名空间：
```
<html xmlns:th="http://www.thymeleaf.org">
```
编写前端页面
```
<div th:text="${msg}">

</div>
```
启动测试

Thymeleaf的使用语法：

我们可以使用任意的th:attr来替换html中原生属性的值
我们可以写哪些表达式？

练习测试

编写一个controller，放一些数据

@Controller
public class TestController {
    @RequestMapping("/test")
    public String test(Model model) {
        model.addAttribute("msg","<h1>hello thymeleaf</h1>");
        model.addAttribute("users", Arrays.asList("111","222","333"));
        return "test";
    }
}

测试页面取出数据

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>test</h1>
<!--所有的html元素都可以被thymeleaf替换接管，th:+元素名，如th:class="" -->
<div th:text="${msg}"></div>
<div th:utext="${msg}"></div>
<hr>
<!--建议第一种写法-->
<h3 th:each="user : ${users}" th:text="${user}"></h3>
<hr>
<h3 th:each="user : ${users}" >[[${user}]]</h3>


</body>
</html>

启动项目测试！

记住一句话：

需要使用什么，根据官方文档来查询，才是最重要的，要熟练使用官方文档！

posted @ 2020-10-10 16:19 CodeHuba 阅读(168) 评论(0) 编辑收藏举报

刷新页面返回顶部

CodeHuba

SpringBoot-06-模板引擎Thymeleaf

6. 模板引擎 Thymeleaf

公告