當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

thymeleaf取model值_史上最详 Thymeleaf 使用教程

發(fā)布時(shí)間：2024/10/12 编程问答 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 thymeleaf取model值_史上最详 Thymeleaf 使用教程小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

點(diǎn)擊上方“桌前明月”，可以關(guān)注我偶。

前言

操作前建議先參考我的另一篇博客：玩轉(zhuǎn) SpringBoot 2 快速整合 | Thymeleaf 篇?查看如何在SpringBoot 中使用 Thymeleaf。還有一點(diǎn)需要注意的是：模版頁(yè)面中的 html 上需要聲明 Thymeleaf 的命名空間，具體代碼如下：

接下來就可以開始 Thymeleaf 使用教程了！

全文介紹 Thymeleaf 是基于 Thymeleaf 3.0.11.RELEASE 版本進(jìn)行說明的。

基礎(chǔ)語(yǔ)法

文本標(biāo)簽 th:text/th:utext

用于文本內(nèi)容的顯示操作。

th:text?進(jìn)行文本替換不會(huì)解析html

th:utext?進(jìn)行文本替換會(huì)解析html

代碼演示：

@RequestMapping("/th")
public String th(Model model){
String msg = "

我是h1

";
model.addAttribute("msg",msg);
return "/course/th";
}

th:text?進(jìn)行文本替換不會(huì)解析html

結(jié)果頁(yè)面：

<p>text標(biāo)簽：<h1>我是h1h1>p>

游覽器訪問的效果：

th:utext?進(jìn)行文本替換會(huì)解析html

游覽器展示效果如下圖：
使用 + 和 | | 效果是一樣的，如下代碼所示：

字符串拼接

拼接字符串通過 + 或者 | 進(jìn)行拼接

代碼演示：

@RequestMapping("/th")
public String th(Model model){
model.addAttribute("a",1);
model.addAttribute("b",2);
return "/course/th";
}

模版頁(yè)面：

結(jié)果頁(yè)面：

<p>3p>

模版頁(yè)面：

結(jié)果頁(yè)面：

模版頁(yè)面：

結(jié)果是：

<p>falsep>

java代碼：

@RequestMapping("/th")
public String th(Model model){
model.addAttribute("flag",true);
return "/course/th";
}

模版頁(yè)面：

結(jié)果頁(yè)面：

<p>falsep>

*{...}和 ${...}表達(dá)式

正常情況下?{...} 和 ${...}是一樣的，但是?{...} 一般和?th:object?進(jìn)行一起使用來完成對(duì)象屬性的簡(jiǎn)寫。

代碼演示：

@RequestMapping("/th")
public String th(Model model){
User user = new User("ljk"，18);
model.addAttribute("user",user);
return "/course/th";
}

使用 ${...}操作
模版代碼：

結(jié)果頁(yè)面：

使用 *{...}操作
模版代碼：

結(jié)果頁(yè)面：

使用 *{...}特有操作
模版代碼：

結(jié)果頁(yè)面：

#{...}表達(dá)式

用于國(guó)際化message.properties 屬性讀取
定義message.properties 配置文件

定義國(guó)際化處理轉(zhuǎn)換處理類

@Configuration
public class LocaleResolverConfig {
@Bean(name="localeResolver")
public LocaleResolver localeResolverBean() {
return new SessionLocaleResolver();
}
}

定義國(guó)際化處理的controller

@Controller
public class ProductController {

@Autowired
private LocaleResolver localeResolver;
private ProductService productService = new ProductService();

@RequestMapping("/")
public String useT(Model model,HttpServletRequest request,HttpServletResponse response) {
//設(shè)置訪問用戶信息到session
request.getSession(true).setAttribute("user", new User("桌前", "明月", "CHINA", null));
localeResolver.setLocale(request,response,Locale.CHINA);
return "productList";
}
}

如果沒有定義 message_en_US.properties 和 message_zh_CN.properties 會(huì)默認(rèn)取message.properties中的信息
如果 Locale = Locale.CHINA 就取 message_zh_CN.properties
如果 Locale = Locale.US 就取 message_en_US.properties。

模版代碼：

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

訪問controller的路徑的效果：

~{...}片段表達(dá)式

這個(gè)一般和模版布局的語(yǔ)法一起使用，具體使用方式請(qǐng)看下面模版布局的教程。

@{...}鏈接網(wǎng)址表達(dá)式

一般和 th:href、th:src進(jìn)行結(jié)合使用，用于顯示W(wǎng)eb 應(yīng)用中的URL鏈接。通過@{...}表達(dá)式Thymeleaf 可以幫助我們拼接上web應(yīng)用訪問的全路徑，同時(shí)我們可以通過()進(jìn)行參數(shù)的拼接

代碼演示：

模版代碼：

結(jié)果頁(yè)面：

模版代碼：

結(jié)果頁(yè)面：

模版代碼：

結(jié)果頁(yè)面：

條件判斷 th:if/th:unless

th:if?當(dāng)條件為true則顯示。th:unless?當(dāng)條件為false 則顯示。

代碼演示：

java代碼：

@RequestMapping("/thif")
public String thif(Model model){
model.addAttribute("flag",true);
return "/course/thif";
}

模版頁(yè)面：

<p th:if="${flag}">if判斷p>

結(jié)果頁(yè)面：

<p>if判斷p>

模版頁(yè)面：

<p th:unless="!${flag}">unless 判斷p>

結(jié)果頁(yè)面：

<p>unless 判斷p>

switch

th:switch?我們可以通過switch來完成類似的條件表達(dá)式的操作。代碼演示：
java代碼：

@RequestMapping("/thswitch")
public String thswitch(Model model){
User user = new User("ljk",23);
model.addAttribute("user",user);
return "/course/thswitch";
}

