當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

一起来学SpringBoot | 第四篇：整合Thymeleaf模板

發(fā)布時(shí)間：2025/3/17 javascript 41 豆豆

生活随笔收集整理的這篇文章主要介紹了一起来学SpringBoot | 第四篇：整合Thymeleaf模板小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

SpringBoot 是為了簡(jiǎn)化 Spring 應(yīng)用的創(chuàng)建、運(yùn)行、調(diào)試、部署等一系列問(wèn)題而誕生的產(chǎn)物，自動(dòng)裝配的特性讓我們可以更好的關(guān)注業(yè)務(wù)本身而不是外部的XML配置，我們只需遵循規(guī)范，引入相關(guān)的依賴(lài)就可以輕易的搭建出一個(gè) WEB 工程

在前面幾章中已經(jīng)介紹了如何創(chuàng)建一個(gè)SpringBoot 項(xiàng)目，同時(shí)簡(jiǎn)單的描述了SpringBoot REST Web服務(wù)。除此之外它也是支持如JSP、Thymeleaf、FreeMarker、Mustache、Velocity 等各種模板引擎，同時(shí)還為開(kāi)發(fā)者提供了自定義模板擴(kuò)展的支持。

使用嵌入式Servlet容器時(shí)，請(qǐng)避免使用JSP，因?yàn)槭褂肑SP打包后會(huì)存在一些限制。

在SpringBoot使用上述模板，默認(rèn)從 **src/main/resources/templates**下加載。

thymeleaf介紹

Thymeleaf是現(xiàn)代化服務(wù)器端的Java模板引擎，不同與其它幾種模板的是Thymeleaf的語(yǔ)法更加接近HTML，并且具有很高的擴(kuò)展性。詳細(xì)資料可以瀏覽官網(wǎng)。

特點(diǎn)

支持無(wú)網(wǎng)絡(luò)環(huán)境下運(yùn)行，由于它支持 html 原型，然后在 html 標(biāo)簽里增加額外的屬性來(lái)達(dá)到模板+數(shù)據(jù)的展示方式。瀏覽器解釋 html 時(shí)會(huì)忽略未定義的標(biāo)簽屬性，所以 thymeleaf 的模板可以靜態(tài)地運(yùn)行；當(dāng)有數(shù)據(jù)返回到頁(yè)面時(shí)，Thymeleaf 標(biāo)簽會(huì)動(dòng)態(tài)地替換掉靜態(tài)內(nèi)容，使頁(yè)面動(dòng)態(tài)顯示。所以它可以讓前端小姐姐在瀏覽器中查看頁(yè)面的靜態(tài)效果，又可以讓程序員小哥哥在服務(wù)端查看帶數(shù)據(jù)的動(dòng)態(tài)頁(yè)面效果。
開(kāi)箱即用，為Spring提供方言，可直接套用模板實(shí)現(xiàn)JSTL、 OGNL表達(dá)式效果，避免每天因套用模板而修改JSTL、 OGNL標(biāo)簽的困擾。同時(shí)開(kāi)發(fā)人員可以擴(kuò)展自定義的方言。
SpringBoot官方推薦模板，提供了可選集成模塊(spring-boot-starter-thymeleaf)，可以快速的實(shí)現(xiàn)表單綁定、屬性編輯器、國(guó)際化等功能。

使用

首先要在 pom.xml 中添加對(duì) thymeleaf 模板依賴(lài)

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> 復(fù)制代碼

然后創(chuàng)建一個(gè) ThymeleafController 用來(lái)映射HTTP請(qǐng)求與頁(yè)面的跳轉(zhuǎn)，下面寫(xiě)了兩種方式，第一種比較直觀和優(yōu)雅，第二種相對(duì)普遍且代碼較少，且迎合從struts2跳坑的朋友們...

Spring4.3以后為簡(jiǎn)化@RequestMapping(method = RequestMethod.XXX)的寫(xiě)法，故而將其做了一層包裝，也就是現(xiàn)在的GetMapping、PostMapping、PutMapping、DeleteMapping、PatchMapping

