Spring Boot | Spring Boot的“视图技术”、Thymeleaf ( 模板引擎 )的 “常用标签”

置顶一只大皮卡丘

已于 2024-05-19 11:13:18 修改

阅读量769

点赞数 8

分类专栏： Spring Boot框架文章标签： spring boot 后端 Thymeleaf Thymeleaf模板引擎模板引擎模板引擎页面 SpringBoot视图技术

于 2024-04-09 00:44:22 首次发布

本文链接：https://blog.csdn.net/m0_70720417/article/details/137529054

版权

Spring Boot框架专栏收录该内容

24 篇文章 2 订阅

订阅专栏

作者简介 ：一只大皮卡丘，计算机专业学生，正在努力学习、努力敲代码中! 让我们一起继续努力学习！

该文章参考学习教材为：
《Spring Boot企业级开发教程》 黑马程序员 / 编著
文章以课本知识点 + 代码为主线，结合自己看书学习过程中的理解和感悟，最终成就了该文章

文章用于本人学习使用 ，同时希望能帮助大家。
欢迎大家点赞👍 收藏⭐ 关注💖哦！！！

（侵权可联系我，进行删除，如果雷同，纯属巧合）

在一个 Web 应用中，通常会采用 MVC 设计模式实现对应的模型、视图和控制器，其中，
视图是 用户看到并与之交互 的界面 ( 如之前的返回一个.js页面给前端，这就是返回了一个模型给前端，而 视图技术，就是操作“用户能看到的页面” 的技术)。
对 最初的 Web 应用 来说，视图是由 HTML元素组成 的 静态界面；而 后期的Web应用 更倾向于 使用动态模板技术，从而实现 前后端分离 和 页面的动态数据展示。
Spring Boot 框架为简化项目的整体开发，提供了一些 视图技术支持 ( 页面技术支持 )，并主要推荐整合模板引擎技术 实现前端页面的 动态化内容。

一、SpringBoot 支持的 “视图技术”

前端 模板引擎技术 的出现，使前端开发人员无须关注后端业务的具体实现，只关注自己页面 的 呈现效果 即可，从而 解决了前端代码错综复杂 的问题、实现了前后端分离开发。

Spring Boot 对很多 模板引擎技术 提供了支持，具体介绍如下 :

(1) FreeMarker : FreeMarker是一个基于模板生成输出文本( HTML页面、电子邮件、配置文件等)的 模板引擎，它不是面向最终用户的，而是一个 Java 类库，是一款程序员可以嵌入所开发产品的组件。

(2) Groovy : Groovy 是一种基于 JVM (Java虚拟机)的 敏捷开发语言，它结合了Python、Ruby 和 Smalltalk的许多强大特性，能够与Java 代码很好地结合，也能扩展现有代码。Groovy运行在JVM上，它可以使用Java 语言编写的其他库。

(3) Thymeleaf : 它是一种用于Web和独立环境的现代服务器端的 Java模板引擎 ，其主要目标是将优雅的Java 模板带到开发工作流程 中，将HTML在浏览器中正确显示，并且可以作为静态原型，让开发团队能更容易地协作。Thymeleaf能够处理HTML，XML，JavaScript，CSS 甚至纯文本。

(4) Mustache : Mustache是轻逻辑的模板引擎(Logic-lessttemplates )，它是一个 JS模板，用于对 JS 进行分离展示。Mustache的优势在于可以应用在 JavaScript、PHP、Python、Perl 等多种编程语言中。

Spring Boot 不太支持常用的JSP 模板，并且没有提供对应的整合配置，这是因为使用嵌入式 Servlet 容器的 Spring Boot 应用程序对于JSP 模板存在一些限制，具体如下所示 :

① Spring Boot 默认使用嵌入式Servlet 容器以 JAR 包的方式进行项目打包部署，这 种JAR 包方式不支持 JSP 模板。

② 使用 Undertow 嵌入式容器部署Spring Boot项目时，不支持 JSP 模板。

③ Spring Boot 默认提供了一个处理请求路径 “/error”的统一错误处理器，返回具体的异常信息。
使用JSP 模板时，无法使用Spring Boot自带的异常处理器，只能根据要求在Spring Boot项目的指定位置定制错误页面。

上面对Spring Boot支持的模板引擎进行了介绍，并指出了整合JSP模板的一些限制。接下来，将选择其中常用的**Thymeleaf模板引擎进行介绍**，并完成与Spring Boot 框架的整合实现。

注意点 ：
在使用 Spring Boot框架 进行 Web应用开发 时，可以选择使用传统的SpringMVC框架进行整合开发，也可以使用Spring5之后出现的 SpringWebFlux 框架( 异步交互 )进行整合开发。针对于熟悉的MVC框架整合实现，SpringBoot实现了与FreeMarker、Groovy、Thymeleaf和 Mustache前端模板引擎技术的整合支持和自动化配置；

本代码内容中Web开发都是添加Web 模块下的 Web 依赖，使用传统的MVC 框架进行整合框架进行整合讲解，如果使用WebFlux框架进行整合讲解，则需要添加Web模块下的Reactive Web 依赖。

二、Thymeleaf 的“基本讲解”