模版頁(yè)面：

結(jié)果頁(yè)面：

for循環(huán)

th:each?遍歷集合

代碼演示：
java代碼：

@RequestMapping("/theach")
public String theach(Model model){

List userList = new ArrayList();
User user1 = new User("ljk",18);
User user2 = new User("ljk2",19);
User user3 = new User("ljk3",20);
User user4 = new User("lj4",21);
userList.add(user1);
userList.add(user2);
userList.add(user3);
userList.add(user4);
model.addAttribute("userList",userList);
List strList = new ArrayList();
strList.add("ljk");
strList.add("ljk2");
strList.add("ljk3");
strList.add("lj4");
model.addAttribute("strList",strList);return "/course/theach";
}

模版頁(yè)面：

<table>
<thead>
<tr>
<th>用戶名稱th>
<th>用戶年齡th>
tr>
thead>
<tbody>
<tr th:each="user : ${userList}" th:class="${userStat.odd}? 'odd'">
<td th:text="${user.name}">Onionstd>
<td th:text="${user.age}">2.41td>
tr>
tbody>
table>
----------------------------------------------------------------------
<table>
<thead>
<tr>
<th>用戶名稱th>
tr>
thead>
<tbody>
<tr th:each="str : ${strList}" th:class="${strStat.odd}? 'odd'">
<td th:text="${str}">Onionstd>
tr>
tbody>
table>

結(jié)果頁(yè)面：

我們可以通過便利的變量名+Stat 來獲取索引是否是第一個(gè)或最后一個(gè)等。
便利的變量名+Stat稱作狀態(tài)變量，其屬性有：

index:當(dāng)前迭代對(duì)象的迭代索引，從0開始，這是索引屬性；
count:當(dāng)前迭代對(duì)象的迭代索引，從1開始，這個(gè)是統(tǒng)計(jì)屬性；
size:迭代變量元素的總量，這是被迭代對(duì)象的大小屬性；
current:當(dāng)前迭代變量；
even/odd:布爾值，當(dāng)前循環(huán)是否是偶數(shù)/奇數(shù)(從0開始計(jì)算)；
first:布爾值，當(dāng)前循環(huán)是否是第一個(gè)；
last:布爾值，當(dāng)前循環(huán)是否是最后一個(gè)

for循環(huán)介紹內(nèi)容參考了 CSDN博主【liubin5620 Thymeleaf模板引擎常用屬性之 th:each迭代循環(huán)】：https://blog.csdn.net/liubin5620/article/details/80470619

th:href

用于聲明在a 標(biāo)簽上的href屬性的鏈接該語(yǔ)法會(huì)和@{..} 表達(dá)式一起使用。

代碼演示：
java代碼：

@RequestMapping("/thhref")
public String thhref(Model model){
return "/course/thhref";
}

模版代碼：

結(jié)果頁(yè)面：

th:class

用于聲明在標(biāo)簽上class 屬性信息。

代碼演示：
java代碼：

@RequestMapping("/thclass")
public String thclass(Model model){
return "/course/thclass";
}

模版頁(yè)面：

結(jié)果頁(yè)面：

<p class="even">evenp>

th:attr

用于聲明html中或自定義屬性信息。

代碼演示：

java代碼：

@RequestMapping("/thattr")
public String thattr(Model model){
return "/course/thattr";
}

模版頁(yè)面：

結(jié)果頁(yè)面：

th:value

用于聲明html中value屬性信息。

代碼演示：
java代碼：

@RequestMapping("/thvalue")
public String thvalue(Model model){
model.addAttribute("name", "ljk");
return "/course/thvalue";
}

模版頁(yè)面：

結(jié)果頁(yè)面：

th:action

用于聲明html from標(biāo)簽中action屬性信息。

代碼演示：
java代碼：

@RequestMapping("/thaction")
public String thaction(Model model){
return "/course/thaction";
}

模版頁(yè)面：

結(jié)果頁(yè)面：

th:id

用于聲明htm id屬性信息。

代碼演示：
java代碼：

@RequestMapping("/thid")
public String thid(Model model){
model.addAttribute("id", 123);
return "/course/thid";
}

模版頁(yè)面：

結(jié)果頁(yè)面：

th:inline

JavaScript內(nèi)聯(lián) 操作使用的語(yǔ)法，具體請(qǐng)參考下面內(nèi)聯(lián)操作相關(guān)介紹

th:onclick

用于聲明htm 中的onclick事件。

代碼演示：
java代碼：

@RequestMapping("/thonclick")
public String honclick(Model model){
return "/course/thonclick";
}

模版頁(yè)面：

<html><head><meta charset="UTF-8"><title>Insert title heretitle><script type="text/javascript">function showUserInfo(){
alert("i am zhuoqianmingyue!")
}script>head><body><p th:onclick="'showUserInfo()'">點(diǎn)我p>body>html>

結(jié)果頁(yè)面：

th:selected

用于聲明htm 中的selected屬性信息。

代碼演示：
java代碼：

@RequestMapping("/thselected")
public String thselected(Model model){
model.addAttribute("sex", 1);
return "/course/thselected";
}

模版頁(yè)面：

<select>
<option name="sex">option>
<option th:selected="1 == ${sex}">男option>
<option th:selected="0 == ${sex}">女option>
select>

結(jié)果頁(yè)面：

<select>
<option name="sex">option>
<option selected="selected">男option>
<option>女option>
select>

th:src

用于聲明htm 中的img中src屬性信息。

代碼演示：
java代碼：

@RequestMapping("/thsrc")
public String thsrc(Model model){
return "/course/thsrc";
}

模版頁(yè)面：

結(jié)果頁(yè)面：

