Spring Boot學習記錄(二)--thymeleaf模板

阿新 • • 發佈：2019-01-17

Spring Boot學習記錄(二)–thymeleaf模板

標籤（空格分隔）： spring-boot

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

1.引入依賴

maven中直接引入

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

可以檢視依賴關係,發現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

具體可以配置的引數可以檢視
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";
        }

    }

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>

3.效果

這裡寫圖片描述

4.基礎語法

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

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

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

1.獲取變數值

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

可以看出獲取變數值用$符號,對於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>

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

3.字串替換

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

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

一種更簡潔的方式是：

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

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

4.運算子

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

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

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

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

5.條件

if/unless

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

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

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>

預設屬性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>

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>

可以看到，需要在被迴圈渲染的元素（這裡是）中加入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()}

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)}

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

整合專案地址:

補充

在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>

Spring Boot學習記錄(二)--thymeleaf模板

Spring Boot學習記錄(二)–thymeleaf模板

1.引入依賴

2.配置檢視解析器

4.基礎語法

1.獲取變數值

2.引入URL

3.字串替換

4.運算子

5.條件

6.迴圈

7.Utilities

補充

Spring Boot學習記錄(二)--thymeleaf模板

Spring Boot學習（二）

spring boot 學習(十二)攔截器實現IP黑名單

Spring Boot 2.0 整合Thymeleaf 模板引擎

Spring Boot學習系列(五)------Thymeleaf

在spring boot 專案中使用thymeleaf模板，將後臺資料傳遞給前臺介面。

Spring Boot學習筆記(二二) - 與Mybatis整合

Spring Boot學習（二）：mybatis + druid + 多資料來源自動切換

Spring Boot 學習（二）特點

Spring Boot學習(十二)之Spring Boot使用@Async實現非同步呼叫

Spring Boot學習記錄(四)--問題記錄

spring boot 學習記錄

spring boot用ModelAndView向Thymeleaf模板傳引數

Spring Boot學習筆記-Thymeleaf模板引擎的配置

spring boot 學習筆記（4）模板引擎 Thymeleaf

elasticsearch6.3.2學習記錄二《spring boot 搭建es開發環境，建立索引，新增資料，查詢檢索》

我的第一個spring boot程序（spring boot 學習筆記之二）

Spring Boot 學習筆記（二）

Spring Boot 學習筆記（二）—— WEB相關配置

Spring Boot 學習筆記（十二）——單元測試

Spring Boot學習記錄(二)--thymeleaf模板

Spring Boot學習記錄(二)–thymeleaf模板

1.引入依賴

2.配置檢視解析器

4.基礎語法

1.獲取變數值

2.引入URL

3.字串替換

4.運算子

5.條件

6.迴圈

7.Utilities

補充

相關推薦