spring boot用ModelAndView向Thymeleaf模板傳參數

  • 2021 年 2 月 21 日
  • 筆記

    最近在調試一個Spring Boot向Thymeleaf模板傳參數的例子，但踩了很多坑，這裡就把詳細過程記錄下來，以供大家參考。

    先說下，這裡遇到哪些坑呢？

    1 我用的是IDEA社區版，這不支援JSP，我本來向傳到JSP的，由於不支援，所以只能傳到HTML。

    2 HMML里，必須要引入Thymeleaf模板，否則無法從ModelAndView里接收到參數。

    好，然後給出我搭建項目的步驟，先創建一個名為ModelAndViewDemo的Maven項目里，而在下表裡，給出了重要文件的說明。

重要文件

說明

pom.xml

引入了該項目所用到的依賴包，尤其地，引入了Thymeleaf的依賴包

SpringBootApp.java

啟動類

Controller.java

控制器類，在其中通過ModelAndView對象和前端Thymeleaf交互

Application.properties

配置文件，其中包含了Thymeleaf的相關配置

hello.html

包含Thymeleaf模板的前端頁面文件，請注意它是在resources目錄的templates目錄里，這個目錄結構需要和配置文件里的配置保持一致

    第一步，在pom.xml里，包含本項目的依賴包，關鍵程式碼如下所示。其中，通過第6行到第9行的程式碼，引入了thymeleaf模板的依賴包。 

1  <dependencies>
2	        <dependency>
3	            <groupId>org.springframework.boot</groupId>
4	            <artifactId>spring-boot-starter-web</artifactId>
5	        </dependency>
6	        <dependency>
7	            <groupId>org.springframework.boot</groupId>            
8	<artifactId>spring-boot-starter-thymeleaf</artifactId>
9	        </dependency>
10	    </dependencies>

    第二步，編寫啟動類。    

1	package prj;
2	import org.springframework.boot.SpringApplication;
3	import org.springframework.boot.autoconfigure.SpringBootApplication;
4	@SpringBootApplication
5	public class SpringBootApp {
6	    public static void main(String[] args) {
7	        SpringApplication.run(SpringBootApp.class, args);
8	    }
9	}

    第三步，編寫控制器類，程式碼如下所示。        

1	package prj.controller;
2	import org.springframework.web.bind.annotation.RequestMapping;
3	import org.springframework.web.bind.annotation.RestController;
4	import org.springframework.web.servlet.ModelAndView;
5	@RestController
6	public class Controller {
7	    @RequestMapping("/welcome")
8	    public ModelAndView welcome() {
9	        ModelAndView modelAndView = new ModelAndView("hello");
10	        modelAndView.getModel().put("name", "Tom");
11	        return modelAndView;
12	    }
13	}

    在第8行的welcome方法里，先是在第9行創建了ModelAndView類型的對象，並通過構造函數，指定該對象里的視圖為「hello」，隨後通過第10行的程式碼，在該對象的Model里，以鍵值對的形式，添加了鍵是name值是Tom的數據。結合起來看，welcome方法將向hello視圖返回一個鍵值對數據。

    第四步，在application.properties里，編寫thymeleaf模板的相關參數，具體程式碼如下。    

1	#啟用thymeleaf視圖
2	spring.thymeleaf.enabled=true
3	#設置Content-Type值
4	spring.thymeleaf.content-type=text/html
5	## 檢查模板是否存在，然後再呈現
6	spring.thymeleaf.check-template-location=true
7	# 不啟用快取
8	spring.thymeleaf.cache=false
9	# 構建前綴
10	spring.thymeleaf.prefix=classpath:/templates/
11	# 構建後綴
12	spring.thymeleaf.suffix=.html

    在對應的參數項前都有注釋，大家可以自行閱讀，不過這裡有如下兩大注意點。

  1. 為了要使用thymeleaf視圖，必須要配置如第2行所示的參數。
  2. 第10行和第12行定義的前綴和後綴，會和ModelAndView對象里的視圖整合起來使用。比如在Controller.java里，ModelAndView里返回的視圖是hello,所以會對應地加上前後綴，加號以後的值是classpath:/templates/hello.html，這樣能指定最終跳轉到的視圖文件位置。

    第五步，需要編寫包含thymeleaf模板的hello.html頁面，程式碼如下所示。    

1	<!DOCTYPE html>
2	<html  lang="en" xmlns:th="//www.thymeleaf.org">
3	<head>
4	    <meta charset="UTF-8">
5	    <title>welcome</title>
6	</head>
7	<body>
8	    Welcome:<span th:text="${name}"></span>
9	</body>
10	</html>

    其中在第2行，指定了第8行要用到的th標籤的命名空間，這是來自於thymeleaf模板。

    而在第8行里，通過th:text=”${name}”的形式，指定了存放${name}參數的佔位符，而具體的name參數值，會來自於後端的返回。從這個頁面里，大家能看到thymeleaf模板如下的樣式特徵。

  1. 本範例中，thymeleaf模板是嵌入在HTML5程式碼里的，在使用時，需要如第2行所示，引入要用到該模板屬性元素的命名空間。
  2. 在諸如html5的前端頁面里，可以像第8行那樣，通過thymeleaf的語法，設置參數的佔位符，這樣當後端通過ModelAndView等形式傳遞來參數時，就能在佔位符所在的位置，動態展示。

    完成開發後啟動該項目，並如控制器里welcome方法之前的@RequestMapping註解所示，在瀏覽器里輸入//localhost:8080/welcome，就能看到輸出「Welcome:Tom「的字樣。而從發起請求到展示數據，主要經歷了如下的流程。

  1. 根據@RequestMapping註解所定義，//localhost:8080/welcome請求被welcome方法所處理。
  2. 在welcome方法里設置了返回視圖為hello，並設置了name參數的值是Tom。
  3. 根據application.properties里的配置，會根據配置好的前後綴，確定待返回的視圖頁面，這裡是resources（由於該目錄是在本項目的classpath里）目錄下的templates目錄里的hello.html。
  4. 最終會展示hello.html，並在其中thymeleaf模板所定義，在name參數佔位符所在的位置展示「Tom」字樣。由此展示大家最終看到的結果。

VirMach 便宜 VPS

QNews

QNews