Thymeleaf 基本使用

01、Thymeleaf

官网地址：Thymeleafhttps://www.thymeleaf.org/

简介

Thymeleaf是一种服务器端Java模板引擎，用于将数据渲染为HTML、XML、JavaScript等格式，并在Web浏览器中呈现给用户。具体来说，Thymeleaf充当着视图层的角色，与控制器和模型一起构成了典型的MVC(模型-视图-控制器)设计模式中的视图部分。 Thymeleaf模板引擎允许我们在模板中使用HTML标记、JavaScript表达式和Thymeleaf表达式等，以动态地生成Web页面。Thymeleaf提供了一些特殊的属性和标签，以支持与控制器和模型之间的数据绑定和交互。

　相比于传统的前端技术(如HTML、CSS和JavaScript)，Thymeleaf更注重后端的处理逻辑和数据交互。Thymeleaf能够从服务器端动态地生成页面，这意味着我们可以将服务器端的数据直接渲染到页面上，从而减少了大量的前端开发工作。同时，由于Thymeleaf能够与后端Java代码无缝集成，因此我们可以很方便地使用Java提供的各种类库和框架，进一步简化了开发工作。

为什么使用thymeleaf ？

因为jsp页面存在劣势，它的本质是Servlet，还是一个类，只要是类就离不开JVM。我们无法通过浏览器直接查看JSP页面的效果，这不便于前端页面的实现。

替代JSP：

1、模板引擎，具备JSP的功能，但是比JSP更加强大，可以直接通过浏览器查看页面效果。

2、前后端分离，Vue。

简介Thymeleaf 的特点

动静结合：Thymeleaf 既可以直接使用浏览器打开，查看页面的静态效果，也可以通过 Web 应用程序进行访问，查看动态页面效果。
开箱即用：Thymeleaf 提供了 Spring 标准方言以及一个与 SpringMVC 完美集成的可选模块，可以快速地实现表单绑定、属性编辑器、国际化等功能。
与 SpringBoot 完美整合：SpringBoot 为 Thymeleaf 提供了的默认配置，并且还为 Thymeleaf 设置了视图解析器，因此 Thymeleaf 可以与 Spring Boot 完美整合。

Thymeleaf 通过在 html 标签中，增加额外属性来达到“模板+数据”的展示方式：

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

 <meta charset="UTF-8">

 <title>Title</title>

</head>

<body>

 Original Value

</body>

</html>

02、物理视图和逻辑视图

2.1、物理视图

请求转发到一个HTML页面时，使用的完整的转发路径就是物理视图。

例如：/pages/user/index.html

如果我们把所有的HTML页面都放在某个统一的目录下，那么转发地址就会呈现出明显的规律：

/pages/user/login.html

/pages/user/login_success.html

/pages/user/regist.html

/pages/user/regist_success.html

规律：路径的开头都是：/pages/user/ ，路径的结尾都是：.html

所以，路径开头的部分我们称之为视图前缀，路径结尾的部分我们称之为视图后缀。

2.2、逻辑视图

物理视图=视图前缀+逻辑视图+视图后缀

视图前缀	逻辑视图	视图后缀	物理视图
/pages/user/	login	.html	/pages/user/login.html
/pages/user/	login_success	.html	/pages/user/login_success.html

03、Thymeleaf 语法

3.1、引入命令空间

<!DOCTYPE HTML>

<html xmlns:th="http://www.thymeleaf.org">

<head>

 <title>Index Page</title>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>

 Welcome to BeiJing!

</body>

</html>

注意：‘xmlns:th="http://www.thymeleaf.org"’引入Thymeleaf命名空间。

3.2、常用标签

3.2.1、th:text

作用：替换标签的文本原始值。

<h1 th:text="HelloWorld">标签体原始值</h1>



<h1 th:text="${username}">这里要显示一个动态的username</h1>

3.2.2、th:属性名

作用：替换指定属性的属性值

<input type="text" name="username" th:value="${username}"/>

3.3、常用表达式

语法	描述	作用
${...}	变量表达式	变量表达式是最常用的一种表达式，它主要可以获取变量的值。
*{...}	选择表达式	消息表达式主要是用于读取属性文件（.properties）中的值，它常常用于国际化。
#{...}	消息表达式	选择表达式我们也称为是星号表达式，它与变量表达式的区别是：变量表达式的对象取的是整个上下文中的变量，而选择表达式的对象取的是当前对象中的变量。这样做的好处是只需要在当前对象中取，不需要通过上下文去取，在一定程度上提高了执行效率，这也是性能上的一种优化。
@{...}	链接表达式	链接表达式主要在页面中有链接的地方使用。
~{...}	分段表达式	分段表达式主要用于模板布局时的引用。也就是在一个页面中引入另一个页面中的内容。

3.3.1、案例

1)、变量表达式

2)、选择表达式

<div th:object="${book}">

</div>

其中 th:object 的意思是：用来接受后台传过来的对象。

3)、消息表达式

注意： 我们必须先要配置属性文件所在位置，在项目配置文件中配置以下内容：

spring:

messages:

basename: msg

4)、链接表达式

<a th:href="@{/result}">...</a>



<base th:href="@{/}" th:src="@{/}">

5)、分段表达式

首先我们准备两个页面，分别是 result.html 和 foot.html，我们在 result.html 中引入 foot.html 的内容。

result.html

<body>

 这是 result.html 页面

 <div th:insert="~{foot :: copy}"></div>

</body>

 foot.html

<body>

 <div th:fragment="copy">

 © 2020 <a href="http://www.baidu.com">百度</a>

 </div>

</body>

3.4、内置对象

所谓内置对象其实就是在Thymeleaf的表达式中可以直接使用的对象。

基本对象：

对象	描述
#ctx	上下文对象
#vars	同#ctx，表示上下文变量
#locale	上下文本地化（特定的地理区域）变量，可参考：java.util.Locale
#request	HttpServletRequest 对象，可参考：javax.servlet.http.HttpServletRequest
#response	HttpServletResponse 对象，可参考：javax.servlet.http.HttpServletResponse
#session	HttpSession 对象，可参考：javax.servlet.http.HttpSession
#servletContext	ServletContext 对象，可参考：javax.servlet.ServletContext

工具类对象：

对象	描述
#dates	日期时间工具类
#strings	字符串工具类
#lists	List集合工具类
#numbers	数字工具类
#calendars	日历工具类
#objects	对象工具类
#bools	布尔工具类
#arrays	数组工具类
#sets	Set工具类
#maps	Map工具类

处理空值，通过加问号来判断前面的值是否为空，防止报错。

示例：

#ctx

#vars

#locale

#request

注意，请求地址的 URL 参数直接通过#request.x是取不出来的，需要使用param.x语法来取出。如，URL：/standard-expression-syntax/variables?q=expression，取出 q 参数的正确方式：

#response

#session

注意，放到会话里面的对象直接通过#session.x是取不出来的，需要使用session.x语法来取出。如，取出会话里面的 user 对象的正确方式：

#dates