|
<!DOCTYPE html>
<html xmlns='http://www./1999/xhtml'
xmlns:th='http://www.'>
3）就可以用th標(biāo)簽動(dòng)態(tài)替換掉靜態(tài)數(shù)據(jù)了。如下圖，后臺(tái)傳出的message會(huì)將靜態(tài)數(shù)據(jù)“Red Chair”替換掉，若訪問(wèn)靜態(tài)頁(yè)面，則顯示數(shù)據(jù)“Red Chair”。 <td th:text='${message}'>Red Chair</td>
2.整合spring 1）加入thymeleaf-spring4-2.1.4.RELEASE.jar（http://www./download.html ）包，若用maven，則加入如下配置 <dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring3</artifactId>
<version>2.1.4</version>
</dependency>
2）在servlet配置文件中加入如下代碼  <!-- Scans the classpath of this application for @Components to deploy as beans -->
<context:component-scan base-package='com.test.thymeleaf.controller' />
<!-- Configures the @Controller programming model -->
<mvc:annotation-driven />
<!--Resolves view names to protected .jsp resources within the /WEB-INF/views directory -->
<!--springMVC jsp的跳轉(zhuǎn)頁(yè)面配置-->
<!--<bean class='org.springframework.web.servlet.view.InternalResourceViewResolver'>-->
<!--<property name='prefix' value='/WEB-INF/views/' />-->
<!--<property name='suffix' value='.jsp' />-->
<!--</bean>-->
<!--springMVC thymeleaf的跳轉(zhuǎn)頁(yè)面配置-->
<bean id='templateResolver'
class='org.thymeleaf.templateresolver.ServletContextTemplateResolver'>
<property name='prefix' value='/WEB-INF/views/' />
<property name='suffix' value='.html' />
<property name='templateMode' value='HTML5' />
</bean>
<bean id='templateEngine'
class='org.thymeleaf.spring4.SpringTemplateEngine'>
<property name='templateResolver' ref='templateResolver' />
</bean>
<bean class='org.thymeleaf.spring4.view.ThymeleafViewResolver'>
<property name='templateEngine' ref='templateEngine' />
</bean>
3）將靜態(tài)頁(yè)面加到項(xiàng)目中，更改文件頭，加入th標(biāo)簽即可。 3.th標(biāo)簽整理 1）簡(jiǎn)單表達(dá)式 --變量表達(dá)式 ${……} <input type='text' name='userName' value='James Carrot' th:value='${user.name}' />
上述代碼為引用user對(duì)象的name屬性值。 --選擇/星號(hào)表達(dá)式 *{……} <div th:object='${session.user}'>
<p>Nationality: <span th:text='*{nationality}'>Saturn</span>.</p>
</div>
選擇表達(dá)式一般跟在th:object后，直接取object中的屬性。 --文字國(guó)際化表達(dá)式 #{……} <p th:utext='#{home.welcome}'>Welcome to our grocery store!</p>
調(diào)用國(guó)際化的welcome語(yǔ)句,國(guó)際化資源文件如下 resource_en_US.properties：
home.welcome=Welcome to here！ resource_zh_CN.properties： home.welcome=歡迎您的到來(lái)！ -- URL表達(dá)式 @{……} <a href='details.html' th:href='@{/order/details(orderId=${o.id})}'>view</a>
@{……}支持決定路徑和相對(duì)路徑。其中相對(duì)路徑又支持跨上下文調(diào)用url和協(xié)議的引用（//code.jquery.com/jquery-2.0.3.min.js）。
當(dāng)URL為后臺(tái)傳出的參數(shù)時(shí)，代碼如下
<img src='../../static/assets/images/qr-code.jpg' th:src='@{${path}}' alt='二維碼' />
2）常用的th標(biāo)簽 --簡(jiǎn)單數(shù)據(jù)轉(zhuǎn)換（數(shù)字，日期） <dt>價(jià)格</dt>
<dd th:text='${#numbers.formatDecimal(product.price, 1, 2)}'>180</dd>
<dt>進(jìn)貨日期</dt>
<dd th:text='${#dates.format(product.availableFrom, 'yyyy-MM-dd')}'>2014-12-01</dd>
--字符串拼接 <dd th:text='${'$' product.price}'>235</dd>
--轉(zhuǎn)義和非轉(zhuǎn)義文本 當(dāng)后臺(tái)傳出的數(shù)據(jù)為“This is an <em>HTML</em> text. <b>Enjoy yourself!</b>”時(shí)，若頁(yè)面代碼如下則出現(xiàn)兩種不同的結(jié)果 <div th:text='${html}'>
This is an <em>HTML</em> text. <b>Enjoy yourself!</b>
</div>
<div th:utext='${html}'> This is an <em>HTML</em> text. <b>Enjoy yourself!</b>
</div>
--表單中 <form th:action='@{/bb}' th:object='${user}' method='post' th:method='post'>
<input type='text' th:field='*{name}'/>
<input type='text' th:field='*{msg}'/>
<input type='submit'/>
</form>
--顯示頁(yè)面的數(shù)據(jù)迭代  //用 th:remove 移除除了第一個(gè)外的靜態(tài)數(shù)據(jù)，用第一個(gè)tr標(biāo)簽進(jìn)行循環(huán)迭代顯示
<tbody th:remove='all-but-first'>
//將后臺(tái)傳出的 productList 的集合進(jìn)行迭代，用product參數(shù)接收，通過(guò)product訪問(wèn)屬性值
<tr th:each='product:${productList}'>
//用count進(jìn)行統(tǒng)計(jì)，有順序的顯示 <td th:text='${productStat.count}'>1</td> <td th:text='${product.description}'>Red Chair</td> <td th:text='${'$' #numbers.formatDecimal(product.price, 1, 2)}'>$123</td> <td th:text='${#dates.format(product.availableFrom, 'yyyy-MM-dd')}'>2014-12-01</td> </tr> <tr> <td>White table</td> <td>$200</td> <td>15-Jul-2013</td> </tr> <tr> <td>Reb table</td> <td>$200</td> <td>15-Jul-2013</td> </tr> <tr> <td>Blue table</td> <td>$200</td> <td>15-Jul-2013</td> </tr> </tbody> --條件判斷 <span th:if='${product.price lt 100}' class='offer'>Special offer!</span>
不能用'<”，'>'等符號(hào)，要用'lt'等替代 <!-- 當(dāng)gender存在時(shí)，選擇對(duì)應(yīng)的選項(xiàng)；若gender不存在或?yàn)閚ull時(shí)，取得customer對(duì)象的name-->
<td th:switch='${customer.gender?.name()}'>
<img th:case=''MALE'' src='../../../images/male.png' th:src='@{/images/male.png}' alt='Male' /> <!-- Use '/images/male.png' image -->
<img th:case=''FEMALE'' src='../../../images/female.png' th:src='@{/images/female.png}' alt='Female' /> <!-- Use '/images/female.png' image -->
<span th:case='*'>Unknown</span>
</td>
<!--在頁(yè)面先顯示，然后再在顯示的數(shù)據(jù)基礎(chǔ)上進(jìn)行修改-->
<div class='form-group col-lg-6'> <label>姓名<span> </span></label> <！--除非resume對(duì)象的name屬性值為null，否則就用name的值作為placeholder值--> <input type='text' class='form-control' th:unless='${resumes.name} eq '' or ${resumes.name} eq null' data-required='true' th:placeholder='${resumes.name}' /> <!--除非resume對(duì)象的name屬性不為空，否則就定義一個(gè)field方便封裝對(duì)象，并用placeholder提示--> <input type='text' th:field='${resume.name}' class='form-control' th:unless='${resumes.name} ne null' data-required='true' th:placeholder='請(qǐng)?zhí)顚?xiě)您的真實(shí)姓名' /> </div> <!-- 增加class='enhanced'當(dāng)balance大雨10000 -->
<td th:class='${customer.balance gt 10000} ? 'enhanced'' th:text='${customer.balance}'>350</td>
--根據(jù)后臺(tái)數(shù)據(jù)選中select的選項(xiàng)
<div class='form-group col-lg-6'>
<label >性別<span> Sex:</span></label>
<select th:field='${resume.gender}' class='form-control' th:switch='${resumes.gender.toString()}'
data-required='true'>
<option value='男' th:case=''男'' th:selected='selected' >男</option>
<option value='女' th:case=''女'' th:selected='selected' >女</option>
<option value=''>請(qǐng)選擇</option>
</select>
</div>
因?yàn)間ender是定義的Enum（枚舉）類型，所以要用toString方法。用th:switch指定傳出的變量,用th:case對(duì)變量的值進(jìn)行匹配。！'請(qǐng)選擇'放在第一項(xiàng)會(huì)出現(xiàn)永遠(yuǎn)選擇的是這個(gè)選項(xiàng)。或者用th:if <div class='form-group col-lg-4'>
<select class='form-control' name='skill[4].proficiency'>
<option >掌握程度</option>
<option th:if='${skill.level eq '一般'}' th:selected='selected'>一般</option>
<option th:if='${skill.level eq '熟練'}' th:selected='selected'>熟練</option>
<option th:if='${skill.level eq '精通'}' th:selected='selected'>精通</option>
</select>
</div>
--spring表達(dá)式語(yǔ)言 <!DOCTYPE html>
<html xmlns:th='http://www.'>
<head>
<title>Thymeleaf tutorial: exercise 10</title>
<link rel='stylesheet' href='../../../css/main-static.css' th:href='@{/css/main.css}' />
<meta charset='utf-8' />
</head>
<body>
<h1>Thymeleaf tutorial - Solution for exercise 10: Spring Expression language</h1>
<h2>Arithmetic expressions</h2>
<p class='label'>Four multiplied by minus six multiplied by minus two module seven:</p>
<p class='answer' th:text='${4 * -6 * -2 % 7}'>123</p>
<h2>Object navigation</h2>
<p class='label'>Description field of paymentMethod field of the third element of customerList bean:</p>
<p class='answer' th:text='${customerList[2].paymentMethod.description}'>Credit card</p>
<h2>Object instantiation</h2>
<p class='label'>Current time milliseconds:</p>
<p class='answer' th:text='${new java.util.Date().getTime()}'>22-Jun-2013</p>
<h2>T operator</h2>
<p class='label'>Random number:</p>
<p class='answer' th:text='${T(java.lang.Math).random()}'>123456</p>
</body>
</html>
--內(nèi)聯(lián) <label for='body'>Message body:</label>
<textarea id='body' name='body' th:inline='text'>
Dear [[${customerName}]],
it is our sincere pleasure to congratulate your in your birthday:
Happy birthday [[${customerName}]]!!!
See you soon, [[${customerName}]].
Regards,
The Thymeleaf team
</textarea>
--內(nèi)聯(lián)JS <js起止加入如下代碼，否則引號(hào)嵌套或者'<''>'等不能用> /*<![CDATA[*/
……
/*]]>*/
--js附加代碼： /*[
var msg = 'This is a working application';
]*/
--js移除代碼： /*[- */
var msg = 'This is a non-working template';
/* -]*/
4.不常用 --表達(dá)式 2）文字 a)文本文字 'one text','Another one',……
b)數(shù)字文字 0,34,3.0,12.3，……
c)布爾文字 true，flase
d)空文字 null
e)文字標(biāo)記 one，sometext，main，……
3）文本處理
a)字符串連接
b)文字替換 | The name id ${name} |
4）算術(shù)表達(dá)式
a)基本表達(dá)式 ，-，*，/，%
b)減號(hào)（一元運(yùn)算符） -
5）布爾表達(dá)式
a)基本表達(dá)式 and，or
b)布爾否定（一元運(yùn)算符） ！,not
6）比較和相等
a)比較 >，<，>=，<=(gt，lt，ge，le)
b)相等表達(dá)式 ==，！=(eq，ne)
7）條件表達(dá)式
a)If-then (if) ? (then)
b)If-then-else (if) ? (then) : (else)
c)Default (value) ? : (defaltvalue)
所有這些標(biāo)簽?zāi)軌蚪Y(jié)合和嵌套：
User is of type ' (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))
--表達(dá)式基本對(duì)象 在上下文變量評(píng)估OGNL表達(dá)式時(shí)，一些對(duì)象表達(dá)式可獲得更高的靈活性。這些對(duì)象將由#號(hào)開(kāi)始引用。
- #ctx: 上下文對(duì)象.
- #vars: 上下文變量.
- #locale: 上下文語(yǔ)言環(huán)境.
- #httpServletRequest: (僅在web上文)HttpServletRequest 對(duì)象.
- #httpSession: (僅在web上文) HttpSession 對(duì)象.
--表達(dá)式功能對(duì)象
- #dates:java.util.Date對(duì)象的實(shí)用方法。
- #calendars:和dates類似, 但是 java.util.Calendar 對(duì)象.
- #numbers: 格式化數(shù)字對(duì)象的實(shí)用方法。
- #strings: 字符創(chuàng)對(duì)象的實(shí)用方法： contains, startsWith, prepending/appending等.
- #objects: 對(duì)objects操作的實(shí)用方法。
- #bools: 對(duì)布爾值求值的實(shí)用方法。
- #arrays: 數(shù)組的實(shí)用方法。
- #lists: list的實(shí)用方法。
- #sets: set的實(shí)用方法。
- #maps: map的實(shí)用方法。
- #aggregates: 對(duì)數(shù)組或集合創(chuàng)建聚合的實(shí)用方法。
- #messages: 在表達(dá)式中獲取外部信息的實(shí)用方法。
- #ids: 處理可能重復(fù)的id屬性的實(shí)用方法 (比如：迭代的結(jié)果)。
下面是用th:action給action設(shè)值。
<form action='subscribe.html' th:action='@{/subscribe}'>
還有很多這樣的屬性，它們每一個(gè)都針對(duì)一個(gè)特定的XHTML或者HTML5屬性：
th:text='${data}'
將data的值替換該屬性所在標(biāo)簽的body。字符常量要用引號(hào)，比如th:text=''hello world'',th:text='2011 3',th:text=''my name is ' ${user.name}'
th:utext 和th:text的區(qū)別是'unescaped text'。
th:with 定義變量，th:with='isEven=${prodStat.count}%2==0'，定義多個(gè)變量可以用逗號(hào)分隔。
th:attr 設(shè)置標(biāo)簽屬性，多個(gè)屬性可以用逗號(hào)分隔，比如th:attr='src=@{/image/aa.jpg},title=#{logo}'，此標(biāo)簽不太優(yōu)雅，一般用的比較少。
th:[tagAttr] 設(shè)置標(biāo)簽的各個(gè)屬性，比如th:value,th:action等。
可以一次設(shè)置兩個(gè)屬性，比如：th:alt-title='#{logo}' 對(duì)屬性增加前綴和后綴，用th:attrappend，th:attrprepend,比如：th:attrappend='class=${' ' cssStyle}' 對(duì)于屬性是有些特定值的，比如checked屬性，thymeleaf都采用bool值，比如th:checked=${user.isActive} th:each 循環(huán)，<tr th:each='user,userStat:${users}'>,userStat是狀態(tài)變量，有 index,count,size,current,even,odd,first,last等屬性，如果沒(méi)有顯示設(shè)置狀態(tài)變量， thymeleaf會(huì)默 認(rèn)給個(gè)“變量名 Stat'的狀態(tài)變量。
th:if or th:unless 條件判斷，支持布爾值，數(shù)字（非零為true)，字符，字符串等。
th:switch，th:case 選擇語(yǔ)句。 th:case='*'表示default case。
|
|
|
來(lái)自： Levy_X > 《JAVAWEB學(xué)習(xí)資料》
