![Spring Boot实战:从0开始动手搭建企业级项目](https://wfqqreader-1252317822.image.myqcloud.com/cover/850/40107850/b_40107850.jpg)
8.4 Thymeleaf属性值讲解
8.4.1 Thymeleaf模板解读
在第一个Thymeleaf模板引擎整合案例中,读取动态数据并渲染的语句如下所示:
![](https://epubservercos.yuewen.com/3069E4/20862583308964806/epubprivate/OEBPS/Images/157-3.jpg?sign=1739233399-RDMSiwep5frUZzmof5qWhWBrtby7PDO9-0-9d53153456f3e6c52733257e33030d1a)
这是Thymeleaf模板引擎技术常见的语法规则,接下来详细分析这个知识点。
如图8-8所示,该模板文件语句中包含三部分内容。
![](https://epubservercos.yuewen.com/3069E4/20862583308964806/epubprivate/OEBPS/Images/157-4.jpg?sign=1739233399-H1KaFR31qLblvi2swjjpsNXtptlW2bfH-0-f036f454f945e46d8ee8f3944531ff80)
图8-8 Thymeleaf模板语句
①html标签
②Thymeleaf模板引擎的th标签
③Thymeleaf表达式
前半部分p为HTML的标签,后半部分是Thymeleaf属性标签和表达式语法。th:text表示文本替换、${description}表示读取后台设置的description字段。该模板文件语句的作用就是动态地将p标签的内容替换为description字段的内容。
同时该语句也展示了Thymeleaf模板文件的编写规则。
①任意的Thymeleaf属性标签th:* 需要写在html标签中(th:block除外)
②Thymeleaf表达式写在Thymeleaf属性标签中
8.4.2 Thymeleaf属性值的设置
这部分将介绍一些关于Thymeleaf设置属性值的内容。
th:text对应HTML5语法中的text属性。除th:text属性以外,Thymeleaf模板引擎也提供了其他的标签属性来替换HTML5原生属性的值。标签属性节选如图8-9所示。
![](https://epubservercos.yuewen.com/3069E4/20862583308964806/epubprivate/OEBPS/Images/158-1.jpg?sign=1739233399-rR7qFy3hUmpyRu8IPY3rsG36w5HdY5Ny-0-ae3a1dde1a2831885bbd27fb83f02b37)
图8-9 Thymeleaf标签属性节选
其中th:background对应HTML5中的背景属性;th:class对应HTML5中的class属性;th:href对应HTML5中的链接地址属性;th:id和th:name分别对应HTML5中的id和name属性。
th:block比较特殊,它是Thymeleaf提供的唯一的一个Thymeleaf块级元素。其特殊性在于Thymeleaf模板引擎在处理<th:block>的时候会删掉其本身,而保留标签中的内容。
这里只列举了部分属性,完整内容可以查看thymeleaf-attributes。
8.4.3 修改属性值实践
在templates目录下新建attributes.html文件,笔者将演示使用Thymeleaf语法来修改其属性值。
attributes.html代码如下所示:
![](https://epubservercos.yuewen.com/3069E4/20862583308964806/epubprivate/OEBPS/Images/159-1.jpg?sign=1739233399-NNUfjawB5Q4aF2j6uOd9BlNGNbPfHaTx-0-4aa87ef0d5d8cb87429b11d659a90cb8)
包含background、id、name、class等的html标签都设置了默认值,并在每个标签体中都添加了对应的th标签来读取动态数据。这里直接选择该文件,右键点击并选择Open in Browser查看页面效果,如图8-10所示。
![](https://epubservercos.yuewen.com/3069E4/20862583308964806/epubprivate/OEBPS/Images/160-1.jpg?sign=1739233399-n12ghuzAOfS9EFrzgfLsi6uJf4Sk2FAs-0-35da74e8172c30ad61eb37956cb1bc7d)
图8-10 attributes.html页面默认显示效果
需要注意的是,当前页面是直接打开的,并没有通过Web服务器。此时,attributes.html页面能够直接正常访问且页面中的内容和元素的属性值都是默认值。
修改控制类代码,在ThymeleafController类中新增attributes()方法并将请求转发至该模板页面,代码如下所示:
![](https://epubservercos.yuewen.com/3069E4/20862583308964806/epubprivate/OEBPS/Images/160-2.jpg?sign=1739233399-XX6Fzlr5gWwZemBylKckiU6B08x4aZxP-0-df7c2aa9d06096e9af2eaf02d0e741b9)
在编码完成后,重启Spring Boot项目。在项目启动成功后,可以打开浏览器并访问如下地址:
![](https://epubservercos.yuewen.com/3069E4/20862583308964806/epubprivate/OEBPS/Images/160-3.jpg?sign=1739233399-yB7LXmWKeSERJ0G2iQuB7WqTAE1FYuZu-0-ebd9dfa6d26175f3295807b9593a6320)
得到的页面结果如图8-11所示。
![](https://epubservercos.yuewen.com/3069E4/20862583308964806/epubprivate/OEBPS/Images/161-1.jpg?sign=1739233399-44RNMh4evZu0N69FIvrTjHFMwAXHqoC5-0-0b27c027365331aff7c6a9165037d46a)
图8-11 attributes.html模板引擎渲染后的显示效果
打开浏览器控制台查看该页面的节点,即图8-11所框选的内容。
由于th标签的存在,页面在通过Thymeleaf渲染后,与静态页面相比较,内容和元素属性已经动态切换了,原来的默认值都变成了attributes()方法中设置的值。
这部分内容可以结合笔者提供的源码进行理解,也可以使用其他常用的th标签来练习。