th:style

用于聲明htm中的標(biāo)簽 css的樣式信息。

代碼演示：
java代碼：

RequestMapping("/thstyle")
public String thstyle(Model model){
model.addAttribute("isShow", true);
return "/course/thstyle";
}

模版頁(yè)面：

結(jié)果頁(yè)面：

th:with

用于thymeleaf 模版頁(yè)面中局部變量定義的使用。

代碼演示：
java代碼：

@RequestMapping("/thwith")
public String thwith(Model model){
model.addAttribute("today", new Date());
return "/course/thwith";
}

模版頁(yè)面：

<p th:with="df='dd/MMM/yyyy HH:mm'">
Today is: <span th:text="${#dates.format(today,df)}">13 February 2011span>
p>

結(jié)果頁(yè)面：

java代碼：

@RequestMapping("/thwith")
public String thwith(Model model){
List users = new ArrayList();
users.add(new User("ljk",18));
users.add(new User("ljk2",18));
model.addAttribute("users",users);return "/course/thwith";
}

模版頁(yè)面：

<div th:with="firstEle=${users[0]}">
<p>
第一個(gè)用戶的名稱是： <span th:text="${firstEle.name}">span>.
p>
div>

結(jié)果頁(yè)面：

<div>
<p>
第一個(gè)用戶的名稱是： <span>ljkspan>.
p>
div>

還有一種用法是在模版布局中帶參數(shù)的引用片段中使用方式如下：

具體演示請(qǐng)參考模版布局中的介紹。

Elvis運(yùn)算符

Elvis運(yùn)算可以理解成簡(jiǎn)單的判斷是否為null的三元運(yùn)算的簡(jiǎn)寫，如果值為nullzhe顯示默認(rèn)值，如果不為null 則顯示原有的值。

代碼演示：
java代碼：

@RequestMapping("/elvis")
public String elvis(Model model){
model.addAttribute("age", null);
return "/course/elvis";
}

模版頁(yè)面：

結(jié)果頁(yè)面：

<p>Age: <span>年齡為nllspan>p>

java代碼：

@RequestMapping("/elvis")
public String elvis(Model model){
model.addAttribute("age2", 18);
return "/course/elvis";
}

模版頁(yè)面：

結(jié)果頁(yè)面：

三元表達(dá)式

我們可以在thymeleaf 的語(yǔ)法中使用三元表達(dá)式具體使用方法是在th:x 中通過表達(dá)式？1選項(xiàng)：2選項(xiàng)。

代碼演示：
java代碼：

@RequestMapping("/threeElementOperation")
public String threeElementOperation(Model model){
return "/course/threeElementOperation";
}

模版頁(yè)面：

結(jié)果頁(yè)面：

<p class="even">evenp>

java代碼：

@RequestMapping("/threeElementOperation")
public String threeElementOperation(Model model){
model.addAttribute("name", "ljk");
return "/course/threeElementOperation";
}

模版頁(yè)面：

結(jié)果頁(yè)面：

條件表達(dá)式操作字符：
gt：great than(大于)
ge：great equal(大于等于)
eq：equal(等于)
lt：less than(小于)
le：less equal(小于等于)
ne：not equal(不等于)

No-Operation(_)什么都不做

Elvis運(yùn)算符的一種特殊簡(jiǎn)寫操作，當(dāng)顯示的值為null 是就什么都不做。

代碼演示：
java代碼：

@RequestMapping("/noOperation")
public String noOperation(Model model){
model.addAttribute("name", null);
return "/course/noOperation";
}

模版頁(yè)面：

<span th:text="${name} ?: _">no user authenticatedspan>

結(jié)果頁(yè)面：

<span>no user authenticatedspan>

標(biāo)準(zhǔn)方言中存在以下固定值布爾屬性：

th:asyncth:autofocusth:autoplay

th:checked	th:controls	th:declare
th:default	th:defer	th:disabled
th:formnovalidate	th:hidden	th:ismap
th:loop	th:multiple	th:novalidate
th:nowrap	th:open	th:pubdate
th:readonly	th:required	th:reversed
th:scoped	th:seamless	th:selected

針對(duì)特定的HTML5屬性：

th:abbrth:acceptth:accept-charset

th:accesskey	th:action	th:align
th:alt	th:archive	th:audio
th:autocomplete	th:axis	th:background
th:bgcolor	th:border	th:cellpadding
th:cellspacing	th:challenge	th:charset
th:cite	th:class	th:classid
th:codebase	th:codetype	th:cols
th:colspan	th:compact	th:content
th:contenteditable	th:contextmenu	th:data
th:datetime	th:dir	th:draggable
th:dropzone	th:enctype	th:for
th:form	th:formaction	th:formenctype
th:formmethod	th:formtarget	th:fragment
th:frame	th:frameborder	th:headers
th:height	th:high	th:href
th:hreflang	th:hspace	th:http-equiv
th:icon	th:id	th:inline
th:keytype	th:kind	th:label
th:lang	th:list	th:longdesc
th:low	th:manifest	th:marginheight
th:marginwidth	th:max	th:maxlength
th:media	th:method	th:min
th:name	th:onabort	th:onafterprint
th:onbeforeprint	th:onbeforeunload	th:onblur
th:oncanplay	th:oncanplaythrough	th:onchange
th:onclick	th:oncontextmenu	th:ondblclick
th:ondrag	th:ondragend	th:ondragenter
th:ondragleave	th:ondragover	th:ondragstart
th:ondrop	th:ondurationchange	th:onemptied
th:onended	th:onerror	th:onfocus
th:onformchange	th:onforminput	th:onhashchange
th:oninput	th:oninvalid	th:onkeydown
th:onkeypress	th:onkeyup	th:onload
th:onloadeddata	th:onloadedmetadata	th:onloadstart
th:onmessage	th:onmousedown	th:onmousemove
th:onmouseout	th:onmouseover	th:onmouseup
th:onmousewheel	th:onoffline	th:ononline
th:onpause	th:onplay	th:onplaying
th:onpopstate	th:onprogress	th:onratechange
th:onreadystatechange	th:onredo	th:onreset
th:onresize	th:onscroll	th:onseeked
th:onseeking	th:onselect	th:onshow
th:onstalled	th:onstorage	th:onsubmit
th:onsuspend	th:ontimeupdate	th:onundo
th:onunload	th:onvolumechange	th:onwaiting
th:optimum	th:pattern	th:placeholder
th:poster	th:preload	th:radiogroup
th:rel	th:rev	th:rows
th:rowspan	th:rules	th:sandbox
th:scheme	th:scope	th:scrolling
th:size	th:sizes	th:span
th:spellcheck	th:src	th:srclang
th:standby	th:start	th:step
th:style	th:summary	th:tabindex
th:target	th:title	th:type
th:usemap	th:value	th:valuetype
th:vspace	th:width	th:wrap
th:xmlbase	th:xmllang	th:xmlspace

