【SpringBoot教程】SpringBoot Thymeleaf 基于HTML5的現代模板引擎

作者簡介:大家好,我是擼代碼的羊駝,前阿里巴巴架構師,現某互聯網公司CTO

聯系v:sulny_ann(17362204968),加我進群,大家一起學習,一起進步,一起對抗互聯網寒冬

# 序言


Thymeleaf 是Java服務端的模板引擎,與傳統的JSP不同,前者可以使用瀏覽器直接打開,因為可以忽略掉拓展屬性,相當于打開原生頁面,給前端人員也帶來一定的便利。如果你已經厭倦了JSP+JSTL的組合,Thymeleaf或許是個不錯的選擇!

# 開始使用

1.引入依賴

SpringBoot默認提供了Thymeleaf的Starter,只需簡單引入依賴即可。

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

目前默認版本是2.1,如果想升級版本到3.0,可以這樣修改。

???????

    <properties>        <thymeleaf.version>3.0.7.RELEASE</thymeleaf.version>        <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>    </properties>
 

為了方便開發,項目案例采用了熱部署工具dev-tools ,這樣我們在修改頁面之后,IDEA會自動加載,從而達到實現熱更新的效果。

???????

     <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-devtools</artifactId>            <scope>runtime</scope>        </dependency>
 

注:由于IDEA默認關閉了熱部署,需要做一些設置才能使其生效。解決方法:首先按住Ctrl+Shift+Alt+/ 然后進入 Registry (或者雙擊Shift搜索Registry...),然后勾選compiler.automake.allow.when.app.running 即可。另外,Build->Compiler 也要勾選上Build Project automatically .

2. 添加相關配置

Thymeleaf默認開啟了頁面緩存,在開發的時候,應該關閉緩存。此外,通常我們還會指定頁面的存放路徑。(默認是classpath:/templates/)

???????

application.yml 配置如下:spring:  thymeleaf:    cache: false #關閉緩存    prefix: classpath:/views/ #添加路徑前綴

3.編寫HTML

編寫Thymeleaf和書寫HTML5頁面沒有什么不同,最大的轉變就是使用拓展屬性(th:xx)去跟服務端進行數據交互,保留原始頁面風格,也是Thymeleaf的推崇的風格。例如下面這個簡單的案例,啟動項目,我們發現頁面跳轉的是簡書的連接,這一點也驗證了Thymeleaf覆蓋原生頁面數據的極佳能力。

???????

頁面代碼:<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head>    <title>Thymeleaf</title></head><body>    <h2>歡迎使用Thymeleaf!!</h2>    <a href="http://www.baidu.com" th:href="${info}">戳我有驚喜</a></body></html>
后端代碼:
@Controllerpublic class UserController {
    @GetMapping("/")    public String index(Model model) {        model.addAttribute("info", "user/list");        return "index";    }
    @GetMapping("/user")    public String hehe(Model model) {        model.addAttribute("user", new User(UUID.randomUUID().toString(), "yizhiwazi", "20170928"));        return "user";    }
    @GetMapping("/user/list")    public String userlist(Model model) {        List<User> userList = new ArrayList<>();        userList.add(new User(UUID.randomUUID().toString(), "yizhiwazi", "20170928"));        userList.add(new User(UUID.randomUUID().toString(), "kumamon", "123456"));        userList.add(new User(UUID.randomUUID().toString(), "admin", "admin"));        model.addAttribute("userList", userList);        return "userList";    }
}
 

現在我們嘗試回填一個表單,展示單個用戶信息。

???????

<!-- 使用th:object 搭配*{} 可以省略對象名  --><form action="/" th:object="${user}" >    <input type="hidden" name="userId" th:value="*{userId}" />    <input type="text" name="username" th:value="*{username}" />    <input type="text" name="password" th:value="*{password}" /></form>
 

接下來,我們進入一個更復雜的案例,例如展示一個用戶列表信息,
不需要編寫新的標簽,就可以完成對批量用戶的遍歷。

???????

