之前的時候，我爲了演示Linux配置提交項目執行環境，簡單的整理了一下springboot得相關內容，但是在實際的開發過程中，SpringBoot得使用可不僅僅就是這一點點遍歷而已，在SpringBoot中推薦使用thymeleaf模板引擎，簡單點評價這個模板就是語法簡單，功能更強大，雖然這個技術現在已經停止更新，並且在這個前後端分離的時代顯得有點格格不入，但是，在某些實際的生產場景中，還是相當好用的

所以今天我們來看一下這個強大得模板引擎到底有多強大

公衆號：Java架構師聯盟，後期會開放git倉庫地址

添加thymeleaf模板

這裏有兩種創建方式

1.新建springBoot項目

只需要在創建springboot項目的時候，添加thymeleaf即可

2.已經創建得項目中加入thymeleaf模板引擎 要想引入thymeleaf，只需要在pom.xml文件中加入如下依賴就可以了，但是有一個注意點，我在代碼註釋中解釋了

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n34080" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</pre>

項目編寫

在controller中定義跳轉的頁面

代碼架構：

之前的時候我說過，入口類會自動尋找子包或者平行類，所以初學者要注意以下這個點哦

我這是沿用之前的時候寫的代碼，直接創建了一個thymeleaf展示今天的內容

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n34088" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">package com.example.demo.thymeleaf;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

/**

@author ：biws
@date ：Created in 2020/12/18 19:43
@description：在controller中定義跳轉頁面
*/

@Controller
public class HelloController {

@RequestMapping("hello")
@ResponseBody
public String hello() {
return "這是第二種搭建springboot方式";
}

@RequestMapping("testThymeleaf")
public String testThymeleaf(Map map) {

map.put("info", "這是從controller傳到前端界面得數據");
return "index";
}

}</pre>

這是第一個優點：會自動去templates文件夾下去找index.html

4.運行，然後訪問項目

輸入http://localhost:8080/testThymeleaf即可訪問index.html

奧對，忘記把index得代碼添加上來了

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n34097" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>測試thymeleaf模板</title>
</head>
<body>
<p>歡迎來到測試thymeleaf界面</p>

<p th:text="${info}"></p>
</body>
</html></pre>

大家可能已經發現了

我在這個代碼中模擬前端返回數據，直接存儲到map中，因爲在寫一個界面有點費勁，畢竟像我這種懶癌患者，哈哈哈哈

而在index中，獲取數據之後，通過info這個id進行獲取

最後展示的結果就是這樣

而區別於傳統得數據獲取方式，thymeleaf有其自己得標籤語法，那我們來看一下都有哪些標籤語法呢？

thymeleaf標籤語法

常用標籤介紹

下面我整理幾種常用得知識點

幾種常用的使用方法

1、賦值、字符串拼接

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n34120" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><p th:text=" ${collect.description}">description</p> <span th:text="'Welcome to our application, ' +$ {user.name} + '!'"></pre>

字符串拼接還有另外一種簡潔的寫法

2、條件判斷 If/Unless

Thymeleaf中使用th:if和th:unless屬性進行條件判斷，下面的例子中，<a>標籤只有在th:if中條件成立時才顯示：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n34125" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><a th:if=" ${myself=='yes'}" > </i> </a> <a th:unless=$ {session.user != null} th:href="@{/login}" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Login</a></pre>

th:unless與th:if恰好相反，只有表達式中的條件不成立，纔會顯示其內容。

也可以使用 (if) ? (then) : (else) 這種語法來判斷顯示的內容

3、for 循環

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n34129" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><tr th:each="collect,iterStat : ${collects}"> <th scope="row" th:text="$ {collect.id}">1</th>
<td >
<img th:src=" ${collect.webLogo}"/> </td> <td th:text="$ {collect.url}">Mark</td>
<td th:text=" ${collect.title}">Otto</td> <td th:text="$ {collect.description}">@mdo</td>
<td th:text="${terStat.index}">index</td>
</tr></pre>

iterStat稱作狀態變量，屬性有：

index:當前迭代對象的index（從0開始計算）

count: 當前迭代對象的index(從1開始計算)

size:被迭代對象的大小

current:當前迭代變量

even/odd:布爾值，當前循環是否是偶數/奇數（從0開始計算）

first:布爾值，當前循環是否是第一個

last:布爾值，當前循環是否是最後一個

4、URL

URL在Web應用模板中佔據着十分重要的地位，需要特別注意的是Thymeleaf對於URL的處理是通過語法@{…}來處理的。如果需要Thymeleaf對URL進行渲染，那麼務必使用th:href，th:src等屬性，下面是一個例子

5、使用thymeleaf佈局

使用thymeleaf佈局非常的方便

下面是一個常用的後臺頁面佈局，將整個頁面分爲頭部，尾部、菜單欄、隱藏欄，點擊菜單隻改變content區域的頁面

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n34148" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><body class="layout-fixed">
<div th:fragment="navbar" class="wrapper" role="navigation">
<div th:replace="fragments/header :: header">Header</div>
<div th:replace="fragments/left :: left">left</div>
<div th:replace="fragments/sidebar :: sidebar">sidebar</div>
<div layout:fragment="content" id="content" ></div>
<div th:replace="fragments/footer :: footer">footer</div>
</div>
</body></pre>

任何頁面想使用這樣的佈局值只需要替換中間的 content模塊即可

也可以在引用模版的時候傳參

th:fragment="copy"]</pre>

好啦，一些基礎得應用這裏基本全涵蓋了，一定要去好好練習一下啊

光知道SpringBoot，不用thymeleaf就太不對了添加thymeleaf模板項目編寫 thymeleaf標籤語法

添加thymeleaf模板

項目編寫

thymeleaf標籤語法

DAPPER 事務 TRANSACTION

深入講解RxJava響應式編程框架，背壓問題的幾種應對模式背壓什麼是背壓問題背壓問題的幾種應對模式

2021年了居然還不會用springcloud，源碼帶你一步步搭建（小白教程）

Python歡喜冤家：爬蟲與反爬蟲帶着處理方案來給大家拜年了什麼是爬蟲常見的反爬蟲措施文本混淆反爬蟲動態渲染反爬蟲行爲驗證反爬蟲

Python爬蟲系列集合：VIP音樂+小說+彈幕，都在這裏集合了

疫情賦閒在家程序員公開python學習源碼，持續更新

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

光知道SpringBoot，不用thymeleaf就太不對了 添加thymeleaf模板 項目編寫 thymeleaf標籤語法

添加thymeleaf模板

項目編寫

thymeleaf標籤語法

光知道SpringBoot，不用thymeleaf就太不對了添加thymeleaf模板項目編寫 thymeleaf標籤語法