文章詳情頁

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

瀏覽：200日期：2023-07-20 11:24:54

在早期開發的時候，我們完成的都是靜態頁面也就是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/

導入依賴：

<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: ~{...}LiteralsText literals: ’one text’, ’Another one!’,…Number literals: 0, 34, 3.0, 12.3,…Boolean literals: true, falseNull literal: nullLiteral 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, orBoolean negation (unary operator): !, notComparisons 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;@Controllerpublic 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

<!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

<link th:href='http://m.b3g6.com/bcjs/@{/webjars/bootstrap/4.0.0/css/bootstrap.css}' rel='external nofollow' rel='stylesheet'><link th:href='http://m.b3g6.com/bcjs/@{/main/css/123.css}' rel='external nofollow' rel='stylesheet'><form th:action='@{/user/login}' th:method='post' ><a th:href='http://m.b3g6.com/bcjs/@{/login.html(l=’zh_CN’)}' rel='external nofollow' >中文</a><a th:href='http://m.b3g6.com/bcjs/@{/login.html(l=’en_US’)}' rel='external nofollow' >English</a>

#{...} 消息表達式，Message Expressions

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

fragment.html

<!DOCTYPE html><html lang='en' xmlns:th='http://www.thymeleaf.org'><head> <meta charset='UTF-8'> <title>Title</title></head><body><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><div> <footer> © 2011 The Good Thymes Virtual Grocery </footer></div><footer> © 2011 The Good Thymes Virtual Grocery</footer><div> © 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.propertieslogin.password=密碼1login.remmber=記住我1login.sign=登錄1login.username=用戶名1#login_en_US.propertieslogin.password=Passwordlogin.remmber=Remember Melogin.sign=Sign Inlogin.username=Username#login_zh_CN.propertieslogin.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;@Configurationpublic 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) { } }}

<!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='http://m.b3g6.com/bcjs/@{/login.html(language=’zh_CN’)}' rel='external nofollow' >中文</a> <a th:href='http://m.b3g6.com/bcjs/@{/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@Overridepublic 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模板引擎內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！

Spring

上一條：Spring Boot 集成 Mybatis Plus 自動填充字段的實例詳解下一條：關于Prometheus + Spring Boot 應用監控的問題

相關文章：

1. PHP驗證碼工具－Securimage2. Vue 實現對quill-editor組件中的工具欄添加title3. JavaScript實現簡單的彈窗效果4. 我所理解的JavaScript中的this指向5. javascript實現貪吃蛇小練習6. PHP利用curl發送HTTP請求的實例代碼7. Java commons-httpclient如果實現get及post請求8. PHP單件模式和命令鏈模式的基礎知識9. 一文帶你徹底理解Java序列化和反序列化10. js實現碰撞檢測

排行榜

					
					Java commons-httpclient如果實現get及post請求
Spring MVC 開發快速入門
一文帶你徹底理解Java序列化和反序列化
PHP利用curl發送HTTP請求的實例代碼
javascript實現貪吃蛇小練習
PHP單件模式和命令鏈模式的基礎知識
spring acegi security 1.0.0 發布
用Spring JMS使異步消息變得簡單
Vue 實現對quill-editor組件中的工具欄添加title
關于IDEA 2020.3 多窗口視圖丟失的問題
PHP驗證碼工具－Securimage
				