Spring Boot thymeleaf模板引擎的使用詳解

Posted on by

在早期開發的時候，我們完成的都是靜態頁面也就是html頁面，隨著時間軸的發展，慢慢的引入瞭jsp頁面，當在後端服務查詢到數據之後可以轉發到jsp頁面，可以輕松的使用jsp頁面來實現數據的顯示及交互，jsp有非常強大的功能，但是，在使用springboot的時候，整個項目是以jar包的方式運行而不是war包，而且還嵌入瞭tomcat容器，因此，在默認情況下是不支持jsp頁面的。如果直接以純靜態頁面的方式會給我們的開發帶來很大的麻煩，springboot推薦使用模板引擎。

模板引擎有很多種，jsp,freemarker,thymeleaf，模板引擎的作用就是我們來寫一個頁面模板，比如有些值呢，是動態的，我們寫一些表達式。而這些值，從哪來呢，我們來組裝一些數據，我們把這些數據找到。然後把這個模板和這個數據交給我們模板引擎，模板引擎按照我們這個數據幫你把這表達式解析、填充到我們指定的位置，然後把這個數據最終生成一個我們想要的內容給我們寫出去，這就是我們這個模板引擎，不管是jsp還是其他模板引擎，都是這個思想。隻不過不同的模板引擎語法不同而已，下面重點學習下springboot推薦使用的thymeleaf模板引擎，語法簡單且功能強大

1、thymeleaf的介紹

官網地址：https://www.thymeleaf.org/

thymeleaf在github的地址：https://github.com/thymeleaf/thymeleaf

中文網站：https://raledong.gitbooks.io/using-thymeleaf/content/

導入依賴：

 <!--thymeleaf模板-->
  <dependency>
   <groupId>org.thymeleaf</groupId>
   <artifactId>thymeleaf-spring5</artifactId>
  </dependency>
  <dependency>
   <groupId>org.thymeleaf.extras</groupId>
   <artifactId>thymeleaf-extras-java8time</artifactId>
  </dependency>

在springboot中有專門的thymeleaf配置類：ThymeleafProperties

