5.3 模板引擎

• 前端交给我们的页面，是html页面。如果是我们以前开发，我们需要把他们转成jsp页面，jsp好处就是当我们查出一些数据转发到SP页面以后，我们可以用jsp轻松实现数据的显示，及交互等。jsp支持非常强大的功能，包括能写java代码，但是呢，我们现在的这种情况SpringBoot这个项目首先是以jar的方式，不是war,第二，我们用的还是嵌入式的Tomcat。所以呢，他现在默认是不支持jsp的。
• 那不支持jsp,如果我们直接用纯静态页面的方式，那给我们开发会带来非常大的麻烦，那怎么办呢SpringBoot推荐你可以来使用模板引擎。
• 那么这模板引擎，我们其实大家听到很多，其实jsp就是一个模板引擎，还有以用的比较多的freemarker,包括Spring Boot给我们推荐的Thymeleaf,模板引擎有非常多，但再多的模板引擎，他们的思想都是一样的，什么样一个思想呢我们来看一下这张图。

• 模板引擎的作用就是我们来写一个页面模板，比如有些值呢，是动态的，我们写一些表达式。而这些值，从哪来呢，我们来组装一些数据，我们把这些数据找到。然后把这个模板和这个数据交给我们模板引擎，模板擎按照我们这个数据帮你把这表达式解析、填充到我们指定的位置，然后把这个数据最终生成一个我们想要的内容给我们写出去，这就是我们这个模板引擎
• 不管是jsp还是其他模板引擎，都是这个思想。只不过呢，就是说不同模板引擎之间，他们可能这个语法有点不一样。主要来介绍一下Spring Boot给我们推荐的Thymeleaf模板引擎，是一个高级语言的模板引擎，他的这个语法更简单。而且功能更强大。

5.3.1 thymeleaf模板引擎

• Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。它与 JSP，Velocity，FreeMaker 等模板引擎类似，也可以轻易地与 Spring MVC 等 Web 框架集成。与其它模板引擎相比，Thymeleaf 最大的特点是，即使不启动 Web 应用，也可以直接在浏览器中打开并正确显示模板页面 。
• Thymeleaf 是新一代 Java 模板引擎，与 Velocity、FreeMarker 等传统 Java 模板引擎不同，Thymeleaf 支持 HTML 原型，其文件后缀为“.html”，因此它可以直接被浏览器打开，此时浏览器会忽略未定义的 Thymeleaf 标签属性，展示 thymeleaf 模板的静态页面效果；当通过 Web 应用程序访问时，Thymeleaf 会动态地替换掉静态内容，使页面动态显示。
• Thymeleaf 通过在 html 标签中，增加额外属性来达到“模板+数据”的展示方式，示例代码如下。

    
    






欢迎您访问静态页面 HTML

[[${item}]]


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

欢迎您访问静态页面HTML
1

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

迎您来到Thymeleaf
1

Thymeleaf 的特点:Thymeleaf 模板引擎具有以下特点：

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

5.3.2 语法

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

xmlns:th="http://www.thymeleaf.org"
1

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

Thymeleaf 作为一种模板引擎，它拥有自己的语法规则。Thymeleaf 语法分为以下 2 类：

• 标准表达式语法
• th 属性

标准表达式语法

     未转义
	 转义会将标签字符串转换为标签元素
1
2

model.addAttribute("users", Arrays.asList("haha","gary"));
   遍历只能同时使用一种
[[${item}]]
1
2
3

• Thymeleaf 模板引擎支持多种表达式：:
• • 变量表达式：${…}
  • 选择变量表达式：*{…}
  • 链接表达式：@{…}
  • 国际化表达式：#{…}
  • 片段引用表达式：~{…} ==vue中的slot插槽
• 变量表达式：使用 ${} 包裹的表达式被称为变量表达式，该表达式具有以下功能：

