Thymeleaf
- Thymeleaf常用標簽
- 語法
- 實體測驗
- 引入動態資料
- 國際化
Thymeleaf常用標簽
有點像小程式和vue.js
語法
https://blog.csdn.net/weixin_45636641/article/details/108249715
${…}來獲取model中的變數，訪問背景關系中所有變數
#{…}來獲取內置物件的值，組態檔中的值可通過這個獲取
@{…} 鏈接
*{…}在回圈中可使用該運算式表示當前回圈的物件
實體測驗
目錄結構
引入動態資料
依賴引入
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
全域組態檔
spring.thymeleaf.cache=false # 是否啟用快取
spring.thymeleaf.encoding=UTF-8 # 模板編碼
spring.thymeleaf.mode=HTML # 模板模式
spring.thymeleaf.prefix=classpath:/templates/ # 模板路徑,路徑默認從resources開始
spring.thymeleaf.suffix=.html # 模板后綴
前端頁面效果
前端的 html 建于 templates 檔案（模板檔案夾）下，其余的css、js、images等檔案建與static（靜態資源檔案夾）檔案下
前端代碼
html
用了 Bootstrap框架，比較簡單就不多寫了，可以去菜鳥教程學下，很簡單的
https://www.runoob.com/bootstrap/bootstrap-tutorial.html
注意代碼中 $、# 、@ 的使用區別
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>登錄</title>
<!-- href 中的路徑都是默認從 static 開始的 -->
<link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/login/css/login.css}" rel="stylesheet">
</head>
<body>
<form class="sign">
<img class="img-circle img" th:src="@{/login/images/hr.jpg}">
<h2>請登錄</h2>
<div class="form-group">
<input type="text" class="form-control user" placeholder="請輸入用戶名">
</div>
<div class="form-group">
<input type="password" class="form-control user" placeholder="請輸入密碼">
</div>
<button class="btn btn-primary btn-block user" type="submit">登錄</button>
<p class="text-center year">
@
<span th:text="${currentYear}">2018</span>
-
<span th:text="${currentYear}+1">2019</span>
</p>
<a class="lang"> 中文 </a>
<a class="lang"> English </a>
</form>
</body>
</html>
login.css
（我已經很久沒有敲前端了，敲的時候太費勁了，所以css都用的是比較簡單的東西)
.img{
width: 140px;
height: 140px;
}
.sign{
margin: 60px auto;
/*background: #2b542c;*/
width: 800px;
height: 835px;
text-align: center;
}
.user{
width: 35%;
display: inline;
font-size: 18px;
height: 40px;
}
.year{
margin-top: 30px;
}
.lang{
margin-top: 30px;
margin-left: 20px;
font-size: 15px;
}
控制類
撰寫一個控制類用于訪問頁面和撰寫頁面動態資料
package com.zknu.inter.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("/login") // 訪問路徑
public String getYear(Model model){
model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR)); // 獲取當前年份
return "login"; // 將值回傳到login.html的路徑
// 與組態檔中的 prefix 相接 /templates/login
}
}
注意！
控制類中的回傳值其實是一個路徑，要與 全域組態檔中的 prefix 相接，如果 prefix 寫的是 /templates 那回傳值就要寫 /login
啟動專案（運行啟動類），訪問 localhost:8080/login
發現靜態頁面中的2018-2019已被 控制類中的year代替，實作了動態資料的顯示
國際化
實作頁面中英文的切換
在resources下創建 i18n檔案夾 ，用于存放多語言國家化檔案，
國際化檔案名命必須按照“ 檔案前綴_語言代碼_國家代碼.properties”
語言代碼 和 國家代碼：
https://blog.csdn.net/asty9000/article/details/81294846?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control
默認的語言組態檔是 XXX.properties，因此，XXX.properties檔案是必須要有的，后續再根據需要添加國家化檔案，
eg.
擁有中英文兩種語言的頁面需有三個組態檔：
xxx.properties 、xxx_en_US.properties、xxx_zh_CN.properties
國家化檔案是會被Spring用組的形式自動管理的
建完之后長這樣：
遺留問題：
在建 zh_CN檔案時，不管用哪種方法建都不會被組管理，其他的語言都可以被統一管理，中文繁體也可以被管理，只有 中文簡體不可以，不知道是為什么，有沒有人可以解答一下下，
國家化檔案內容
login.properties、login_zh.properties:
login.tip = 請登錄
login.username = 請輸入用戶名
login.password = 請輸入密碼
login.button = 登錄
login_en_US.properties:
login.tip = Please sign in
login.username = username
login.password = password
login.button = Sign in
屬性與前端頁面相對應
國際化后的前端
注意 @、$、# 的使用
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>登錄</title>
<link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/login/css/login.css}" rel="stylesheet">
</head>
<body>
<form class="sign">
<img class="img-circle img" th:src="@{/login/images/hr.jpg}">
<h2 th:text="#{login.tip}">請登錄</h2>
<div class="form-group">
<input type="text" class="form-control user" th:placeholder="#{login.username}">
</div>
<div class="form-group">
<input type="password" class="form-control user" th:placeholder="#{login.password}">
</div>
<button class="btn btn-primary btn-block user" type="submit" th:text="#{login.button}">登錄</button>
<p class="text-center year">
@
<span th:text="${currentYear}">2018</span>
-
<span th:text="${currentYear}+1">2019</span>
</p>
<a class="lang" th:href="@{/login(lang='zh_CN')}"> 中文 </a>
<a class="lang" th:href="@{/login(lang='en_US')}"> English </a>
<!-- href 中的 (lang=XXX) 是thymeleaf的傳參方式，如同 PHP 用 ? 傳參一樣-->
</form>
</body>
</html>
定制決議器
用決議器完成國際化語言的展示，
在config包中建自定義配置類 MyLocalResovel，重寫 LocaleResolver 介面中的 resolveLocale 方法
package com.zknu.inter.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.LocaleResolver;
import org.thymeleaf.util.StringUtils;
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 httpServletRequest) {
String lang = httpServletRequest.getParameter("lang");
// 獲取地址欄中傳的引數
String header = httpServletRequest.getHeader("Accept-Language");
Locale locale = null;
if(!StringUtils.isEmpty(lang)){
String[] split = lang.split("_");
locale = new Locale(split[0],split[1]);
}
else {
String[] splits = header.split(",");
String[] split = splits[0].split("-");
locale = new Locale(split[0],split[1]);
}
return locale;
}
@Override
public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {
}
@Bean
public LocaleResolver localeResolver(){
return new MyLocalResovel();
}
}
逐句分析下重寫的 resolveLocale 方法
Locale 表示一個地區，每一個Locale都代表這一個特定的地區
String lang = httpServletRequest.getParameter("lang");
獲取到傳遞的引數值
eg. lang = en_US
String header = httpServletRequest.getHeader("Accept-Language");
獲得請求頭自動傳遞的引數
eg. header = zh-CN,zh;q=0.9
// lang = en_US
if(!StringUtils.isEmpty(lang)){
String[] split = lang.split("_");
// split= {en，US}
locale = new Locale(split[0],split[1]);
}
StringUtils 是String 型別操作方法的補充，比原生String操作字串更安全，
如果 lang 不為空，用 _ 截取字串
new Locale(split[0],split[1]) 創建了一個語言為 en 國家是 US 的物件
// header = zh-CN,zh;q=0.9
else {
String[] splits = header.split(",");
// splits = {zh-CN,zh}
String[] split = splits[0].split("-");
// split = {zh,CN}
locale = new Locale(split[0],split[1]);
}
lang字串為空 ，即沒有進行手動傳參，則根據瀏覽器的設定選擇默認語言，
回傳一個 語言為 zh 國家為 CN 的物件，
總感覺這篇寫的有點亂，是因為寫到一半我出去玩的原因嗎？？？？？
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/272470.html
標籤：java
上一篇：java筆記--網路編程
下一篇：線代矩陣