Java之SpringBoot-Thymeleaf詳情

更新時(shí)間：2021年09月24日 09:36:05 作者：CoLoo

聊Thymeleaf，需要知道為什么到了SpringBoot中就不用JSP了？這跟SpringBoot打包方式有點(diǎn)關(guān)系，SpringBoot項(xiàng)目打包是jar包，下面文章小編就對此做一個(gè)詳細(xì)介紹,需要的朋友可以參考一下

war包代表JavaWeb應(yīng)用程序，jar包是類的歸檔文件。war包不僅僅可以包含類的歸檔文件，它還可以包含 Servlet、HTML頁面、Java類、圖像文件，以及組成Web應(yīng)用程序的其他資源。

JAR（Java Archive，Java 歸檔文件）是與平臺(tái)無關(guān)的文件格式，它允許將許多文件組合成一個(gè)壓縮文件。JAR 文件格式以流行的 ZIP 文件格式為基礎(chǔ),所以可以直接將jar包后綴改成zip再進(jìn)行解壓即可得到壓縮前的文件。與 ZIP 文件不同的是，JAR 文件不僅用于壓縮和發(fā)布，而且還用于部署和封裝庫、組件和插件程序，并可被像編譯器和 JVM 這樣的工具直接使用。包括我們常用的工具以及SpringBoot項(xiàng)目都是jar包。

war是一個(gè)可以直接運(yùn)行的web模塊，通常用于網(wǎng)站，打成包部署到容器中。比如我們之前SSM寫的web程序可以直接將war包部署到tomcat的webapps目錄下，啟動(dòng)tomcat后會(huì)自動(dòng)解壓war包，就相當(dāng)于發(fā)布了這個(gè)web應(yīng)用程序。

1、About Thymeleaf

Thymeleaf是SpringBoot中的一個(gè)模版引擎，個(gè)人認(rèn)為有點(diǎn)類似于Python中的Jinja2，負(fù)責(zé)渲染前端頁面。

之前寫JavaWeb和SSM的時(shí)候，前端頁面可能會(huì)用JSP寫，但是因?yàn)橹绊?xiàng)目都是war包部署，而SpringBoot都是jar包且內(nèi)嵌tomcat，所以是不支持解析jsp文件的。但是如果是編寫純靜態(tài)的html就很不方便，那么這時(shí)候就需要一個(gè)模版引擎類似于Jinja2可以通過表達(dá)式幫我們把動(dòng)態(tài)的變量渲染到前端頁面，我們只需要寫一個(gè)template即可。這也就是到了SpringBoot為什么官方推薦要使用Thymeleaf處理前端頁面了。

2、Hello Thymeleaf

簡單來個(gè)demo看一下Thymeleaf效果

Pom.xml中引入依賴

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

Resources/templates/index.html

<!doctype html>

<!--注意：引入thymeleaf的名稱空間-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div th:text="${msg}"></div>
</body>
</html>

Controller

這里return "index";Thymeleaf會(huì)在templats目錄下尋找index.html

@Controller
public class IndexController {

    @RequestMapping("/index")
  public String test1(Model model){
      //存入數(shù)據(jù)
      model.addAttribute("msg","Hello,Thymeleaf");
       //classpath:/templates/index.html
      return "index";
 }
}

也可以參考Thymeleaf的自動(dòng)配置類。

這里的注解需要使用@Controller，不能使用@RestController注解

如果只是使用@RestController注解Controller，則Controller中的方法無法返回jsp頁面，或者h(yuǎn)tml，配置的視圖解析器 InternalResourceViewResolver不起作用，返回的內(nèi)容就是Return 里的內(nèi)容

如果需要返回到指定頁面，則需要用 @Controller配合視圖解析器InternalResourceViewResolver才行。如果需要返回JSON，XML或自定義mediaType內(nèi)容到頁面，則需要在對應(yīng)的方法上加上@ResponseBody注解。

關(guān)于@Controller和@RestController

@RestController注解是@Controller和@ResponseBody的合集,表示這是個(gè)控制器 bean,并且是將函數(shù)的返回值直接填入 HTTP 響應(yīng)體中,是 REST 風(fēng)格的控制器。

單獨(dú)使用 @Controller 不加 @ResponseBody的話一般使用在要返回一個(gè)視圖的情況，這種情況屬于比較傳統(tǒng)的 Spring MVC 的應(yīng)用，對應(yīng)于前后端不分離的情況。@Controller +@ResponseBody 返回 JSON 或 XML 形式數(shù)據(jù)

3、Thymeleaf 表達(dá)式

3.1配置文件聲明

spring:
  thymeleaf:
    cache: false # 緩存關(guān)閉，不然我們改變頁面之后可能不能及時(shí)看到更改的內(nèi)容，默認(rèn)是true。
    prefix: classpath:/templates/ #默認(rèn)掃描的目錄去尋找我們r(jià)eturn時(shí)寫的文件名，即模版文件所在位置
    encoding: UTF-8 #編碼
    suffix: .html #后綴
    mode: HTML

3.2 常用表達(dá)式

