Spring Boot | Spring Boot的“视图技术”、Thymeleaf ( 模板引擎 )的 “常用标签”
目录:
- SpringBoot 支持的 “视图技术”
- Thymeleaf 的“基本讲解”
- Thymeleaf的 “常用标签” :
- 配置开启“Thymeleaf模板引擎页面开发”
- th:fragment标签、th:insert标签 ( 将 ”模板片段“ 插入到 ”页面“ 中的”指定位置“ )
- th:remove标签 ( 根据 “值” 的不同来决定“是否”在让 ”内容“ 在“页面中显示” )
- th:replace标签 ( 搭配th:fragment标签使用 )
- th:each标签 ( 搭配th:text等标签使用 )
- th:text标签 ( 进行HTML”转义“,确保为“纯文本内容” )
- th:utext标签 ( 不会进行HTML”转义“,有HTML元素时,会正常进行“渲染” )
- th:if 标签 ( “真”则渲染,“假”则不渲染 )
- th:unless ( “假”则渲染,“真”则不渲染 )
- th:switch标签、th:case标签 ( 类似于Java中的switch、case语句 )
- th:object标签 ( 在“模板片段”中设置一个“中心对象”, 然后可很便捷地获得该对象的“属性”)
- th:with标签 ( 在“模板片段” 中定义 “局部变量” )
- th:attr标签
- th:attrprepend标签
- th:attrappend标签
- th:value标签 ( 设置HTML元素的“值” )
- th:href标签 ( 可设置HTML元素中的“href属性” 的 “值” / 设置“跳转的url” )
- th:src标签 ( 可设置HTML元素中的“src属性” 的 “值”)
作者简介 :一只大皮卡丘,计算机专业学生,正在努力学习、努力敲代码中! 让我们一起继续努力学习!
该文章参考学习教材为:
《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: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标签使用。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> <!-- 配置开启thymeleaf模板引擎页面 --> <html lang="en" xmlns:th="http://www/thymeleaf.org"> <head> <meta charset="UTF-8"> <title>text_Demo.html</title> </head> <body> 123. <!-- th:text标签 表示动态显示/修改标签文本内容--> <!-- ${}表示从当前页面或从后端传递而来的参数中找“指定名称”的变量值 --> <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类型,返回一个视图页面给前端 } }
th:utext标签 ( 不会进行HTML”转义“,有HTML元素时,会正常进行“渲染” )
th:utext标签 :
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标签使用。 th:switch标签、th:case标签 代码例子如 :1
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标签可以简化模板代码,提高可读性和维护性。
通过在 一个 “模板片段” 中 定义对象,可在“模板片段中” 通过 简洁 的 语法 引用 该对象 的属性,这样可以 避免 在 模板片段 中 重复写 出 相同的表达式。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属性中 使用。
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标签 相同,但 方向相反。 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> <!--配置开启Thymeleaf模板引擎页面开发--> <html lang="en" xmlns:th="http://www/thymeleaf.org"> <head> <meta charset="UTF-8"> <title>attr_Demo.html </title> </head> <body> <!-- 通过th:src标签设置src属性的值 --> <img th:src="@{/images/+${imageName}}" alt="User Profile Image" /> <!-- 如果imageName的值是user-profile.jpg,Thymeleaf会将上述代码渲染为: <img src="/images/user-profile.jpg" alt="User Profile Image" /> --> </body> </html>
原文地址:https://blog.csdn.net/m0_70720417/article/details/137529054
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!