spring boot用ModelAndView向Thymeleaf模板傳參數

原創

hsm_computer

2021-03-22 18:35

最近在調試一個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

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

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

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

1	<!DOCTYPE html>
2	<html  lang="en" xmlns:th="http://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模板如下的樣式特徵。

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

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

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

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

spring boot用ModelAndView向Thymeleaf模板傳參數

應屆生必讀：Java真實項目的開發流程和常用工具

23年底，我出齊了Spring boot,Spring cloud和案例方面的書，正在寫一本面試書（代年終總結）

就說說當年拒掉我的那些公司

在行情一般的情況下，就說說23級應屆生如何找java工作

就聊聊不少小IT公司的技術總監

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結