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依赖：

    org.thymeleaf
    thymeleaf-spring5
    3.0.11.RELEASE



    org.thymeleaf.extras
    thymeleaf-extras-java8time
    3.0.4.RELEASE

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

[图片上传失败...(image-c4ee3-1602317987865)]

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什么都不需要配置，只需要将他放在指定的文件夹下即可！

测试

测试步骤：

1. 编写一个TestController

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

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

   
   
   
       
       
   
   
   test
   
   
   

3. 启动项目请求测试

小结：

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

2. html放在templates目录下。

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

Thymeleaf语法学习

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

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

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

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

2. 我们要使用thymeleaf，需要在html文件中导入命名空间的约束，方便提示。我们可以去官方文档#3看一下命名空间：

3. 编写前端页面

4. 启动测试

image-20200812105224742.png

Thymeleaf的使用语法：

1. 我们可以使用任意的th:attr来替换html中原生属性的值

   在这里插入图片描述

2. 我们可以写哪些表达式？

   在这里插入图片描述

在这里插入图片描述

练习测试

1. 编写一个controller，放一些数据

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

2. 测试页面取出数据

   
   
   
       
       
   
   
   test
   
   
   
   
   
   
   
   [[${user}]]
   
   
   
   
   

3. 启动项目测试！

   在这里插入图片描述

记住一句话：

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