Thymeleaf 是一种现代的基于服务器端的 Java “模板引擎” 技术，也是一个优秀的 面向Java 的XML、XHTML、HTML5页面模板，它具有丰富的标签语言、函数和表达式，在使用 Spring Boot框架进行页面设计时，一般会选择Thymeleaf模板。下面将对 Thymeleaf常用的标签、 表达式 进行讲解。

三、Thymeleaf 的 “常用标签” :

在 HTML 页面上使用Thymeleaf 标签 ( th:*标签 )，Thymeleaf标签能够动态地替换掉静态内容，动态显示页面内容。

（使用 Thymeleaf标签 让HTML页面 ( 静态页面)变成“动态页面” ，具体的操作为：在 HTML 中使用 Thymeleaf标签 + 当然要配合“Thymeleaf表达式” 一起使用的）

Thymeleaf 的 “常用标签” 如下所示 ：

配置开启“Thymeleaf模板引擎页面开发”

配置 开启Thymeleaf模板引擎页面开发 :
<html lang="en" xmlns:th="http://www/thymeleaf.org">
在html标签中加入 xmlns:th=“http://www/thymeleaf.org” 即可开启 Thymeleaf模板引擎页面开发。

th:fragment标签、th:insert标签 ( 将 ”模板片段“ 插入到 ”页面“ 中的”指定位置“ )

*th: 标签**	描述
th:fragment	th:fragment标签用于定义一个模板片段，可为该片段设置名称，这个片段可以被其他模板引用和插入。这意味着你可以在一个模板文件中创建可重用的代码块，在“主文件”中通过 th:insert标签来引入指定名称的”模板片段“。 ps : th:fragment标签一般搭配th:insert标签、th:replace标签使用。
th:insert	在Thymeleaf中，th:insert标签用于将一个模板片段（ th:fragment标签用于定义“模板片段” ）插入到当前 Thymeleaf模板引擎页面中的特定位置。 ps : th:insert标签一般搭配th:fragment标签使用。

th:* 标签

描述

th:fragment

th:fragment标签用于定义一个模板片段，可为该片段设置名称，这个片段可以被其他模板引用和插入。
这意味着你可以在一个 模板文件 中创建可重用的代码块，在“主文件”中通过 th:insert标签 来引入 指定名称 的”模板片段“。
ps :
th:fragment标签 一般 搭配th:insert标签、th:replace标签使用。

th:insert

在Thymeleaf中，th:insert标签用于将一个模板片段 （ th:fragment标签用于定义“模板片段” ）插入到当前 Thymeleaf模板引擎页面中的 特定位置。
ps :
th:insert标签 一般 搭配th:fragment标签使用。

th:fragment标签、th:insert标签 例子如 ：

fragment_Demo_header.html :

<!DOCTYPE html>
<!-- 配置开启Thymeleaf页面开发 -->
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>fragment_Demo_header.html</title>
</head>
<body>
<!-- 该页面通过Thymeleaf中的th:fragment标签来定义“模板片段”,该片段被th:insert标签使用的 -->

<!-- 设置“模板片段”,该"模板片段"的名称为: header-content -->
<div th:fragment="header-content">
 <p>这是页头内容。</p>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>

fragment_Demo_footer.html :

<!DOCTYPE html>
<!-- 配置开启Thymeleaf页面开发 -->
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>fragment_Demo_footer.html</title>
</head>
<body>
<!-- 该页面通过Thymeleaf中的th:fragment标签来定义“模板片段”,该片段被th:insert标签使用的 -->

<!-- 设置“模板片段”,该"模板片段"的名称为: footer-content -->
<footer th:fragment="footer-content">
<p>这是页脚内容。</p>
</footer>
</body>
</html>

insert_Demo.html :

<!DOCTYPE html>
<!-- 配置开启Thymeleaf模板引起页面开发 -->
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>insert_Demo.html页面</title>
</head>
<body>
<!-- 该页面通过Thymeleaf中的th:insert标签来引入/插入“模板片段”-->

<!-- 根据“模板片段”的名称来插入“模板片段”-->
<!-- fragment_Demo :: header-content 的含义为: 在fragment_Demo_header.html中找到名称为"header-content"的 "模板片段" -->
<header th:insert="fragment_Demo_header :: header-content"></header>

123
 
<!-- fragment_Demo :: header-content 的含义为: 在fragment_Demo_footer.html中找到名称为"footer-content"的 "模板片段" -->
<footer th:insert="fragment_Demo_footer :: footer-content"></footer>
</body>
</html>

ThymeleafController.java ：

package com.myh.chapter_09.controller;

import com.myh.chapter_09.domain.Env;
import com.myh.chapter_09.domain.Person;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class ThymeleafController {

 @GetMapping("/toInsert_Demo")
 public String toInsert_Demo() {
     return "insert_Demo"; //返回一个Thymeleaf模板引擎视图页面给前端
 }
 
}

th:remove标签 ( 根据 “值” 的不同来决定“是否”在让 ”内容“ 在“页面中显示” )

th:remove标签 的**值**有：none 、all、body、tag、all-but-first

th:remove标签的值	描述
none	当 th:remove标签的值为 none 表示 “什么也不做”，即让内容“在页面中正常显示”。
all	th:remove标签的值为 all 表示" 删除当前标签元素和所有的子元素"，即让该内容“不在页面中正常显示”。
body	th:remove标签的值为 body 表示删除"当前标签"下的“所有子元素”，即"当前标签"下的“所有子元素” 不会在页面中显示，但是"当前标签"还是存在的，没被删除的。
tag	th:remove标签的值为 tag 表示删除"当前标签元素"，但是"当前标签"下的"子元素"还是会在页面中正常显示的。
all-but-first	th:remove标签的值为 all-but-first 表示删除"当前标签元素" 以及其下的"所有的子元素"，除了"第一个子元素"。