3.2.1 0x01 ${} 變量表達(dá)式

從web作用域里面取到對應(yīng)的值，作用域包括 request、session、application。

主要需要注意在template中利用獲取 request、session、application 的代碼是不一樣的

requset: ${ago.id}
Session: ${session.agiao.id}
ServletContext: ${application.abc.id}

也可以通過如下形式獲取

<span th:text="${#request.getRequestURL()}"></span><br/>
<span th:text="${#session.getMaxInactiveInterval()}"></span><br/>
<span th:text="${#servletContext.getServerInfo()}"></span>

示例代碼：

Controller

@GetMapping("/varExpression")
public String varExpression(HttpServletRequest request, HttpSession session) {

    User ago = new User(1, "Ago", "123");
    request.setAttribute("ago", ago);
    User agiao = new User(2, "Agiao", "123");
    session.setAttribute("agiao", agiao);
    User abc = new User(3, "Abc", "123");
    ServletContext servletContext = request.getServletContext();
    servletContext.setAttribute("abc", abc);

    return "varExpression";
}

templates/varExpression.html

這里及時(shí)html中獲取request部分有報(bào)錯(cuò)也無所謂，不影響正常前端頁面顯示

<!doctype html>

<!--注意：引入thymeleaf的名稱空間-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
request： <br/>
<div>
    編號(hào)： <label th:text="${ago.id}"></label><br/>
    用戶名：<label th:text="${ago.name}"></label> <br/>
    密碼：<label th:text="${ago.pwd}"></label><br/>
</div>

session：<br/>
<div>
    編號(hào)： <label th:text="${session.agiao.id}"></label><br/>
    用戶名：<label th:text="${session.agiao.name}"></label> <br/>
    密碼：<label th:text="${session.agiao.pwd}"></label><br/>
</div>

application：<br/>
<div>
    編號(hào)：<label th:text="${application.abc.id}"></label><br/>
    用戶名：<label th:text="${application.abc.name}"></label><br/>
    密碼：<label th:text="${application.abc.pwd}"></label><br/>
</div>

</body>
</html>

3.2.2 0x02 *{} 選擇變量表達(dá)式#

比較適合偷懶，直接在獲取屬性值之前先把存儲(chǔ)于scope中的整個(gè)對象提出來，通過*{}獲取該對象的屬性值

request： <br/>
<div>
    編號(hào)： <label th:text="${ago.id}"></label><br/>
    用戶名：<label th:text="${ago.name}"></label> <br/>
    密碼：<label th:text="${ago.pwd}"></label><br/>
</div>

session：<br/>
<div>
    編號(hào)： <label th:text="${session.agiao.id}"></label><br/>
    用戶名：<label th:text="${session.agiao.name}"></label> <br/>
    密碼：<label th:text="${session.agiao.pwd}"></label><br/>
</div>

等價(jià)于

 request： <br/>
<div th:object="${ago}">
    編號(hào)： <label th:text="*{id}"></label><br/>
    用戶名：<label th:text="*{name}"></label> <br/>
    密碼：<label th:text="*{pwd}"></label><br/>
</div>

session：<br/>
<div th:object="${session.agiao}">
    編號(hào)： <label th:text="*{id}"></label><br/>
    用戶名：<label th:text="*{name}"></label> <br/>
    密碼：<label th:text="*{pwd}"></label><br/>
</div>

3.2.3 0x03 #{} 消息表達(dá)式

對于國際化的支持說明

配置文件聲明

## 配置國際化支持
spring.messages.basename=message

消息表達(dá)式

<span th:text="#{home.welcome}"></span><br />

3.2.4 0x04 @{} 鏈接表達(dá)式

指定跳轉(zhuǎn)的鏈接

<a th:href="@{/home}" rel="external nofollow" >url</a>

3.2.5 0x05 空值處理

如果為空則輸出null，有id值就輸出id值

可以在調(diào)用對象或者方法的點(diǎn)（.）前面，使用問號(hào)（?）來判斷是否為null

<span th:text="${session?.user?.id}"></span>

4、標(biāo)簽與屬性

常用的屬性大致有

th:text 文本顯示
th:object 一般和*{}一起用
th:if / th:unless 相當(dāng)于if/else
th:each 遍歷循環(huán)元素
th:value 屬性賦值

所有的HTML5標(biāo)簽的所有屬性都有一個(gè)自定義的Thymeleaf屬性對應(yīng)。

Thymeleaf屬性只有當(dāng)Thymeleaf模板引擎啟動(dòng)的情況下，才會(huì)生效，即取代對應(yīng)的HTML5屬性，相反，Thymeleaf屬性僅僅只是一個(gè)無用的自定義屬性，因?yàn)闉g覽器內(nèi)核不認(rèn)識(shí)，因此使用Thymeleaf模板引擎可以使得前端代碼和后端代碼分離，當(dāng)出現(xiàn)顯示問題時(shí)，可以立即定位問題所在（是前端頁面還是后臺(tái)返回?cái)?shù)據(jù)有錯(cuò)），這也是Thymeleaf相對于JSP的一個(gè)優(yōu)勢。