從.Net到Java學習第九篇——SpringBoot下Thymeleaf

時間 2019-11-05

標籤 java 學習第九 springboot thymeleaf 欄目 Java 简体版

原文原文鏈接

Thymeleaf概述

　　Thymeleaf 是一個流行的模板引擎，該模板引擎採用java語言開發。模板引擎是一個技術名稱，是跨領域平臺的概念，在java語言體系下有模板引擎，在C#、PHP語言體系下也有模板引擎，甚至在JavaScript中也會用到模板引擎技術。
Java生態下的模板引擎有Thymeleaf 、Freemaker、Velocity、Beetl（國產）等。Thymeleaf模板既能用於web環境下，也能用於非web環境下，在非web環境下，它能直接顯示模板上的靜態數據，在web環境下，它能像JSP同樣從後臺接收數據並替換掉模板上的靜態數據。.net下面的razor也是一個模板引擎。

Thymeleaf它是基於HTML的，以HTML標籤爲載體，Thymeleaf要寄託在HTML的標籤下實現對數據的展現。
Thymeleaf的官方網站：http://www.thymeleaf.org
Spring boot集成了Thymeleaf模板技術，而且Spring boot官方也推薦使用
Thymeleaf來替代JSP技術。
Thymeleaf是另外的一種模板技術，它自己並不屬於spring boot，
srpingboot只是很好的集成了這種模板技術，做爲前端頁面的數據展現。html

Spring Boot集成Thymeleaf配置

（1）修改pom.xml，在Maven中引入Thymeleaf的依賴：前端

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

（2）在Spring boot的核心配置文件application.yml中對Thymeleaf進行配置：html5

spring:
  profiles:
    active: test
 thymeleaf: cache: false #開發階段，建議關閉Thymeleaf的緩存 mode: LEGACYHTML5 #使用遺留的html5以去掉對html標籤的校驗

在使用Spring boot的過程當中，若是使用thymeleaf做爲模板文件，則要求HTML格式必須爲嚴格的html5格式，全部標籤必須有結束標籤，不然會報錯。若是不想對標籤進行嚴格的驗證，使用spring.thymeleaf.model=LEGACYHTML5去掉驗證，去掉該驗證還須要引入許下的依賴，不然會報錯。java

        <dependency>
            <groupId>net.sourceforge.nekohtml</groupId>
            <artifactId>nekohtml</artifactId>
            <version>1.9.22</version>
        </dependency>

（3）新建一個控制器ThymeleafController去映射到模板頁git

@Controller
public class ThymeleafController {
    @GetMapping("/index")
    public String index(Model model){
        model.addAttribute("msg","Spring boot集成Thymeleaf");
        return "index"; //返回的是一個頁面，能夠省略後綴.html
    }
}

（4）在src/main/resources的templates下面新建一個index.html頁面用於數據展現，HTML頁面的<html>元素中藥記得加入如下屬性：github

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

index.html源碼以下：web

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><!--引入thymeleaf-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p th:text="${msg}">你好</p>
</body>
</html>

Springboot使用thymeleaf做爲視圖展現，約定將模板文件放置在src/main/resources/templates目錄下，靜態資源放置在src/main/resources/static目錄下spring

運行IDEA項目數組

若是不啓動spring boot直接在瀏覽器中瀏覽這個頁面

Thymeleaf標準變量表達式

語法：${...}

變量表達式用於訪問容器（tomcat）上下文環境中的變量，功能和JSTL中的${}相同。Thymeleaf中的變量表達式使用${變量名}的方式獲取其中的數據。

新建實體類User：

package com.yujie.entity;

public class User {
    private String name;
    private String sex;
    private Integer age;
    private String email;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

在Spring mvc的Controller中使用向前端傳輸數據，ThymeleafController代碼以下：