代码例子如 ：

<!DOCTYPE html>
<!-- 配置开启Thymeleaf模板引擎页面开发-->
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>remove_Demo.html</title>
</head>
<body>

<!-- 这个 div 仅在开发环境中显示 (根据后端传递的env对象的dev属性的值来决定 “th:remove”标签的执行,以此来决定该div是否在页面中进行展示)-->
<!-- 当th:remove的值为none表示什么都不做，即让该标签内容“在页面显示” , 当th:remove的值为none表示"删除包含标签和所有的子元素",即该标签中内容将"不在页面显示"-->
<div th:remove="${env.dev} ? 'none' : 'all'">
    <p>这是一个开发环境下的页面！</p>
</div>

<!-- 这个 div以及p标签"始终显示" -->
<div>
    <p>This content is always displayed.</p>
</div>

<!-- th:remove的值为 none 表示"什么也不做",即让内容在“页面中正常显示”-->
<div th:remove="none">
    <p>123.</p>
</div>

<!-- th:remove的值为 all 表示"删除当前标签元素和所有的子元素",即让该内容“不在页面中正常显示”-->
<div th:remove="all">
    <p>这句话不在页面中进行显示。</p>
</div>

<!-- th:remove的值为 body 表示删除"当前标签"下的“所有子元素”,即"当前标签"下的“所有子元素”不会在页面中显示，但是"当前标签"还是存在的,没被删除的 -->
<!-- 所以其下效果是: hello World! 应该不会在页面上显示  -->
<div th:remove="all">
    <p >hello World! (body-不会显示)</p>
</div>

<!-- th:remove的值为 tag 表示删除“当前标签元素”,但是"当前标签"下的"子元素"还是会在页面中正常显示的-->
<!-- 所以其下效果是: div标签的"在下一行分隔"的效果就没有了 -->
<div th:remove="tag">
    <p>世界你好! (tag-会显示)</p>
</div>

<!-- th:remove的值为 all-but-first 表示删除"当前标签元素" 以及其下的"所有的子元素",除了"第一个子元素"-->
<div th:remove="all-but-first">
    <p>子元素1-(会显示)</p>
    <p>子元素2-(不会显示)</p>
    <p>子元素3-(不会显示)</p>
</div>

</body>
</html>

ThymeleafController.java ：

package com.myh.chapter_09.controller;

import com.myh.chapter_09.domain.Env;
import com.myh.chapter_09.domain.Person;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class ThymeleafController {

    @Autowired
    private Env env;

    @GetMapping("/toRemove")
    public String toRemove(Model model) {  //参数Model用于传递“数据”给前端
        model.addAttribute("env",env);
        return "remove_Demo"; //返回值为: String类型，返回一个视图页面给前端
    }

}

th:replace标签 ( 搭配th:fragment标签使用 )

th:replace标签 的含义：

thymeleaf标签	描述
th:replace	th:replace标签的作用是“替换”，即它会用指定的 “模板片段” 来完全替换掉使用 “th:replace标签” 标记的元素及其所有内容。 ps : th:replace标签一般搭配th:fragment标签使用。

th:replace标签 代码例子如：

header.html :

<!DOCTYPE html>
<!-- 配置开启Thymeleaf页面开发 -->
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>header.html</title>
</head>
<body>

<!-- 设置“模板片段”,该"模板片段"的名称为: headerFragment -->
<div th:fragment="headerFragment">
    <h1>This is a header</h1>
    <p>Hello World!</p>
</div>

<!-- 设置“模板片段”,该"模板片段"的名称为: pFragment -->
 <p th:fragment="pFragment">嘻嘻哈哈!</p>
</body>
</html>

main.html :

<!DOCTYPE html>
<!-- 配置开启Thymeleaf页面开发 -->
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>main.html</title>
</head>
<body>

<!-- div标签中的内容将会被一个新的div标签内容替换-->
<div th:replace="header :: headerFragment">
    11111(这个div + 文本将会被replace)
</div>

<!-- p标签中的内容将会被一个新的p标签内容替换-->
<div>
    <p th:replace="header :: pFragment">helloWorld!</p>
</div>

</body>
</html>

ThymeleafController.java ：

package com.myh.chapter_09.controller;

import com.myh.chapter_09.domain.Env;
import com.myh.chapter_09.domain.Person;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class ThymeleafController {
    
    @GetMapping("/toMain")
    public String toMain() {
        return "main"; //返回值为: String类型，返回一个视图页面给前端
    }

}

th:each标签（搭配th:text等标签使用）

th:each标签 :

thymeleaf标签	描述
th:each标签	th:each 标签的含义是“每个”，它表示对集合中的每一个元素进行迭代。th:each 的主要作用是遍历集合数据，并根据集合中的每个元素生成 HTML 内容。这使得你可以动态地生成表格行、列表项或其他可重复的元素。 ps : th:each标签一般搭配th:text标签使用。

thymeleaf标签

描述

th:each标签

