Thymeleaf快速入門及其注意事項

😀前言
本篇博文是關于Thymeleaf的基本介紹,希望你能夠喜歡😊

🏠個人主頁:晨犀主頁
🧑個人簡介:大家好,我是晨犀,希望我的文章可以幫助到大家,您的滿意是我的動力😉😉
💕歡迎大家:這里是CSDN,我總結知識的地方,歡迎來到我的博客,感謝大家的觀看🥰
如果文章有什么需要改進的地方還請大佬不吝賜教 先在次感謝啦😊

文章目錄

  • Thymeleaf
    • 官方文檔
    • 基本介紹
      • ● Thymeleaf 是什么
      • ● Thymeleaf 的優點
      • ● Thymeleaf 的缺點
    • Thymeleaf 機制說明
    • Thymeleaf 語法
      • 表達式
        • 表達式一覽
        • 字面量
        • 文本操作
      • 運算符
        • 數學運算
        • 布爾運算
        • 比較運算
        • 條件運算
      • th 屬性
      • 迭代
      • 條件運算
    • 注意事項

Thymeleaf

官方文檔

在線文檔: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
離線文檔: usingthymeleaf.pdf
在這里插入圖片描述

基本介紹

● Thymeleaf 是什么

  1. Thymeleaf 是一個跟Velocity、FreeMarker 類似的模板引擎,可完全替代JSP。
  2. Thymeleaf 是一個java 類庫,他是一個xml/xhtml/html5 的模板引擎,可以作為mvc 的web 應用的view 層。

● Thymeleaf 的優點

  1. 實現JSTL、OGNL 表達式效果, 語法相似, java 程序員上手快。
  2. Thymeleaf 模版頁面無需服務器渲染,也可以被瀏覽器運行,頁面簡潔。
  3. SpringBoot 支持FreeMarker、Thymeleaf、veocity 。

● Thymeleaf 的缺點

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

  2. Thymeleaf 是一個現代的服務器端 Java 模板引擎,適用于 Web 和獨立環境。

  3. 缺點: 并不是一個高性能的引擎,適用于單體應用。

  4. 說明:如果要做一個高并發的應用, 選擇前后端分離更好,但是作為SpringBoot 推薦的模板引擎,還是要講解Thymeleaf 使用, 這樣小伙伴在工作中使用到, 也能搞定。

Thymeleaf 機制說明

  1. Thymeleaf 是服務器渲染技術, 頁面數據是在服務端進行渲染的。
  2. 比如: manage.html 中一段thymeleaf 代碼, 是在用戶請求該頁面時,有thymeleaf 模板引擎完成處理的(在服務端完成), 并將結果頁面返回。

image-20230813175505270

  1. 因此使用了Thymeleaf , 并不是前后端分離.

Thymeleaf 語法

表達式

表達式一覽

image-20230813175650288

字面量

文本值: ‘hhh’ , ‘hello’ ,…數字: 10 , 7 , 36.8 , …布爾值: true , false
空值: null
變量: name,age,… 變量不能有空格

文本操作

字符串拼接: +
變量替換: |age= ${age}|

運算符

數學運算

運算符: + , - , * , / , %

布爾運算

運算符: and , or
一元運算: ! , not

比較運算

比較: > , < , >= , <= ( gt , lt , ge , le )等式: == , != ( eq , ne )

條件運算

If-then: (if) ? (then)
If-then-else: (if) ? (then) : (else)
Default: (value) ?: (defaultvalue)

th 屬性

html 有的屬性,Thymeleaf 基本都有,而常用的屬性大概有七八個。其中th 屬性執行的優先級從1~8,數字越低優先級越高

● th:text :設置當前元素的文本內容,相同功能的還有th:utext,兩者的區別在于前者不會轉義html 標簽,后者會。優先級不高:order=7
● th:value:設置當前元素的value 值,類似修改指定屬性的還有th:src,th:href。優先級不高:order=6
● th:each:遍歷循環元素,和th:text 或th:value 一起使用。注意該屬性修飾的標簽位置,詳細往后看。優先級很高:order=2
● th:if:條件判斷,類似的還有th:unless,th:switch,th:case。優先級較高:order=3
● th:insert:代碼塊引入,類似的還有th:replace,th:include,三者的區別較大,若使用不恰當會破壞html 結構,常用于公共代碼塊提取的場景。優先級最高:order=1
● th:fragment:定義代碼塊,方便被th:insert 引用。優先級最低:order=8
● th:object:聲明變量,一般和*{}一起配合使用,達到偷懶的效果。優先級一般:order=4
● th:attr:修改任意屬性,實際開發中用的較少,因為有豐富的其他th 屬性幫忙,類似的還有th:attrappend,th:attrprepend。優先級一般:order=5

迭代

image-20230813201227472

 <tr th:each="prod : ${prods}"><td th:text="${prod.name}">Onions</td><td th:text="${prod.price}">2.41</td><td th:text="${prod.inStock}? #{true} : #{false}">yes</td></tr>
