thymeleaf 常用用法

最新推荐文章于 2024-07-30 23:05:40 发布

shanshan_blog

最新推荐文章于 2024-07-30 23:05:40 发布

阅读量3k

点赞数 1

分类专栏： Java spring-boot-thymeleaf 文章标签： Thymeleaf fragment java spring th

本文链接：https://blog.csdn.net/shanshan_blog/article/details/65448286

版权

Java spring-boot-thymeleaf 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

thymeleaf 常用用法速查表

1、依赖包添加

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          compile("org.springframework.boot:spring-boot-starter-thymeleaf")

另外，需要在html文件中需添加html标签:

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
         
         
          
          <html xmlns:th="http://www.thymeleaf.org">

在application.yml中添加:

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
         
         
          
          #thymeleaf start 
          
           thymeleaf: 
             mode: HTML5 
             encoding: UTF-8 
          
              content-type: text/html 
          
             #开发时关闭缓存,不然没法看到实时页面 
             cache: false 
         #thymeleaf end

官网文档http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html。

2、表达式用法

2.1 简单的表达式：

变量表达式： ${...}；

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <p>Today is: <span th:text="${today}">13 february 2011</span>.</p>

其中，“13 february 2011”只是对today变量的说明或例子，不管today的值是否为空，today都不会被其替换掉。若要使用默认表达式，可用：

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <p>Today is: <span th:text="(${test} == null)? 'test为空的默认值' :'test不为空的默认值'">13 february 2011</span>.</p>

选择变量表达式：*{...}；

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <div th:object="${session.user}"> 
          
          
              <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p> 
          
          
              <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p> 
          
          
              <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p> 
          
          
          </div>

等价于：

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <div> 
          
           <p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p> 
           <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p> 
           <p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p> 
          
          </div>

消息变量表达式：#{...};

1.消息变量表达式同OGNL表达方式。

2.#表达基本对象

-- #ctx：上下文对象。

-- #vars: 上下文变量。

-- #locale：上下文的语言环境。

-- #request（仅在web上下文）的HttpServletRequest对象。

-- #response（仅在web上下文）的HttpServletResponse对象。

-- #session（仅在web上下文）的HttpSession对象。

-- #servletContext（仅在web上下文）的ServletContext对象。

注意：请求参数param、session属性、以及application全局属性在引用的时候，可以省略#符号。

3.#引用工具类的方法

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
         
         
          
          ${#dates.format(date, 'yyyy/MM/dd')} 
          
         ${#strings.isEmpty(name)} 
          
          ${#lists.size(list)}

链接URL表达式：@{...} ；

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <p>Please select an option</p> 
          
         <ol> 
          
           <li><a href="user.html" th:href="@{/user}">本地uer页面</a></li> 
          
          
           <li><a th:href="@{//www.baidu.com}">去百度</a></li> 
          
          
          </ol>

相对于页面的url：user/login.html

相对于上下文的url：/itemdetails?id=3

相对于服务器的url： ~/billing/processInvoic

相对于协议类的url：//code.jquery.com/jquery-2.0.3.min.js

含有请求参数的url：@{/order/{orderId}/details(orderId=${orderId})}

片段表达式：~{...}。

片段表达式来表示标记片段和移动它们周围模板的简便方法。这使我们能够复制它们，将它们传递到其他模板作为参数，等等。常见的用途使用是片段的插入th:insert（在后面的章节有片段定义及引用的例子）：

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
         
         
          
          <div th:insert="~{commons :: main}">...</div>

2.2文本表达式

文字：'one text'，'Anotherone!'，... ；

数字：0，34，3.0，12.3，...；

布尔文字：true，false；

null文本： null；

文字token：one，sometext，main，...；

文字token指的是由字母（A-Z和a-z），数字（0-9），方括号（[ ]），点（.），连字符（-）和下划线（_）等组成的字符串，并且没有空格，没有标点符号。

2.3 文本操作：

字符串连接： +

文字替换：|The name is ${name}|

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <span th:text="|Welcome to our application, ${user.name}!|"></span>

等价于：

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <span th:text="'The name of the user is ' + ${user.name}"></span>

2.4 算术运算：

二元运算符：+，-，*，/，%

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
         
         
          
          <td th:text="${salary1.preTaxSalary/100}"></td>

取负（一元运算符）：-；

2.5 布尔操作：

二元运算符：and，or；

布尔否定（一元运算符）：!，not；

2.6 比较和相等：

比较：>，<，>=，<=（gt，lt，ge，le）；

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <div th:if="${prodStat.count} &gt; 1">

等价于：

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <div th:if="${prodStat.count} > 1">

也等价于：

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <div th:if="${prodStat.count} gt 1">

相等运算符：==，!=（eq，ne）；

2.7 条件表达式：

如果- 则：( if) ? (then )

如果- 则 - 否则：( if) ? (then) : (else ) 默认： ( value) ?:(defaultvalue )

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <div th:if="${prodStat.count} &gt; 1"> 
          
          
          <span th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')">

2.8 特殊符号：无操作：_ 。

所有这些运算可以被组合并嵌套。

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <div th:if="${prodStat.count} &gt; 1"> 
          
          
          <span th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')">

3、迭代用法 th:each

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
         
         
          
          <table> 
          
           <tr> 
             <th>INDEX</th> 
             <th>NAME</th> 
          
              <th>PRICE</th> 
          
             <th>INSTOCK</th> 
           </tr> 
           <tr> 
             <tr th:each="prod, index: ${prods}"> 
             <td th:text="${index.index}">1</td> 
             <td th:text="${prod.name}">Onions</td> 
             <td th:text="${prod.price}">2.41</td> 
          
              <td th:text="${prod.inStock}?'true' : 'false'">yes</td> 
          
          
            </tr> 
          
         </table>

4、分支用法th:case

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <div th:switch="${user.role}"> 
          
           <p th:case="'admin'">User is an administrator</p> 
          
            <p th:case="'manager'">User is a manager</p> 
          
          
            <p th:case="*">User is some other thing</p> 
          
          
          </div>

5、条件用法th:if

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <div th:if="${test} > 1"> 
          
          
              <p>Today is: <span th:text=" (${test} == null)? '' :'test'">13 february 2011</span>.</p>--> 
          
          
          </div>

6、片段表达式用法

有些组件如页脚、标题等组件经常在多个页面中使用，为了能够代码复用，我们可以在/WEB-INF/templates

目录下定义一个模板，以供其他地方引用。下面举个页脚的例子：文件目录为/WEB-INF/templates/footer.html，具体代码如下。

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <!DOCTYPE html> 
          
         <html xmlns:th="http://www.thymeleaf.org"> 
          
            <body>   
          
             <div th:fragment="copy"> 
               &copy; 2011 The Good Thymes Virtual Grocery 
          
              </div>   
          
          
            </body>   
          
          
          </html>

这就定义了一个名为copy的代码片段。可以参考下面方式引用它。

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <body> 
          
          
            ... 
          
          
            <div th:insert="~{footer :: copy}"></div>   
          
         </body>

如果想使代码片段的参数可定制化，可以参考以下方式。

 
 
 
  
  
   
   
    
    
     
     
      
       
        
         
          
          <div th:fragment="frag (onevar,twovar)"> 
          
          
              <p th:text="${onevar} + ' - ' + ${twovar}">...</p> 
          
          
          </div>