th:each 标签的含义是“每个”，它表示 对集合中 的 每一个元素 进行迭代。th:each 的主要作用是 遍历集合数据，并根据集合中的每个元素生成 HTML 内容。这使得你可以 动态地生成表格行、列表项或其他可重复的元素。
ps :
th:each标签 一般 搭配th:text标签使用。

th:each标签 代码例子如 :

each_Demo.html :

<!DOCTYPE html>
<!--配置开启Thymeleaf模板引擎页面开发-->
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>each_Demo.html </title>
</head>
<body>
 <ul>
     <!-- 使用th:each标签来遍历列表/集合中的数据-->
     <!--  遍历items列表 -->
     <!--  ${ }为thymeleaf表达式，用于获取当前页面中存在或后端传递而来的变量 -->
     <li th:each="item:${items}">
         <!--  使用th:text标签来动态修改标签中的数值 -->
         <span th:text="${item.name}"></span>
         <span th:text="${item.description}"></span>
     </li>
 </ul>
</body>
</html>

Person.java :

package com.myh.chapter_09.domain;

public class Person {

    private String name;
    private String description;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public Person(String name, String description) {
        this.name = name;
        this.description = description;
    }
}

ThymeleafController.java :

package com.myh.chapter_09.controller;

import com.myh.chapter_09.domain.Env;
import com.myh.chapter_09.domain.Person;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class ThymeleafController {

    @GetMapping("/toEach")
    public String toEach(Model model) { //参数Model用于传递“数据”给前端
        //返回一个List集合数据给前端
        List<Person> items = new ArrayList<Person>();
        Person person1 = new Person("小明", "很好！");
        Person person2 = new Person("小红", "很好！");
        items.add(person1);
        items.add(person2);
        model.addAttribute("items", items);
        return "each_Demo"; //返回值为: String类型，返回一个视图页面给前端
    }

}

th:text标签 ( 进行HTML”转义“，确保为“纯文本内容” )

th:text标签 :

Thymeleaf标签描述
th:text标签 用于 动态显示/修改 “ 标签文本内容”。
ps ：
th:text标签 会将所有内容视为纯文本，并在页面上显示为文本，而不是作为 HTML 结构渲染。
th:text标签会对插入的文本进行 HTML 转义，确保文本以纯文本形式显示，从而避免潜在的跨站脚本攻击

例如：
String htmlContent = “
这是一段包含粗体的文本。
”; model.addAttribute(“htmlContent”, htmlContent);
Thymeleaf页面 用th:text标签会将 htmlContent变量的内容输出为”纯文本 “ (会进行HTML转义，确保为纯文本内容 )。但是用 th:utext标签 则会将htmlContent变量中的内容进行 HTML元素渲染 ( 没有进行HTML转义 )，输出为一个 p标签内容，而不是输出为”纯文本“。
th:text标签 代码例子如 :

text_Demo.html ：
<!DOCTYPE html>

<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>text_Demo.html</title>
</head>
<body>
123.


<p th:text="${info}">默认文本内容</p>
</body>
</html>
ThymeleafController.Java ：
package com.myh.chapter_09.controller;

import com.myh.chapter_09.domain.Env;
import com.myh.chapter_09.domain.Person;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class ThymeleafController {

    @GetMapping("/toText")
    public String toText(Model model) { //参数Model用于传递“数据”给前端
        model.addAttribute("info", "HelloWorld!");
        return "text_Demo"; //返回值为: String类型，返回一个视图页面给前端
    }

}

Thymeleaf标签	描述
th:text标签	用于动态显示/修改 “ 标签文本内容”。 ps ： th:text标签会将所有内容视为纯文本，并在页面上显示为文本，而不是作为 HTML 结构渲染。 th:text标签会对插入的文本进行 HTML 转义，确保文本以纯文本形式显示，从而避免潜在的跨站脚本攻击例如： String htmlContent = “ 这是一段包含粗体的文本。 ”; model.addAttribute(“htmlContent”, htmlContent); Thymeleaf页面用th:text标签会将 htmlContent变量的内容输出为”纯文本 “ (会进行HTML转义，确保为纯文本内容 )。但是用 th:utext标签则会将htmlContent变量中的内容进行 HTML元素渲染 ( 没有进行HTML转义 )，输出为一个 p标签内容，而不是输出为”纯文本“。

th:utext标签 ( 不会进行HTML”转义“，有HTML元素时，会正常进行“渲染” )

th:utext标签 :

thymeleaf标签	描述
th:utext标签 :	th:utext标签用于将变量的值作为未转义的 HTML（即原始 HTML）进行动态修改标签中的值/内容。这意味着，如果变量的值中包含 HTML 标签，它们将被浏览器解析并渲染为实际的 HTML 元素，而不是作为纯文本显示 ( 因为没有强制进行HTML转义，没有强制转换为了 “纯文本内容” )。例如：当用户输入的内容内容包含由HTML标签。使用 th:utext 不会将该内容进行HTML转义，不会强制转换为“纯文本”，而是正常的进行HTML元素渲染。

thymeleaf标签

描述

th:utext标签 :

th:utext标签 用于将 变量的值 作为 未转义的 HTML（即原始 HTML）进行 动态修改 标签中的值/内容。这意味着，如果 变量的值 中 包含 HTML 标签，它们将 被浏览器解析 并渲染为实际的 HTML 元素，而不是作为纯文本显示 ( 因为没有强制进行HTML转义，没有强制转换为了 “纯文本内容” )。