<h2>用戶列表</h2><!--說明:th:each="obj,stat:${objects}" 分別代表單個實例,狀態(可省略),待遍歷對象--><div th:each="user:${userList}">    <input type="hidden" name="userId" th:value="${user.userId}"/>    用戶姓名:<input type="text" name="password" th:value="${user.username}"/>    登錄密碼:<input type="text" name="username" th:value="${user.password}"/></div>

好了,Thymeleaf簡單介紹到這里

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

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

相關文章

error:move_base_msgs

CMake Warning at /opt/ros/kinetic/share/catkin/cmake/catkinConfig.cmake:76 (find_package): Could not find a package configuration file provided by “move_base_msgs” with any of the following names: move_base_msgsConfig.cmake move_base_msgs-config.cmake …

鼠標光標不見了怎么辦?速速get這4個方法!

“非常奇怪&#xff0c;我的鼠標光標用著用著就不見了&#xff0c;這是為什么呢&#xff1f;有什么方法可以解決這個問題嗎&#xff1f;” 在電腦使用過程中&#xff0c;有時候會遇到鼠標光標突然消失的情況&#xff0c;這無疑會給我們日常操作帶來很大的不便。那么&#xff0c…

Linux bin包生成

需求背景&#xff1a; 在實際項目時我們很少把源碼用個tar給到客戶&#xff0c;這樣顯得很不專業&#xff0c;且有的時候我們提供補丁&#xff0c;那么這個時候我們提供一個補丁的bin包可以直接安裝運行就顯得很高大上了。 物料準備 準備一臺liunx&#xff0c;虛擬機亦可&am…

自定義插件vue-router簡單實現hashRouter設計思路

