Thymeleaf初步使用

Posted shanlu0000

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Thymeleaf初步使用相关的知识，希望对你有一定的参考价值。

1，模板页面的html上需要声明Thymeleaf的命名空间，<html xmlns:th="http://www.thymeleaf.org">

2，文本标签 th:text/th:utext

　　th:text进行文本替换，不会解析html

　　　　<p th:text="text标签： + ${msg}"></p>

　　结果页面

　　　　<p>text标签：<h1>我是h1</h1></p>

　　浏览器访问效果

　　　　技术图片

 

 

 　　th:utext进行文本替换，会解析html

　　　　<p th:utext="utext标签： + ${msg}"></p>

　　浏览器访问效果

　　　　技术图片

 

 

 2，字符串拼接

　　①模板页面

　　　　<p th:text="${a}+${b}"></p>

　　　结果页面

　　　　<p>3</p>

　　②模板页面

　　　　<p th:text="|${a} ${b}|"></p>

　　　结果页面

　　　　<p>1 2</p>

　　③模板页面

　　　　<p th:text="${a} > ${b}"></p>

　　   结果页面

　　　　<p>false</p>

　　④模板页面

　　　　<p th:text="!${flag}"></p>

　　  结果页面

　　　　<p>false</p>

 

3，${...}表达式

　　①模板代码

　　　　<p th:text="${user.name}"></p>

　　　　<p th:text="${user.age}"></p>

　　　结果页面

　　　　<p>ljk</p><p>18</p>

4，@{...}链接网址表达式

　　一般和th:herf、th:src进行结合使用，用于显示Web应用中的URL链接，通过@{...}表达式　　             Thymeleaf 可以帮助我们拼接上web应用访问的全路径，同时我们可以通过（）进行参数的拼接

　　①模板代码

　　　　<img th:src="@{/images/gtvglogo.png}" />

　　　结果页面

　　　　<img src="/sbe/images/gtvglogo.png">

　　②模板代码

　　　　<a th:href="@{/product/comments(prodId=${prod.id})}" >查看</a>

　　    结果页面

　　　　<a href="/sbe/product/comments?prodId=2">查看</a>

　　③模板代码

　　　　 <a th:href="@{/product/comments(prodId=${prod.id},prodId2=${prod.id})}" >查看</a>

　　    结果页面

　　　　<a href="/sbe/product/comments?prodId=2&amp;prodId2=2">查看</a>

　　

5，条件判断 th:if/th:unless

　　th:if 当条件为true则显示

　　th:unless当条件为false则显示

　　①模板页面

　　　　<p th:if="${flag}">if判断</p>

　　　结果页面

　　　　<p>if判断</p>

　　②模板页面

　　　　<p th:unless="!${flag}">unless 判断</p>

　　　结果页面

　　　　<p>unless 判断</p>

 

6，switch

　　th:switch，完成类似的条件表达式的操作

　　模板页面

　　　　<div th:switch="${user.name}">

　　　　　　<p th:case="‘ljk‘">User is ljk</p>

　　　　　　<p th:case="‘ljk2‘">User is ljk2</p>

　　　　</div>

　　结果页面

　　　　<div><p> User is ljk</p></div>

 

7,for循环

　　th:each遍历集合

　　模板页面

 <table>
      <thead>
        <tr>
          <th>用户名称</th>
          <th>用户年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr th:each="user : ${userList}" th:class="${userStat.odd}? ‘odd‘">
          <td th:text="${user.name}">Onions</td>
          <td th:text="${user.age}">2.41</td>
        </tr>
      </tbody>
    </table>
----------------------------------------------------------------------
    <table>
      <thead>
        <tr>
          <th>用户名称</th>
        </tr>
      </thead>
      <tbody>
        <tr th:each="str : ${strList}" th:class="${strStat.odd}? ‘odd‘">
          <td th:text="${str}">Onions</td>
        </tr>
      </tbody>
    </table>

　结果页面

技术图片

 

 

 

8,th:href

　　用于声明在a标签上的href属性的链接 该语法会和@{...}表达式一起使用

　　模板代码

　　　　<a href="../home.html" th:href="@{/}">返回首页</a>

　　结果页面

　　　　<a href="/sbe/">返回首页</a>

 

9，th:class

　　用于声明在标签上class属性信息

　　模板页面

