前言
在一個Web應用中,通常會採用MVC設計模式實現對應的模型、檢視和控制器,其中,檢視是使用者看到並與之互動的介面。對最初的Web應用來說,檢視是由HTML元素組成的靜態介面;而後期的Web應用更傾向於使用動態模板技術,從而實現前後端分離和頁面的動態資料展示。Spring Boot框架為簡化專案的整體開發,提供了一些檢視技術支援,並主要推薦整合模板引擎技術實現前端頁面的動態化內容。本文對SpringBoot常用的Thymeleaf進行整合。
Thymeleaf基本語法
Thymeleaf是一種現代的基於伺服器端的Java模板引擎技術,也是一個優秀的面向Java的XML、XHTML、HTML5頁面模板,它具有豐富的標籤語言、函式和表示式,在使用Spring Boot框架進行頁面設計時,一般會選擇 Thymeleaf模板。我們在這裡學習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.properties
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的基本語法、標籤、表示式、基本使用、同時還實現了頁面登入頁得國際化。
....