【SpringBoot實戰】檢視技術-Thymeleaf

airl發表於2022-04-23

前言

在一個Web應用中，通常會採用MVC設計模式實現對應的模型、檢視和控制器，其中，檢視是使用者看到並與之互動的介面。對最初的Web應用來說，檢視是由HTML元素組成的靜態介面；而後期的Web應用更傾向於使用動態模板技術，從而實現前後端分離和頁面的動態資料展示。Spring Boot框架為簡化專案的整體開發，提供了一些檢視技術支援，並主要推薦整合模板引擎技術實現前端頁面的動態化內容。本文對SpringBoot常用的Thymeleaf進行整合。

Thymeleaf基本語法

Thymeleaf是一種現代的基於伺服器端的Java模板引擎技術，也是一個優秀的面向Java的XML、XHTML、HTML5頁面模板，它具有豐富的標籤語言、函式和表示式，在使用Spring Boot框架進行頁面設計時，一般會選擇 Thymeleaf模板。我們在這裡學習Thymeleaf 常用的標籤、表示式。

常用標籤

th：標籤	說明
th:insert	頁面片段包含（類似JSP中的include標籤）
th:replace	頁面片段包含（類似JSP中的include標籤）
th:each	元素遍歷（類似JSP中的c:forEach標籤）
th:if	條件判斷，條件成立時顯示th標籤內容
th:unless	條件判斷，條件不成立時顯示內容
th:switch	條件判斷，進行選擇性匹配
th:case	th:switch分支，選擇的元素
th:object	用於替換物件
th:with	用於定義區域性遍歷
th:attr	用於屬性修改
th:attrprepend	通用屬性修改，將計算結果追加字首到現有屬性值
th:attrappend	通用屬性修改，將計算的結果追加字尾現有屬性值
th:value	屬性值修改，指定標籤屬性值
th:href	用於設定連結地址
th:src	用於設定連結地址
th:text	用於指定標籤顯示文字內容
th:utext	用於指定標籤顯示內容，對特殊標籤不轉譯
th:fragment	宣告片段
th:removve	移除片段

如何使用標籤

使用標籤只需要加上一個名稱空間就可以了。<html lang="en" xmlns:th="http://thymeleaf.org"> 即修改原html的第二行就可以了。

<!DOCTYPE html>

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

  <head>
    <title>Good Thymes Virtual Grocery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all" 
          href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" />
  </head>

  <body>
  
    <p th:text="#{home.welcome}">Welcome to our grocery store!</p>
  
  </body>

</html>

標準表示式

表示式	說明
${..}	變數表示式
*{..}	選擇變數表示式
#{..}	訊息表示式
@{..}	連結URL表示式
~{..}	片段表示式

變數表示式

變數表示式${..}主要用於獲取上下文中的變數值，示例程式碼如下。

這是標題

- 使用了Thymeleaf模板的變數表示式${..}用來動態獲取p標籤中的內容 - 如果當前程式沒有啟動或者當前上下文中不存在title變數，該片段會顯示標籤預設值“這是標題”； - 如果當前上下文中存在title 變數並且程式已經啟動，當前p標籤中的預設文字內容將會被tite變數的值所替換，從而達到模板引擎頁面資料動態替換的效果。

Thymeleaf為變數所在域提供了一些內建物件

內建物件	說明
#ctx	上下文物件
#vars	上下文變數
#locale	上下文區域設定
#request	(僅限 Web Context)HttpServletRequest 物件
#response	(僅限Web Context)HttpServletResponse 物件
#session	僅限Web Context) HttpSession物件
#servletContext	(僅限 Web Context)ServletContext 物件

結合上述內建物件的說明，假設要在Thymeleaf模板擎頁面中動態獲取當前國家資訊，可以使用#locale內建物件

<span th:text="${#locale.country}">China</span>

選擇變數表示式

選擇交量表示式和變數表示式用法類似，一般用於從被選定物件而不是上下文中獲取屬性值，如果沒有選定物件，則和變數表示式一樣，示例程式碼如下。

