thymeleaf在工做中經常使用的屬性及表達式使用詳解（三）

1.1  thymeleaf的基礎知識介紹

     1.1.1  標準表達式介紹

它們分爲四類：

• 1.變量表達式
• 2. 選擇表達式（星號表達式）
• 3. 消息表達式（井號表達式，資源表達式）一般作國際化
• 4.URL表達式

     1.1.2  標準表達式詳解

            1.變量表達式

              變量表達式用於訪問容器上下文環境中的變量，功能和JSTL中的${}相同。好比我要在Controllar中用model.addAttribute向前端傳入一個對象，那麼前端如何接受呢？ 如下是例子。

//向前端寫入一個UL的對象和ID屬性
@RequestMapping("/userPower")
public String userPower(@RequestParam("id") Integer id,Model model){
	UserPower UL = us.selectUserByID(id);
    model.addAttribute("ID","10081");
	model.addAttribute("UL", UL);
	return "userPower";
	}

 前端接收代碼

<input th:text="${ID}" ></input >
<input th:if="${UL.Power} == 1" >管理員</input >

  訪問此頁面，效果以下

JAVA代碼就不解釋了，很簡單。解釋下HTML部分，th:text=" " 和 th:if=" " 是thymeleaf的一個屬性，先不作解釋。其$(ID)，$(UL.Power)中的"UL"是Java代碼中model傳來的Key值，".Power"是UserPower對象中的一個屬性。

            2.星號表達式

              擇表達式（星號表達式）。只要是沒有選擇對象，選擇表達式與變量表達式的語法是徹底同樣的。使用th:object對象屬性來綁定對象。 代碼以下。

//向前端寫入一個UL的參數
@RequestMapping("/userPower")
public String userPower(@RequestParam("id") Integer id,Model model){
	UserPower UL = us.selectUserByID(id);
	model.addAttribute("UL", UL);
	return "userPower";
	}

           前端接收代碼

<div th:object=" ${UL}" >

<p>Name: <span th: text=" *{Name}" >張</span>. </p>

<p>LastName: <span th: text=" *{lastName}" >三</span>. </p>

<p>Address: <span th: text=" *{addr}" >北京</span>. </p>

</div>

          Html解釋：首先使用th:object來邦定後臺傳來的UserPower對象，而後使用*來表明這個對象，後面{}中的值是此對象中的屬性。

           3.消息表達式

                  消息表達式（井號表達式，資源表達式）。一般與th:text屬性一塊兒使用，指明聲明瞭th:text的標籤的文本是#{}中的key所對應的value，而標籤內的文本將不會顯示。就是說咱們能夠從.properties或yml文件中，用Key索引Value.

例子以下：HTML部分

<p th:text="#{home.language}" >This text will not be show! </p>

properties中咱們自定義一個home.language的屬性

home.language=這段文字將會被顯示！！

訪問頁面，效果是英文不會被展現，展現的是屬性文件中的中文。

           4.URL表達式

                    超連接url表達式。

例如：

<script th:src="@{/static/js/jquery-2.4.min.js}"></script>

 表達式簡介到此爲止，以後我會在寫表達式在工做中使用，出現的一些問題，好比URL表達式如何代入參數，字符串的拼接等等。

      1.1.3  thymeleaf屬性的介紹

     再說1.1.1的時候，出現很多如th:src、th:text等字眼，這些就是thymeleaf的屬性，下面附屬性，而後我會把經常使用的進行講解。

• th:action

• th:each

• th:field

• th:href

• th:id

• th:if

• th:include

• th:fragment

• th:object

• th:src

• th:replace

• th:text

• th:value

       一、th:action

        定義後臺控制器的路徑，相似<form>標籤的action屬性。 例子以下。

<form id="login" th:action="@{/login}">......</form>

        二、th:each

        這個屬性很是經常使用，好比從後臺傳來一個對象集合那麼我就可使用此屬性遍歷輸出，和jstl中的<c: forEach>相似，並且這個屬性不只能夠循環集合，還能夠循環數組及Map，例子以下。

