Spring Boot 引入 Thymeleaf 及入門使用

程序員社區 2022-01-07 14:21:50 阅读数:427

spring boot 引入 thymeleaf 使用

引言

        Spring Boot 推薦我們使用模板引擎 Thymeleaf 來開發頁面,因為它語法簡單,功能强大。作為模板引擎,Thymeleaf 和市面上主流其他的 Java 模板引擎:JSPVelocityFreemarker,原理都是類似的。

  1. 模板引擎的作用:將模板(我們開發的頁面)和 數據進行整合,然後輸出內容顯示的過程。
  2. 模板引擎的區別:不同的模板都有它們自己不同的語法。

1.Spring Boot 引入 Thymeleaf

       Thymeleaf 官網:我是官網鏈接,Thymeleaf 已經將代碼托管在了 Github 上:我是Github地址。Spring Boot 如何引入 Thymeleaf 模板,我們只需要在 pom.xml 中添加如下 Maven 依賴即可。

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

1.1 修改 Thymeleaf 版本

       因為 Spring Boot 的自動配置,它已經為我們 Spring Boot 的每個版本都指定了各個組件的版本。如果你還在使用 Spring Boot 1.x 版本,它為我們自動指定的Thymeleaf 版本為 2.x 版本。在項目開發中,2.x 的 Thymeleaf 版本有點低,建議您昇級到 Thymeleaf 3.x 版本。Spring Boot 官方有介紹我們該如何使用 Thymeleaf 3.x 版本。官網地址。我們只需要修改 Maven 依賴的 Thymeleaf 版本即可。

<properties> <thymeleaf.version>3.0.11.RELEASE</thymeleaf.version> <thymeleaf-layout-dialect.version>2.4.1</thymeleaf-layout-dialect.version></properties>

1.2 修改 Thymeleaf Layout Dialect 版本

       修改 Thymeleaf 的同時,必須同時修改 Thymeleaf Layout Dialect 布局組件的版本。Thymeleaf Layout Dialect 布局組件從 2.0.0 版本開始支持 Thymeleaf 3 。 Thymeleaf Layout dialect 2.0.0 rewritten to support Thymeleaf 3 。官網有提及:我是官網說明。所以此處均使用目前最新版本,Thymeleaf:3.1.11.RELEASE,Thymeleaf Layout Dialect:2.4.1
在這裏插入圖片描述

2.Thymeleaf 語法介紹

       Thymeleaf 的語法使用文檔,官方為我們有提供 PDF 介紹,此處附官方文檔:官方PDF文檔,此處就來簡單介紹一下基本的語法。

2.1 Thymeleaf 模板存放路徑介紹   默認路徑:classpath:/templates/

        Spring Boot 關於 Thymeleaf 的所有配置信息,都在 ThymeleafProperties類下。部分代碼如下:通過代碼我可以知道→→(重要:)只要我們把(HTML)頁面放在 classpath:/templates/這個目錄下,後綴名為.html,thymeleaf 就能幫我們自動渲染!!!

       除此之外,我們也可以在全局配置文件中,通過spring.thymeleaf.prefix 的方式來修改這個路徑。 其他配置信息的修改,通過spring.thymeleaf.屬性名即可。

