前言

　　thymeleaf是springboot官方推荐使用的java模板引擎，在springboot的参考指南里的第28.1.10 Template Engines中介绍并推荐使用thymeleaf，建议我们应该避免使用jsp，jsp的本质是一个java的servlet类，jsp引擎将jsp的内容编译成.class，"out.write"输出到response再响应到浏览器，虽然java是一次编译，到处运行，但也大大增加了服务器压力，而且jsp将后台java语言嵌入页面，还要放入服务容器才能打开，前后端不分离，严重增加了前端工程师的开发工作、效率。

　　thymeleaf官网对thymeleaf的介绍：

　　Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

　　Thymeleaf's main goal is to bring elegant natural templates to your development workflow — HTML that can be correctly displayed in browsers and also work as static prototypes, allowing for stronger collaboration in development teams.

　　With modules for Spring Framework, a host of integrations with your favourite tools, and the ability to plug in your own functionality, Thymeleaf is ideal for modern-day HTML5 JVM web development — although there is much more it can do.

　　thymeleaf使用教程，骚操作：鼠标右键，翻译成简体中文再看。

　　thymeleaf使用th属性赋予每个标签与后台交互的能力，当html文件在本地直接用浏览器打开，浏览器引擎会忽略掉th属性，并正常渲染页面，当把html文件放到服务容器访问，th属性与后台交互，获取数据替换原先的内容，这样前端工程师在编写html页面时，在本地开发，正常实现页面逻辑效果即可，数据先写死，当放到服务容器时数据从后台获取。

　　spring对thymeleaf的配置，来自springboot参考手册，Common application properties：https://docs.spring.io/spring-boot/docs/2.1.0.RELEASE/reference/htmlsingle/#common-application-properties

# THYMELEAF (ThymeleafAutoConfiguration)
spring.thymeleaf.cache=true # Whether to enable template caching.
spring.thymeleaf.check-template=true # Whether to check that the template exists before rendering it.
spring.thymeleaf.check-template-location=true # Whether to check that the templates location exists.
spring.thymeleaf.enabled=true # Whether to enable Thymeleaf view resolution for Web frameworks.
spring.thymeleaf.enable-spring-el-compiler=false # Enable the SpringEL compiler in SpringEL expressions.
spring.thymeleaf.encoding=UTF-8 # Template files encoding.
spring.thymeleaf.excluded-view-names=# Comma-separated list of view names (patterns allowed) that should be excluded from resolution.
spring.thymeleaf.mode=HTML # Template mode to be applied to templates. See also Thymeleaf's TemplateMode enum.
spring.thymeleaf.prefix=classpath:/templates/ # Prefix that gets prepended to view names when building a URL.
spring.thymeleaf.reactive.chunked-mode-view-names=# Comma-separated list of view names (patterns allowed) that should be the only ones executed in CHUNKED mode when a max chunk size is set.
spring.thymeleaf.reactive.full-mode-view-names=# Comma-separated list of view names (patterns allowed) that should be executed in FULL mode even if a max chunk size is set.
spring.thymeleaf.reactive.max-chunk-size=0B # Maximum size of data buffers used for writing to the response.
spring.thymeleaf.reactive.media-types=# Media types supported by the view technology.
spring.thymeleaf.render-hidden-markers-before-checkboxes=false # Whether hidden form inputs acting as markers for checkboxes should be rendered before the checkbox element itself.
spring.thymeleaf.servlet.content-type=text/html # Content-Type value written to HTTP responses.
spring.thymeleaf.servlet.produce-partial-output-while-processing=true # Whether Thymeleaf should start writing partial output as soon as possible or buffer until template processing is finished.
spring.thymeleaf.suffix=.html # Suffix that gets appended to view names when building a URL.
spring.thymeleaf.template-resolver-order=# Order of the template resolver in the chain.
spring.thymeleaf.view-names=# Comma-separated list of view names (patterns allowed) that can be resolved.

　　使用

　　maven引入依赖

        <!--Thymeleaf模板依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

　　项目结构

　　thymeleaf默认，页面跳转默认路径：src/main/resources/templates，静态资源默认路径：src/main/resources/static；

