Spring 全家桶之 Spring Boot 2.6.4（五）- WebMvcAutoConfiguration（Part B）

二、 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

代码语言：javascript复制

<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页面

代码语言：javascript复制

<!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页面

代码语言：javascript复制

@RequestMapping("/success")
public String success(){
    return "success";
}

重新启动应用，在浏览器中输入localhost:8080/success

浏览器跳转到template目录下的success.html页面。

Thymeleaf语法初体验

修改HelloController

代码语言：javascript复制

@RequestMapping("/success")
public String success(HttpServletRequest request, Map<String, Object> map){
    
    map.put("name","Thymeleaf");
    return "success";
}

修改success.html，首先导入thymeleaf名称空间，再对后端传出来的数据进行处理和展示

代码语言：javascript复制

<!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页面，增加属性

代码语言：javascript复制

<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方法中，多放一些数据，在页面上获取并展示

代码语言：javascript复制

map.put("users", Arrays.asList("stark","banner","stranger","peter","thor"));

success页面使用thymeleaf获取map中的数据并展示

代码语言：javascript复制

<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中存储的数据

spring express springboot html html5

0 人点赞