腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

SpringBoot中的Thymeleaf用法

更新時(shí)間：2017年05月25日 09:18:35 作者：Myths

Thymeleaf是最近SpringBoot推薦支持的模板框架。本文重點(diǎn)給大家介紹SpringBoot中的Thymeleaf用法，需要的的朋友參考下吧

Thymeleaf

Thymeleaf是最近SpringBoot推薦支持的模板框架，官網(wǎng)在thymeleaf.org這里。

我們?yōu)槭裁匆肨hymeleaf來作為模板引擎呢？官網(wǎng)給了我們一個(gè)非常令人信服的解釋：

Thymeleaf is a modern server-side Java template engine for both web and standalone environments.>

基本寫法就像下面這樣:

<table>
 <thead>
 <tr>
  <th th:text="#{msgs.headers.name}">Name</th>
  <th th:text="#{msgs.headers.price}">Price</th>
 </tr>
 </thead>
 <tbody>
 <tr th:each="prod: ${allProducts}">
  <td th:text="${prod.name}">Oranges</td>
  <td th:text="${#numbers.formatDecimal(prod.price, 1, 2)}">0.99</td>
 </tr>
 </tbody>
</table>

沒錯(cuò)，由于這個(gè)模板是以xml的格式以屬性的形式嵌入在html里，因此不僅適合后臺(tái)人員使用，也能直接在沒有后臺(tái)程序的情況下直接由瀏覽器渲染，因?yàn)闉g覽器會(huì)自動(dòng)忽視html未定義的屬性。

這個(gè)屬性還是非常吸引人的，畢竟我們做后臺(tái)最麻煩的就是在亂七八糟的前臺(tái)模板加代碼，加完代碼之后前臺(tái)的也不知道加的代碼對不對，非得先跑一遍才能知道。如果模板文件能夠直接由前端人員編寫那該多好，而且前端人員在編寫的時(shí)候就能知道這個(gè)代碼能不能跑，豈不是非常開心？

參考文檔

Thymeleaf的文檔鏈接在這里，細(xì)節(jié)可以直接去搜索，下面主要列舉下我經(jīng)常遇到的一些問題。

模板定義

由于我們很多的IDE都會(huì)提供很好的提示工作，因此我們有必要告訴IDE我們使用的模板規(guī)范以方便他給我們提供服務(wù)。Thymeleaf的一般規(guī)范是這樣的:

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:th="http://www.thymeleaf.org">
...
</html>

把我們需要編寫的DOM放在這個(gè)html標(biāo)簽里面就好了。
這句話做了什么事呢？其實(shí)就是定義了一個(gè)叫th的名空間，所有Thymeleaf的屬性都是在這個(gè)名空間下面。

靜態(tài)文件的加載

我們知道一個(gè)網(wǎng)頁中加載的靜態(tài)文件通常有一個(gè)十分尷尬的問題，比如對于bootstrap.css，就是如果我們能讓IDE識(shí)別這個(gè)文件，那么我們得用相對路徑來引入這個(gè)文件。這樣我們的IDE才能加載到這個(gè)文件，并且給予我們相應(yīng)的提示。但是如果我們想要在發(fā)布后服務(wù)器能夠加載這個(gè)文件，我們就必須用相對于resources或者static的位置來引入靜態(tài)文件。顯然，一般情況下我們不能兼顧這兩個(gè)問題，只能要么在編寫的時(shí)候用相對自己的路徑，然后在發(fā)布的時(shí)候用相對于項(xiàng)目資源文件夾的路徑，要么就只能放棄IDE的提示，非常尷尬。

而在Thymeleaf中，我們可很好的處理這一點(diǎn)。在引入資源的時(shí)候，我們可以寫類似下面的代碼:

<link rel="stylesheet" type="text/css" media="all" 
   href="../../css/gtvg.css" rel="external nofollow" th:href="@{/css/gtvg.css}" rel="external nofollow" />

當(dāng)我們在沒有后臺(tái)渲染的情況下，瀏覽器會(huì)認(rèn)得href，但是不認(rèn)得th:href，這樣它就會(huì)選擇以相對與本文件的相對路徑去加載靜態(tài)文件。而且我們的IDE也能識(shí)別這樣的加載方式，從而給我們提示。

當(dāng)我們在有后臺(tái)渲染的情況下，后臺(tái)會(huì)把這個(gè)標(biāo)簽渲染為這樣:

<link rel="stylesheet" type="text/css" media="all" href="/css/gtvg.css" rel="external nofollow" />

原來的href標(biāo)簽會(huì)被替換成相對于項(xiàng)目的路徑，因此服務(wù)器就能找到正確的資源，從而正確渲染。

非常的智能而且方便。

這里需要注意到所有的路徑我們是用”@{}”來引用，而不是”${}”，因?yàn)楹笳呤怯脕硪米兞棵?，而前者是引用路徑的，因此我們在這里用的是前者。可是如果我們是把路徑寫在變量里，那么就要用后者來引用了。

常量的渲染以及文字國際化

很多情況下我們并不希望在代碼里硬編碼進(jìn)文字，我們希望把文字提取成統(tǒng)一的代號，這樣方便管理，也方便更改語言。
我們要做的首先是創(chuàng)建一個(gè)語言文件，比如message_chinese.properties:

title=這是標(biāo)題
message1=這是消息2
message2=這是消息2
....

