SpringBoot2.X基础教程：SpringBoot整合Thymeleaf

缺乏、安全感 2022-09-12 14:46 245阅读 0赞

> 微信号：hzy1014211086，如果你正在学习Spring Boot，可以加入我们的Spring技术交流群，共同成长

### 文章目录 ###

*  一、静态文件
 *  二、模板引擎
 *  三、Thymeleaf模板引擎
 *  四、引入依赖
 *  五、编写controller
 *  六、编写html
 *  七、语法
 *   *  th:each
     *  th:if
     *  th:replace&th:include
 *  八、Thymeleaf的默认参数配置
 *  九、源码

--------------------

对于Web项目来说，前后端分离模式是目前最为流行的，目前前端框架非常完善，前后端分离方案也非常成熟。前后端分离可以帮助Web类产品的开发团队更好的拆分任务，以及让开发人员更加聚焦在某一端的开发技术之上。但是据我了解，小部分中小型公司的管理后台前后端是不分离的，而在前后端不分的开发中，我们就会需要用到Thymeleaf。

接下来，我们就来具体讲讲在Spring Boot应用中，如何使用Thymeleaf模板引擎开发Web页面类的应用。

# 一、静态文件 #

当使用Spring Boot来开发一个完整的系统时，我们往往需要用到前端页面，这就不可或缺地需要访问到静态资源，比如图片、css、js等文件。

Spring Boot使用 WebMvcAutoConfiguration 中的配置各种属性, 默认为我们提供了静态资源处理。如果需要特殊处理的再通过配置进行修改。

SpringBoot 框架默认提供的静态资源目录的位置需放置于 classpath下，且要求了命名的规范，目录名应遵守的命名规范如下：

*  /static
 *  /public
 *  /resources
 *  /META-INF/resources

# 二、模板引擎 #

除了 REST web 服务之外，您还可以使用 Spring MVC 来服务动态 HTML 内容。Spring MVC 支持多种模板技术，包括 Thymeleaf、FreeMarker 和 JSP。当然，许多其他模板引擎也有自己的 Spring MVC 集成。

Spring Boot支持多种模版引擎包括：

*  FreeMarker
 *  Groovy
 *  Thymeleaf(官方推荐)
 *  Mustache

JSP技术Spring Boot官方是不推荐的，原因有四：

*  tomcat 只支持 war 的打包方式，不支持可执行的 jar。
 *  Jetty 嵌套的容器不支持 jsp。
 *  Undertow 不支持 JSP。
 *  创建自定义 error.jsp 页面不会覆盖错误处理的默认视图，而应该使用自定义错误页面

当你使用上述模板引擎中的任何一个，它们默认的模板配置路径为：src/main/resources/templates。当然也可以修改这个路径，具体如何修改，可在后续各模板引擎的配置属性中查询并修改。

# 三、Thymeleaf模板引擎 #

Thymeleaf是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎，适用于 Web 和独立环境的现代服务器端 Java 模板引擎，它跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下三个特点：

*  Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 Thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
 *  Thymeleaf 开箱即用的特性。它提供标准和 Spring 标准两种方言，可以直接套用模板实现 JSTL、 OGNL表达式效果，避免每天套模板、改 Jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
 *  Thymeleaf 提供 Spring 标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

# 四、引入依赖 #

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

# 五、编写controller #

在前面的几篇文章中，我们都是使用了 @RestController 来处理请求，返回的内容为 JSON 对象，那么如果需要渲染 html 页面，要如何实现呢？

@Controller
    public class TestController {
        
    
      /**
       * 方案一
       * @param model
       * @return
       */
      @GetMapping("index1")
      public String index(Model model) {
        
        model.addAttribute("id", "1");
        model.addAttribute("title", "SpringBoot Thymeleaf");
        model.addAttribute("author", "Java程序鱼");
        return "index1";
      }
    
      /**
       * 方案二
       * @return
       */
      @GetMapping("index2")
      public Object index2() {
        
        ModelAndView modelAndView = new ModelAndView("/index2");
    
        modelAndView.addObject("id", "2");
        modelAndView.addObject("title", "SpringBoot Thymeleaf2");
        modelAndView.addObject("author", "Java程序鱼");
        return modelAndView;
      }
    
      /**
       * 方案三
       * @param modelMap
       * @return
       */
      @GetMapping("index3")
      public String index3(ModelMap modelMap) {
        
        modelMap.addAttribute("id", "3");
        modelMap.addAttribute("title", "SpringBoot Thymeleaf3");
        modelMap.addAttribute("author", "Java程序鱼");
        return "index3";
      }
    }

# 六、编写html #

在 src/main/resources/templates 下创建index1.html、index2.html、index3.html三个文件，代码都一样。

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>index1</title>
    </head>
    <body>
        <th th:text="${id}">id</th>
        <th th:text="${title}">title</th>
        <th th:text="${author}">author</th>
    </body>
    </html>

![在这里插入图片描述][5fae153480134fb5b526aa15dc536c3b.png]

# 七、语法 #

## th:each ##

