（项目实战干货）Spring boot 中Thymeleaf 模板 html 标签使用

最新推荐文章于 2024-03-18 22:41:52 发布

Zht_bs

最新推荐文章于 2024-03-18 22:41:52 发布

阅读量2.4w

点赞数 15

分类专栏： JavaWeb项目文章标签： java spring boot spring web

本文链接：https://blog.csdn.net/zhtbs/article/details/118543103

版权

JavaWeb项目专栏收录该内容

20 篇文章 1 订阅

订阅专栏

Spring boot 中Thymeleaf 模板 html 标签使用

在Spring boot 项目开发中，会常常使用到Thymeleaf模板。在对Thymeleaf模板标签的使用技巧，有的人不是很熟悉。这篇文章专门介绍一下模板标签的使用技巧。静态原型中（html页面）Thymeleaf元素与html元素相结合使用的说明与代码例子。文中会提高大量Thymeleaf标签的属性介绍和使用的逻辑示例代码。
pom.xml 项目中使用的Thymeleaf版本

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf</artifactId>
            <version>3.0.11.RELEASE</version>
        </dependency>

1 文字内联标签引入

Thymeleaf模板中的使用文字内联标签，需要在使用的html元素上加上文字内联标签标记。

<body th:inline="text">            
  ...
</body>

<script th:inline="javascript">
  ... 
</script>

2 逻辑类标签使用