然后我們在application.properties里加上下面這行注冊這個(gè)語言文件:

spring.messages.basename=message_chinese

這樣，我們在模板里就可以通過#{消息名}來獲取這個(gè)消息對應(yīng)的真正的文字:

<title th:text="#{title}"></title>

變量的渲染

對于一個(gè)模板文件來說，最重要的事情莫過與傳遞變量了。

這件事情非常簡單，主要分為兩步，首先是在SpringBoot的Controller里給Model傳進(jìn)參數(shù)：

@Controller
public class IndexController {
 @RequestMapping(path = {"index", "/"}, method = {RequestMethod.GET})
 public String index(Model model) {
 
  model.addAttribute("var1", "value1");
  model.addAttribute("src1", "https://www.baidu.com");
  
  Map<String,Object> map=new HashMap<>();
  map.put("src1","/a.png");
  map.put("src2","/b.png");
  model.addAttribute("src", map);
  return "index";
 }
}

這樣我們就可以在模板里通過th:屬性名="${變量名}"這種方式來傳值，比如:

<span th:text="${var1}"></span>
<a th:href="${src1}" rel="external nofollow" >baidu</a>
<img th:src="${src.src1}" />

定義十分清楚，也很容易類比，支持層次選擇，不再細(xì)說。

循環(huán)語句

當(dāng)我們需要?jiǎng)討B(tài)加載一些帖子的時(shí)候，我們經(jīng)常需要用循環(huán)語句，Thymeleaf中循環(huán)語句也很簡單，主要是依靠th:each這玩意來實(shí)現(xiàn)。

首先我們當(dāng)然是在Controller里創(chuàng)建可供循環(huán)的List對象并傳遞給model:

@Controller
public class IndexController {
 @RequestMapping(path = {"index", "/"}, method = {RequestMethod.GET})
 public String index(Model model) {
 
  List<String> list=new ArrayList<>();
  for(int i=0;i<10;i++){
   list.add(String.valueOf(i));
  }
  model.addAttribute("list", list);
  return "index";
 }
}

然后在需要循環(huán)的地方這樣使用：

<div th:each="value:${list}" th:text="${value}"></div>

就能循環(huán)渲染這個(gè)list里的元素了。

激活語句

所謂的激活語句(自己起得名字)，就是在某些情況下我們想根據(jù)變量的值來選擇到底顯示還是不顯示這個(gè)標(biāo)簽。用法也很見簡單，主要靠th:if跟th:unless:

<div th:if="${judge}" >if clause</div>
<div th:unless="${judge}" >unless clause</div>

通過判斷judge這個(gè)變量是否不為空來控制這個(gè)標(biāo)簽是否顯示。。。if跟unless互為反義詞。。。不解釋了。。。

選擇語句

類似于switch-case語句，非常簡單，見下例：

<div th:switch="${user.role}">
 <p th:case="'admin'">User is an administrator</p>
 <p th:case="#{roles.manager}">User is a manager</p>
</div>

這段代碼順便體現(xiàn)了一個(gè)小細(xì)節(jié)，如果想在th名空間里直接填入字符串，我們必須再用一對引號來引用。。。

代碼分割引用

thymeleaf也提供了類似import的東西，可以將很多代碼塊抽象成模塊，然后在需要的時(shí)候引用，非常方便。具體的說，引用方式有兩種–replace和include。

比如有兩個(gè)文件

<!--footer.html-->
<div th:fragment="copy">footer</div>
<!--index.html-->
<div th:include="footer :: copy">index</div>

通過這樣，我們就可以在index里面引用footer里面的這個(gè)div，我們用的是include，因此渲染的結(jié)果就是這樣:

<div>
 <div th:fragment="copy">footer</div>
</div>

如果是replace，那就是整個(gè)標(biāo)簽的替換，很好理解。

當(dāng)然，除了用fragment來標(biāo)識(shí)引用的部分，我們還可以用id來引用，具體可以參考文檔。

有時(shí)候我們可能希望在引用的時(shí)候傳遞參數(shù)，我們可以在引用時(shí)加上這樣的參數(shù):

<!--index.html-->
<div th:include="footer :: copy" th:with="param=${value}" >index</div>

這樣我們就可以把index頁面的value變量傳遞到footer頁面里。非常簡單。

引用js的坑

有時(shí)候我們想用js變量來保存模板傳遞的參數(shù)，我們可以這樣來引用:

<script th:inline="javascript">
/*<![CDATA[*/
 ...
 var username = /*[[${session.user.name}]]*/ 'Sebastian';
 ...
/*]]>*/
</script>

注意，這是官方推薦的寫法，注意以下幾點(diǎn)。

我們要用inline來指定這個(gè)script標(biāo)簽;

我們需要注釋<![CDATA[,]]>對，否則就會(huì)無法在js中使用比較符號;

我們要用[[${value}]]來引用模板變量;

我們要在變量外面也套上注釋\**\，并在后面添加上默認(rèn)的值，這是為了前端開發(fā)人員能在沒有后臺(tái)的情況下正常渲染。

最后

當(dāng)前我遇到的基本上靠上面的知識(shí)都足以解決了，更多高級用法可以直接讀文檔，到時(shí)候用到再來添加0.0。

以上所述是小編給大家介紹的SpringBoot中的Thymeleaf用法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

SpringBoot中的Thymeleaf用法

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具