@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {
	private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;
	public static final String DEFAULT_PREFIX = "classpath:/templates/";
	public static final String DEFAULT_SUFFIX = ".html";
	/**
	 * Whether to check that the template exists before rendering it.
	 */
	private boolean checkTemplate = true;
	/**
	 * Whether to check that the templates location exists.
	 */
	private boolean checkTemplateLocation = true;
	/**
	 * Prefix that gets prepended to view names when building a URL.
	 */
	private String prefix = DEFAULT_PREFIX;
	/**
	 * Suffix that gets appended to view names when building a URL.
	 */
	private String suffix = DEFAULT_SUFFIX;
	/**
	 * Template mode to be applied to templates. See also Thymeleaf's TemplateMode enum.
	 */
	private String mode = "HTML";
	/**
	 * Template files encoding.
	 */
	private Charset encoding = DEFAULT_ENCODING;
	/**
	 * Whether to enable template caching.
	 */
	private boolean cache = true;

2、thymeleaf使用模板

在java代碼中寫入如下代碼：

@RequestMapping("/hello")
 public String hello(Model model){
  model.addAttribute("msg","Hello");
  //classpath:/templates/hello.html
  return "hello";
 }

html頁面中寫入如下代碼：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
<h1>Hello</h1>
<div th:text="${msg}"></div>
</body>
</html>

3、thymeleaf的表達式語法

Simple expressions:
	Variable Expressions: ${...}
	Selection Variable Expressions: *{...}
	Message Expressions: #{...}
	Link URL Expressions: @{...}
	Fragment Expressions: ~{...}
Literals
	Text literals: 'one text', 'Another one!',…
	Number literals: 0, 34, 3.0, 12.3,…
	Boolean literals: true, false
	Null literal: null
	Literal tokens: one, sometext, main,…
Text operations:
	String concatenation: +
	Literal substitutions: |The name is ${name}|
Arithmetic operations:
	Binary operators: +, -, *, /, %
	Minus sign (unary operator): -
	Boolean operations:
	Binary operators: and, or
	Boolean negation (unary operator): !, not
Comparisons and equality:
	Comparators: >, <, >=, <= (gt, lt, ge, le)
	Equality operators: ==, != (eq, ne)
	Conditional operators:
	If-then: (if) ? (then)
	If-then-else: (if) ? (then) : (else)
	Default: (value) ?: (defaultvalue)
Special tokens:
	No-Operation: _

4、thymeleaf實例演示

1、th的常用屬性值

​一、th:text ：設置當前元素的文本內容，相同功能的還有th:utext，兩者的區別在於前者不會轉義html標簽，後者會。優先級不高：order=7

​二、th:value：設置當前元素的value值，類似修改指定屬性的還有th:src，th:href。優先級不高：order=6

​三、th:each：遍歷循環元素，和th:text或th:value一起使用。註意該屬性修飾的標簽位置，詳細往後看。優先級很高：order=2

​四、th:if：條件判斷，類似的還有th:unless，th:switch，th:case。優先級較高：order=3

​五、th:insert：代碼塊引入，類似的還有th:replace，th:include，三者的區別較大，若使用不恰當會破壞html結構，常用於公共代碼塊提取的場景。優先級最高：order=1

​六、th:fragment：定義代碼塊，方便被th:insert引用。優先級最低：order=8

​七、th:object：聲明變量，一般和*{}一起配合使用，達到偷懶的效果。優先級一般：order=4

​八、th:attr：修改任意屬性，實際開發中用的較少，因為有豐富的其他th屬性幫忙，類似的還有th:attrappend，th:attrprepend。優先級一般：order=5

thymeleaf.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
 <p th:text="${thText}"></p>
 <p th:utext="${thUText}"></p>
 <input type="text" th:value="${thValue}">
 <div th:each="message:${thEach}">
  <p th:text="${message}"></p>
 </div>
 <div>
  <p th:text="${message}" th:each="message:${thEach}"></p>
 </div>
 <p th:text="${thIf}" th:if="${not #strings.isEmpty(thIf)}"></p>
 <div th:object="${thObject}">
  <p>name:<span th:text="*{name}"/></p>
  <p>age:<span th:text="*{age}"/></p>
  <p>gender:<span th:text="*{gender}"/></p>
 </div>

</body>
</html>

ThymeleafController.java

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ThymeleafController {

 @RequestMapping("thymeleaf")
 public String thymeleaf(ModelMap map){

  map.put("thText","th:text設置文本內容 <b>加粗</b>");
  map.put("thUText","th:utext 設置文本內容 <b>加粗</b>");
  map.put("thValue","thValue 設置當前元素的value值");
  map.put("thEach","Arrays.asList(\"th:each\", \"遍歷列表\")");
  map.put("thIf","msg is not null");
  map.put("thObject",new Person("zhangsan",12,"男"));
  return "thymeleaf";
 }
}

2、標準表達式語法

​${…} 變量表達式，Variable Expressions

​*{…} 選擇變量表達式，Selection Variable Expressions

​一、可以獲取對象的屬性和方法

​二、可以使用ctx，vars，locale，request，response，session，servletContext內置對象

session.setAttribute("user","zhangsan");
th:text="${session.user}"

​三、可以使用dates，numbers，strings，objects，arrays，lists，sets，maps等內置方法

standardExpression.html

<!--
一、strings：字符串格式化方法，常用的Java方法它都有。比如：equals，equalsIgnoreCase，length，trim，toUpperCase，toLowerCase，indexOf，substring，replace，startsWith，endsWith，contains，containsIgnoreCase等

二、numbers：數值格式化方法，常用的方法有：formatDecimal等

三、bools：佈爾方法，常用的方法有：isTrue，isFalse等

四、arrays：數組方法，常用的方法有：toArray，length，isEmpty，contains，containsAll等

五、lists，sets：集合方法，常用的方法有：toList，size，isEmpty，contains，containsAll，sort等

六、maps：對象方法，常用的方法有：size，isEmpty，containsKey，containsValue等

七、dates：日期方法，常用的方法有：format，year，month，hour，createNow等
-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>thymeleaf內置方法</title>
</head>
<body>
 <h3>#strings </h3>
 <div th:if="${not #strings.isEmpty(Str)}" >
  <p>Old Str : <span th:text="${Str}"/></p>
  <p>toUpperCase : <span th:text="${#strings.toUpperCase(Str)}"/></p>
  <p>toLowerCase : <span th:text="${#strings.toLowerCase(Str)}"/></p>
  <p>equals : <span th:text="${#strings.equals(Str, 'blog')}"/></p>
  <p>equalsIgnoreCase : <span th:text="${#strings.equalsIgnoreCase(Str, 'blog')}"/></p>
  <p>indexOf : <span th:text="${#strings.indexOf(Str, 'r')}"/></p>
  <p>substring : <span th:text="${#strings.substring(Str, 2, 4)}"/></p>
  <p>replace : <span th:text="${#strings.replace(Str, 'it', 'IT')}"/></p>
  <p>startsWith : <span th:text="${#strings.startsWith(Str, 'it')}"/></p>
  <p>contains : <span th:text="${#strings.contains(Str, 'IT')}"/></p>
 </div>
 <h3>#numbers </h3>
 <div>
  <p>formatDecimal 整數部分隨意，小數點後保留兩位，四舍五入: <span th:text="${#numbers.formatDecimal(Num, 0, 2)}"/></p>
  <p>formatDecimal 整數部分保留五位數，小數點後保留兩位，四舍五入: <span th:text="${#numbers.formatDecimal(Num, 5, 2)}"/></p>
 </div>

 <h3>#bools </h3>
 <div th:if="${#bools.isTrue(Bool)}">
  <p th:text="${Bool}"></p>
 </div>

 <h3>#arrays </h3>
 <div th:if="${not #arrays.isEmpty(Array)}">
  <p>length : <span th:text="${#arrays.length(Array)}"/></p>
  <p>contains : <span th:text="${#arrays.contains(Array,2)}"/></p>
  <p>containsAll : <span th:text="${#arrays.containsAll(Array, Array)}"/></p>
 </div>
 <h3>#lists </h3>
 <div th:if="${not #lists.isEmpty(List)}">
  <p>size : <span th:text="${#lists.size(List)}"/></p>
  <p>contains : <span th:text="${#lists.contains(List, 0)}"/></p>
  <p>sort : <span th:text="${#lists.sort(List)}"/></p>
 </div>
 <h3>#maps </h3>
 <div th:if="${not #maps.isEmpty(hashMap)}">
  <p>size : <span th:text="${#maps.size(hashMap)}"/></p>
  <p>containsKey : <span th:text="${#maps.containsKey(hashMap, 'thName')}"/></p>
  <p>containsValue : <span th:text="${#maps.containsValue(hashMap, '#maps')}"/></p>
 </div>
 <h3>#dates </h3>
 <div>
  <p>format : <span th:text="${#dates.format(Date)}"/></p>
  <p>custom format : <span th:text="${#dates.format(Date, 'yyyy-MM-dd HH:mm:ss')}"/></p>
  <p>day : <span th:text="${#dates.day(Date)}"/></p>
  <p>month : <span th:text="${#dates.month(Date)}"/></p>
  <p>monthName : <span th:text="${#dates.monthName(Date)}"/></p>
  <p>year : <span th:text="${#dates.year(Date)}"/></p>
  <p>dayOfWeekName : <span th:text="${#dates.dayOfWeekName(Date)}"/></p>
  <p>hour : <span th:text="${#dates.hour(Date)}"/></p>
  <p>minute : <span th:text="${#dates.minute(Date)}"/></p>
  <p>second : <span th:text="${#dates.second(Date)}"/></p>
  <p>createNow : <span th:text="${#dates.createNow()}"/></p>
 </div>
</body>
</html>

ThymeleafController.java

@RequestMapping("standardExpression")
 public String standardExpression(ModelMap map){
  map.put("Str", "Blog");
  map.put("Bool", true);
  map.put("Array", new Integer[]{1,2,3,4});
  map.put("List", Arrays.asList(1,3,2,4,0));
  Map hashMap = new HashMap();
  hashMap.put("thName", "${#...}");
  hashMap.put("desc", "變量表達式內置方法");
  map.put("Map", hashMap);
  map.put("Date", new Date());
  map.put("Num", 888.888D);
  return "standardExpression";
 }

​@{…} 鏈接表達式，Link URL Expressions

<!--
不管是靜態資源的引用，form表單的請求，凡是鏈接都可以用@{...} 。這樣可以動態獲取項目路徑，即便項目名變瞭，依然可以正常訪問
鏈接表達式結構
無參：@{/xxx}
有參：@{/xxx(k1=v1,k2=v2)} 對應url結構：xxx?k1=v1&k2=v2
引入本地資源：@{/項目本地的資源路徑}
引入外部資源：@{/webjars/資源在jar包中的路徑}
-->
<link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="external nofollow" rel="stylesheet">
<link th:href="@{/main/css/123.css}" rel="external nofollow" rel="stylesheet">
<form class="form-login" th:action="@{/user/login}" th:method="post" >
<a class="btn btn-sm" th:href="@{/login.html(l='zh_CN')}" rel="external nofollow" >中文</a>
<a class="btn btn-sm" th:href="@{/login.html(l='en_US')}" rel="external nofollow" >English</a>

​#{…} 消息表達式，Message Expressions

<!-- 
消息表達式一般用於國際化的場景。結構：th:text="#{msg}"
-->

​~{…} 代碼塊表達式，Fragment Expressions

fragment.html

<!--
支持兩種語法結構
推薦：~{templatename::fragmentname}
支持：~{templatename::#id}
templatename：模版名，Thymeleaf會根據模版名解析完整路：/resources/templates/templatename.html，要註意文件的路徑。
fragmentname：片段名，Thymeleaf通過th:fragment聲明定義代碼塊，即：th:fragment="fragmentname"
id：HTML的id選擇器，使用時要在前面加上#號，不支持class選擇器。

代碼塊表達式的使用
代碼塊表達式需要配合th屬性（th:insert，th:replace，th:include）一起使用。
th:insert：將代碼塊片段整個插入到使用瞭th:insert的HTML標簽中，
th:replace：將代碼塊片段整個替換使用瞭th:replace的HTML標簽中，
th:include：將代碼塊片段包含的內容插入到使用瞭th:include的HTML標簽中，
-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<!--th:fragment定義代碼塊標識-->
<footer th:fragment="copy">
 2019 The Good Thymes Virtual Grocery
</footer>

<!--三種不同的引入方式-->
<div th:insert="fragment::copy"></div>
<div th:replace="fragment::copy"></div>
<div th:include="fragment::copy"></div>

<!--th:insert是在div中插入代碼塊，即多瞭一層div-->
<div>
 <footer>
  &copy; 2011 The Good Thymes Virtual Grocery
 </footer>
</div>
<!--th:replace是將代碼塊代替當前div，其html結構和之前一致-->
<footer>
 &copy; 2011 The Good Thymes Virtual Grocery
</footer>
<!--th:include是將代碼塊footer的內容插入到div中，即少瞭一層footer-->
<div>
 &copy; 2011 The Good Thymes Virtual Grocery
</div>
</body>
</html>

5、國際化的配置

​在很多應用場景下，我們需要實現頁面的國際化，springboot對國際化有很好的支持， 下面來演示對應的效果。

1、在idea中設置統一的編碼格式，file->settings->Editors->File Encoding,選擇編碼格式為utf-8

2、在resources資源文件下創建一個i8n的目錄，創建一個login.properties的文件，還有login_zh_CN.properties,idea會自動識別國際化操作

3、創建三個不同的文件，名稱分別是：login.properties，login_en_US.properties，login_zh_CN.properties

內容如下：

#login.properties
login.password=密碼1
login.remmber=記住我1
login.sign=登錄1
login.username=用戶名1
#login_en_US.properties
login.password=Password
login.remmber=Remember Me
login.sign=Sign In
login.username=Username
#login_zh_CN.properties
login.password=密碼~
login.remmber=記住我~
login.sign=登錄~
login.username=用戶名~

4、配置國際化的資源路徑

spring:
 messages:
 basename: i18n/login

5、編寫html頁面

初始html頁面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head>
  <meta charset="UTF-8"/>
  <title>Title</title>
 </head>
 <body>
  <form action="" method="post">

   <label >Username</label>
   <input type="text" name="username" placeholder="Username" >
   <label >Password</label>
   <input type="password" name="password" placeholder="Password" >
   <br> <br>
   <div>
    <label>
     <input type="checkbox" value="remember-me"/> Remember Me
    </label>
   </div>
   <br>
   <button type="submit">Sign in</button>
   <br> <br>
   <a>中文</a>
   <a>English</a>
  </form>
 </body>
</html>

修改後的頁面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head>
  <meta charset="UTF-8"/>
  <title>Title</title>
 </head>
 <body>
  <form action="" method="post">
   <label th:text="#{login.username}">Username</label>
   <input type="text" name="username" placeholder="Username" th:placeholder="#{login.username}">
   <label th:text="#{login.password}">Password</label>
   <input type="password" name="password" placeholder="Password" th:placeholder="#{login.password}">
   <br> <br>
   <div>
    <label>
     <input type="checkbox" value="remember-me"/> [[#{login.remmber}]]
    </label>
   </div>
   <br>
   <button type="submit" th:text="#{login.sign}">Sign in</button>
   <br> <br>
   <a>中文</a>
   <a>English</a>
  </form>
 </body>
</html>

可以看到通過瀏覽器的切換語言已經能夠實現，想要通過超鏈接實現的話，如下所示：

添加WebMVCConfig.java代碼

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

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

@Configuration
public class WebMVCConfig implements WebMvcConfigurer {

 @Override
 public void addViewControllers(ViewControllerRegistry registry) {
  registry.addViewController("/").setViewName("login");
  registry.addViewController("/login.html").setViewName("login");
 }

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

 protected static class NativeLocaleResolver implements LocaleResolver{

  @Override
  public Locale resolveLocale(HttpServletRequest request) {
   String language = request.getParameter("language");
   Locale locale = Locale.getDefault();
   if(!StringUtils.isEmpty(language)){
    String[] split = language.split("_");
    locale = new Locale(split[0],split[1]);
   }
   return locale;
  }

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

  }
 }
}

login.html頁面修改為：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8"/>
 <title>Title</title>
</head>
<body>
<form action="" method="post">
 <label th:text="#{login.username}">Username</label>
 <input type="text" name="username" placeholder="Username" th:placeholder="#{login.username}">
 <label th:text="#{login.password}">Password</label>
 <input type="password" name="password" placeholder="Password" th:placeholder="#{login.password}">
 <br> <br>
 <div>
  <label>
   <input type="checkbox" value="remember-me"/> [[#{login.remmber}]]
  </label>
 </div>
 <br>
 <button type="submit" th:text="#{login.sign}">Sign in</button>
 <br> <br>
 <a th:href="@{/login.html(language='zh_CN')}" rel="external nofollow" >中文</a>
 <a th:href="@{/login.html(language='en_US')}" rel="external nofollow" >English</a>
</form>
</body>
</html>

國際化的源碼解釋：

//MessageSourceAutoConfiguration 
public class MessageSourceAutoConfiguration {
 private static final Resource[] NO_RESOURCES = new Resource[0];

 public MessageSourceAutoConfiguration() {
 }

 @Bean
 @ConfigurationProperties(prefix = "spring.messages") //我們的配置文件可以直接放在類路徑下叫： messages.properties， 就可以進行國際化操作瞭
 public MessageSourceProperties messageSourceProperties() {
  return new MessageSourceProperties();
 }

 @Bean
 public MessageSource messageSource(MessageSourceProperties properties) {
  ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
  if (StringUtils.hasText(properties.getBasename())) {
　　　　　　　　//設置國際化文件的基礎名（去掉語言國傢代碼的）
   messageSource.setBasenames(StringUtils.commaDelimitedListToStringArray(StringUtils.trimAllWhitespace(properties.getBasename())));
  }

  if (properties.getEncoding() != null) {
   messageSource.setDefaultEncoding(properties.getEncoding().name());
  }

  messageSource.setFallbackToSystemLocale(properties.isFallbackToSystemLocale());
  Duration cacheDuration = properties.getCacheDuration();
  if (cacheDuration != null) {
   messageSource.setCacheMillis(cacheDuration.toMillis());
  }

  messageSource.setAlwaysUseMessageFormat(properties.isAlwaysUseMessageFormat());
  messageSource.setUseCodeAsDefaultMessage(properties.isUseCodeAsDefaultMessage());
  return messageSource;
 }
}


//WebMvcAutoConfiguration
		@Bean
		@ConditionalOnMissingBean
		@ConditionalOnProperty(prefix = "spring.mvc", name = "locale")
		public LocaleResolver localeResolver() {
			if (this.mvcProperties.getLocaleResolver() == WebMvcProperties.LocaleResolver.FIXED) {
				return new FixedLocaleResolver(this.mvcProperties.getLocale());
			}
			AcceptHeaderLocaleResolver localeResolver = new AcceptHeaderLocaleResolver();
			localeResolver.setDefaultLocale(this.mvcProperties.getLocale());
			return localeResolver;
		}

//AcceptHeaderLocaleResolver
	@Override
	public Locale resolveLocale(HttpServletRequest request) {
		Locale defaultLocale = getDefaultLocale();
		if (defaultLocale != null && request.getHeader("Accept-Language") == null) {
			return defaultLocale;
		}
		Locale requestLocale = request.getLocale();
		List<Locale> supportedLocales = getSupportedLocales();
		if (supportedLocales.isEmpty() || supportedLocales.contains(requestLocale)) {
			return requestLocale;
		}
		Locale supportedLocale = findSupportedLocale(request, supportedLocales);
		if (supportedLocale != null) {
			return supportedLocale;
		}
		return (defaultLocale != null ? defaultLocale : requestLocale);
	}

到此這篇關於Spring Boot thymeleaf模板引擎的使用詳解的文章就介紹到這瞭,更多相關Spring Boot thymeleaf模板引擎內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：