thymeleaf模板 遍歷物件

DreamWeaver_Zhou發表於2018-02-24
物件

自從來公司後都沒用過jsp當介面渲染了,因為前後端分離不是很好,反而模板引擎用的比較多,thymeleaf最大的優勢字尾為html,就是隻需要瀏覽器就可以展現頁面了,還有就是thymeleaf可以很好的和spring整合.下面開始學習.

1.引入依賴

maven中直接引入

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
  • 1
  • 2
  • 3
  • 4

可以檢視依賴關係,發現spring-boot-starter-thymeleaf下面已經包括了spring-boot-starter-web,所以可以把spring-boot-starter-web的依賴去掉.

2.配置檢視解析器

spring-boot很多配置都有預設配置,比如預設頁面對映路徑為
classpath:/templates/*.html
同樣靜態檔案路徑為
classpath:/static/

在application.properties中可以配置thymeleaf模板解析器屬性.就像使用springMVC的JSP解析器配置一樣

#thymeleaf start
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#開發時關閉快取,不然沒法看到實時頁面
spring.thymeleaf.cache=false
#thymeleaf end
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

具體可以配置的引數可以檢視
org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties這個類,上面的配置實際上就是注入到該類中的屬性值.

3.編寫DEMO

1.控制器

    @Controller
    public class HelloController {

        private Logger logger = LoggerFactory.getLogger(HelloController.class);
        /**
         * 測試hello
         * @return
         */
        @RequestMapping(value = "/hello",method = RequestMethod.GET)
        public String hello(Model model) {
            model.addAttribute("name", "Dear");
            return "hello";
        }

    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

2.view(註釋為IDEA生成的索引,便於IDEA補全)

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<!--/*@thymesVar id="name" type="java.lang.String"*/-->
<p th:text="'Hello！, ' + ${name} + '!'" >3333</p>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

3.效果

這裡寫圖片描述

4.基礎語法

回味上面的DEMO,可以看出來首先要在改寫html標籤

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

這樣的話才可以在其他標籤裡面使用th:*這樣的語法.這是下面語法的前提.

1.獲取變數值

<p th:text="'Hello！, ' + ${name} + '!'" >3333</p>
  • 1
  • 2

可以看出獲取變數值用$符號,對於javaBean的話使用變數名.屬性名方式獲取,這點和EL表示式一樣.

另外$表示式只能寫在th標籤內部,不然不會生效,上面例子就是使用th:text標籤的值替換p標籤裡面的值,至於p裡面的原有的值只是為了給前端開發時做展示用的.這樣的話很好的做到了前後端分離.

2.引入URL

Thymeleaf對於URL的處理是通過語法@{…}來處理的

<a th:href="@{http://blog.csdn.net/u012706811}">絕對路徑</a>
<a th:href="@{/}">相對路徑</a>
<a th:href="@{css/bootstrap.min.css}">Content路徑,預設訪問static下的css資料夾</a>
  • 1
  • 2
  • 3

類似的標籤有:th:href和th:src

3.字串替換

很多時候可能我們只需要對一大段文字中的某一處地方進行替換，可以通過字串拼接操作完成：

<span th:text="'Welcome to our application, ' + ${user.name} + '!'">
  • 1
  • 2

一種更簡潔的方式是：

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

當然這種形式限制比較多，|…|中只能包含變數表示式${…}，不能包含其他常量、條件表示式等。

4.運算子

在表示式中可以使用各類算術運算子，例如+, -, *, /, %

th:with="isEven=(${prodStat.count} % 2 == 0)"
  • 1
  • 2

邏輯運算子>, <, <=,>=，==,!=都可以使用，唯一需要注意的是使用<,>時需要用它的HTML轉義符：

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

5.條件

if/unless

Thymeleaf中使用th:if和th:unless屬性進行條件判斷，下面的例子中，標籤只有在th:if中條件成立時才顯示：

<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
  • 1
  • 2

th:unless於th:if恰好相反，只有表示式中的條件不成立，才會顯示其內容。

Switch

Thymeleaf同樣支援多路選擇Switch結構：

<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
</div>
  • 1
  • 2
  • 3
  • 4

預設屬性default可以用*表示：

<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
  <p th:case="*">User is some other thing</p>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5

6.迴圈

渲染列表資料是一種非常常見的場景，例如現在有n條記錄需要渲染成一個表格

，該資料集合必須是可以遍歷的，使用th:each標籤： 
<body>
  <h1>Product list</h1>

  <table>
    <tr>
      <th>NAME</th>
      <th>PRICE</th>
      <th>IN STOCK</th>
    </tr>
    <tr th:each="prod : ${prods}">
      <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>

  <p>
    <a href="../home.html" th:href="@{/}">Return to home</a>
  </p>
</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

可以看到，需要在被迴圈渲染的元素（這裡是）中加入th:each標籤，其中th:each=”prod : ${prods}”意味著對集合變數prods進行遍歷，迴圈變數是prod在迴圈體中可以通過表示式訪問。

7.Utilities

為了模板更加易用，Thymeleaf還提供了一系列Utility物件（內建於Context中），可以通過#直接訪問：

  • #dates
  • #calendars
  • #numbers
  • #strings
  • arrays
  • lists
  • sets
  • maps
  • …
    下面用一段程式碼來舉例一些常用的方法：

date

/*
 * Format date with the specified pattern
 * Also works with arrays, lists or sets
 */
${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}
${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}
${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}

/*
 * Create a date (java.util.Date) object for the current date and time
 */
${#dates.createNow()}

/*
 * Create a date (java.util.Date) object for the current date (time set to 00:00)
 */
${#dates.createToday()}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

string

/*
 * Check whether a String is empty (or null). Performs a trim() operation before check
 * Also works with arrays, lists or sets
 */
${#strings.isEmpty(name)}
${#strings.arrayIsEmpty(nameArr)}
${#strings.listIsEmpty(nameList)}
${#strings.setIsEmpty(nameSet)}

/*
 * Check whether a String starts or ends with a fragment
 * Also works with arrays, lists or sets
 */
${#strings.startsWith(name,'Don')}                  // also array*, list* and set*
${#strings.endsWith(name,endingFragment)}           // also array*, list* and set*

/*
 * Compute length
 * Also works with arrays, lists or sets
 */
${#strings.length(str)}

/*
 * Null-safe comparison and concatenation
 */
${#strings.equals(str)}
${#strings.equalsIgnoreCase(str)}
${#strings.concat(str)}
${#strings.concatReplaceNulls(str)}

/*
 * Random
 */
${#strings.randomAlphanumeric(count)}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

快速的學習還是直接寫例子最快,後期寫Demo遇到問題再加上去

參考連結: http://www.tianmaying.com/tutorial/using-thymeleaf

整合專案地址:

https://github.com/nl101531/JavaWEB

補充

在spring-boot1.4之後,支援thymeleaf3,可以更改版本號來進行修改支援.
3相比2極大的提高了效率,並且不需要標籤閉合,類似的link,img等都有了很好的支援,按照如下配置即可

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <!-- set thymeleaf version -->
    <thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
    <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
    <!--set java version-->
    <java.version>1.8</java.version>
  </properties>

相關文章