內(nèi)聯(lián)

如何使用內(nèi)連操作

我們可以通過在父標(biāo)簽聲明 th:inline="text" 來開啟內(nèi)聯(lián)操作。當(dāng)然如果想整個(gè)頁(yè)面使用可以直接聲明在body上即可。具體使用方式如下面代碼所示。

模版頁(yè)面：

"text">

Hello, [[${user.name}]]!

結(jié)果內(nèi)容如下：

<div>
<p>Hello,zhuoqianmingyue!p>
div>

這樣的操作和使用th:text是等同的。

[[...]]對(duì)應(yīng)于th:text，[(...)]對(duì)應(yīng)于th:utext

禁用內(nèi)聯(lián)操作

這我們可以通過在父標(biāo)簽或者本標(biāo)簽上聲明th:inline="none"來禁用內(nèi)聯(lián)的操作，如下面代碼所示：
模版頁(yè)面：

<p th:inline="none">A double array looks like this: [[1, 2, 3], [4, 5]]!p>

結(jié)果頁(yè)面：

<p>A double array looks like this: [[1, 2, 3], [4, 5]]!p>

JavaScript內(nèi)聯(lián)

如果我們想在JavaScript 中使用內(nèi)聯(lián)操作，需要在 script 標(biāo)簽上聲明 th:inline="javascript" 然后我們就可以 script 標(biāo)簽中使用內(nèi)聯(lián)操作了。具體使用方式如下面代碼所示：
模版頁(yè)面：

結(jié)果頁(yè)面：

CSS內(nèi)聯(lián)

我們可以通過在 style 標(biāo)簽上聲明 th:inline="css" 來開啟在css中使用內(nèi)聯(lián)的操作，具體操作方式如下：

例如，假設(shè)我們將兩個(gè)變量設(shè)置為兩個(gè)不同的String值：
classname = 'main elems'
align = 'center'
我們可以像以下一樣使用它們：

結(jié)果頁(yè)面：

模板布局

定義引用片段代碼

SpringBoot2.0 使用模版模版布局需要先引入 thymeleaf的 thymeleaf-layout-dialect依賴

<dependency>
<groupId>nz.net.ultraq.thymeleafgroupId>
<artifactId>thymeleaf-layout-dialectartifactId>
dependency>

定義footer.html頁(yè)面該頁(yè)面就是我們的引用片段代碼

<html lang="en" xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title>Titletitle>head><body><div th:fragment="copy">
? 2011 The Good Thymes Virtual Grocerydiv>body>html>

我們可以通過 th:fragment 來定義引用片段，然后可以在其他頁(yè)面進(jìn)行引用。

定義引用頁(yè)面 index.html

<html lang="en" xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title>Titletitle>head><body><div th:insert="~{footer :: copy}">div>body>html>

通過 th:insert 和 ~{...}片段引用表達(dá)式進(jìn)行引入footer.html中定義的片段

定義訪問index頁(yè)面的 controller

@Controller
@RequestMapping("/layout")
public class LayOutController {
@RequestMapping("/index")
public String index(){
return "/layout/index";
}
}

進(jìn)行測(cè)試
http://localhost:8090/sbe/layout/index
結(jié)果頁(yè)面：

<div>
<div>
? 2011 The Good Thymes Virtual Grocery
div>
div>

如下面的代碼2種方式的寫法是一致的。如果你覺得~{footer :: copy}寫法比較麻煩可以采用簡(jiǎn)寫的方式footer :: copy。

通過id屬性來聲明片段

我們可以通過 th:fragment 來定義引用片段，但是我們也可以通過在引用片段代碼上聲明id屬性的方式進(jìn)行片段的引用，具體操作方式如下：

定義引用片段代碼模版頁(yè)面 footer.html

<html lang="en" xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title>Titletitle>head><body><div id="copy-section" >
? 2011 The Good Thymes Virtual Grocerydiv>body>html>

引用引用片段的模版頁(yè)面：index.html

<html lang="en" xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title>Titletitle>head><body><div th:insert="~{footer :: #copy-section}">div>body>html>

結(jié)果頁(yè)面：

<div>
<div id="copy-section">
? 2011 The Good Thymes Virtual Grocery
div>
div>

footer :: #copy-section和~{footer :: #copy-section} 結(jié)果是一致的。

th:insert和th:replace(和th:include)之間的區(qū)別