例如：
当用户输入的内容内容包含由HTML标签。使用 th:utext 不会将该内容进行HTML转义，不会强制转换为“纯文本”，而是正常的进行HTML元素渲染 。

th:utext标签 代码例子如 ：

utext_Demo.html :

<!DOCTYPE html>
<!--配置开启Thymeleaf模板引擎页面开发-->
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>utext_Demo.html </title>
</head>
<body>

    <!-- th:utext标签将不会进数据/内容进行“HTML转换”,所以当usercontent变量中有HTML元素时，这些HTML元素会被正常渲染，然后在页面上进行显示-->
    <div th:utext="${htmlContent}"></div>

</body>
</html>

ThymeleafController.java :

package com.myh.chapter_09.controller;

import com.myh.chapter_09.domain.Env;
import com.myh.chapter_09.domain.Person;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class ThymeleafController {


    @GetMapping("/toUtext")
    public String toUtext(Model model) { //参数Model用于传递“数据”给前端

        //假设这个usercontent为用户输入的文本内容,而后传递给Thymeleaf魔板
        //Thymeleaf页面中使用th:utext标签时，不会进行HTML转义，所以这个HTML元素会在页面上被正常渲染
        String htmlContent = "<p>这是一段包含<strong>粗体</strong>的文本。</p>";
        model.addAttribute("htmlContent", htmlContent);
        return "utext_Demo"; //返回值为: String类型，返回一个视图页面给前端
    }

}

th:if 标签 ( “真”则渲染，“假”则不渲染 )

th:if标签 :

thymeleaf标签	描述
th:if标签	th:if标签用于在 HTML 中进行条件渲染。如果给定条件为真时，会渲染相应的 HTML 元素；如果条件为假，则不会渲染该元素。 ( 根据条件的真假决定是否渲染 HTML 元素，真则渲染，假则不渲染)

th:if标签 代码例子如 :

if_Demo.html ：

<!DOCTYPE html>
<!--配置开启Thymeleaf模板引擎页面开发-->
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>if_Demo.html </title>
</head>
<body>
     <!--  th:if="${username} != null" 表示如果username不为空,在渲染该div,如果为空则不会渲染该div -->
       <!--  条件为真则渲染，条件为假的则"不渲染"  -->
     <div th:if="${username} != null">
         <p th:text="${username}">默认文本1</p>
     </div>

     <!--  如果username不为空,则该div是不是被渲染的 -->
     <div th:if="${username} == null">
         <p th:text="${username}">默认文本2</p>
     </div>
</body>
</html>

ThymeleafController.java :

package com.myh.chapter_09.controller;

import com.myh.chapter_09.domain.Env;
import com.myh.chapter_09.domain.Person;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class ThymeleafController {

    @GetMapping("/toIf")
    public String toIf(Model model) { //参数Model用于传递“数据”给前端
        model.addAttribute("username", "张三!");
        return "if_Demo"; //返回值为: String类型，返回一个视图页面给前端
    }

}

th:unless ( “假”则渲染，“真”则不渲染 )

th:unless标签 :

thymeleaf标签	描述
th:unless标签	th:unless标签的含义和作用与 th:if标签相反。当给定条件为假时，会渲染相应的 HTML 元素；如果条件为真，则不会渲染该元素。 ( 真则不渲染，假则渲染)

th:unless标签 代码例子如 :

unless_Demo.html ：

<!DOCTYPE html>
<!--配置开启Thymeleaf模板引擎页面开发-->
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>unless_Demo.html </title>
</head>
<body>
<!-- th:unless 表示条件为真时，不会渲染; 条件为假时，会渲染-->
<div th:unless="${name} !=null ">
    <p th:text="${name}">默认文本111</p>
</div>

<!--  如果username为空,该div会被渲染，不为空则不会被渲染 -->
<div th:unless="${name} == null">
    <p th:text="${name}">默认文本222</p>
</div>
</body>
</html>

ThymeleafController.java :

package com.myh.chapter_09.controller;

import com.myh.chapter_09.domain.Env;
import com.myh.chapter_09.domain.Person;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class ThymeleafController {

    @GetMapping("/toUnless")
    public String toUnless(Model model) { //参数Model用于传递“数据”给前端
        model.addAttribute("name", "小明!");
        return "unless_Demo"; //返回值为: String类型，返回一个视图页面给前端
    }

}

th:switch标签、th:case标签 ( 类似于Java中的switch、case语句 )

th:switch标签、th:case标签

Thymeleaf标签描述
th:switch标签 类似于Java中的“switch语句”，搭配th:case标签使用。
th:case标签 类似于Java中的“case语句”，搭配th:switch标签使用。

Thymeleaf标签	描述
th:switch标签	类似于Java中的“switch语句”，搭配th:case标签使用。
th:case标签	类似于Java中的“case语句”，搭配th:switch标签使用。

th:switch标签、th:case标签 代码例子如 ：

switch_case_Demo.html :

<!DOCTYPE html>
<!--配置开启Thymeleaf模板引擎页面开发-->
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>switch_case_Demo.html </title>
</head>
<body>
<!-- th:switch标签 类似于Java中的switch语句 -->
<!-- th:switch标签一般搭配 th:case标签使用  -->
<div th:switch="${user1.role}">
     <p th:case="ADMIN">该用户为管理员！</p>
     <p th:case="USER">该用户为普通用户！</p>