　　　　<p th:class=" ‘even‘? ‘even‘ : ‘odd‘" th:text=" ‘even‘? ‘even‘ : ‘odd‘"></p>

　　结果页面

　　　　<p class="even">even</p>

 

10，th:attr

　　用于声明html中或自定义属性信息

　　模板页面

　　　　<img th:attr="src=@{/images/gtvglogo.png}" />

　　结果页面

　　　　<img src="/sbe/images/gtvglogo.png">

 

11，th:value

　　用于声明html中value属性信息

　　模板页面

　　　　 <input type="text" th:value="${name}" />

　　结果页面

　　　　<input type="text" value="ljk">

 

12，th:action

　　用于声明html from标签中action属性信息

　　模板页面

　　　　<form action="subscribe.html" th:action="@{/subscribe}">

　　　　　　<input type="text" name="name" value="abc"/>

　　　　</form>

　　结果页面

　　　　<form action="/sbe/subscribe">

　　　　　　<input type="text" name="name" value="abc">

　　　　</form>

 

13,th:id

　　用于声明html id属性信息

　　模板页面

　　　　<p th:id="${id}"></p>

　　结果页面

　　　　<p id="123"></p

 

14，th:onclick

　　用于声明html 中的onclick事件

　　模板页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function showUserInfo(){
        alert("i am zhuoqianmingyue!")
    }
</script>
</head>
<body>
   <p th:onclick="‘showUserInfo()‘">点我</p>
</body>
</html>

结果页面

<p onclick="showUserInfo()">点我</p>

 

15,th:selected

　　用于声明html 中的selected属性信息

　　模板页面

<select>
    <option name="sex"></option>
    <option th:selected="1 == ${sex}">男</option>
    <option th:selected="0 == ${sex}">女</option>
</select>

　　结果页面

<select>
<option name="sex"></option>
    <option selected="selected">男</option>
    <option>女</option>
</select>

 

16，th:src

　　用于声明html 中的img中src属性信息

　　模板页面

　　　　<img title="GTVG logo" th:src="@{/images/gtvglogo.png}" />

　　结果页面

　　　　<img title="GTVG logo" src="/sbe/images/gtvglogo.png">

 

17，th:style

　　用于声明html中的标签css的样式信息

　　模板页面

　　　　<p th:style=" ‘display:‘ + @{(${isShow} ? ‘none‘ : ‘block‘)} + ‘‘"></p>

　　结果页面

　　　　<p style="display:none"></p>

 

18，Elvis运算符

　　Elvis运算可以理解成简单的判断是否为 null 的三元运算的简写，如果值为 null 则显示默认值，如果不为 null ，则显示原有的值

　　模板页面1

　　　　 <p>Age: <span th:text="${age}?: ‘年龄为null‘"></span></p>

　　结果页面1

　　　　<p>Age: <span>年龄为null</span></p>

　　模板页面2

　　　　<p>Age2: <span th:text="${age2}?: ‘年龄为null‘"></span></p>

　　结果页面2

　　　　<p>Age2: <span>18</span></p>

 

19,三元表达式

　　使用方法是在th:x 中通过 表达式？1选项：2选项

　　模板页面1

　　　　<p th:class=" ‘even‘? ‘even‘ : ‘odd‘" th:text=" ‘even‘? ‘even‘ : ‘odd‘"></p>

　　结果页面1

　　　　<p class="even">even</p>

　　模板页面2

　　　　<p th:value="${name eq ‘ljk‘ ? ‘帅哥‘:‘丑男‘}" th:text="${name eq ‘ljk‘ ? ‘帅哥‘:‘丑男‘}"></p>

　　结果页面2

　　　　<p value="帅哥">帅哥</p>

　　条件表达式操作字符

gt：great than（大于）
ge：great equal（大于等于）
eq：equal（等于）
lt：less than（小于）
le：less equal（小于等于）
ne：not equal（不等于）

 

 

PS：参考 https://www.w3xue.com/exp/article/20199/54847.html

以上是关于Thymeleaf初步使用的主要内容，如果未能解决你的问题，请参考以下文章

Thymeleaf初步使用

Thymeleaf模板引擎的初步使用

Thymeleaf引用片段传入参数

Spring MVC 3.2 Thymeleaf Ajax 片段

ThymeLeaf 片段在错误 th:if 上执行

Thymeleaf 模板 - 有没有办法装饰模板而不是包含模板片段？