th:insert?是最簡(jiǎn)單的：他會(huì)將使用th:insert的標(biāo)簽?和引用片段的內(nèi)容都顯示出來
th:replace?插入引用片段的標(biāo)簽和內(nèi)容
th:include類似于th:insert，只插入此片段的內(nèi)容。

th:insert
java代碼：

@Controller
@RequestMapping("/layout")
public class LayoutController {
@RequestMapping("/index2")
public String index2(Model model) {
return "/layout/index2";
}
}

聲明引用片段模版頁(yè)面：footer2.html

<html xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title>Insert title heretitle>head><body><footer th:fragment="copy">
? 2011 The Good Thymes Virtual Groceryfooter>body>html>

引用片段模版頁(yè)面：index2.html

<html><head><meta charset="UTF-8"><title>Insert title heretitle>head><body><div th:insert="footer2 :: copy">div><div th:replace="footer2 :: copy">div><div th:include="footer2:: copy">div>body>html>

th:insert 結(jié)果：

<div>
<footer>
? 2011 The Good Thymes Virtual Grocery
footer>
div>

th:replace結(jié)果：

<footer>
? 2011 The Good Thymes Virtual Grocery
footer>

th:include結(jié)果：

<div>
? 2011 The Good Thymes Virtual Grocery
div>

帶參數(shù)的引用片段

定義引用片段代碼模版頁(yè)面 footer.html

<html xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title>Insert title heretitle>head><body><div th:fragment="frag (onevar,twovar)"><p th:text="${onevar} + ' - ' + ${twovar}">...p>div>body>html>

引用引用片段的模版頁(yè)面：index.html

<html><head><meta charset="UTF-8"><title>Insert title heretitle>head><body><div th:insert="footer :: frag('a','b')">div>body>html>

結(jié)果頁(yè)面：

th:insert="footer ::frag (onevar='a',twovar='b')" 和th:insert="footer :: frag('a','b')效果是相等的。還有另一種寫法就是使用th:with
th:insert="::frag" th:with="onevar='a',twovar='b'"

刪除模版片段

我們?yōu)榱朔奖阃ㄟ^直接查看下面的頁(yè)面 productList.html (主要是為了作為原型頁(yè)面進(jìn)行查看)我們需要添加一些模擬數(shù)據(jù)。

<table>
<tr>
<th>NAMEth>
<th>PRICEth>
<th>IN STOCKth>
<th>COMMENTSth>
tr>
<tr th:each="prod : ${prods}" th:class="${prodStat.odd}? 'odd'">
<td th:text="${prod.name}">Onionstd>
<td th:text="${prod.price}">2.41td>
<td th:text="${prod.inStock}? #{true} : #{false}">yestd>
<td>
<span th:text="${#lists.size(prod.comments)}">2span> comment/s
<a href="comments.html" th:href="@{/product/comments(prodId=${prod.id})}" th:unless="${#lists.isEmpty(prod.comments)}">viewa>
td>
tr>
<tr class="odd">
<td>Blue Lettucetd>
<td>9.55td>
<td>notd>
<td>
<span>0span> comment/s
td>
tr>
<tr>
<td>Mild Cinnamontd>
<td>1.99td>
<td>yestd>
<td>
<span>3span> comment/s
<a href="comments.html">viewa>
td>
tr>
table>

在上面的代碼中模擬數(shù)據(jù)的代碼，但是我們通過正常的controller訪問該頁(yè)面的時(shí)候會(huì)顯示出下面的模擬數(shù)據(jù)。

<tr class="odd">
<td>Blue Lettucetd>
<td>9.55td>
<td>notd>
<td>
<span>0span> comment/s
td>
tr>
<tr>
<td>Mild Cinnamontd>
<td>1.99td>
<td>yestd>
<td>
<span>3span> comment/s
<a href="comments.html">viewa>
td>
tr>

我們直接查看該頁(yè)面的效果如下：

通過url訪問查看該頁(yè)面的效果：

thymeleaf 為我們提供了 th:remove 幫助我們解決這個(gè)問題：

<tr class="odd" th:remove="all">
<td>Blue Lettucetd>
<td>9.55td>
<td>notd>
<td>
<span>0span> comment/s
td>
tr>
<tr th:remove="all">
<td>Mild Cinnamontd>
<td>1.99td>
<td>yestd>
<td>
<span>3span> comment/s
<a href="comments.html">viewa>
td>
tr>

我們?cè)谀M數(shù)據(jù)上聲明th:remove="all" 后在此通過url訪問沒有了我們之前的模擬數(shù)據(jù)

直接查看該頁(yè)面還是可以查看到我們的模擬數(shù)據(jù)的。

all屬性中的這個(gè)值是什么意思？th:remove可以根據(jù)其價(jià)值以五種不同的方式表現(xiàn)：

all：刪除包含標(biāo)記及其所有子標(biāo)記。
body：不要?jiǎng)h除包含標(biāo)記，但刪除其所有子標(biāo)記。
tag：刪除包含標(biāo)記，但不刪除其子項(xiàng)。
all-but-first：刪除除第一個(gè)之外的所有包含標(biāo)記的子項(xiàng)。
none：沒做什么。此值對(duì)于動(dòng)態(tài)評(píng)估很有用。
當(dāng)我們知道沒有屬性的含義后我們可以通過在聲明一次即可，無需在通過定義多個(gè) th:remove="all"

預(yù)定義的工具對(duì)象

#dates

處理日期數(shù)據(jù) 生成，轉(zhuǎn)換，獲取日期的具體天數(shù) 年數(shù)。

代碼演示：

java代碼：