步驟 1.掛載 vue.prototype.$router 2.聲明兩個組件 router-view this.$router.current>component > h(component) router-link h(a,{attrs:{href:#this.to}},this.$slots.default) 3.url的監聽&#xff1a;window hashchange的改變 4.定義響應式current&#xff0…

使用Python提取PDF文件中指定頁面的內容

在日常工作和學習中&#xff0c;我們經常需要從PDF文件中提取特定頁面的內容。在本篇文章中&#xff0c;我們將介紹如何使用Python編程語言和兩個強大的庫——pymupdf和wxPython&#xff0c;來實現這個任務。 1. 準備工作 首先&#xff0c;確保你已經安裝了以下兩個Python庫&…

JavaScript深拷貝和淺拷貝

對于原始數據類型&#xff0c;并沒有深淺拷貝的區別&#xff0c;深淺拷貝都是對于引用數據類型而言&#xff0c;如果我們要賦值對象的所有屬性都是引用類型可以用淺拷貝 淺拷貝&#xff1a;只復制一層對象&#xff0c;當對象的屬性是引用類型時&#xff0c;實質復制的是其引用&…

【辦公軟件】Outlook啟動一直顯示“正在啟動”的解決方法

早上打開電腦Outlook2016以后&#xff0c;半個多小時了&#xff0c;一直顯示這個界面&#xff1a; 解決辦法 按WIN R鍵打開“運行”&#xff0c;輸入如下命令&#xff1a; outlook.exe /safe 然后點擊“確定” 這樣就進入了Outlook的安全模式。 點擊“文件”->“選項”-…

第6節:Vue3 調用函數

在Vue3中&#xff0c;你可以使用setup函數來調用函數。 <template><button click"handleClick">點擊我</button> </template><script> import { ref } from vue;export default {setup() {// 創建一個響應式的引用const count ref(0…

nbcio-vue下載安裝后運行報錯,diagram-js沒有安裝

更多nbcio-boot功能請看演示系統 gitee源代碼地址 后端代碼&#xff1a; https://gitee.com/nbacheng/nbcio-boot 前端代碼&#xff1a;https://gitee.com/nbacheng/nbcio-vue.git 在線演示&#xff08;包括H5&#xff09; &#xff1a; http://122.227.135.243:9888 根據…

047:vue加載循環倒計時 示例

第047個 查看專欄目錄: VUE ------ element UI 專欄目標 在vue和element UI聯合技術棧的操控下&#xff0c;本專欄提供行之有效的源代碼示例和信息點介紹&#xff0c;做到靈活運用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安裝、引用&#xff0c;模板使…

基于java web的網上書城系統的設計與實現論文

摘 要 隨著科學技術的飛速發展&#xff0c;各行各業都在努力與現代先進技術接軌&#xff0c;通過科技手段提高自身的優勢&#xff0c;商品交易當然也不能排除在外&#xff0c;隨著商品交易管理的不斷成熟&#xff0c;它徹底改變了過去傳統的經營管理方式&#xff0c;不僅使商品…

32、Bean的生產順序是由什么決定的?

Bean的生產順序是由什么決定的? BeanDefinition的注冊順序是有什么決定的? Bean在生產之前有個臨時狀態:BeanDefinition;存儲著bean的描述信息。由BeanDefinition決定著Bean的生產順序。會按照BeanDefinition的注冊順序來決定Bean的生產順序。因為所有的BeanDefinition存…

Lua字符串(包含任意字符,如中文)任意位置截取

常規的截取只需要lua自帶的api就可以解決問題:如 string.sub 但是當字符串之中含有中文或者符號的時候,這些接口就麻爪了,當然lua后續更新有可能支持,至少本少當前的Lua版本是不支持的。 廢話少說,直接上代碼和測試用例 -- 判斷utf8字符byte長度 function stringTool.ch…

統信UOS_麒麟KYLINOS上跨架構下載離線軟件包

原文鏈接&#xff1a;統信UOS/麒麟KYLINOS上跨架構下載離線軟件包 hello&#xff0c;大家好啊&#xff0c;今天給大家帶來一篇在統信UOS/麒麟KYLINOS上跨架構下載離線軟件包的實用教程。在我們的日常工作中&#xff0c;可能會遇到這樣的情況&#xff1a;需要為不同架構的設備下…

【總結】機器學習中的15種分類算法

目錄 一、機器學習中的分類算法 1.1 基礎分類算法 1.2 集成分類算法 1.3 其它分類算法&#xff1a; 二、各種機器學習分類算法的優缺點 分類算法也稱為模式識別&#xff0c;是一種機器學習算法&#xff0c;其主要目的是從數據中發現規律并將數據分成不同的類別。分類算法通…

鴻蒙OS應用開發之數據類型

前面學習了一個簡單的例子,這是多年來學習應用程序開發的經典路徑,在這里也是這種待遇,通過這樣的學習明白了一個簡單應用是怎么樣構成的,知道它是怎么運行輸出的。在這個基礎之上,你還是不會開發應用程序的,因為你還沒有學習鴻蒙應用的開發語言基礎,所以在這里要學習一…

nvue頁面用法uniapp

1.介紹 Nvue是一個基于weex改進的原生渲染引擎&#xff0c;它在某些方面要比vue更高性能&#xff0c;在app上使用更加流暢&#xff0c;但是缺點也很明顯&#xff0c;沒有足夠的api能力&#xff0c;語法限制太大&#xff0c;所以nvue適用于特定場景&#xff08;需要高性能的區域…

排序算法——桶排序/基數排序/計數排序

桶排序 是計數排序的升級版。它利用了函數的映射關系&#xff0c;高效與否的關鍵就在于這個映射函數的確定。桶排序 (Bucket sort)的工作的原理&#xff1a; 假設輸入數據服從均勻分布&#xff0c;將數據分到有限數量的桶里&#xff0c;每個桶再分別排序&#xff08;有可能再使…

pve(proxmox)宿主機奔潰無法進入系統,lxc容器和虛擬機遷移,無備份,硬盤未損壞,記錄數據找回過程及思考

pve的主機突然CPU滿載,然后遠程斷電后pve就無法啟動了,之前一直上面的虛擬機和容器也沒有備份,折騰了兩天總算找回來了記錄一下處理過程和思路,方便后續查找。 一、隱患分析 1.周四突然手欠,由于之前家里的pve主機老給我發郵件,提示我硬盤有問題,但可以正常使用,我從…

【使用apache snakeyaml 管理yml文件】

使用apache snakeyaml 管理yml文件 1. 一個Yaml工廠2.Yaml工具類3. 測試類4. 完成 &#xff01; OK 1. 一個Yaml工廠 public class YamlFactory {public static YamlUtil get(){return new YamlUtil();} }2.Yaml工具類 Slf4j public class YamlUtil {private Yaml yaml;publi…