2.1 th:block与th:each [# th:each=""]循环

th:block仅是一个属性容器，允许模板开发人员指定他们想要的任何属性。Thymeleaf执行完成后，th:block标签不会在html页面中保存下来，它只是逻辑标签。

th:each是循环逻辑标签，负责迭代集合中数据到显示到html页中来。

th:each=“迭代器名称: ${集合元素的名称}"。例如： th:each="user:$ {users}”

<body th:inline="text">
<table>
   <tr> 
        <td>名称</td>
        <td>地址</td>
    </tr>    
  <th:block th:each="user:${users}">
    <tr>
        <td th:text="${user.name}">...</td>
        <td th:text="${user.address}">...</td>
    </tr>
  </th:block>
</table>
</body>

javascript中 [# th:each=""]循环遍历也可以使用文字关联标签。

例如：[# th:each=“item: ${list}"] [($ {item.name})]” [/]

<script  th:inline="javascript">  
  [# th:each="item:${users}"] 
    [(${item.name})]  
    [(${item.address})]  
   [/]
</script>

引用名称+Stat 例子：itemStat 遍历循环的公共属性引用名字

当前的迭代索引，从0开始。这是index属性。
从1开始的当前迭代索引。这是count属性。
迭代变量中元素的总数。这是size属性。
每次迭代的iter变量。这是current属性。
当前迭代是偶数还是奇数。这些是even/odd布尔属性。
当前迭代是否是第一个。这是first布尔属性。
当前迭代是否为最后一次。这是last布尔属性。

<table>
   <tr> 
        <td>名称</td>
        <td>地址</td>
    </tr>    
  <th:block th:each="user:${users}">
    <tr th:class="${userStat.odd}?'odd'"><--判断是否是偶数列-->
        <td th:text="${user.name}">...</td>
        <td th:text="${user.address}">...</td>
    </tr>
  </th:block>
</table>

2.2 th:text 与 [(${name})] 功能

th:text显示文本内容标签，可以将循环中遍历的内容通过标签的形式显示在html页面中。

[(${name})]也可以使用文本标签的形式将内容显示在html页面中，这个方法更加灵活，但是前提必须要在body元素中加入th:inline="text"标记参考 1文字内联标签引入。

<table>
   <tr> 
        <td>名称</td>
        <td>地址</td>
    </tr>    
  <th:block th:each="user : ${users}">
    <tr>
        <td th:text="${user.name}">...</td>    //th:text 标签使用方法
        <td>[(${user.address})]</td>           //[(${引用})]文字内联使用方法
    </tr>
  </th:block>
</table>

2.3 @{}字符串拼接语法

@{'字符串'+引用内容}将固定的字符串与引用变量组合成新的字符串内容。

例如@{’…/WbsItemManageContorller/finduser?id=’+${item.id}}

html 显示的字符串’…/WbsItemManageContorller/finduser?id=1’

<table>
   <tr> 
        <td>名称</td>
        <td>地址</td>
        <td>编辑</td>
    </tr>    
  <th:block th:each="user : ${users}">
    <tr>
        <td th:text="${user.name}">...</td>    //th:text 标签使用方法
        <td>[(${user.address})]</td>           //[(${引用})]文字内联使用方法
        <td>
            <a th:href="@{'../WbsItemManageContorller/finduser?id='+${user.id}}">
                修改
            </a>
        </td>         
    </tr>
  </th:block>
</table>

例子 th:onClick：

<table>
   <tr> 
        <td>名称</td>
        <td>地址</td>
        <td>编辑</td>
    </tr>    
  <th:block th:each="user:${users}">
    <tr>
        <td th:text="${user.name}">...</td>    //th:text 标签使用方法
        <td>[(${user.address})]</td>           //[(${引用})]文字内联使用方法
        <td>
            <a th:href="@{'../WbsItemManageContorller/finduser?id='+${user.id}}">
                修改
            </a>
            <div th:onClick="@{'ondel('+${item.id}+')'}">删除</div>
            //@{}字符串拼接语法
        </td>         
    </tr>
  </th:block>
</table>

2.4 th:if判断标签 [# th:if=]

th:if通过条件判断，来决定符合条件的元素是否存在于html页面中来。或者通过 [# th:if=] 文字标签来判断范围内的内容是否显示在html页面中。可以在block容器中写 th:if判断语法，也可以在html 元素中写th:if 判断语法。

gt：great than（大于）>

ge：great equal（大于等于）>=

eq：equal（等于）==

lt：less than（小于）<

le：less equal（小于等于）<=

ne：not equal（不等于）!=

例如： <th:block th:if="${user.id}>10">

<table>
   <tr> 
        <td>名称</td>
        <td>地址</td>
        <td>编辑</td>
    </tr>    
  <th:block th:each="user:${users}">
     //判断用户id大于是否大于10
    <th:block th:if="${user.id}>10">   元素判断标签使用
    <tr>
        <td th:text="${user.name}">...</td>    //th:text 标签使用方法
        <td>[(${user.address})]</td>           //[(${引用})]文字内联使用方法
        <td>
            <a th:href="@{'../WbsItemManageContorller/finduser?id='+${user.id}}">
                修改
            </a>
            <div th:onClick="@{'ondel('+${item.id}+')'}">删除</div>
            //@{}字符串拼接语法
        </td>         
    </tr>
    </th:block>  判断结束标签元素
  </th:block>
</table>

key javascript中 [# th:if=]文字逻辑

<script th:inline="javascript">  
  [# th:each="item:${users}"] 
  `[# th:if="${item.id}>10"] ` 
        [(${item.name})]  
        [(${item.address})]  
    [/]
   [/]
</script>

2.5 标签追加和前置设置

有些业务逻辑中需要在html属性中进行动态的追加属性内容，我们可以使用到th:attrappend和th:attrprepend来进行这样的逻辑操作

<input type="button" value="提交"
 class="btn" 
 th:attrappend="class=${' ' + cssStyle}" />
 <input type="button" value="提交"
  class="btn warning" />

3 普通标签使用

3.1 input 常用标签

标签	说明	备注
th:value	value 属性	th:value="${item.itemid}"
th:id	替换id	`<input th:id="'xxx' + ${collect.id}"/>`
th:text	文本替换	`<p th:text="${collect.description}">description</p>`
th:selected	select选择框选中	`th:selected="(${xxx.id} == ${configObj.dd})"`
th:action	表单提交的地址	`<form action="subscribe.html" th:action="@{/subscribe}">`
th:checked	复选框选中	th:checked="${user.active}"

<form action="subscribe.html">
   <input type="text" name="name" th:value="${user.name}"/>
   <select name="deptid">
       <option value="1" th:selected="(${user.deptid}==1)">部门a</option>
       <option value="2">部门b</option>
       <option value="3">部门c</option>
   </select>   
    
   <input type="checkbox" name="z1" value=""/> 
   <input type="hidden" name="z2" value=""/> 
   <input type="radio" name="z3" value=""/> 
   <input type="button"  value="提交" th:onclick="@{'ondel('+${item.id}+')'}"/> 
</form>
   
<input type="checkbox" name="option2" checked />
<input type="checkbox" name="active"
 th:checked="${user.active}" />  

<option value="1" selected >部门a</option>  
<option value="1" th:selected="(${user.deptid}==1)">部门a</option> //select 判断返显示

在html属性标签中有判断是否为false和true的情况。以下标签都可以使用 if 的方式判断true与false的情况。

`th:async`	`th:autofocus`	`th:autoplay`
`th:checked`	`th:controls`	`th:declare`
`th:default`	`th:defer`	`th:disabled`
`th:formnovalidate`	`th:hidden`	`th:ismap`
`th:loop`	`th:multiple`	`th:novalidate`
`th:nowrap`	`th:open`	`th:pubdate`
`th:readonly`	`th:required`	`th:reversed`
`th:scoped`	`th:seamless`	`th:selected`

3.2 常用标签

Thymeleaf所有标签合集，这些为在Thymeleaf中可以使用和引用的标签。

`th:abbr`	`th:accept`	`th:accept-charset`
`th:accesskey`	`th:action`	`th:align`
`th:alt`	`th:archive`	`th:audio`
`th:autocomplete`	`th:axis`	`th:background`
`th:bgcolor`	`th:border`	`th:cellpadding`
`th:cellspacing`	`th:challenge`	`th:charset`
`th:cite`	`th:class`	`th:classid`
`th:codebase`	`th:codetype`	`th:cols`
`th:colspan`	`th:compact`	`th:content`
`th:contenteditable`	`th:contextmenu`	`th:data`
`th:datetime`	`th:dir`	`th:draggable`
`th:dropzone`	`th:enctype`	`th:for`
`th:form`	`th:formaction`	`th:formenctype`
`th:formmethod`	`th:formtarget`	`th:fragment`
`th:frame`	`th:frameborder`	`th:headers`
`th:height`	`th:high`	`th:href`
`th:hreflang`	`th:hspace`	`th:http-equiv`
`th:icon`	`th:id`	`th:inline`
`th:keytype`	`th:kind`	`th:label`
`th:lang`	`th:list`	`th:longdesc`
`th:low`	`th:manifest`	`th:marginheight`
`th:marginwidth`	`th:max`	`th:maxlength`
`th:media`	`th:method`	`th:min`
`th:name`	`th:onabort`	`th:onafterprint`
`th:onbeforeprint`	`th:onbeforeunload`	`th:onblur`
`th:oncanplay`	`th:oncanplaythrough`	`th:onchange`
`th:onclick`	`th:oncontextmenu`	`th:ondblclick`
`th:ondrag`	`th:ondragend`	`th:ondragenter`
`th:ondragleave`	`th:ondragover`	`th:ondragstart`
`th:ondrop`	`th:ondurationchange`	`th:onemptied`
`th:onended`	`th:onerror`	`th:onfocus`
`th:onformchange`	`th:onforminput`	`th:onhashchange`
`th:oninput`	`th:oninvalid`	`th:onkeydown`
`th:onkeypress`	`th:onkeyup`	`th:onload`
`th:onloadeddata`	`th:onloadedmetadata`	`th:onloadstart`
`th:onmessage`	`th:onmousedown`	`th:onmousemove`
`th:onmouseout`	`th:onmouseover`	`th:onmouseup`
`th:onmousewheel`	`th:onoffline`	`th:ononline`
`th:onpause`	`th:onplay`	`th:onplaying`
`th:onpopstate`	`th:onprogress`	`th:onratechange`
`th:onreadystatechange`	`th:onredo`	`th:onreset`
`th:onresize`	`th:onscroll`	`th:onseeked`
`th:onseeking`	`th:onselect`	`th:onshow`
`th:onstalled`	`th:onstorage`	`th:onsubmit`
`th:onsuspend`	`th:ontimeupdate`	`th:onundo`
`th:onunload`	`th:onvolumechange`	`th:onwaiting`
`th:optimum`	`th:pattern`	`th:placeholder`
`th:poster`	`th:preload`	`th:radiogroup`
`th:rel`	`th:rev`	`th:rows`
`th:rowspan`	`th:rules`	`th:sandbox`
`th:scheme`	`th:scope`	`th:scrolling`
`th:size`	`th:sizes`	`th:span`
`th:spellcheck`	`th:src`	`th:srclang`
`th:standby`	`th:start`	`th:step`
`th:style`	`th:summary`	`th:tabindex`
`th:target`	`th:title`	`th:type`
`th:usemap`	`th:value`	`th:valuetype`
`th:vspace`	`th:width`	`th:wrap`
`th:xmlbase`	`th:xmllang`	`th:xmlspace`

3.3 工具内部对象

在Thymeleaf中为我为提供了一组非常使用的工具对象。帮助我们进行编码

#execInfo：有关正在处理的模板的信息。
#messages：用于获取变量表达式内的外部化消息的方法，与使用＃{…}语法获得消息的方法相同。
#uris：用于转义部分URL / URI的方法
#conversions：用于执行已配置的转换服务（如果有）的方法。
#dates：java.util.Date对象的方法：格式化，组件提取等。
#calendars：类似于#dates，但用于java.util.Calendar对象。
#numbers：格式化数字对象的方法。
#strings：String对象的方法：包含，startsWith，前置/附加等。
#objects：一般对象的方法。
#bools：布尔值评估的方法。
#arrays：数组方法。
#lists：列表方法。
#sets：套方法。
#maps：地图方法。
#aggregates：用于在数组或集合上创建聚合的方法。
#ids：用于处理可能重复的id属性的方法（例如，由于迭代的结果）。

Zht_bs

关注

15
点赞
踩
25

收藏

觉得还不错? 一键收藏
打赏
18
评论
（项目实战干货）Spring boot 中Thymeleaf 模板 html 标签使用

Spring boot 中Thymeleaf 模板 html 标签使用在Spring boot 项目开发中，会常常使用到Thymeleaf模板。在对Thymeleaf模板标签的使用技巧，有的人不是很熟悉。这篇文章专门介绍一下模板标签的使用技巧。静态原型中（html页面）Thymeleaf元素与html元素相结合使用的说明与代码例子。文中会提高大量Thymeleaf标签的属性介绍和使用的逻辑示例代码。1 文字内联标签引入 Thymeleaf模板中的使用文字内联标签，需要在使用的html元素上加上
复制链接

扫一扫