@RequestMapping("/dates")
public String dates(Model model) throws ParseException{
Date date = new Date();
model.addAttribute("date",date);

String dateStr = "2018-05-30";
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Date date2 = sdf.parse(dateStr);
Date[] datesArray = new Date[2];
datesArray[0] = date;
datesArray[1] = date2;
model.addAttribute("datesArray",datesArray);

List datesList = new ArrayList();
datesList.add(date);
datesList.add(date2);
model.addAttribute("datesList",datesList);return "/course/dates";
}

format操作

java代碼：

Date date = new Date();

模版頁(yè)面：

結(jié)果頁(yè)面：

java代碼：

Date date = new Date();

模版頁(yè)面：

結(jié)果頁(yè)面：

java代碼：

Date[] datesArray = new Date[2];
datesArray[0] = date;
datesArray[1] = date2;

模版頁(yè)面：

結(jié)果頁(yè)面：

不知為何這里只是取出了一個(gè)日期數(shù)據(jù)

java代碼：

List datesList = new ArrayList();
datesList.add(date);
datesList.add(date2);
model.addAttribute("datesList",datesList);

模版頁(yè)面：

結(jié)果頁(yè)面：

獲取日期屬性操作
java代碼：

Date date = new Date();

模版頁(yè)面：

結(jié)果頁(yè)面：

<p>30p>

java代碼：

Date date = new Date();

模版頁(yè)面：

結(jié)果頁(yè)面：

<p>5p>

java代碼：

Date date = new Date();

模版頁(yè)面：

結(jié)果頁(yè)面：

java代碼：

Date date = new Date();

模版頁(yè)面：

結(jié)果頁(yè)面：

java代碼：

Date date = new Date();

模版頁(yè)面：

結(jié)果頁(yè)面：

java代碼：

Date date = new Date();

模版頁(yè)面：

結(jié)果頁(yè)面：

<p>5p>

java代碼：

Date date = new Date();

模版頁(yè)面：

結(jié)果頁(yè)面：

java代碼：

Date date = new Date();

模版頁(yè)面：

結(jié)果頁(yè)面：

java代碼：

Date date = new Date();

模版頁(yè)面：

結(jié)果頁(yè)面：

<p>10p>

java代碼：

Date date = new Date();

模版頁(yè)面：

結(jié)果頁(yè)面：

<p>10p>

java代碼：

Date date = new Date();

模版頁(yè)面：

結(jié)果頁(yè)面：

<p>45p>

java代碼：

Date date = new Date();

模版頁(yè)面：

結(jié)果頁(yè)面：

生成日期操作

模版頁(yè)面：

結(jié)果頁(yè)面：

模版頁(yè)面：

結(jié)果頁(yè)面：

模版頁(yè)面：

結(jié)果頁(yè)面：

模版頁(yè)面：

結(jié)果頁(yè)面：

模版頁(yè)面：

結(jié)果頁(yè)面：

模版頁(yè)面：

結(jié)果頁(yè)面：

#numbers

處理數(shù)字?jǐn)?shù)據(jù)的轉(zhuǎn)換。包括:

對(duì)不夠位數(shù)的數(shù)字進(jìn)行補(bǔ)0(formatInteger )
設(shè)置千位分隔符(formatInteger)
精確小數(shù)點(diǎn)(formatDecimal )
設(shè)置百分號(hào)(formatPercent )
生成數(shù)組(sequence )

代碼演示：

@RequestMapping("/numbers")
public String numbers(Model model) throws ParseException{
return "/course/numbers";
}

數(shù)字進(jìn)行補(bǔ)0操作

模板代碼：

結(jié)果頁(yè)面：

模板代碼：

結(jié)果頁(yè)面：

模板代碼：

結(jié)果頁(yè)面：

Java代碼

@RequestMapping("/numbers")
public String numbers(Model model) throws ParseException{
List numList = new ArrayList();
numList.add(1);
numList.add(12);
numList.add(13);
model.addAttribute("numList",numList);return "/course/numbers";
}

模板代碼：

結(jié)果頁(yè)面：

千位分隔符操作
模板代碼：

結(jié)果頁(yè)面：

模板代碼：

結(jié)果頁(yè)面：

模板代碼：

結(jié)果頁(yè)面：

模板代碼：

結(jié)果頁(yè)面：

模板代碼：

結(jié)果頁(yè)面：

模板代碼：

結(jié)果頁(yè)面：

模板代碼：

結(jié)果頁(yè)面：

精確小數(shù)點(diǎn)操作
模板代碼：

結(jié)果頁(yè)面：

模板代碼：

結(jié)果頁(yè)面：

錢顯示符號(hào)操作

模板代碼：

結(jié)果頁(yè)面：

百分比操作
模板代碼：

結(jié)果頁(yè)面：

模板代碼：

結(jié)果頁(yè)面：

生成數(shù)組操作

模板代碼：

結(jié)果頁(yè)面：

模板代碼：

結(jié)果頁(yè)面：

模板代碼：

結(jié)果頁(yè)面：

#strings

處理String的相關(guān)操作，包括:

字符串轉(zhuǎn)換(toString)
檢查字符串是否為空(isEmpty)
字符串是為空替換操作(defaultString)
檢查字符串中是否包含某個(gè)字符串(contains containsIgnoreCase)
檢查字符串是以片段開頭還是結(jié)尾(startsWith endsWith)
截取(substring substringAfter)
替換(replace)
追加(prepend append)
變更大小寫(toUpperCase toLowerCase)
拆分和組合字符串(arrayJoin arraySplit)
去空格(trim)
縮寫文本(abbreviate)
字符串連接(concat)

代碼演示：
java 代碼

@RequestMapping("/strings")
public String strings(Model model){
Object object = "123";
model.addAttribute("object",object);

List numList = new ArrayList();
numList.add(1);
numList.add(12);
numList.add(13);
model.addAttribute("numList",numList);
}

Java代碼

Object object = "123";

