模板引擎三 Thymeleaf

一、了解Thymeleaf

Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至纯文本。
Springboot体系内推荐使用Thymeleaf作为前端页面模板,并且Springboot2.0中默认使用Thymeleaf3.0,性能提升幅度很大。
可用于静态、动态页面。
各种引擎的语法都可以在Thymeleaf中使用,非常方便,同时也很混乱,很庞大。
Thymeleaf提供Spring标准方言和一个与SpringMVC完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。
官方文档:https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#introducing-thymeleaf

二、Thymeleaf在springboot中的快速入门

1、添加依赖
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
2、properties配置不开启Thymeleaf缓存
    spring.thymeleaf.cache=false
3、HTML文件引入对Thymeleaf的支持
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    Thymeleaf文件默认后缀为.html,默认存放路径为:classpath:/templates/

    
4、去掉html页面错误验证波浪线警告

5、编写Controller

6、效果展示

三、Thymeleaf基本语法

1、Thymeleaf的th属性

文本属性:
    文本拼接:||
    文本信息:th:text,th:id,th:value...
    文本信息:th:utext 可解析HTML
条件属性:
    if判断:th:if
    unless判断:th:unless
    switch判断:th:switch...th:case
循环属性-th:each:
    th:each迭代list
    th:each迭代map
    th:each的内置属性

2、标准表达式语法

${...}变量表达式:也叫OGNL表达式,或Spring EL表达式,用于调用各种属性和方法
    a.可以获取对象的属性和方法
    b.可以使用ctx、vars、locale、request、response、session、servletContext内置对象
    c.可用使用dates、numbers、strings、objects、arrays、lists、sets、maps等内置方法
@{...}链接表达式:不管是静态资源的引用,form表单的请求,凡是链接都可以用@{...}
    a.无参:@{/xxx}
    b.有参:@{/xxx(k1=v1,k2=v2)},对应的url结构:xxx?k1=v1&k2=v2
    c.引入本地资源:@{/项目本地的资源路径}
    d.引入外部资源:@{/webjars/资源在jar包中的路径}
#{...}消息表达式:用于从消息源中提取消息内容实现国际化
    a.语法和变量表达式相比多了个获取参数的方式
    b.消息源主要是properties文件
~{...}代码块表达式:把某一段定义好的代码插入到另一个页面中,一般用于定义出一套通用的header或者是footer
*{...}选择变量表达式:是另一种类似${...},某些时候是等价的,*{...}是在执行时是在选择的对象上求解(使用th:object选择对象),而${...}是在上下文的变量Map上求解

3、Thymeleaf中表达式支持的语法

字面、文字操作、算术运算、布尔运算、比较运算、条件运算符

4、Thymeleaf中的内置对象

#ctx:上下文对象
#vars:上下文对象
#locale:区域对象
#request:HttpServletRequest对象(仅web环境可用)
#response:HttpServletResponse对象(仅web环境可用)
#session:HttpSession对象(仅web环境可用)
#servletContext:ServletContext(仅web环境可用)
param:获取请求的参数
session:访问session属性
application:获取应用程序/servlet上下文属性
以上三个不带#的内置对象,都拥有以下方法:size()、isEmpty()、containsKey()、.key

5、Thymeleaf中的内联标签-body内的内联

[[...]]等价于th:text(结果将被HTML转义)
[(...)]等价于th:utext(结果不会被HTML转义)

对比写法:
[[${name}]]
th:text="${name}"

body默认开启内联标签的使用,可设置关闭不使用内联标签:
    <body th:inline="none">

6、Thymeleaf中的内联标签-js里的内联

在JavaScript中使用内联标签,默认不开启支持。
在script标签引入对内联的支持:<script th:inline="javascript">
在script标签中同样使用[[]]、[()]来获取后端数据
使用js注释实现前后端分离:var msg = /*[[${name}]]*/'666666'; 这样服务器打开页面时展示${name}值,静态打开时展示666666
JavaScript中内联的特性:内联表达式的计算结果不限于字符串,能够自动将后台的数据序列化为javascript对象。即后台写入的是什么类型的数据,在JavaScript中会序列化为对应类型的javascript对象数据。写入List对象,取出也是JavaScript的list对象

注意:js中开启内联标签模式只能在html文件内部的JavaScript代码,不能在引入的外部JavaScript文件中进行操作

7、Thymeleaf中的内联标签-css里的内联

在CSS中使用内联标签,默认不开启支持
在style标签上引入对内联的支持:<style th:inline="css">
在style标签中同样使用[[]]、[()]来获取后端数据
也可通过注释实现前后端分离,但Thymeleaf会自动忽略掉css注释之后和分号之前的代码。/*[[${color}]]*/red 动态显示${color}颜色,静态显示红色

注意:css中开启内联标签模式只能在html文件内嵌的<style>标签中使用,不能在外部关联的CSS文件中进行使用

四、Thymeleaf在springboot中的应用

### Thymeleaf 模板引擎的功能介绍 Thymeleaf 是一种现代的服务器端 Java 模板引擎,专为 HTML5 开发而优化,同时也支持 XML 和纯文本模板处理[^1]。它通过提供简洁、直观的语法结构,帮助开发者更轻松地实现动态页面渲染。以下是 Thymeleaf 的主要功能特点: #### 1. **静态原型兼容** Thymeleaf 支持直接在浏览器中打开未经编译的 HTML 文件,这使得前端设计师可以独立于后端逻辑进行工作,从而提高团队协作效率[^2]。 #### 2. **自然模板技术** 它允许模板文件保持有效的 HTML 或 XML 格式,即使不经过任何特殊处理也能被正常解析和显示[^1]。 #### 3. **多种方言支持** Thymeleaf 提供标准方言 (Standard Dialect) 和 Spring 方言 (Spring Standard Dialect),分别用于通用场景以及与 Spring Framework 集成的应用程序开发[^2]。 #### 4. **灵活的数据绑定机制** 可以方便地将后台传来的对象属性映射至视图层中的标签属性或内容部分,简化了数据传递流程[^1]。 --- ### Thymeleaf 模板引擎的使用指南 为了更好地理解如何实际操作 Thymeleaf,下面是一个简单的使用步骤说明: #### Maven依赖引入 首先,在基于 Maven 构建的项目中添加如下依赖项来集成 Thymeleaf: ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> ``` 此配置会自动导入必要的库并设置默认参数,比如 `templateResolver` 等组件[^2]。 #### 基础控制器编写 创建一个 Controller 类用来响应 HTTP 请求并将模型数据传输给视图层: ```java import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; @Controller public class HelloController { @GetMapping("/hello") public String sayHello(Model model){ model.addAttribute("message", "Welcome to the world of Thymeleaf!"); return "greeting"; } } ``` 这里定义了一个 `/hello` 路径对应的处理器方法,并向其中注入了一条消息字符串作为样例演示[^2]。 #### 创建对应模板文件 最后一步是在 resources/templates/ 下新建名为 greeting.html 的 HTML 文档,利用 th:* 属性表达式嵌入动态变量值: ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Greeting Page</title> </head> <body> <h1 th:text="${message}">Placeholder text here.</h1> </body> </html> ``` 当访问 /hello URL 地址时,最终呈现出来的效果将是替换掉占位符后的个性化问候语句[^2]。 --- ### 总结 综上所述,Thymeleaf 不仅具备传统 JSP/JSTL 所拥有的全部能力,而且凭借其独特的设计理念和技术优势,在现代化 Web 应用构建过程中扮演着越来越重要的角色[^1]。无论是单独部署还是配合主流框架一起运作,都能展现出卓越的表现力和易维护性特征。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值