springboot學習筆記-thymeleaf

時間 2019-11-13

標籤 springboot 學習筆記 thymeleaf 欄目 Spring 简体版

原文原文鏈接

Thymeleaf的介紹

簡單說， Thymeleaf 是一個跟 Velocity、FreeMarker 相似的模板引擎，它能夠徹底替代 JSP 。相較與其餘的模板引擎，它有以下三個極吸引人的特色：css

Thymeleaf 在有網絡和無網絡的環境下皆可運行，即它可讓美工在瀏覽器查看頁面的靜態效果，也可讓程序員在服務器查看帶數據的動態頁面效果。這是因爲它支持 html 原型，而後在 html 標籤裏增長額外的屬性來達到模板+數據的展現方式。瀏覽器解釋 html 時會忽略未定義的標籤屬性，因此 thymeleaf 的模板能夠靜態地運行；當有數據返回到頁面時，Thymeleaf 標籤會動態地替換掉靜態內容，使頁面動態顯示。html
Thymeleaf 開箱即用的特性。它提供標準和spring標準兩種方言，能夠直接套用模板實現JSTL、 OGNL表達式效果，避免天天套模板、該jstl、改標籤的困擾。同時開發人員也能夠擴展和建立自定義的方言。前端
Thymeleaf 提供spring標準方言和一個與 SpringMVC 完美集成的可選模塊，能夠快速的實現表單綁定、屬性編輯器、國際化等功能。java

與springboot的整合

項目構建

先貼出pom文件程序員

<properties>
        <java.version>1.8</java.version>
        <!-- 替換成3.0版本-->
        <thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
        <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
    </properties>
    <packaging>jar</packaging>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.1.RELEASE</version>
        <relativePath/>
    </parent>

    <dependencies>
        <!-- spring boot 配置 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

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

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

        <!-- spring boot 熱部署-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <fork>true</fork><!-- fork:若是沒有該配置，這個devtools不會起做用，即應用不會restart -->
                </configuration>
            </plugin>
        </plugins>
    </build>

幾個注意點：web

這裏使用thymeleaf3.0版本，springboot自帶的是2.x版本的，灰常很差用，特別是標籤的校驗，必須是嚴格的xml格式，標籤必需要求閉合，3.0就不會再有校驗的煩惱了
熱部署，springboot是支持熱部署的，主要是靠devtools的依賴，省去每次修改頁面再重啓的煩惱

application.properties配置spring

server.port=80

spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.check-template=true
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5

幾個注意點：bootstrap

html文件都放在resource目錄下的templates文件下
靜態資源，好比css，js，都是放在resource目錄下的static文件夾下

整合

先先一個實體類，user，有姓名 username，地址 address兩個屬性
在resource/templates目錄下新建一個，index.html，內容以下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span th:text="${user.address}"></span>
<p th:text="${user.username}"></p>
</body>
</html>

編寫controller類，內容以下：

package com.controller;

import com.domain.UserVo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

import javax.servlet.http.HttpServletRequest;

@Controller
public class IndexController {

    @GetMapping(value = "")
    public static String index(HttpServletRequest request){
        UserVo userVo = new UserVo();
        userVo.setAddress("上海");
        userVo.setUsername("小明");
        request.setAttribute("user",userVo);
        return "index";
    }
}

最後啓動服務，訪問: http://127.0.0.1 查看結果。thymeleaf整個完畢

基礎語法

獲取變量值

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

能夠看出獲取變量值用$符號,對於javaBean的話使用變量名.屬性名方式獲取,這點和EL表達式同樣.後端

另外$表達式只能寫在th標籤內部,否則不會生效,上面例子就是使用th:text標籤的值替換p標籤裏面的值,至於p裏面的原有的值只是爲了給前端開發時作展現用的.這樣的話很好的作到了先後端分離.瀏覽器

引入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

字符串替換

不少時候可能咱們只須要對一大段文字中的某一處地方進行替換，能夠經過字符串拼接操做完成：

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

一種更簡潔的方式：

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

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

元素符

在表達式中可使用各種算術運算符，例如+, -, *, /, %

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

邏輯運算符>, <, <=,>=，==,!=均可以使用，惟一須要注意的是使用<,>時須要用它的HTML轉義符：

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

條件

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>

循環

渲染列表數據是一種很是常見的場景，例如如今有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在循環體中能夠經過表達式訪問。

thymeleaf熱部署問題　　很簡單: 1.配置文件中加上 spring.thymeleaf.cache=false 2.若是你用的是idea,那麼編輯完html後使用ctrl + shift + F9 rebuild module一下就好了,其餘的編輯器我就不知道了,仍是推薦用IDEA