二、 Thymeleaf模板引擎
Spring Boot由于使用了嵌入式的Tomcat，不再支持JSP，Spring Boot官方推荐使用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是一个现代的服务器端Java模板引擎，适用于Web和非Web项目的工程中。
Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板——HTML可以在浏览器中正确显示，也可以作为静态原型工作，允许开发团队进行更强的协作。
Thymeleaf可以和Spring集成，可以使用到Spring的特性，以及插入自己功能的能力，Thymeleaf是现代HTML5 JVM web开发的理想选择——尽管它可以做的事情更多。
Spring Boot官方提供了Thymeleaf的Starter，可以在创建工程时选择Thymeleaf，也可以在pom文件中直接添加Thymeleaf Starter
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> 复制代码
Thymeleaf 自动配置
Spring Boot中Thymeleaf模板引擎的自动配置类是org.springframework.boot.autoconfigure.thymeleaf包下的ThymeleafAutoConfiguration
这个自动配置类启用了ThymeleafProperties配置类
Spring Boot自动配置好了前缀和后置以及内容类型等配置，只要把HTML页面放在classpath:/template下，thymeleaf就能自动渲染html页面。
Thymeleaf 语法
使用Thymeleaf
在classpath:/template目录下创建一个success.html页面
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>Success</title> </head> <body> <h1>Thymeleaf模板引擎成功渲染页面</h1> </body> </html> 复制代码
HelloController中增加一个方法，返回success.html页面
@RequestMapping("/success") public String success(){ return "success"; } 复制代码
重新启动应用，在浏览器中输入localhost:8080/success
浏览器跳转到template目录下的success.html页面。
Thymeleaf语法初体验
修改HelloController
@RequestMapping("/success") public String success(HttpServletRequest request, Map<String, Object> map){ map.put("name","Thymeleaf"); return "success"; } 复制代码
修改success.html，首先导入thymeleaf名称空间，再对后端传出来的数据进行处理和展示
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>Success</title> </head> <body> <h1>Thymeleaf模板引擎成功渲染页面</h1> <h2>取出map中存的数据</h2> <!--将内容设置为指定值--> <div id="div01" class="class01" th:text="${name}"></div> </body> </html> 复制代码
重启应用，浏览器再次访问localhost:8080/success
html页面成功渲染了来自后端的数据
Tymeleaf th 语法规则
Thymeleaf的语法规则可以参考Thymeleaf 官网
th:text；改变当前元素里面的文本内容 th:任意html属性；可以替换原属性的值 修改success.html页面，增加属性
<div id="div01" class="class01" th:id="${name}" th:class="${name}" th:text="${name}"></div> 复制代码
重启应用，浏览器访问/success
属性值全部被取代
th:语法可以参考官方文档 Attribute Precedence
Thymeleaf 表达式语法
表达式语法可以参考官网 Standard Expression Syntax
- Simple expressions: 简单表达式
- Variable Expressions:
${...}获取变量值，可以参考 官网文档4.2 Variables
- 获取对象属性，调用对象方法
- 使用内置的基本对象，包括请求对象响应对象session对象区域对象以及servletContext上下文对象等
- 可以使用内置的工具对象
- Selection Variable Expressions:
*{...}变量选择表达式，参考官网4.3 Expressions on selections (asterisk syntax) - Message Expressions:
#{...}获取国际化内容，可以参考官网4.1 Messages - Link URL Expressions:
@{...}URL表达式，参考官网4.4 Link URLs - Fragment Expressions:
~{...}片段引用表达式，参考官网4.5 Fragments
- 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:
_
在success方法中，多放一些数据，在页面上获取并展示
map.put("users", Arrays.asList("stark","banner","stranger","peter","thor")); 复制代码
success页面使用thymeleaf获取map中的数据并展示
<h2>取出users列表中的数据</h2> <div>第一种方式</div> <h3 th:text="${user}" th:each="user:${users}"></h3> <div>第二种方式,一行内</div> <div> <span th:each="user:${users}">[[${user}]] </span> </div> 复制代码
重新启动应用，浏览器输入localhost:8080/success
页面上成功展示出map中存储的数据