　　yml配置文件

　　我们也可以在配置文件中修改它：classpath:/view/

　　controller页面跳转

　　使用ModelAndView进行跳转，将数据add进去

    @RequestMapping("/login.do")
    public ModelAndView login(User user){
        Result result=userService.login(user);
        ModelAndView mv=new ModelAndView();
        mv.addObject("newText","你好，Thymeleaf！");
        mv.addObject("gender","1");
        mv.addObject("userList",result.getData());
        if(result.getData()!=null) {
            mv.addObject("loginUser",result.getData());
        }
        mv.setViewName("index.html");
        return mv;
    }

　　html页面取值

　　引入命名空间，避免校验错误<html xmlns:th="http://www.thymeleaf.org">

<!DOCTYPE html>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>srpingboot</title>
</head>
<body>
    <!-- 属性替换，其他属性同理 -->
    <h1 th:text="${newText}">Hello World</h1>
    <!--
        设置多个attr
        th:attr="id=${user.id},data-xxx=${user.xxx},data-yyy=${user.yyy}"

        片段的使用、传值和调用
        <div th:fragment="common(text1,text2)">
            ...
        </div>
        th:insert 是最简单的：它只是插入指定的片段作为其主机标签的主体。
        <div th:insert="base ::common(${text1},${text2})"></div>

        th:replace实际上用指定的片段替换它的主机标签。
        <div th:replace="base ::common(${text1},${text2})"></div>
　　　　
　　　　　三目表达式：
　　　　　<h3 th:text="${loginUser !=null} ? ${loginUser.username} : '请登录'"></h3>　

    -->

    <!-- if-else -->
    <h3 th:if="${loginUser} ne null" th:text="${loginUser.username}"></h3>
    <h3 th:unless="${loginUser} ne null">请登录</h3>

    <!-- switch -->
    <div th:switch="${gender}">
        <p th:case="'1'">男</p>
        <p th:case="'0'">女</p>
        <!-- th:case="*"  类似switch中的default -->
        <p th:case="*">其他</p>
    </div>

    <!-- 
　　　　each
　　　　其中，iterStat参数为状态变量，常用的属性有
　　　　index 迭代下标，从0开始
　　　　count 迭代下标，从1开始
　　　　size 迭代元素的总量
　　　　current 当前元素

　　 -->
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>username</th>
                <th>password</th>
                <th>created</th>
                <th>description</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="user,iterStat : ${userList}">
                <td th:text="${user.id}"></td>
                <td th:text="${user.username}"></td>
                <td th:text="${user.password}"></td>
                <td th:text="${user.created}"></td>
                <td th:text="${user.description}"></td>
            </tr>
        </tbody>
    </table>
</body>
<!-- 引入静态资源 -->
<script th:src="@{/js/jquery-1.9.1.min.js}" type="application/javascript"></script>
</html>

　　本地打开

　　服务容器打开，登录失败页面效果

　　服务容器打开，登录成功页面效果

　　标准表达式

　　简单表达
　　变量表达式： ${...}
　　选择变量表达式： *{...}
　　消息表达式： #{...}
　　链接网址表达式： @{...}
　　片段表达式： ~{...}

　　字面
　　文本文字：'one text'，'Another one!'，...
　　号码文字：0，34，3.0，12.3，...
　　布尔文字：true，false
　　空字面： null
　　文字标记：one，sometext，main，...
　　文字操作：
　　字符串连接： +
　　文字替换： |The name is ${name}|

　　算术运算
　　二元运算符：+，-，*，/，%
　　减号（一元运算符）： -

　　布尔运算
　　二元运算符：and，or
　　布尔否定（一元运算符）： !，not

　　比较和平等
　　比较：>，<，>=，<=（gt，lt，ge，le）
　　等值运算符：==，!=（eq，ne）

　　条件运算符
　　if-then: (if) ? (then)
　　if-then-else: (if) ? (then) : (else)
　　default: (value) ?: (defaultvalue)

　　特殊特征符
　　无操作： _