<ol>  
            <li>List類型的循環：  
                <table >  
                  <tr>  
                    <th>用戶名</th>  
                    <th>用戶郵箱</th>  
                    <th>超級管理員</th>  
                    <th>狀態變量值：index</th>  
                    <th>狀態變量值：count</th>  
                    <th>狀態變量值：size</th>  
                    <th>狀態變量值：current.userName</th>  
                    <th>狀態變量值：even</th>  
                    <th>狀態變量值：odd</th>  
                    <th>狀態變量值：first</th>  
                    <th>狀態變量值：last</th>  
                  </tr>  
                  <tr  th:each="user,iterStat : ${list}">  
                    <td th:text="${user.userName}">Onions</td>  
                    <td th:text="${user.email}">test@test.com.cn</td>  
                    <td th:text="${user.isAdmin}">yes</td>  
                     <th th:text="${iterStat .index}">index</th>  
                    <th th:text="${iterStat .count}">count</th>  
                    <th th:text="${iterStat .size}">size</th>  
                    <th th:text="${iterStat .current.userName}">current</th>  
                    <th th:text="${iterStat .even}">even</th>  
                    <th th:text="${iterStat .odd}">odd</th>  
                    <th th:text="${iterStat .first}">first</th>  
                    <th th:text="${iterStat .last}">last</th>  
                  </tr>  
                </table>  
            </li>  
            <li>Map類型的循環：  
                <div th:each="mapS:${map}">  
                <div th:text="${mapS}"></div>  
                </div>  
            </li>  
            <li>數組的循環：  
                <div th:each="arrayS:${arrays}">  
                <div th:text="${arrayS}"></div>  
                </div>  
            </li>  
            </ol>

        解釋一下每一個參數的意義，首先th:each="user,iterStat : ${list}"中的 ${list}，是後臺傳來的Key，user 做爲接受參數接收，使用iterStat做爲list下標值 （這個東西我當時很久都不知道是啥），其中user及iterStat本身能夠隨便寫。

例子中的${iterStat .index}、${iterStat .count}是iterStat的屬性，其屬性的含義爲：
    index:當前迭代對象的index（從0開始計算）
    count: 當前迭代對象的index(從1開始計算)
    size:被迭代對象的大小
    current:當前迭代變量
    even/odd:布爾值，當前循環是不是偶數/奇數（從0開始計算）
    first:布爾值，當前循環是不是第一個
    last:布爾值，當前循環是不是最後一個

       三、th:href、th:src、th:id

     定義超連接，相似<a>標籤的href 屬性。value形式爲@{/login}

<a  class="login" th:href="@{/login}"></a>

     用於外部資源引入，相似<script>標籤的src屬性，常與@{}表達式結合使用。

<script th:src="@{/static/js/jquery-2.4.min.js}"></script>

     相似html標籤中的id屬性。

<div class="user" th:id = "(${index})"></div>

        四、th:if

        這個屬性使用也很是頻繁，好比後臺傳來一個key，判斷value的值，1爲男，2爲女。

<span th:if="${Sex} == 1" >
          <input type="redio" name="se"  th:value="男" />
</span>
<span th:if="${Sex} == 2">
          <input type="redio" name="se"  th:value="女"  />
</span>

        五、th:value

           相似html中的value屬性，能對某元素的value屬性進行賦值。

<input type="hidden" id="StartNo" name="StartNo" th:value="${StartNo}">

           六、th:text

            用於文本的顯示

<input type="text" id="RealName" name="ReaName" th:text="${RealName}">

            七、th:attr

            這個屬性我不是很喜歡使用，由於不夠優雅。這個屬性用於給HTML中某元素的某屬性賦值。好比例子5我還能夠寫成以下形式.

<input type="hidden" id="StartNo" name="StartNo" th:attr="value=${StartNo}" >

            到此thymeleaf的基本用法就介紹完了，若是對你有幫助，但願轉載傳播一下。接下來我會介紹關於thymeleaf的最後一部分，是我在工做中使用的一些問題及解決方式。