Thymeleaf 中使用 th:each 来进行 for 循环遍历

@Controller
    public class BlogController {
        
    
      @GetMapping("each")
      public String each(Model model) {
        
        ArrayList<Blog> list = new ArrayList<>();
        list.add(new Blog(1, "each1", "java程序鱼1"));
        list.add(new Blog(2, "each2", "java程序鱼2"));
        list.add(new Blog(3, "each3", "java程序鱼3"));
    
        model.addAttribute("list", list);
        return "each";
      }
    }

【each.html】

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASmF2Yeeoi-W6j-mxvA_size_19_color_FFFFFF_t_70_g_se_x_16]

## th:if ##

Thymeleaf 中使用 th:if 和 th:unless 属性进行条件判断，th:if 是表达式中的条件成立显示内容，th:unless 是表达式中的条件不成立才显示内容。

@Controller
    public class BlogController {
        
      @GetMapping("if")
      public String ifHtml(Model model) {
        
        model.addAttribute("id", 1);
        return "if";
      }
    }

【if.html】

<body>
        <div th:if="${id == 1}">th:if id==1</div>
        <div th:if="${id != 1}">th:if id!=1</div>
    
        <div th:unless="${id == 1}">th:unless id==1</div>
        <div th:unless="${id != 1}">th:unless id!=1</div>
    </body>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASmF2Yeeoi-W6j-mxvA_size_17_color_FFFFFF_t_70_g_se_x_16]

## th:replace&th:include ##

th:include，布局标签，替换内容到引入的文件  
th:replace，布局标签，替换整个标签到引入的文件

我们在开发中需要把通用的部分都提取出来，例如文章的头部和底部，把文章的头部和底部弄成单独的页面，然后让其他页面包含头部和底部，这就是代码复用思维。

【include.html】

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Thymeleaf include</title>
    </head>
    <body>
        
        <div class="commonHead" th:replace="commonHead::commonHead"></div>
        博客正文
        <div class="commonFooter" th:replace="commonFooter::commonFooter"></div>
    </body>
    </html>

【commonFooter.html】

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>通用代码-底部</title>
    </head>
    <body>
        <div class="commonFooter" th:fragment="commonFooter">
            博客的底部
        </div>
    </body>
    </html>

【commonHead.html】

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>通用代码-头部</title>
    </head>
    <body>
        <div class="commonHead" th:fragment="commonHead">
            博客的头部
        </div>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASmF2Yeeoi-W6j-mxvA_size_19_color_FFFFFF_t_70_g_se_x_16 1]

# 八、Thymeleaf的默认参数配置 #

在application.properties中可以配置thymeleaf模板解析器属性

# THYMELEAF (ThymeleafAutoConfiguration)
    #开启模板缓存（默认值：true）
    spring.thymeleaf.cache=true 
    #Check that the template exists before rendering it.
    spring.thymeleaf.check-template=true 
    #检查模板位置是否正确（默认值:true）
    spring.thymeleaf.check-template-location=true
    #Content-Type的值（默认值：text/html）
    spring.thymeleaf.content-type=text/html
    #开启MVC Thymeleaf视图解析（默认值：true）
    spring.thymeleaf.enabled=true
    #模板编码
    spring.thymeleaf.encoding=UTF-8
    #要被排除在解析之外的视图名称列表，用逗号分隔
    spring.thymeleaf.excluded-view-names=
    #要运用于模板之上的模板模式。另见StandardTemplate-ModeHandlers(默认值：HTML5)
    spring.thymeleaf.mode=HTML5
    #在构建URL时添加到视图名称前的前缀（默认值：classpath:/templates/）
    spring.thymeleaf.prefix=classpath:/templates/
    #在构建URL时添加到视图名称后的后缀（默认值：.html）
    spring.thymeleaf.suffix=.html
    #Thymeleaf模板解析器在解析器链中的顺序。默认情况下，它排第一位。顺序从1开始，只有在定义了额外的TemplateResolver Bean时才需要设置这个属性。
    spring.thymeleaf.template-resolver-order=
    #可解析的视图名称列表，用逗号分隔
    spring.thymeleaf.view-names=

更多Thymeleaf的页面语法，可以访问[Thymeleaf的官方文档][Thymeleaf]来深入学习使用。

# 九、源码 #

本文的相关例子可以查看下面仓库中的 **chapter3** 目录：

*  Gitee：https://gitee.com/hezhiyuan007/spring-boot-study
 *  Github：https://github.com/java-fish-0907/spring-boot-study

[5fae153480134fb5b526aa15dc536c3b.png]: /images/20220828/1fcb6096f3ca4a74a40e531316f9a9ee.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASmF2Yeeoi-W6j-mxvA_size_19_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/8fe5a66e11fe4ba6b7bace4f7cfebd69.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASmF2Yeeoi-W6j-mxvA_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/7e54de33c7ed47ba955ec5fec193adae.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASmF2Yeeoi-W6j-mxvA_size_19_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/2fc4cc4712654e00b4cbef72559a52f1.png
[Thymeleaf]: https://www.thymeleaf.org/