</div>


<div th:switch="${user2.role}">
    <p th:case="ADMIN">该用户为管理员！</p>
    <p th:case="USER">该用户为普通用户！</p>
</div>
</body>
</html>

User.java :

package com.myh.chapter_09.domain;

public class User {

    private String role;

    public String getRole() {
        return role;
    }

    public void setRole(String role) {
        this.role = role;
    }

    public User(String role) {
        this.role = role;
    }
}

ThymeleafController.java :

package com.myh.chapter_09.controller;

import com.myh.chapter_09.domain.Env;
import com.myh.chapter_09.domain.Person;
import com.myh.chapter_09.domain.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class ThymeleafController {

    @GetMapping("/toSwitchCase")
    public String toSwitchCase(Model model) { //参数Model用于传递“数据”给前端
        User user1 = new User("ADMIN");
        User user2 = new User("USER");
        model.addAttribute("user1", user1);
        model.addAttribute("user2", user2);
        return "switch_case_Demo"; //返回值为: String类型，返回一个视图页面给前端
    }

}

th:object标签 ( 在“模板片段”中设置一个“中心对象”, 然后可很便捷地获得该对象的“属性”)

th:object标签

Thymeleaf标签	描述
th:object标签	th:object标签的作用是为模板片段设置一个中心对象，使得你可以在模板中方便地访问该对象的属性，而无需每次都写出完整的表达式。th:object标签可以简化模板代码，提高可读性和维护性。通过在一个 “模板片段” 中定义对象，可在“模板片段中” 通过简洁的语法引用该对象的属性，这样可以避免在模板片段中重复写出相同的表达式。

Thymeleaf标签

描述

th:object标签

th:object标签 的作用是为 模板片段设置一个中心对象，使得你可以在模板中方便地访问该对象的属性，而 无需每次都写出完整的表达式。th:object标签可以简化模板代码，提高可读性和维护性。
通过在 一个 “模板片段” 中定义对象，可在“模板片段中” 通过简洁的 语法引用该对象 的属性，这样可以避免在 模板片段 中 重复写 出 相同的表达式。

th:object标签 代码例子如 ：

object_Demo.html ：

<!DOCTYPE html>
<!--配置开启Thymeleaf模板引擎页面开发-->
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>object_Demo.html </title>
</head>
<body>

<!-- 为该"模板片段"设置一个“中心对象”,则在该“模板片段”可以比较方便、便捷地获得该"对象"中的"属性"-->
<!--   *{ } : 表示“选择变量表达式” ,该表达式用于“选择”特定的 “对象的属性” 或 "执行方法",
    通过该"选择变量表达式"可以更方便便捷的获得"模板片段"中的 "上下文数据" -->
<div th:object="${user}">
    <!--  因为上面设置了"中心对象",就可以很方便便捷地获得该对象中的“属性”  -->
    <p th:text="*{username}"></p>
    <p th:text="*{email}"></p>
    <p th:text="*{role}"></p>
</div>

</body>
</html>

User.java ：

package com.myh.chapter_09.domain;

public class User {

    private String username;
    private String email;
    private String role;

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getRole() {
        return role;
    }

    public void setRole(String role) {
        this.role = role;
    }

    public User(String username, String email, String role) {
        this.username = username;
        this.email = email;
        this.role = role;
    }
}

ThymeleafController.java ：

package com.myh.chapter_09.controller;

import com.myh.chapter_09.domain.Env;
import com.myh.chapter_09.domain.Person;
import com.myh.chapter_09.domain.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class ThymeleafController {

    @GetMapping("/toObject")
    public String toObject(Model model) { //参数Model用于传递“数据”给前端
        User user = new User("张三","12345678@qq.com","管理员");
        model.addAttribute("user", user);
        return "object_Demo"; //返回值为: String类型，返回一个视图页面给前端
    }

}

th:with标签 ( 在“模板片段” 中定义 “局部变量” )

th:with标签

Thymeleaf标签	描述
th:with标签	th:with标签用于在“模板片段”的局部范围内定义变量。这些变量可以在当前模板片段的范围内使用，类似于在Java中的局部变量。th:with标签通常用于封装复杂的表达式或重复使用的表达式，以提高模板的可读性和维护性。 th:with标签允许你在模板片段的某个部分创建局部变量，这个局部变量可以在该部分内的Thymeleaf属性中使用。

Thymeleaf标签

描述

th:with标签

th:with标签 用于在“模板片段”的 局部范围内定义变量。这些变量可以在当前 模板片段 的 范围内使用，类似于 在Java中的局部变量。th:with标签 通常用于封装复杂的 表达式 或 重复使用的表达式 ，以提高模板的可读性和维护性。

th:with标签 允许你在模板片段的 某个部分 创建局部变量，这个局部变量可以在 该部分内 的Thymeleaf属性中使用。

th:with标签 代码例子如 ：

with_Demo.html ：

<!DOCTYPE html>
<!--配置开启Thymeleaf模板引擎页面开发-->
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>with_Demo.html </title>
</head>
<body>