@ConfigurationProperties(prefix = "spring.thymeleaf")public class ThymeleafProperties {
 private static final Charset DEFAULT_ENCODING = Charset.forName("UTF-8"); private static final MimeType DEFAULT_CONTENT_TYPE = MimeType.valueOf("text/html"); //默認前綴 public static final String DEFAULT_PREFIX = "classpath:/templates/"; //默認後綴 public static final String DEFAULT_SUFFIX = ".html"; /** * Check that the template exists before rendering it (Thymeleaf 3+). */ private boolean checkTemplate = true; /** * 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;}

2.2 Thymeleaf 引入工程

1.導入 thymeleaf 的名稱空間

       導入 thymeleaf 的名稱空間,只是為了語法提示,你也可以不導入的。

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

2.使用 thymeleaf 語法

<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <!--th:text 將div裏面的文本內容設置為 --> <div th:text="${hello}">這是顯示歡迎信息</div></body></html>

2.3 Thymeleaf 標簽

       這類屬性很多,每個屬性都針對特定的HTML5屬性,以下屬性內容摘抄自官方 pdf 文檔,標簽有缺失。在這些所有屬性中,我們常用到的也就那麼幾個,用的時候查一查就好了。

th:abbr th:accept th:accept-charsetth:accesskey th:action th:alignth:alt th:archive th:audioth:autocomplete th:axis th:backgroundth:bgcolor th:border th:cellpaddingth:cellspacing th:challenge th:charsetth:cite th:class th:classidth:codebase th:codetype th:colsth:colspan th:compact th:contentth:contenteditable th:contextmenu th:datath:datetime th:dir th:draggableth:dropzone th:enctype th:forth:form th:formaction th:formenctypeth:formmethod th:formtarget th:fragmentth:frame th:frameborder th:headersth:height th:high th:hrefth:hreflang th:hspace th:http-equivth:icon th:id th:inlineth:keytype th:kind th:labelth:lang th:list th:longdescth:low th:manifest th:marginheightth:marginwidth th:max th:maxlengthth:media th:method th:minth:name th:onabort th:onafterprintth:onbeforeprint th:onbeforeunload th:onblurth:oncanplay th:oncanplaythrough th:onchangeth:onclick th:oncontextmenu th:ondblclickth:ondrag th:ondragend th:ondragenterth:ondragleave th:ondragover th:ondragstartth:ondrop th:ondurationchange th:onemptiedth:onended th:onerror th:onfocusth:onformchange th:onforminput th:onhashchangeth:oninput th:oninvalid th:onkeydownth:onkeypress th:onkeyup th:onloadth:onloadeddata th:onloadedmetadata th:onloadstartth:onmessage th:onmousedown th:onmousemoveth:onmouseout th:onmouseover th:onmouseupth:onmousewheel th:onoffline th:ononlineth:onpause th:onplay th:onplayingth:onpopstate th:onprogress th:onratechangeth:onreadystatechange th:onredo th:onresetth:onresize th:onscroll th:onseekedth:onseeking th:onselect th:onshowth:onstalled th:onstorage th:onsubmitth:onsuspend th:ontimeupdate th:onundoth:onunload th:onvolumechange th:onwaitingth:optimum th:pattern th:placeholderth:poster th:preload th:radiogroupth:rel th:rev th:rowsth:rowspan th:rules th:sandboxth:scheme th:scope th:scrollingth:size th:sizes th:spanth:spellcheck th:src th:srclangth:standby th:start th:stepth:style th:summary th:tabindexth:target th:text th:title th:type th:usemap th:value th:valuetype th:vspace th:width th:wrap th:xmlbase th:xmllang th:xmlspace

2.4 Thymeleaf 錶達式介紹

Thymeleaf 內置了 5 種錶達式:

1.${…} 錶達式 獲取變量值;底層實現是OGNL

①獲取對象的屬性、調用方法

此部分的具體使用,參考:pdf 這部分→4.2 Variables

/* * Access to properties using the point (.). Equivalent to calling property getters. */${
person.father.name}/* * Access to properties can also be made by using brackets ([]) and writing * the name of the property as a variable or between single quotes. */${
person['father']['name']}/* * If the object is a map, both dot and bracket syntax will be equivalent to * executing a call on its get(...) method. */${
countriesByCode.ES}${
personsByName['Stephen Zucchini'].age}/* * Indexed access to arrays or collections is also performed with brackets, * writing the index without quotes. */${
personsArray[0].name}/* * Methods can be called, even with arguments. */${
person.createCompleteName()}${
person.createCompleteNameWithSeparator('-')}

②還可以使用 Thymeleaf 內置的基本對象:(使用#號)

#ctx : the context object.#vars: the context variables.#locale : the context locale.#request : (only in Web Contexts) the HttpServletRequest object.#response : (only in Web Contexts) the HttpServletResponse object.#session : (only in Web Contexts) the HttpSession object.#servletContext : (only in Web Contexts) the ServletContext object.

       此部分的介紹,請參考 pdf 這部分→Expression Basic Objects。詳細使用介紹,請參見考:pdf 這部分→18 Appendix A: Expression Basic Objects

③Thymeleaf 還內置了一些工具對象:

#execInfo : information about the template being processed. #messages : methods for obtaining externalized messages inside variables expressions, in the same way as they would be obtained using #{
} syntax.#uris : methods for escaping parts of URLs/URIs#conversions : methods for executing the configured conversion service (if any).#dates : methods for java.util.Date objects: formatting, component extraction, etc.#calendars : analogous to #dates , but for java.util.Calendar objects.#numbers : methods for formatting numeric objects.#strings : methods for String objects: contains, startsWith, prepending/appending, etc.#objects : methods for objects in general.#bools : methods for boolean evaluation.#arrays : methods for arrays.#lists : methods for lists.#sets : methods for sets.#maps : methods for maps.#aggregates : methods for creating aggregates on arrays or collections.#ids : methods for dealing with id attributes that might be repeated (for example, as a result of an iteration).

       此部分的介紹,請參考 pdf 這部分→Expression Utility Objects。詳細使用介紹,請參考:pdf 這部分→18 Appendix A: Expression Basic Objects

2.*{…} 錶達式 和${…}在功能上是一樣;唯一一點不同如下↓↓↓

使用*{…}方式:

<div th:object="${session.user}"> <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p> <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p> <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p></div>

使用${…}方式:

<div th:object="${session.user}"> <p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p> <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p> <p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p></div>

        區別在於:針對對象遍曆來說,使用*{…} 比 ${…} 簡潔點。這兩種錶達式,也可以混合在一起使用,不過沒人會這麼用吧,哈哈。

        此部分的介紹,請參見 pdf 這部分→4.3 Expressions on selections (asterisk syntax)。詳細使用介紹也參考:pdf 這部分→4.3 Expressions on selections (asterisk syntax)

3.#{…} 錶達式 該錶達式稱之為消息錶達式,消息錶達式主要用於從消息源中提取消息內容實現國際化。

舉個例子:

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

消息屬性可以是傳統的靜態值

home.welcome=¡Bienvenido a nuestra tienda de comestibles!

也可以帶有參數聲明,參數聲明格式符合java.text.MessageFormat標准

home.welcome=¡Bienvenido a nuestra tienda de comestibles, {
0}!

通過在消息名稱後邊加括號聲明參數的方式#{messageKey(param=value)}實現參數賦值

<p th:utext="#{home.welcome(${session.user.name})}"> Welcome to our grocery store, Sebastian Pepper!</p>

多個參數用","分割

#{
messageKey(param1=value1,param2=value2)}

