Spring Boot thymeleaf模板引擎的使用詳解
在早期開發的時候，我們完成的都是靜態頁面也就是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: ~{...}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
<!--一、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='http://www.gepszalag.com/bcjs/@{/webjars/bootstrap/4.0.0/css/bootstrap.css}' rel='external nofollow' rel='stylesheet'><link th:href='http://www.gepszalag.com/bcjs/@{/main/css/123.css}' rel='external nofollow' rel='stylesheet'><form th:action='@{/user/login}' th:method='post' ><a th:href='http://www.gepszalag.com/bcjs/@{/login.html(l=’zh_CN’)}' rel='external nofollow' >中文</a><a th:href='http://www.gepszalag.com/bcjs/@{/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> © 2011 The Good Thymes Virtual Grocery </footer></div><!--th:replace是將代碼塊代替當前div，其html結構和之前一致--><footer> © 2011 The Good Thymes Virtual Grocery</footer><!--th:include是將代碼塊footer的內容插入到div中，即少了一層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) { } }}
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='http://www.gepszalag.com/bcjs/@{/login.html(language=’zh_CN’)}' rel='external nofollow' >中文</a> <a th:href='http://www.gepszalag.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模板引擎內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備