基於IDEA的SpringBoot專案建立（三）——thymeleaf

戒菸失敗的老可愛發表於2020-12-08
IdeaSpring Boot

一、thymeleaf模板引擎的使用

在web專案開發中，我們最早接觸、同時也是最熟悉的前端頁面就是JSP了。Jsp作為動態頁面不可缺少的技術，在B/S 架構中長時間佔有不可或缺的地位。然而後期出現了一些JSP技術開發伊始未曾想過的問題。那就是耦合度過高，業務邏輯和頁面展示同時出現在前端頁面在帶來開發便利的同時，也造成了每次有需要改動的地方都會造成前端頁面的修改，這違反了六原則一法則中的大部分規定。

【注】：六原則一法則為軟體設計與開發的重要邏輯，建議大家去學習一下。

現在大多數人使用的jsp技術泛指單純的前端頁面，我們已經不再將Java程式碼解除安裝前端頁面，以避免耦合度過高（前文說過耦合度的問題，自己去學）。Jsp前端引擎大家已經瞭解的差不多了，現在為大家介紹一款SpringBoot框架推薦給大家的另一款前端的模板引擎——thymeleaf。

首先，我們在使用thymeleaf之前依舊要引入thymeleaf的相關依賴，程式碼如下：

<!--引入thymeleaf依賴-->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

曾經有小夥伴問過我，為什麼在引入一些相關依賴的時候 porm.xml 檔案中還是報紅，大家注意每次修改完 porm.xml 檔案後頁面右上角有一個藍色的 M 字母圖示，這代表我們對於Maven相關的程式碼有了更改，IDEA提示我們要對專案進行 Maven Update 操作，點選等待更新完成就好。

現在我們已經引入了 thymeleaf 的依賴，現在來介紹一下相關語法：

新建一個 .html 檔案，在 <html> 頭中加入如下程式碼：

<html lang="en" xmlns:th="http://www.thymeleaf.org">

這表示我們要在當前前端頁面中使用 thymeleaf 的模板引擎。現在我們所有準備工作都已經完成了，接下來介紹這個新的模板引擎如何對資料進行操作。

曾經我們在Jsp模板引擎中想取出變數的值，用到的是 ${key} ,同樣還有設定標籤中的 value 值，這些在 thymeleaf 中都與Jsp沒什麼太大的區別，只是需要在前面加上 th: 。程式碼如下：

<span th:text="${username}"/>
<input th:value="${password}">

同樣的還有判斷操作以及超連結。不過這兩項與曾經的Jsp不太一樣，我們先看程式碼，然後再解釋：

<span th:if="${age} le 20"/>
<a th:href="@{/student/getStudent(sid=21)}">查詢學生</a>

在判斷操作中，le 代表的是小於等於。類似的還有許多運算子，如下所示：

  • lt：less than 小於
  • le：less than or equal to 小於等於
  • eq：equal to 等於
  • ne：not equal to 不等於
  • ge：greater than or equal to 大於等於
  • gt：greater than 大於

我們一般用以上的運算子來對資料進行判斷操作。

在超連結語句中我們發現，除了在 href 前加上了thymeleaf特定的字首，我們還要在路徑前加上 @{} ，這個不做過多解釋，僅僅為特定用法。需要注意的是，我們在路徑中攜帶引數時，需要使用 括號 攜帶，這個要搞清楚。

接下來是比較重要的一個，展示多個資料，也就是經常需要使用到的遍歷，在 thymeleaf 中，我們使用的是如下方式：

<ul th:each="user:${users}">

        <li><span th:text="${user.uid}"></span></li>
        <li><span th:text="${user.uname}"></span></li>
        <li><span th:text="${user.uage}"></span></li>

    </ul>

<!-- 其語法格式為： -->
<th:each="每次遍歷的臨時變數名 : ${遍歷的集合}">
<!--與 foreach 的用法相似，略有不同，需多加註意-->

這就是thymeleaf模板引擎的基本使用了，總體來說與Jsp模板引擎沒有太大的區別，主要是體現在一些語法變更上。當然，想更多瞭解一些thymeleaf的區別，可以參考我的SpringBoot系列部落格的第一節。

相關文章