    @GetMapping("/user")
    public String user(Model model){
        User user=new User();
        user.setAge(21);
        user.setEmail("zouyujie@126.com");
        user.setName("玉傑");
        model.addAttribute("user",user);
        return "user";
    }

templates目錄下面，新建一個user.html頁面，前端接收代碼：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><!--引入thymeleaf-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>用戶信息以下：</p>
<div th:text="${user.name}"></div>
<div th:text="${user.age}"></div>
<div th:text="${user.email}"></div>
</body>
</html>

瀏覽

選擇變量表達式

選擇變量表達式，也叫星號變量表達式，使用th:object屬性來綁定對象，好比：

<p>分割線——選擇變量表達式</p>
<div th:object="${user}">
    <div th:text="*{name}"></div>
    <div th:text="*{age}"></div>
    <div th:text="*{email}"></div>
</div>

繼續

選擇變量表達式首先使用th:object來綁定後臺傳來的user對象，而後使用*來表明這個對象，後面{}中的值是此對象中的屬性。
選擇變量表達式*{...}是另外一種相似於變量表達式${...}表示變量的方法。
選擇變量表達式在執行時是在選擇的對象上求解，而${...}是在上下文的變量Model上求解。
經過th:object屬性指明選擇變量表達式的求解對象。
標準變量表達式和選擇變量表達式能夠混合在一塊兒使用，好比：

<div th:object="${user}">
    <div th:text="*{name}"></div>
    <div th:text="*{age}"></div>
    <div th:text="${user.email}"></div>
</div>

也能夠不使用th:object進行對象的選擇，而直接使用*{...}獲取數據，好比：

<p>不使用th:object</p>
<div>
    <div th:text="*{user.name}"></div>
    <div th:text="*{user.age}"></div>
    <div th:text="*{user.email}"></div>
</div>

Thymeleaf的URL表達式

語法：@{...}

URL表達式可用於<script src="...">、<link href="...">、<a href="...">等
1.絕對URL，好比：

<a href="index.html" th:href="@{'http://localhost:8080/user?name='+${user.name}}">index</a>

2.相對URL，相對於頁面，好比：

<a href="index.html" th:href="@{'user?name='+${user.name}}">index</a>

3.相對URL，相對於項目上下文，好比：

<a href="index.html" th:href="@{'/user?name='+${user.name}}">index</a>

項目的上下文名會自動添加，咱們能夠看下html運行的源碼。

thymeleaf的經常使用屬性

thymeleaf的經常使用屬性：
th:action
th:each
th:href
th:id
th:if
th:unless
th:switch/th:case
th:object
th:src
th:text
th:value
th:attr
th:onclick
th:style
th:method
th:name
th:inline
這些標記大多數和html的標記名稱是同樣的。

thymeleaf表達式基本對象

模板引擎提供了一組內置的對象，這些內置的對象能夠直接在模板中使用，這些對象由#號開始引用。

#request

至關於HttpServletRequest對象，這是3.x版本，如果2.x版本使用#httpServletRequest
${#request.getContextPath()}
${#request.getAttribute("name")}

#session

至關於HttpSession
對象，這是3.x版本，如果2.x版本使用#httpSession，須要在後頭controller中設置session，
${#session.getAttribute("phone")}
${#session.id}

thymeleaf表達式功能對象

1.模板引擎提供的一組功能性內置對象，能夠在模板中直接使用這些對象提供的功能方法。
2.工做中常使用的數據類型，如集合、時間、數值，可使用thymeleaf提供的功能性對象來處理它們。
3.內置功能對象前都須要加#號，內置對象通常都以s結尾。

#dates：java.util.Date對象的實用方法，<span th:text="${#dates.format(curDate,'yyyy-MM-dd HH:mm:ss')}"></span>
#calendars：和dates相似，可是是java.util.Calendar對象。
#numbers：格式化數據對象的實用方法。
#strings：字符串對象的實用方法。contains,startsWith,prepending/appending等。
#objects：對objects操做的實用方法。
#bools：對布爾值求值的實用方法。
#arrays：數組的實用方法。
#lists：list的實用方法.
#sets：set的實用方法.
#maps：map的實用方法
#aggregates：對數組或集合建立聚合的實用方法。

還有條件表達式等等，更多內容能夠參考thymeleaf的官網：http://www.thymeleaf.org

thymeleaf th:text 不顯示標籤

解決辦法，經過追加th:remove屬性，演示以下：

<span th:text="${title}" th:remove="tag"></span>

thymeleaf佈局

thymeleaf既然和razor同樣，那麼確定也有佈局頁，也就是母版頁。thymeleaf的layout經常使用的有兩種方式用法：

第一種 th:include||th:replace||th:insert

將頁面裏的每一個部分都分紅塊 -> fragment 使用 th:include 和 th:replace 來引入頁面
這種用法沒有layout的概念, 由於每一個部分都是 fragment

th:insert 3.0+版本新加的
th:replace 2.0+ 3.0+均可用
th:include 這個在3.0版本已經不建議使用

它們的區別，

<footer th:fragment="copy"> 
  © 2011 The Good Thymes Virtual Grocery
</footer>

調用方式：

<!-- 引用html段 --> 
<body> 
<div th:insert="footer :: copy"></div> 
<div th:replace="footer :: copy"></div> 
<div th:include="footer :: copy"></div>
</body>

最終結果以下：

<!-- 最終結果 --> 
<body> 
<!-- th:insert，div tag內部插入html段 --> 
<div> <footer> © 2011 The Good Thymes Virtual Grocery </footer> </div> 
<!-- th:replace，使用html段直接替換 div tag --> 
<footer> © 2011 The Good Thymes Virtual Grocery </footer>
 <!-- th:include，div tag內部插入html段（僅保留段子元素的內容） --> 
<!-- 仔細對比 th:insert 與 th:include的結果 --> 
<div> © 2011 The Good Thymes Virtual Grocery </div> 
</body>

第二種佈局頁

寫一個layout.html頁面,看成頁面的基礎頁面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
<header>這是頭部</header>
<div layout:fragment="content"></div>
<footer>這是底部</footer>
</body>
</html>

新建一個子頁面layoutTest.html，在子頁面裏使用 layout:decorator 來將子頁面裏的內容加入到 layout.html裏去

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" layout:decorator="common/layout">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
<div layout:fragment="content">
    <h2>我是文本內容</h2>
</div>
</body>
</html>

控制器中添加一個測試方法

    @RequestMapping("/layout")
    public String layout(Model model) {
        return "layoutTest";
    }

運行結果以下：

這樣在layout.html裏引入的css,js,imgs均可以在子頁面裏用了,並且在子頁面裏還能夠引入子頁面須要用到的css,js,imgs, 就很方便了，因此這也是推薦的方式。
模板傳值,假如要往header.html裏傳入一個tab來區別應該高亮哪一個菜單,可使用下面的寫法實現, 建立header.html，而後在佈局頁layout.html定一個css樣式。

header.html代碼以下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
<header th:fragment="header (tab)">
    <ul>
        <li>
            <span th:class="${tab eq 'news'} ? active">news</span>
        </li>
        <li>
            <span th:class="${tab eq 'blog'} ? active">blog</span>
        </li>
        <li>
            <span th:class="${tab eq 'post'} ? active">post</span>
        </li>
    </ul>
</header>
</body>
</html>

修改layout.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <style type="text/css">
        .active {background-color: green;}
    </style>
</head>
<body>
<div th:include="common/header :: header(tab='blog')"></div>
<div layout:fragment="content"></div>
<footer>這是底部</footer>
</body>
</html>

運行結果以下：

Spring-Boot配置文件thymeleaf模板配置項（經常使用配置項爲紅色）

參數	介紹
spring.thymeleaf.cache = true	啓用模板緩存（開發時建議關閉）
spring.thymeleaf.check-template = true	檢查模板是否存在，而後再呈現
spring.thymeleaf.check-template-location = true	檢查模板位置是否存在
spring.thymeleaf.content-type = text/html	Content-Type值
spring.thymeleaf.enabled = true	啓用MVC Thymeleaf視圖分辨率
spring.thymeleaf.encoding = UTF-8	模板編碼
spring.thymeleaf.excluded-view-names =	應該從解決方案中排除的視圖名稱的逗號分隔列表
spring.thymeleaf.mode = HTML5	應用於模板的模板模式。另請參見StandardTemplateModeHandlers
spring.thymeleaf.prefix = classpath:/templates/	在構建URL時預先查看名稱的前綴
spring.thymeleaf.suffix = .html	構建URL時附加查看名稱的後綴
spring.thymeleaf.template-resolver-order =	鏈中模板解析器的順序
spring.thymeleaf.view-names =	能夠解析的視圖名稱的逗號分隔列表