<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'"><td th:text="${prod.name}">Onions</td><td th:text="${prod.price}">2.41</td><td th:text="${prod.inStock}? #{true} : #{false}">yes</td></tr>

條件運算

<a href="comments.html"
th:href="@{/product/comments(prodId=${prod.id})}"
th:if="${not #lists.isEmpty(prod.comments)}">view</a>
<div th:switch="${user.role}"><p th:case="'admin'">User is an administrator</p><p th:case="#{roles.manager}">User is a manager</p><p th:case="*">User is some other thing</p>
</div>

注意事項

1、若要使用Thymeleaf 語法,首先要聲明名稱空間: xmlns:th=“http://www.thymeleaf.org”

2、設置文本內容th:text,設置input 的值th:value,循環輸出th:each,條件判斷th:if,插入代碼塊th:insert,定義代碼塊th:fragment,聲明變量th:object
3、th:each 的用法需要格外注意,打個比方:如果你要循環一個div 中的p 標簽,則th:each屬性必須放在p 標簽上。若你將th:each 屬性放在div 上,則循環的是將整個div。
4、變量表達式中提供了很多的內置方法,該內置方法是用#開頭,請不要與#{}消息表達式弄混。

😁熱門專欄推薦
SpringBoot篇
Spring Initailizr–快速入門–SpringBoot的選擇
帶你了解SpringBoot支持的復雜參數–自定義對象參數-自動封裝
Rest 優雅的url請求處理風格及注意事項

文章到這里就結束了,如果有什么疑問的地方請指出,諸大佬們一起來評論區一起討論😁
希望能和諸大佬們一起努力,今后我們一起觀看感謝您的閱讀🍻
如果幫助到您不妨3連支持一下,創造不易您們的支持是我的動力🤞

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/38795.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/38795.shtml
英文地址,請注明出處:http://en.pswp.cn/news/38795.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Dev-C++

文章目錄 介紹使用教程常用快捷鍵文件部分格式部分行操作跳轉部分顯示部分運行部分調試部分 調試流程 擴展增加編譯選項開啟優化顯示最多警告信息生成調試信息 編譯小 trick開大棧定義宏代碼格式化 美化字體主題 介紹 Dev-C 是一套用于開發 C/C 程序的自由的集成開發環境&…

面向云思考安全

Gartner最近的一項研究表明&#xff0c;到 2025 年&#xff0c;85% 的企業會采用云戰略&#xff0c;雖然這一數字是面向全球的&#xff0c;但可以看到在中國的環境中&#xff0c;基于云所帶來的優勢&#xff0c;越來越多的企業也同樣開始積極向云轉型。 但同時&#xff0c;有報…

BBS項目day02、注冊、登錄(登錄之隨機驗證碼)、修改密碼、退出登錄、密碼加密加鹽

一、注冊 1.注冊之前端頁面 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>注冊頁面</title><!--動態引入文件-->{% load static %}<script src"{% static js/jquery.min.js %…

【springmvc系】利用RequestBodyAdviceAdapter做接口鑒權

需求 有個簡單的需求&#xff0c;對于第三方接口我們需要做個簡單的鑒權機制&#xff0c;這邊使用的是非對稱性加密的機制。我們提供三方公鑰&#xff0c;他們通過公鑰對接口json報文使用加密后的報文請求&#xff0c;我們通過對接收過來的請求某一個加密報文字段來進行RSA解密…

婚戀交友h5多端小程序開源版開發

婚戀交友h5多端小程序開源版開發 以下是婚戀交友H5多端小程序的功能列表&#xff1a; 用戶注冊和登錄&#xff1a;用戶可以通過手機號碼或第三方賬號注冊和登錄。個人信息填寫&#xff1a;用戶可以填寫個人基本信息&#xff0c;包括姓名、性別、年齡、身高、體重、學歷、職業等…

Java課題筆記~ 數據提交的方式

前四種數據注入的方式&#xff0c;會自動進行類型轉換。但無法自動轉換日期類型。 &#xff08;1&#xff09;單個數據&#xff08;基本數據類型&#xff09;注入 在方法中聲明一個和表單提交的參數名稱相同的參數&#xff0c;由框架按照名稱直接注入。 &#xff08;2&#x…

微信小程序nfc指令異常記錄