package com.battcn.controller;import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.servlet.ModelAndView; import javax.servlet.http.HttpServletRequest;/*** @author Levin* @since 2018/4/23 0023*/ @Controller @RequestMapping public class ThymeleafController {@GetMapping("/index")public ModelAndView index() {ModelAndView view = new ModelAndView();// 設(shè)置跳轉(zhuǎn)的視圖默認(rèn)映射到 src/main/resources/templates/{viewName}.htmlview.setViewName("index");// 設(shè)置屬性view.addObject("title", "我的第一個(gè)WEB頁(yè)面");view.addObject("desc", "歡迎進(jìn)入battcn-web 系統(tǒng)");Author author = new Author();author.setAge(22);author.setEmail("1837307557@qq.com");author.setName("唐亞峰");view.addObject("author", author);return view;}@GetMapping("/index1")public String index1(HttpServletRequest request) {// TODO 與上面的寫(xiě)法不同，但是結(jié)果一致。// 設(shè)置屬性request.setAttribute("title", "我的第一個(gè)WEB頁(yè)面");request.setAttribute("desc", "歡迎進(jìn)入battcn-web 系統(tǒng)");Author author = new Author();author.setAge(22);author.setEmail("1837307557@qq.com");author.setName("唐亞峰");request.setAttribute("author", author);// 返回的 index 默認(rèn)映射到 src/main/resources/templates/xxxx.htmlreturn "index";}class Author {private int age;private String name;private String email;// 省略 get set} } 復(fù)制代碼

最后在 src/main/resources/templates 目錄下創(chuàng)建一個(gè)名 index.html 的模板文件，可以看到 thymeleaf 是通過(guò)在標(biāo)簽中添加額外屬性動(dòng)態(tài)綁定數(shù)據(jù)的

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title th:text="${title}">Title</title><script type="text/javascript" th:src="@{/js/hello.js}"></script> </head> <body><h1 th:text="${desc}">Hello World</h1><h2>=====作者信息=====</h2><p th:text="${author?.name}"></p><p th:text="${author?.age}"></p><p th:text="${author?.email}"></p> </body> </html> 復(fù)制代碼

靜態(tài)效果

雙擊打開(kāi) index.html 既可以看到如下的靜態(tài)效果，并未和其它模板一樣顯示一堆標(biāo)簽的內(nèi)容，而是正常渲染靜態(tài)頁(yè)面

動(dòng)態(tài)效果

在瀏覽器輸入：http://localhost:8080/index 可以看到渲染后的效果，真正意義上的動(dòng)靜分離了

小技巧

模板熱部署

在 IntelliJ IDEA 中使用 thymeleaf 模板的時(shí)候，發(fā)現(xiàn)每次修改靜態(tài)頁(yè)面都需要重啟才生效，這點(diǎn)是很不友好的，百度了下發(fā)現(xiàn)原來(lái)是默認(rèn)配置搞的鬼，為了提高響應(yīng)速度，默認(rèn)情況下會(huì)緩存模板。如果是在開(kāi)發(fā)中請(qǐng)將spring.thymeleaf.cache 屬性設(shè)置成 false。在每次修改靜態(tài)內(nèi)容時(shí)**按Ctrl+Shift+F9**即可重新加載了...

修改默認(rèn)favicon.ico 圖標(biāo)

默認(rèn)情況下使用springboot總能看到一片葉子，這是因?yàn)槲覀儧](méi)配置自己的ico導(dǎo)致的，解決方法也很簡(jiǎn)單，只需要在src/main/static/目錄下放置一張名為favicon.ico就可以了

默認(rèn)配置

SpringBoot 默認(rèn)情況下為我們做了如下的默認(rèn)配置工作，熟悉默認(rèn)配置在開(kāi)發(fā)過(guò)程中可以更好的解決問(wèn)題

總結(jié)

Thymeleaf參考手冊(cè)：blog.csdn.net/zrk1000/art…

WEB MVC詳細(xì)的內(nèi)容請(qǐng)參考官方文檔：docs.spring.io/spring/docs…

目前很多大佬都寫(xiě)過(guò)關(guān)于 SpringBoot 的教程了，如有雷同，請(qǐng)多多包涵，本教程基于最新的 spring-boot-starter-parent：2.0.1.RELEASE編寫(xiě)，包括新版本的特性都會(huì)一起介紹...

說(shuō)點(diǎn)什么

個(gè)人QQ：1837307557
battcn開(kāi)源群（適合新手）：391619659
微信公眾號(hào)（歡迎調(diào)戲）：battcn

個(gè)人博客：blog.battcn.com/

全文代碼：github.com/battcn/spri…

轉(zhuǎn)載于:https://juejin.im/post/5b2eeb1a51882574946427e0

總結(jié)

以上是生活随笔為你收集整理的一起来学SpringBoot | 第四篇：整合Thymeleaf模板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： [读书笔记]C#学习笔记二: 委托和事件
下一篇： Spring3 @ResponseBod