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

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

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

    org.springframework.boot
    spring-boot-starter-thymeleaf

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

@Controller
public class TestController {

  
  @GetMapping("index1")
  public String index(Model model) {
    model.addAttribute("id", "1");
    model.addAttribute("title", "SpringBoot Thymeleaf");
    model.addAttribute("author", "Java程序鱼");
    return "index1";
  }

  
  @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;
  }

  
  @GetMapping("index3")
  public String index3(ModelMap modelMap) {
    modelMap.addAttribute("id", "3");
    modelMap.addAttribute("title", "SpringBoot Thymeleaf3");
    modelMap.addAttribute("author", "Java程序鱼");
    return "index3";
  }
}

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

    
    


    id
    title
    author

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

@Controller
public class BlogController {

  @GetMapping("each")
  public String each(Model model) {
    ArrayList 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】

	

	    

	    

	        
ID
	        
标题
	        
作者
	    
	    
	    

	    

	        

	        

	        

	    
	    
	

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】

    th:if id==1
    th:if id!=1

    th:unless id==1
    th:unless id!=1

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

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

【include.html】

    
    


    
    
    博客正文
    

【commonFooter.html】

    
    


    
        博客的底部
    

【commonHead.html】

    
    


    
        博客的头部
    

在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的官方文档来深入学习使用。

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

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