小程序nfc相關代碼: readEvent(){wx.getNFCAdapter().startDiscovery({success:(res)>{console.log(--------------start--------)console.log(res);wx.getNFCAdapter().onDiscovered(callback>{console.log(------------onDiscovered----------)console.log(callback)…

問題:【IntelliJ IDEA】解決idea自動聲明變量加finall修飾符問題

問題:【IntelliJ IDEA】解決idea自動聲明變量加finall修飾符問題 場景復現 1 new String() 2 快捷方式生成變量 final修飾的 final String s new String();步驟一&#xff1a;確保settings配置信息 settings-----》Editor------》Code Style--------》java下的這兩個選項不…

echarts 柱狀圖-折線圖-餅圖的基礎使用

上圖示例圖表展示相關配置&#xff1a; var myChart echarts.init(this.$refs.firstMain);myChart.setOption({legend: { // 圖例設置top: "15%",type: "scroll",orient: "vertical",//圖例列表的布局朝向。left: "right",pageIconCo…

安全加密框架圖——Oracle安全開發者

Oracle安全開發者 ACLs 設計 ACLs&#xff08;訪問控制列表&#xff09;時&#xff0c;可以根據以下思路進行設計&#xff1a; 所有者文件權限&#xff1a;確定文件的所有者能夠對文件執行哪些操作&#xff0c;如讀取、寫入、執行等。這可以根據文件的性質和擁有者的職責來決…

k8s集群部署vmalert和prometheusalert實現釘釘告警

先決條件 安裝以下軟件包&#xff1a;git, kubectl, helm, helm-docs&#xff0c;請參閱本教程。 1、安裝 helm wget https://xxx-xx.oss-cn-xxx.aliyuncs.com/helm-v3.8.1-linux-amd64.tar.gz tar xvzf helm-v3.8.1-linux-amd64.tar.gz mv linux-amd64/helm /usr/local/bin…

12 注冊登錄

12 注冊登錄 整體概述 使用數據庫連接池實現服務器訪問數據庫的功能&#xff0c;使用POST請求完成注冊和登錄的校驗工作。 本文內容 介紹同步實現注冊登錄功能&#xff0c;具體涉及到流程圖、載入數據庫表、提取用戶名和密碼、注冊登錄流程與頁面跳轉的代碼實現。 流程圖&a…

六、Linux系統下,文件操作命令都有哪些?

總括&#xff1a; 創建文件/文件夾&#xff1a;touch&#xff1b; 查看&#xff1a;cat/more&#xff1b; 復制&#xff1a;copy&#xff1b; 移動文件/文件夾&#xff1a;mv&#xff1b; 刪除&#xff1a;rm&#xff1b; 1、創建文件 &#xff08;1&#xff09;語法&#x…

docker私有倉庫

# 有個遠程倉庫 &#xff0c;docker官方提供的 ---》我們可以把我們的鏡像傳上去 # 公司做的鏡像&#xff0c;一般不放在遠程倉庫&#xff0c;公司會自己搭建私有倉庫&#xff08;把公司制作的鏡像傳到私有倉庫&#xff09; 1.鏡像傳到官方倉庫 # 第0步&#xff1a;在遠端創建…

阿里云與中國中醫科學院合作,推動中醫藥行業數字化和智能化發展

據相關媒體消息&#xff0c;阿里云與中國中醫科學院的合作旨在推動中醫藥行業的數字化和智能化發展。隨著互聯網的進步和相關政策的支持&#xff0c;中醫藥產業受到了國家的高度關注。這次合作將以“互聯網 中醫藥”為載體&#xff0c;致力于推進中醫藥文化的傳承和創新發展。…

AIGC繪畫:基于Stable Diffusion進行AI繪圖

文章目錄 AIGC深度學習模型繪畫系統stable diffusion簡介stable diffusion應用現狀在線網站云端部署本地部署Stable Diffusion AIGC深度學習模型繪畫系統 stable diffusion簡介 Stable Diffusion是2022年發布的深度學習文本到圖像生成模型&#xff0c;它主要用于根據文本的描述…

UG NX二次開發(C++)-UI Styler中選擇組件或者實體后設置為工作組件

提示:文章寫完后,目錄可以自動生成,如何生成可參考右邊的幫助文檔 文章目錄 1、前言2、在NX2007中創建一個裝配體實例2.1 裝配體模型2.2 欲實現的功能3、創建對話框文件4、在VS2022中創建一個工程項目4.1 創建項目4.1 在hpp中添加頭文件4.2 在cpp中添加代碼4.3 生成dll5、測…

通俗講解-動量梯度下降法原理與代碼實例

本站原創文章&#xff0c;轉載請說明來自《老餅講解-BP神經網絡》bp.bbbdata.com 目錄 一.動量梯度下降法介紹 1.1 動量梯度下降法簡介與思想 1.2 動量梯度下降法的算法流程 二.動量梯度下降法代碼實例 2.1 動量梯度下降法實例代碼 一.動量梯度下降法介紹…

2023年上半年數學建模競賽題目匯總與難度分析

2023年上半年數學建模競賽題目匯總與難度分析 ?由于近年來國賽ABC題出題方式漂浮不定&#xff0c;沒有太大的定性&#xff0c;目前總體的命題方向為&#xff0c;由之前的單一模型問題變為數據分析評價優化或者預測類題目是B、C題的主要命題方向。為了更好地把握今年命題的主方…

vue3-vuex

一、概念 &#xff08;1&#xff09;Vuex 是一個狀態和數據管理的框架&#xff0c;負責管理項目中多個組件和多個頁面共享的數據。 &#xff08;2&#xff09;在開發項目的時候&#xff0c;我們就會把數據分成兩個部分&#xff0c;一種數據是在某個組件內部使用&#xff0c;我…