<!-- 使用th:with标签为“模板片段”设置“局部变量”,该变量在该“模板片段”范围内使用-->
<!-- fullName为在该“模板片段”中设置的“局部变量”-->
<div th:with="fullName=${user.firstName} +''+ ${user.lastName}">
    <p>welcome,<span th:text="${fullName}"></span></p>
</div>

<!-- 下面的fullName变量不会生效，因为fullName是局部变量，该变量在该"模板片段"中不会生效-->
<p>hello!,<span th:text="${fullName}"></span></p>
</body>
</html>

User.java ：

package com.myh.chapter_09.domain;

public class User {

    private String firstName;
    private String lastName;

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public User(String firstName, String lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
}

ThymeleafController.java ：

package com.myh.chapter_09.controller;

import com.myh.chapter_09.domain.Env;
import com.myh.chapter_09.domain.Person;
import com.myh.chapter_09.domain.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class ThymeleafController {

    @GetMapping("/toWith")
    public String toWith(Model model) { //参数Model用于传递“数据”给前端
        User user = new User("王","五");
        model.addAttribute("user", user);
        return "with_Demo"; //返回值为: String类型，返回一个视图页面给前端
    }

}

th:attr标签

th:attr标签

Thymeleaf标签	描述
th:attr标签	th:attr标签可以用来“设置” 或 “修改” HTML元素中的任意属性，并且这些属性的值可以是静态的，也可以是动态生成的。

th:attr标签 代码例子如：

attr_Demo.html ：

<!DOCTYPE html>
<!--配置开启Thymeleaf模板引擎页面开发-->
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>attr_Demo.html </title>
</head>
<body>

<!--  用th:attr标签来设置HTML元素中的属性 -->
<!--  #{ } 表示在消息源中检索本地化的信息，如可获得.properties中的本地化的信息 -->
<img  src="/resources/static/images/SpringBoot.jpg" th:attr="alt=${altText},title=${titleText}" />

</body>
</html>

attr_Demo.html ：

package com.myh.chapter_09.controller;

import com.myh.chapter_09.domain.Env;
import com.myh.chapter_09.domain.Person;
import com.myh.chapter_09.domain.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class ThymeleafController {

     @GetMapping("/toAttr")
    public String toAttr(Model model) {
        model.addAttribute("altText", "这是一张SpringBoot图片!");
        model.addAttribute("titleText", "这是一张SpringBoot图片!");
        return "attr_Demo"; //返回值为: String类型，返回一个视图页面给前端
    }

}

th:attrprepend标签

th:attrprepend标签 :

Thymeleaf标签	描述
th:attrprepend标签	th:attrprepend标签的含义是向已有的 HTML 属性前追加新的值，而不是替换或删除原有的值。 th:attrprepend标签允许动态地向现有的 HTML 属性添加额外的值。

th:attrprepend标签 代码例子如 ：

attrprepend_Demo.html :

<!DOCTYPE html>
<!--配置开启Thymeleaf模板引擎页面开发-->
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>attrprepend_Demo.html </title>
</head>
<body>

<!-- 使用th:attrprepend表情啊为class属性值添加前缀 -->
<!--
 在这个例子中，th:attrprepend="class=${'new' + ' '} 中 :
 class : 表示要修改的属性名,即class属性
 'new' + ' ' : 表示要加到在class的属性值"前面"的"值" (即追加到Hello前面的值)
  修改后的class属性值为 : new Hello
-->
<!-- 使用th:attrprepend标签后的下面元素中的class的属性值变为: new Hello-->
<div class="Hello" th:attrprepend="class=${'new' + ' '}">123</div>
</body>
</html>

ThymeleafController.java ：

package com.myh.chapter_09.controller;

import com.myh.chapter_09.domain.Env;
import com.myh.chapter_09.domain.Person;
import com.myh.chapter_09.domain.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class ThymeleafController {

    @GetMapping("/toAttrPrepend")
    public String toAttrPrepend(Model model) {
        return "attrprepend_Demo"; //返回值为: String类型，返回一个视图页面给前端
    }

}

th:attrappend标签

th:attrappend :

Thymeleaf标签描述
th:attrappend th:attrappend标签的作用和 th:attrprepend标签 相同，但 方向相反。

Thymeleaf标签	描述
th:attrappend	th:attrappend标签的作用和 th:attrprepend标签相同，但方向相反。

th:attrappend 代码例子如 ：

attrappend_Demo.html :

<!DOCTYPE html>
<!--配置开启Thymeleaf模板引擎页面开发-->
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>attrappend_Demo.html </title>
</head>
<body>

<!-- 使用th:attrprepend表情啊为class属性值添加后缀 -->
<!--
 在这个例子中，th:attrappend="class=${' ' + 'World!'}" 中 :
 class : 表示要修改的属性名,即class属性
 ' ' + 'World!' : 表示要追加在class的属性"后面"的"值" (即追加到Hello后面的值)
  修改后的class属性值为 : Hello World!
-->
<!-- 使用th:attrprepend标签后的下面元素中的class的属性值变为: new Hello-->
<div class="Hello" th:attrappend="class=${' ' + 'World!'}">123</div>
</body>
</html>

ThymeleafController.java :

package com.myh.chapter_09.controller;

import com.myh.chapter_09.domain.Env;
import com.myh.chapter_09.domain.Person;
import com.myh.chapter_09.domain.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class ThymeleafController {

    @GetMapping("/toAttrAppend")
    public String toAttrAppend(Model model) {
        return "attrappend_Demo"; //返回值为: String类型，返回一个视图页面给前端
    }

}

th:value标签 ( 设置HTML元素的“值” )

th:value标签 ：

Thymeleaf标签	描述
th:value标签	th:value标签用于设置 HTML 元素 ( 如： <input> 、<optioin> ) 的值。th:value标签可以动态地将值绑定到元素上，这意味着你可以根据模型中的数据或表达式的结果来设置元素的值。

th:value标签 代码例子如 ：

value_Demo.html :

<!DOCTYPE html>
<!--配置开启Thymeleaf模板引擎页面开发-->
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>value_Demo.html </title>
</head>
<body>

<form>
    <!--  通过th:value标签为HTML元素设置的"值"  -->
    <input type="text" id="username" name="username" th:value="${userValue}">
</form>
</body>
</html>

ThymeleafController.java :

package com.myh.chapter_09.controller;

import com.myh.chapter_09.domain.Env;
import com.myh.chapter_09.domain.Person;
import com.myh.chapter_09.domain.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class ThymeleafController {

 @GetMapping("/toValue")
    public String toValue(Model model) {
        model.addAttribute("userValue", "张三!");
        return "value_Demo"; //返回值为: String类型，返回一个视图页面给前端
    }

}

th:href标签 ( 可设置HTML元素中的“href属性” 的 “值” / 设置“跳转的url” )

th:href标签 ：

Thymeleaf标签	描述
th:href标签	th:href标签用于指定 Thymeleaf 在渲染 HTML 时应该为 <a>标签设置的 href 属性值。这个值可以是一个静态的字符串，也可以是一个动态的值，通常通过表达式的计算结果来构建链接。

th:href标签 代码例子如 ：

href_Demo.html :

<!DOCTYPE html>
<!--配置开启Thymeleaf模板引擎页面开发-->
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>href_Demo.html </title>
</head>
<body>

<!-- 此处通过th:href标签为a标签设置 href的值 -->
<a th:href="@{/profile(id=${id}, name=${name})}">跳转url.</a>
<!--
通过th:href标签设置后 href的值变为 :
  href="/profile?id=123&name=tom">View Profile  -->

</body>
</html>

ThymeleafController.java :

package com.myh.chapter_09.controller;

import com.myh.chapter_09.domain.Env;
import com.myh.chapter_09.domain.Person;
import com.myh.chapter_09.domain.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class ThymeleafController {
    
 @GetMapping("/toHref")
    public String toHref(Model model) {
        model.addAttribute("id", "123");
        model.addAttribute("name", "tom");
        return "href_Demo"; //返回值为: String类型，返回一个视图页面给前端
    }

}

th:src标签 ( 可设置HTML元素中的“src属性” 的 “值”)

th:src标签 ：

Thymeleaf标签描述
th:src th:src标签 用于 动态地设置HTML元素的 src属性值，这通常用于如 <img>、<script>、<link> 和 <video>等标签。th:src标签 允许你 根据后端传递的数据动态生成资源的 URL。
th:src标签 代码例子如 ：

src_Demo.html :
<!DOCTYPE html>

<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>attr_Demo.html </title>
</head>
<body>

<img th:src="@{/images/+${imageName}}" alt="User Profile Image" />


</body>
</html>

Thymeleaf标签	描述
th:src	th:src标签用于动态地设置HTML元素的 src属性值，这通常用于如 <img>、<script>、<link> 和 <video>等标签。th:src标签允许你根据后端传递的数据动态生成资源的 URL。

th:action标签 ( 用于指定“表单提交”时 “应发送的URL” )

th:action标签 ：

Thymeleaf标签描述
th:action th:action标签 用于 指定表单提交 时 应该发送请求的 URL。它类似于 HTML 中的action 属性，但 Thymeleaf 提供了更多的功能和灵活性。

Thymeleaf标签	描述
th:action	th:action标签用于指定表单提交时应该发送请求的 URL。它类似于 HTML 中的action 属性，但 Thymeleaf 提供了更多的功能和灵活性。

th:action标签 代码例子如 ：

action_Demo.html :

<!DOCTYPE html>
<!--配置开启Thymeleaf模板引擎页面开发-->
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>action_Demo.html </title>
</head>
<body>
<!-- 
th:action标签用于指“定表单提交”时应"该发送请求的URL"。它类似于HTML中的action属性，但Thymeleaf提供了更多的功能和灵活性。
-->
<form th:action="@{/submitData}" method="post">
    <input type="text" name="name" />
    <input type="submit" value="Submit" />
</form>

</body>
</html>

一只大皮卡丘

关注

8
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot | Spring Boot的“视图技术”、Thymeleaf ( 模板引擎 )的 “常用标签”

目录:SpringBoot 支持的 “视图技术”Thymeleaf 的“基本讲解”Thymeleaf的 “常用标签” :配置开启“Thymeleaf模板引擎页面开发”th:fragment标签、th:insert标签 ( 将 ”模板片段“ 插入到 ”页面“ 中的”指定位置“ )th:remove标签 ( 根据 “值” 的不同来决定“是否”在让 ”内容“ 在“页面中显示” )th:replace标签 ( 搭配th:fragment标签使用 )......
复制链接

扫一扫