從零開始的Spring Boot學習【十五】【模板Thymeleaf(三)】

我們先來看看它的標準表達式語法,以便於讓我們準確的使用Thymeleaf,我們先來看一個比較常用的。

我們點擊打開PDF文檔的第四章(不知道是啥文檔的童鞋,看我上一章)。

${...}

可以看到有很多表達式方法,我們先不管其他的,用一個使用次數比較多的:變量表達式,這個是類似於EL表達式。

我們在項目的templates文件夾中新建一個html文件,取名字爲test。然後把一個簡單的Thymeleaf模板複製過來。

想要手寫的童鞋,別忘記添加xmlns:th=“http://www.thymeleaf.org”這個命名空間(XML Namespaces)

我們需要注意,在以前傳統的web項目中:靜態資源修改後  是不需要重啓服務器的;但是在Spring Boot項目中,修改後靜態項目是需要重啓服務器的。

在Controller中,我們寫一個方法,映射到uri:/thymelaef_test中,我們知道在以前學習的SSM框架中,我們使用SpringMVC,在方法中寫上一個Model或者一個Map<String, Object>,SpringMVC會自動把這些數據打包放入到request域中,這個方法是已經封裝了的,我們不需要自己操作放入request域中。

我們只需要往Model或者Map<String, Object>中放數據就可以了。return "test",這個實際上是返回一個頁面的uri,把Model或者Map<String, Object>的數據都帶到了test.html頁面上。我們不需要添加後綴,因爲Spring Boot默認後綴爲.html,當然我們可以進行設置,這個在後面會有講到。

雖然Spring Boot默認不支持JSP,但是我們可以更改成支持。不過是要做一些小的變動,這些在後面也會講。這樣也許會方便SSM整合成Spring Boot?

可能大家已經忘記了,在application.properties中,我設置了項目的路徑,這裏給大家看一下,然後,現在我們來運行一下項目。

部署成功後,我們運行以上URL,然後會發現我們Map集合封裝的信息,給取了出來,我們的初步使用Thymeleaf已經成功了。

小總結一下:

<p th:text="${welcome}">welcome to thymeleaf....</p>

先從reuqest中取出welcome中取值,如果有則直接顯示;如果沒有,則顯示welcome to thymeleaf....

th就是替換原有html的值:th:html屬性名=值

 

<p id="pid" class="pclass"  th:id="${welcome}" th:class="${welcome}">welcome to thymeleaf....</p>

同樣的道理,id和class也是會隨之改變覆蓋,感興趣的童鞋,複製代碼自己進行一波嘗試。

 

那麼除了th:html屬性名外,我們還能書寫些啥呢?

我們看一下官方文檔的第十章,這是介紹屬性的一欄,在右邊我們能看到有很多Attributes,名字取得都非常好理解,比如insert插入,repalce代替……等等。

在這裏我們講一下text,和utext:

假設標籤裏面嵌套了一個<h1>hello</h1>

th:text	  獲取文本值	    顯示將hello渲染爲h1後的效果
th:utext  獲取文本值(不轉義)  顯示<h1>hello</h1>

我們之前講過單個的輸出,那麼怎麼多個輸出呢?在實際的項目中,我們很多時候都是用到批量輸出,就像java代碼中的for循環一樣。我們看到官方文檔的第六章Iteration,迭代遍歷。我們往下翻閱,在下方有一個簡單的模板。

我們複製一下,放到我們的test.html中。去掉一些我們不需要用到的代碼,只保留迭代的部分。

th:each就相當於for,prod:${prods} 就相當於從request中拿到的prods數組,Object或者一個List等等,從中取出每一個元素,然後輸出每一個元素中的屬性名中存在的值。

我們現在來編寫一下後端的代碼。

首先創建一個entity實體類,然後在Controller中用list裝一些Product的實體對象,放入Map中,傳到前端。

我們運行看一下結果。

結果正確,好的,簡單的Thymeleaf用法就先介紹到這裏咯。大家可以通過查看官方文檔和自己的親身實踐過程中,加深對Thymeleaf的理解。

 

關注博主,更多精彩哦!

 

上一章:從零開始的Spring Boot學習【十四】【模板Thymeleaf(二)】

下一章:【努力編寫中...】

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章