<div th:object="$(session.user)">
    <p>Name: <span th:text="s(object.firstName)">Sebastiahk</span></p>
    <p>username:<span th:text="$(session.user,lastName)">Pepper</span></p>
    <p>Nationality:<span th:text="*(nationality)">Saturn</span>.</p> 
</div>

${#object.firstName}變數表示式使用Thymeleaf模板提供的內建物件object獲取當前上下文物件中的frstName屬性值；
￥{session.user.lastName}變數表示式獲取當前user物件的lastName屬性值；
*{nationality}選擇變數表示式獲取當前指定物件user的nationality屬性值。

訊息表示式

訊息表示式#{..}主要用於Thymeleaf模板頁面國際化內容的動態替換和展示。使用訊息表這式#{..}進行國際化設定時，還需要提供一些國際化配置檔案。關於訊息表示式的使用，下文寫國際化時會詳細說明。

連結表示式

連結表示式@{..}一般用於頁面跳轉或者資源的引入，在Web開發中佔據著非常重要的地位，並且使用也非常頻繁。

<a href="details.html" th:href="@{http:localhost:8080/gtvg/order/details(order=$o.id})}">view</a>
<a href="details.html" th:href="@{/order/details(order=$o.id})}">view</a>

@{..}分別編寫了絕對連結地址和相對連結地址。
在有參表示式中，需要按照@(路徑(引數名稱=引數值.引數名稱=引數值..))的形式編寫，同時該引數的值可以使用變數表示式來傳遞動態引數值。

片段表示式

片段表示式~{..}是一種用來將標記片段移動到模板中的方法。其中，最常見的用法是使用th:insert或th:replace 屬性插入片段

<div th:insert="~(thymeleafDemo::title】"></div>

th:insert屬性將title片段模板引用到該
標籤中。
thymelcafDemo為模板名稱，Thymeleal會自動查詢“classpathy/resources/templates/”目錄下的thymeleaDemo模板，title為宣告的片段名稱。

Thyemleaf基本使用

靜態資源訪問

Spring Boot預設設定了靜態資源的訪問路徑，預設將/**所有訪問對映到以下目錄。

classpath:/META-INF/resources/:專案類路徑下的META-INF資料夾下的resources資料夾下的所有檔案。
classpath:/resources/：專案類路徑下的resources資料夾下的所有檔案。
classpath:/static/：專案類路徑下的static資料夾下的所有檔案。
classpath:/public/：專案類路徑下的public資料夾下的所有檔案。
Spring Initializr 方式建立的 Spring Boot 專案會預設生成一個 resources目錄，在resources目錄中新建public、resources、static3個子目錄，Spring Boot預設會依次從public、resources、static裡面查詢靜態資源。

Thymeleaf頁面展示

我們建立一個springboot專案用於本次實驗。專案名為springboot_01_thyme。java8，springboot2.6.6

匯入Thymeleaf依賴

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

編寫配置檔案


# thymeleaf cache
spring.thymeleaf.cache=false

spring.thymeleaf.encoding=utf-8
spring.thymeleaf.mode=HTML5
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

建立WEB控制類

建立一個LoginController類用於資料替換效果測試。

package com.hjk.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.Calendar;

@Controller
public class LoginController {
    @GetMapping("toLoginPage")
    public String toLoginPage(Model model){
        model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR));
        return "login";
    }

}

建立模板頁面並引入靜態資源

我們寫一個login.html進行測試。我們匯入一個bootstrap的樣式到static/login裡面，並且自己定義一些css。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
    <title>使用者登入介面</title>
    <link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet">
   <style type="text/css">
    html,
    body {
    height: 100%;
    }
    body {
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: greenyellow;
    }
    .form-signin {
        width: 100%;
        max-width: 330px;
        padding: 15px;
        margin: 0 auto;
    }
    </style>

</head>
<body class="text-center">
<!--  使用者登入form表單 -->
<form class="form-signin">
    <h1 class="h3 mb-3 font-weight-normal">請登入</h1>
    <input type="text" placeholder="使用者名稱">
    <input type="password" placeholder="密碼">
    <div>
        <label>
            <input type="checkbox" value="remember-me"> 記住我
        </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit">登入</button>
    <p class="mt-5 mb-3 text-muted">© <span th:text="${currentYear}">2018</span>-<span th:text="${currentYear}+1">2019</span></p>
</form>
</body>
</html>

我們使用xmlns:th="http://thymeleaf.org"引入Thymeleaf標籤
通過th:href引入外聯css
通過th:text後臺動態傳遞年份currentYear

最後我們通過訪問http://localhost:8080/toLoginPage 可以檢視效果

配置國際化頁面

編寫多語言配置檔案

在resources目錄下建立名為i18n的資料夾，數一數這個單詞多少個字母internationalization，就知道為什麼叫i18n了。
然後我們在i18n資料夾下面建立login.properties、 login_zh_CN.properties、 login_en_US.properties檔案。
目錄結構：這個Resource Bundle 'login'時idea自動建立的，我們不需要管，只需要完成我們的就行。

login.tip=請登入
login.username=使用者名稱
login.password=密碼
login.rememberme=記住我
login.button=登入

login_zh_CN.properties

login.tip=請登入
login.username=使用者名稱
login.password=密碼
login.rememberme=記住我
login.button=登入

login_en_US.properties

login.tip=Please sign in
login.username=Username
login.password=Password
login.rememberme=Rememberme
login.button=Login

然後我們在配置檔案application.properties裡面新增程式碼

這個是我們必須要寫的，login是我們的語言檔案字首，springboot預設字首是messages，所以不寫識別不了。
spring.messages.basename=i18n.login

定製區域資訊解析器

我們在config包下面建立一個MyLocalResovel類，自定義國際化功能區域資訊解析器。

package com.hjk.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.util.StringUtils;
import org.springframework.web.servlet.LocaleResolver;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;

@Configuration
public class MyLocalResovel implements LocaleResolver {
    @Override
    public Locale resolveLocale(HttpServletRequest request) {
        String parameter = request.getParameter("1");
        String header = request.getHeader("Accept-Language");
        Locale locale = null;
        if (!StringUtils.isEmpty(parameter)){
            String[] s = parameter.split("_");
            locale = new Locale(s[0], s[1]);
        }else{
            String[] split = header.split(",");
            String[] split1 = split[0].split("-");
            locale = new Locale(split1[0],split1[1]);
        }
        return locale;
    }

    @Override
    public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {

    }
    
    @Bean
    public LocaleResolver localeResolver(){
        return new MyLocalResovel();
    }
    
}

注意分割符的兩個下滑線，不一樣

重寫login.html實現國際化

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
    <title>使用者登入介面</title>
    <link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet">
   <style type="text/css">
    html,
    body {
    height: 100%;
    }
    body {
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: greenyellow;
    }
    .form-signin {
        width: 100%;
        max-width: 330px;
        padding: 15px;
        margin: 0 auto;
    }
    </style>

</head>
<body class="text-center">
<!--  使用者登入form表單 -->
<form class="form-signin">
    <h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">請登入</h1>
    <input type="text" th:placeholder="#{login.username}">
    <input type="password" th:placeholder="#{login.password}" \>
    <div>
        <label>
            <input type="checkbox" value="remember-me"> [[#{login.rememberme}]]
        </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.button}">登入</button>
    <p class="mt-5 mb-3 text-muted">© <span th:text="${currentYear}">2018</span>-<span th:text="${currentYear}+1">2019</span></p>
    <a class="btn btn-sm" th:href="@{/toLoginPage(1='zh_CN')}">中文</a>
    <a class="btn btn-sm" th:href="@{/toLoginPage(1='en_US')}">English</a>
</form>
</body>
</html>

這裡我們基本就完成了，但是在訪問中文的時候會出現亂碼現象。

我們開啟idea的file->settings->file Encodings.
將Default encoding for properties的編碼改為utf-8，同時勾選Transparentnative-to-ascii conversion

然後我們重新編寫login.properties和其他相關的

login.tip=請登入
login.username=使用者名稱
login.password=密碼
login.rememberme=記住我
login.button=登入

但是這種方法1只對當前專案有效。下次建立還是使用GBK編碼

總結

本文我們主要了解了Thymeleaf的基本語法、標籤、表示式、基本使用、同時還實現了頁面登入頁得國際化。

....

SpringBoot 實戰 (十二) | 整合 thymeleaf
2019-02-25
Spring Boot
SpringBoot下的模板技術Thymeleaf詳解
2021-03-26
Spring Boot
springmvc配置thymeleaf檢視解析器
2022-03-06
SpringMVC
springBoot整合thymeleaf
2020-12-01
Spring Boot
springboot thymeleaf + vue
2017-12-19
Spring BootVue
[thymeleaf]springboot整合thymeleaf, html使用預置方法
2024-05-09
Spring BootHTML
iOS研發助手DoraemonKit技術實現之Crash檢視
2019-01-23
iOS
爬蟲技術實戰
2020-08-19
爬蟲
個人練習前端技術使用Bootstrap、JQuery、thymeleaf
2024-11-06
前端bootjQuery
2-如何檢視技術手冊
2018-07-26
springboot中使用thymeleaf模板
2017-03-01
Spring Boot
Flutter核心技術與實戰
2019-10-28
Flutter
springboot模版thymeleaf+freemarker
2020-11-29
Spring Boot
springboot(四)：thymeleaf使用詳解
2017-07-05
Spring Boot
iOS專案開發實戰——UIView的子檢視和父檢視
2015-09-25
iOSUIView
技術管理實戰36講教程
2019-03-05
Java技術分享：NIO實戰教程！
2021-06-07
Java
Unity物件池技術（原理+實戰）
2017-08-13
Unity物件
實時音視訊互動系列（下）：基於 WebRTC 技術的實戰解析
2017-07-19
Web
開源APM效能檢測系統技術選型與架構實戰
2018-09-28
架構
【SpringBoot學習（四）使用 thymeleaf實現國際化功能】
2020-12-11
Spring Boot
SpringBoot、MyBatis、Shiro、Thymeleaf整合思路
2020-10-07
Spring BootMyBatis
Hybrid App技術解析 — 實戰篇
2018-08-13
APP
Hybrid App技術解析 -- 實戰篇
2018-07-30
APP
SpEL應用實戰｜得物技術
2024-01-26
【技術學院】iOS APNs實戰分享
2016-12-22
iOS
UniX技術 AIX實戰經驗(轉)
2007-08-11
AI
SpringBoot教程——檢視閱讀
2020-05-21
Spring Boot
SAP ABAP CDS view 檢視的 Replacement 技術介紹
2022-07-19
View
iOS專案開發實戰——檢視動畫效果
2015-08-19
iOS動畫
鴻蒙HarmonyOS實戰-ArkUI動畫（放大縮小檢視）
2024-04-23
鴻蒙UI動畫
技術集錦 | 大資料雲原生技術實戰及最佳實踐系列
2022-02-11
大資料
視訊通訊系統的關鍵技術與挑戰
2018-01-18
【從頭到腳】前端實現多人視訊聊天— WebRTC 實戰（多人篇）| 掘金技術徵文
2019-04-25
前端Web
SpringBoot系列（六）整合thymeleaf詳解版
2020-04-18
Spring Boot
SpringBoot整合Jsp和Thymeleaf (附工程)
2018-07-11
Spring BootJS
SpringBoot之整合thymeleaf渲染Web頁面
2020-12-26
Spring BootWeb
【Flutter實戰】移動技術發展史
2020-06-08
Flutter