messageKey 本身可以是一個變量錶達式

<p th:utext="#{${welcomeMsgKey}(${session.user.name})}"> Welcome to our grocery store, Sebastian Pepper!</p>

消息源介紹:

       大多數情况下,消息源是 .properties文件,同時你可以自定義其他消息源,比如數據庫。消息源通過org.thymeleaf.messageresolver.IMessageResolver 獲取,如果在初始化模板引擎時沒有自定義的IMessageResolver 被提供,那麼一個默認的實現org.thymeleaf.messageresolver.StandardMessageResolver會被自動提供。

StandardMessageResolver查找和模板文件比特於同級目錄,且具有和模板文件相同名字的*.properties*文件。

模板/WEB-INF/templates/home.html在渲染時,會根據 local 設置,使用下面的消息源文件

  • /WEB-INF/templates/home_en.properties for English texts.
  • /WEB-INF/templates/home_es.properties for Spanish language texts.
  • /WEB-INF/templates/home_pt_BR.properties for Portuguese (Brazil) language texts.
  • /WEB-INF/templates/home.properties for default texts (if the locale is not matched).

        此部分的介紹,主要應用於國際化,請參見 pdf 這部分→4.1 Messages。詳細使用介紹請參考:pdf 這部分→Using th:text and externalizing text

[email protected]{…}錶達式 該錶達式稱之為URL錶達式

@{…}錶達式,用來定義URL。我在此處扔個例子就走人了→→→

<!-- Will produce 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) --><a href="details.html" th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a><!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) --><a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a><!-- Will produce '/gtvg/order/3/details' (plus rewriting) --><a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

        此部分的介紹,主要應用於國際化,請參見 pdf 這部分→4.4 Link URLs。詳細使用介紹也參考:pdf 這部分→4.4 Link URLs

5.~{…}錶達式 該錶達式稱之為片段錶達式

       片段錶達式的使用,你可以參考博主的這篇文章→→→Thymeleaf 公共組件的抽取

       片段錶達式錶示標記片段,並將其在模板中"移動"的簡便方法。 這允許我們複制它們,將它們作為參數傳遞給其他模板,依此類推。最常見的用途是使用 th:insertth:replace進行片段插入。

<div th:insert="~{commons :: main}">...</div>

但是它們可以在任何地方使用,就像其他任何變量一樣:

<div th:with="frag=~{footer :: #main/text()}"> <p th:insert="${frag}"></div>

        此部分的介紹,請參見 pdf 這部分→4.5 Fragments。詳細使用介紹也參考:pdf 這部分→8 Template Layout。此部分建議你去看一下詳細介紹,就類似於模板使用一樣:一處編寫,到處使用

2.5 Thymeleaf 其他基本使用介紹

       Thymeleaf 對 字面量、文本操作、數學運算、布爾運算、比較運算、條件運算、特殊無操作運算,都做了一些基本的介紹。如下所示:

1.字面量

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 ,

2.文本操作

Text operations:(文本操作) String concatenation: + Literal substitutions: |The name is ${name}|

3.數學運算

Arithmetic operations:(數學運算) Binary operators: + , - , * , / , % Minus sign (unary operator): -

4.布爾運算

Boolean operations:(布爾運算) Binary operators: and , or Boolean negation (unary operator): ! , not

5.比較運算

Comparisons and equality:(比較運算) Comparators: > , < , >= , <= ( gt , lt , ge , le ) Equality operators: == , != ( eq , ne )

6.條件運算

Conditional operators:條件運算(三目運算符) If-then: (if) ? (then) If-then-else: (if) ? (then) : (else) Default: (value) ?: (defaultvalue)

7.條件運算

Special tokens:(特殊操作) No-Operation: _ 舉例:可以這麼使用 if(1=1)?'yes':_ (否則啥也不幹)

3.文末附Thymeleaf pdf 版使用手册一份

     附 Thymeleaf 開發參考手册一份:參考手册鏈接


博主寫作不易,來個關注唄

求關注、求點贊,加個關注不迷路 ヾ(◍°∇°◍)ノ゙

博主不能保證寫的所有知識點都正確,但是能保證純手敲,錯誤也請指出,望輕噴 Thanks*(・ω・)ノ

版权声明:本文为[程序員社區]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201071421498479.html