• 获取对象的属性和方法
• • 使用变量表达式可以获取对象的属性和方法，例如，获取 person 对象的 lastName 属性，表达式形式如下：
  • ${person.lastName}
• 使用内置的基本对象
• • 使用变量表达式还可以使用内置基本对象，获取内置对象的属性，调用内置对象的方法。 Thymeleaf 中常用的内置基本对象如下：
  • #ctx ：上下文对象；
  • #vars ：上下文变量；
  • #locale：上下文的语言环境；
  • #request：HttpServletRequest 对象（仅在 Web 应用中可用）；
  • #response：HttpServletResponse 对象（仅在 Web 应用中可用）；
  • #session：HttpSession 对象（仅在 Web 应用中可用）；
  • #servletContext：ServletContext 对象（仅在 Web 应用中可用）。
• 使用内置的工具对象
• • 除了能使用内置的基本对象外，变量表达式还可以使用一些内置的工具对象。
  • strings：字符串工具对象，常用方法有：equals、equalsIgnoreCase、length、trim、toUpperCase、toLowerCase、indexOf、substring、replace、startsWith、endsWith，contains 和 containsIgnoreCase 等；
  • numbers：数字工具对象，常用的方法有：formatDecimal 等；
  • bools：布尔工具对象，常用的方法有：isTrue 和 isFalse 等；
  • arrays：数组工具对象，常用的方法有：toArray、length、isEmpty、contains 和 containsAll 等；
  • lists/sets：List/Set 集合工具对象，常用的方法有：toList、size、isEmpty、contains、containsAll 和 sort 等；
  • maps：Map 集合工具对象，常用的方法有：size、isEmpty、containsKey 和 containsValue 等；
  • dates：日期工具对象，常用的方法有：format、year、month、hour 和 createNow 等。

• 我们通过以下 2 种形式，都可以获取到 session 对象中的 map 属性：

${#session.getAttribute('map')}
${session.map}
1
2

• 我们可以使用内置工具对象 strings 的 equals 方法，来判断字符串与对象的某个属性是否相等，代码如下。

${#strings.equals('abc',name)}
1

• 选择变量表达式

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

    
firstname

1
2
3

th:object 用于存储一个临时变量，该变量只在该标签及其后代中有效

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

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

• 无参请求：@{/xxx}

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

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

1

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

th:text="#{msg}"
1

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

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

以上语法结构说明如下：

• templatename：模版名，Thymeleaf 会根据模版名解析完整路径：/resources/templates/templatename.html，要注意文件的路径。

• fragmentname：片段名，Thymeleaf 通过 th:fragment 声明定义代码块，即：th:fragment=“fragmentname”

• id：HTML 的 id 选择器，使用时要在前面加上 # 号，不支持 class 选择器。

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

其他表达式

• Literals 字面量

• • Text literals: ‘one text’ , ‘Another one!’ ,… 文本：单引号
  • Number literals: 0 , 34 , 3.0 , 12.3 ,…
  • Boolean literals: true , false
  • Null literal: null
  • Literal tokens: one , sometext , main ,…

• Text operations: 文本操作

• • String concatenation: + 字符串连接符
  • Literal substitutions: |The name is ${name}|

• Arithmetic operations: 数学运算

• • Binary operators: + , - , ***** , / , %
  • Minus sign (unary operator): -

• Boolean operations: 逻辑运行

• • Binary operators: and , or
  • Boolean negation (unary operator): ! , not

• Comparisons and equality: 比较运算符

• • Comparators: > , < , >= , <= ( gt , lt , ge , le )
  • Equality operators: == , != ( eq , ne )

• Conditional operators: 三元运算

• • If-then: (if) ? (then)
  • If-then-else: (if) ? (then) : (else) 前端多用三元运算
  • Default: (value) ?: (defaultvalue)

• Special tokens: 分割表达式

• • No-Operation: _

下一篇：SpringBoot web开发-11-Thymeleaf 公共页面抽取