模板代碼：

結(jié)果頁(yè)面：

toString操作

Java代碼

Object object = "123";

模板代碼：

結(jié)果頁(yè)面：

Java代碼

List numList = new ArrayList();
numList.add(1);
numList.add(12);
numList.add(13);

模板代碼：

結(jié)果頁(yè)面：

isEmpty操作
Java代碼

String name = null;

模板代碼：

結(jié)果頁(yè)面：

<p>truep>

Java代碼

List nameList = new ArrayList();
nameList.add("1");
nameList.add(null);

模板代碼：

結(jié)果頁(yè)面：

<p>[false, true]p>

Java代碼

Set nameSet = new HashSet();
nameSet.add(null);
nameSet.add("1");

模板代碼：

結(jié)果頁(yè)面：

<p>[true, false]p>

defaultString操作
Java代碼

String name = null;

模板代碼：

結(jié)果頁(yè)面：

<p>該值為nullp>

Java代碼

List nameList = new ArrayList();
nameList.add("1");
nameList.add(null);

模板代碼：

結(jié)果頁(yè)面：

<p>[abc, 該值為null]p>

contains操作
模板代碼：

結(jié)果頁(yè)面：

<p>truep>

模板代碼：

結(jié)果頁(yè)面：

<p>truep>

startsWith endsWith 操作

模板代碼：

結(jié)果頁(yè)面：

<p>truep>

模板代碼：

結(jié)果頁(yè)面：

<p>truep>

indexOf操作
模板代碼：

結(jié)果頁(yè)面：

<p>3p>

substring操作
模板代碼：

結(jié)果頁(yè)面：

<p>efp>

replace操作
模板代碼：

結(jié)果頁(yè)面：

<p>lerabcep>

prepend操作
模板代碼：

結(jié)果頁(yè)面：

append操作
模板代碼：

結(jié)果頁(yè)面：

toUpperCase操作
模板代碼：

結(jié)果頁(yè)面：

toLowerCase操作
模板代碼：

結(jié)果頁(yè)面：

length操作
模板代碼：

結(jié)果頁(yè)面：

<p>3p>

trim操作
模板代碼：

結(jié)果頁(yè)面：

abbreviate操作
模板代碼：

結(jié)果頁(yè)面：

#objects

處理Object對(duì)象的操作包含obj不為空返回改值如果為空返回默認(rèn)值(nullSafe)
java代碼

@RequestMapping("/objects")
public String objects(Model model){
Object obj = null;
model.addAttribute("obj",obj);
}

模板代碼：

結(jié)果頁(yè)面：

<p>該對(duì)象為nullp>

#bools

判斷對(duì)象是否為ture或者是否為false的操作。

數(shù)字 1 為 ture , 0 為 false;
"on" 為 true, "off" 為false;
"true" 為true, "false"為 false;

isTrue操作
模板代碼：

結(jié)果頁(yè)面：

<p>truep>

模板代碼：

結(jié)果頁(yè)面：

<p>falsep>

模板代碼：

結(jié)果頁(yè)面：

<p>truep>

模板代碼：

結(jié)果頁(yè)面：

<p>falsep>

模板代碼：

結(jié)果頁(yè)面：

<p>truep>

模板代碼：

結(jié)果頁(yè)面：

<p>falsep>

模板代碼：

結(jié)果頁(yè)面：

<p>truep>

模板代碼：

結(jié)果頁(yè)面：

<p>falsep>

#arrays

處理數(shù)組的相關(guān)操作的內(nèi)置對(duì)象，包含：

轉(zhuǎn)換數(shù)組 toStringArray toIntegerArray
獲取數(shù)組的長(zhǎng)度(length )
判斷數(shù)組是否為空(isEmpty )
是否包含某個(gè)元素(contains)
是否包含一批元素(containsAll)

其中 toStringArray 等操作接受的是Object對(duì)象，containsAll 接受一批元素支持?jǐn)?shù)組和集合的參數(shù)。

toStringArray操作
java代碼

@RequestMapping("/arrays")
public String arrays(Model model){
List object = new ArrayList();
object.add("1");
object.add("2");
model.addAttribute("object",object);
}

模板代碼：

結(jié)果頁(yè)面：