　　所有这些功能都可以组合和嵌套，例：
　　'User is of type ' + (user.isAdmin()?′Administrator′:(user.isAdmin()?′Administrator′:({user.type} ?: 'Unknown'))

　　官网表达式介绍：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#standard-expression-syntax

　　后记

　　springboot+thymeleaf，前后端分离已经成为了趋势，这里进行学习记录整理，以免以后又要到处查资料。

　　补充

　　2019-07-24补充：除此之外，thymeleaf还内置了很多对象，可以从上下文获取数据，还有好多对象的操作方法，具体请看：

　　附录A：表达式基本对象：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-a-expression-basic-objects

　　附录B：表达式实用程序对象：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-b-expression-utility-objects

　　比如：

　　在页面获取项目路径

    //项目路径
    var ctx=[[${#request.getContextPath()}]];

　　判断集合长度

<p th:if="${#lists.size(list)} < 25">
    <p>list集合长度小于25！</p>
</p>

　　字符串全大写、小写

<p th:text="${#strings.toUpperCase(name)}"></p>

<p th:text="${#strings.toLowerCase(name)}"></p>

　　有一点要注意，使用这些内置对象，方法传参里面不需要再用${}来取值了，例如，后台传过来的名称叫name

　　错误使用：

<p th:text="${#strings.toUpperCase($(name))}"></p>

　　正确使用：

<p th:text="${#strings.toUpperCase(name)}"></p>

　　更多内置对象方法请看官网！

　　补充：本地环境不报错，Linux环境下报错，模板不存在：Error resolving template [/bam/login], template might not exist or might not be accessible by any of the configured Template Resolvers

　　解决：

　　把/去掉就可以了

　　代码开源

　　代码已经开源、托管到我的GitHub、码云：

　　GitHub：https://github.com/huanzi-qch/springBoot

　　码云：https://gitee.com/huanzi-qch/springBoot

版权声明

作者：huanzi-qch

出处：https://www.cnblogs.com/huanzi-qch

若标题中有“转载”字样，则本文版权归原作者所有。若无转载字样，本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利.

. Thymeleaf 简介

Thymeleaf 是新一代 Java 模板引擎，与 Velocity、FreeMarker 等传统 Java 模板引擎不同，Thymeleaf 支持 HTML 原型，其文件后缀为“.html”，因此它可以直接被浏览器打开，此时浏览器会忽略未定义的 Thymeleaf 标签属性，展示 thymeleaf 模板的静态页面效果；当通过 Web 应用程序访问时，Thymeleaf 会动态地替换掉静态内容，使页面动态显示。

html<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--th:text 为 Thymeleaf 属性，用于在展示文本-->
<h1 th:text="欢迎您来到Thymeleaf">欢迎您访问静态页面 HTML</h1>
</body>
</html>

当直接使用浏览器打开时，浏览器展示结果如下。

欢迎您访问静态页面HTML

当通过 Web 应用程序访问时，浏览器展示结果如下。

欢迎您来到Thymeleaf

Thymeleaf 的特点:

• 动静结合：Thymeleaf 既可以直接使用浏览器打开，查看页面的静态效果，也可以通过 Web 应用程序进行访问，查看动态页面效果。
• 开箱即用：Thymeleaf 提供了 Spring 标准方言以及一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。
• 多方言支持：它提供了 Thymeleaf 标准和 Spring 标准两种方言，可以直接套用模板实现 JSTL、 OGNL 表达式；必要时，开发人员也可以扩展和创建自定义的方言。
• 与 SpringBoot 完美整合：SpringBoot 为 Thymeleaf 提供了的默认配置，并且还为 Thymeleaf 设置了视图解析器，因此 Thymeleaf 可以与 Spring Boot 完美整合。

2. Thymeleaf 语法规则

在使用 Thymeleaf 之前，首先要在页面的 html 标签中声明名称空间，示例代码如下。

htmlxmlns:th="http://www.thymeleaf.org"

在 html 标签中声明此名称空间，可避免编辑器出现 html 验证错误，但这一步并非必须进行的，即使我们不声明该命名空间，也不影响 Thymeleaf 的使用。

2.1 标准表达式语法

2.1.1 变量表达式

使用${}包裹的表达式被称为变量表达式，该表达式具有以下功能：

• 获取对象的属性和方法 使用变量表达式可以获取对象的属性和方法，例如，获取 person 对象的 lastName 属性，表达式形式如下：
• html
• ${person.lastName}
• 使用内置的基本对象 使用变量表达式还可以使用内置基本对象，获取内置对象的属性，调用内置对象的方法。 Thymeleaf 中常用的内置基本对象如下： 例如，我们通过以下 2 种形式，都可以获取到 session 对象中的 map 属性：
• html
• ${#session.getAttribute('map')} ${session.map}
• 使用内置的工具对象
• 例如，我们可以使用内置工具对象 strings 的 equals 方法，来判断字符串与对象的某个属性是否相等，代码如下。
• html
• ${#strings.equals('编程帮',name)}

2.1.2 选择变量表达式

选择变量表达式与变量表达式功能基本一致，只是在变量表达式的基础上增加了与 th:object 的配合使用。当使用 th:object 存储一个对象后，我们可以在其后代中使用选择变量表达式（*{...}）获取该对象中的属性，其中，“*”即代表该对象。

html<div th:object="${session.user}" >
    <p th:text="*{fisrtName}">firstname</p>
</div>

th:object 用于存储一个临时变量，该变量只在该标签及其后代中有效，在后面的内容“th 属性”中我详细介绍。

2.1.3 链接表达式

不管是静态资源的引用，还是 form 表单的请求，凡是链接都可以用链接表达式 （@{...}）。

链接表达式的形式结构如下：

• 无参请求：@{/xxx}
• 有参请求：@{/xxx(k1=v1,k2=v2)}

例如使用链接表达式引入 css 样式表，代码如下。

html<link href="asserts/css/signin.css" th:href="@{/asserts/css/signin.css}" rel="stylesheet">

2.1.4 国际化表达式

消息表达式一般用于国际化的场景。结构如下。

htmlth:text="#{msg}"

注意：此处了解即可，我们会在后面的章节中详细介绍。

2.1.5 片段引用表达式

片段引用表达式用于在模板页面中引用其他的模板片段，该表达式支持以下 2 中语法结构：

• 推荐：~{templatename::fragmentname}
• 支持：~{templatename::#id}

以上语法结构说明如下：

• templatename：模版名，Thymeleaf 会根据模版名解析完整路径：/resources/templates/templatename.html，要注意文件的路径。
• fragmentname：片段名，Thymeleaf 通过 th:fragment 声明定义代码块，即：th:fragment="fragmentname"
• id：HTML 的 id 选择器，使用时要在前面加上 # 号，不支持 class 选择器。

2.2 th 属性

Thymeleaf 还提供了大量的 th 属性，这些属性可以直接在 HTML 标签中使用，其中常用 th 属性及其示例如下表。

3. Thymeleaf 公共页面抽取

在 Web 项目中，通常会存在一些公共页面片段（重复代码），例如头部导航栏、侧边菜单栏和公共的 js css 等。我们一般会把这些公共页面片段抽取出来，存放在一个独立的页面中，然后再由其他页面根据需要进行引用，这样可以消除代码重复，使页面更加简洁。

3.1 抽取公共页面

Thymeleaf 作为一种优雅且高度可维护的模板引擎，同样支持公共页面的抽取和引用。我们可以将公共页面片段抽取出来，存放到一个独立的页面中，并使用 Thymeleaf 提供的 th:fragment 属性为这些抽取出来的公共页面片段命名。 示例 1 将公共页面片段抽取出来，存放在 commons.html 中，代码如下。

html<div th:fragment="fragment-name" id="fragment-id">
    <span>公共页面片段</span>
</div>

3.2 引用公共页面

在 Thymeleaf 中，我们可以使用以下 3 个属性，将公共页面片段引入到当前页面中。

• th:insert：将代码块片段整个插入到使用了 th:insert 属性的 HTML 标签中；
• th:replace：将代码块片段整个替换使用了 th:replace 属性的 HTML 标签中；
• th:include：将代码块片段包含的内容插入到使用了 th:include 属性的 HTML 标签中。

使用上 3 个属性引入页面片段，都可以通过以下 2 种方式实现。

• ~{templatename::selector}：模板名::选择器
• ~{templatename::fragmentname}：模板名::片段名

通常情况下，{} 可以省略，其行内写法为 [[{...}]] 或 [({...})]，其中 [[{...}]] 会转义特殊字符，[(~{...})] 则不会转义特殊字符。

示例 2

1. 在页面 fragment.html 中引入 commons.html 中声明的页面片段，可以通过以下方式实现。

html<!--th:insert 片段名引入-->
<div th:insert="commons::fragment-name"></div>
<!--th:insert id 选择器引入-->
<div th:insert="commons::#fragment-id"></div>
------------------------------------------------
<!--th:replace 片段名引入-->
<div th:replace="commons::fragment-name"></div>
<!--th:replace id 选择器引入-->
<div th:replace="commons::#fragment-id"></div>
------------------------------------------------
<!--th:include 片段名引入-->
<div th:include="commons::fragment-name"></div>
<!--th:include id 选择器引入-->
<div th:include="commons::#fragment-id"></div>

2. 启动 Spring Boot，使用浏览器访问 fragment.html，查看源码，结果如下。

html<!--th:insert 片段名引入-->
<div>
    <div id="fragment-id">
        <span>公共页面片段</span>
    </div>
</div>
<!--th:insert id 选择器引入-->
<div>
    <div id="fragment-id">
        <span>公共页面片段</span>
    </div>
</div>
------------------------------------------------
<!--th:replace 片段名引入-->
<div id="fragment-id">
    <span>公共页面片段</span>
</div>
<!--th:replace id 选择器引入-->
<div id="fragment-id">
    <span>公共页面片段</span>
</div>
------------------------------------------------
<!--th:include 片段名引入-->
<div>
    <span>公共页面片段</span>
</div>
<!--th:include id 选择器引入-->
<div>
    <span>公共页面片段</span>
</div>

3.3 传递参数

Thymeleaf 在抽取和引入公共页面片段时，还可以进行参数传递，大致步骤如下： 1.传入参数； 2.使用参数。

3.3.1 传入参数

引用公共页面片段时，我们可以通过以下 2 种方式，将参数传入到被引用的页面片段中： 模板名::选择器名或片段名(参数1=参数值1,参数2=参数值2) 模板名::选择器名或片段名(参数值1,参数值2)

注：若传入参数较少时，一般采用第二种方式，直接将参数值传入页面片段中； 若参数较多时，建议使用第一种方式，明确指定参数名和参数值，。

示例代码如下：

java<!--th:insert 片段名引入-->
<div th:insert="commons::fragment-name(var1='insert-name',var2='insert-name2')"></div>
<!--th:insert id 选择器引入-->
<div th:insert="commons::#fragment-id(var1='insert-id',var2='insert-id2')"></div>
------------------------------------------------
<!--th:replace 片段名引入-->
<div th:replace="commons::fragment-name(var1='replace-name',var2='replace-name2')"></div>
<!--th:replace id 选择器引入-->
<div th:replace="commons::#fragment-id(var1='replace-id',var2='replace-id2')"></div>
------------------------------------------------
<!--th:include 片段名引入-->
<div th:include="commons::fragment-name(var1='include-name',var2='include-name2')"></div>
<!--th:include id 选择器引入-->
<div th:include="commons::#fragment-id(var1='include-id',var2='include-id2')"></div>

3.3.2 使用参数

在声明页面片段时，我们可以在片段中声明并使用这些参数，例如：

java<!--使用 var1 和 var2 声明传入的参数，并在该片段中直接使用这些参数 -->
<div th:fragment="fragment-name(var1,var2)" id="fragment-id">
    <p th:text="'参数1:'+${var1} + '-------------------参数2:' + ${var2}">...</p>
</div>

启动 Spring Boot，使用浏览器访问 fragment.html，结果如下图。