<p>[Ljava.lang.String;@3cca655dp>

length操作
java代碼

Integer[] array = {1,2,3};

模板代碼：

結(jié)果頁(yè)面：

<p>3p>

isEmpty操作
java代碼

Integer[] array = {1,2,3};

模板代碼：

結(jié)果頁(yè)面：

<p>falsep>

contains操作
java代碼

Integer[] array = {1,2,3};

模板代碼：

結(jié)果頁(yè)面：

<p>truep>

containsAll操作
java代碼

Integer[] array = {1,2,3};
Integer[] array2 = {1,3};

模板代碼：

結(jié)果頁(yè)面：

<p>truep>

#lists

處理 list 相關(guān)操作的內(nèi)置對(duì)象，包括：

計(jì)算長(zhǎng)度(size)
檢查list是否為空(isEmpty)
檢查元素是否包含在list中(contains,containsAll)
對(duì)給定list的副本排序(sort)

java代碼

@RequestMapping("/lists")
public String lists(Model model){
List list = new ArrayList();
list.add(1);
list.add(3);
list.add(2);
model.addAttribute("list",list);
｝

模板代碼：

結(jié)果頁(yè)面：

<p>3p>

java代碼:

List list = new ArrayList();
list.add(1);
list.add(3);
list.add(2);

模板代碼：

結(jié)果頁(yè)面：

<p>falsep>

java代碼:

List list = new ArrayList();
list.add(1);
list.add(3);
list.add(2);

模板代碼：

結(jié)果頁(yè)面：

<p>truep>

java代碼:

List list = new ArrayList();
list.add(1);
list.add(3);
list.add(2);
List list2 = new ArrayList();
list2.add(1);
list2.add(2);

模板代碼：

結(jié)果頁(yè)面：

<p>truep>

java代碼:

List list = new ArrayList();
list.add(1);
list.add(3);
list.add(2);

模板代碼：

結(jié)果頁(yè)面：

#sets

處理 set 相關(guān)操作的內(nèi)置對(duì)象，包括：

轉(zhuǎn)換為Set(toSet)
計(jì)算長(zhǎng)度(size)
檢查set是否為空(isEmpty)
檢查元素是否包含在set中 (contains,containsAll)

size操作

java代碼

@RequestMapping("/sets")
public String sets(Model model){
Set set = new HashSet();
set.add(1);
set.add(2);
set.add(3);
set.add(4);
model.addAttribute("set",set);
｝

模板代碼：

結(jié)果頁(yè)面：

<p>3p>

isEmpty 操作

java代碼：

Set set = new HashSet();
set.add(1);
set.add(2);
set.add(3);
set.add(4);

模板代碼：

結(jié)果頁(yè)面：

<p>falsep>

contains操作

java代碼：

Set set = new HashSet();
set.add(1);
set.add(2);
set.add(3);
set.add(4);

模板代碼：

結(jié)果頁(yè)面：

<p>truep>

containsAll操作

java代碼

Set set = new HashSet();
set.add(1);
set.add(2);
set.add(3);
set.add(4);
Integer[] elements = {1,2};
model.addAttribute("elements",elements);

模板代碼：

結(jié)果頁(yè)面：

<p>truep>

sort操作

java代碼：

Set set = new HashSet();
set.add(1);
set.add(2);
set.add(3);
set.add(4);

模板代碼：

結(jié)果頁(yè)面：

#maps

處理 map相關(guān)操作的內(nèi)置對(duì)象，包括：

計(jì)算長(zhǎng)度(size)
檢查map是否為空(isEmpty)
檢查映射中是否包含鍵或值(containsKey,containsAllKeys,containsValue)

java代碼：

@RequestMapping("/maps")
public String maps(Model model){
Map map = new HashMap();
map.put("1",1);
map.put("2",2);
map.put("3",3);
model.addAttribute("map",map);
｝

模板代碼：

結(jié)果頁(yè)面：

<p>3p>

java代碼：

Map map = new HashMap();
map.put("1",1);
map.put("2",2);
map.put("3",3);

模板代碼：

結(jié)果頁(yè)面：

<p>falsep>

java代碼：

Map map = new HashMap();
map.put("1",1);
map.put("2",2);
map.put("3",3);

模板代碼：

結(jié)果頁(yè)面：

<p>truep>

java代碼：

Map map = new HashMap();
map.put("1",1);
map.put("2",2);
map.put("3",3);
String[] keys = {"1","2"};
model.addAttribute("keys",keys);

模板代碼：

結(jié)果頁(yè)面：

<p>truep>

java代碼：

Map map = new HashMap();
map.put("1",1);
map.put("2",2);
map.put("3",3);

模板代碼：

結(jié)果頁(yè)面：

<p>truep>

java代碼：

Map map = new HashMap();
map.put("1",1);
map.put("2",2);
map.put("3",3);
Integer[] values = {1,2};
model.addAttribute("values",values);

模板代碼：

結(jié)果頁(yè)面：

<p>truep>

#aggregates

用戶處理集合或者數(shù)組的一些統(tǒng)計(jì)操作，包括：

求和(sum)
求平均值(avg)
處理包裝類型或基本類型的數(shù)組或集合

求和操作

java代碼：

@RequestMapping("/aggregates")
public String aggregates(Model model){
Integer[] array = {1,2,3,4};
model.addAttribute("array",array);
return "/course/aggregates";
}

模板代碼：

結(jié)果頁(yè)面：

<p>10p>

java代碼：

List list = new ArrayList();
list.add(1);
list.add(2);
list.add(3);
list.add(4);

模板代碼：

結(jié)果頁(yè)面：

<p>10p>

求平均值操作

java代碼：

Integer[] array = {1,2,3,4};

模板代碼：

結(jié)果頁(yè)面：

java代碼：

List list = new ArrayList();
list.add(1);
list.add(2);
list.add(3);
list.add(4);

模板代碼：

結(jié)果頁(yè)面：

小結(jié)

本文主要介紹 Thymeleaf 的基礎(chǔ)用法、內(nèi)聯(lián)、模板布局、預(yù)定義的工具對(duì)象。整體來看Thymeleaf 使用語(yǔ)法還是很強(qiáng)大的。

但是我這里不會(huì)強(qiáng)烈安利你使用 Thymeleaf，正如 Thymeleaf 官方所說：“無論如何，比較技術(shù)的最好方法是自己使用它們，并感覺哪個(gè)最適合你！” 你同樣可以選擇使用 Velocity 或 FreeMarker。

代碼示例

具體代碼示例請(qǐng)查看我的GitHub 倉(cāng)庫(kù) springbootexamples 中的 spring-boot-2.x-thymeleaf 下的 course 包下查看。

GitHub：https://github.com/zhuoqianmingyue/springbootexamples

參考文獻(xiàn)：

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

https://blog.csdn.net/liubin5620/article/details/80470619

·END·

歡迎關(guān)注公眾號(hào)桌前明月查看更多技術(shù)分享

總結(jié)

以上是生活随笔為你收集整理的thymeleaf取model值_史上最详 Thymeleaf 使用教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：亚宝直播间给大家推荐的燕麦胚芽米产自哪里
下一篇：火锅可以炒菜煎鱼吗?