1. 程式人生 > >springboot 中 thymeleaf 的使用

springboot 中 thymeleaf 的使用

首先看一下目錄結構:


然後從pom配置開始:

第一步:引用:

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

截圖如下:

第二步:配置properties

# Enable template caching.
spring.thymeleaf.cache=false 
# Check that the templates location exists.
spring.thymeleaf.check-template-location=true 
# Content-Type value.
spring.thymeleaf.servlet.content-type=text/html 
# Enable MVC Thymeleaf view resolution.
spring.thymeleaf.enabled=true 
# Template encoding.
spring.thymeleaf.encoding=UTF-8 
# Comma-separated list of view names that should be excluded from resolution.
spring.thymeleaf.excluded-view-names= 
# Template mode to be applied to templates. See also StandardTemplateModeHandlers.
spring.thymeleaf.mode=HTML5 
# Prefix that gets prepended to view names when building a URL.
spring.thymeleaf.prefix=classpath:/templates/ 
# Suffix that gets appended to view names when building a URL.
spring.thymeleaf.suffix=.html

更多配置可以訪問:org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties類檢視。

第三步:頁面。

眾所周知,thymeleaf 的頁面是html,而非jsp。Springboot也建議如此使用。

頁面預設存放路徑為:\src\main\resources\templates

tab.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
<h1 th:text="${name}">Hello World</h1>
</body>
</html>

第四步:後臺跳轉

依然沿用了Spring的跳轉設定,在引數上添加了ModelMap用於資料的傳輸。程式碼如下:

ThymeleafController.java 

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ThymeleafController {

    @RequestMapping("/")
    public String index(ModelMap param) { 
           param.addAttribute("name", "I`m Iceter!");
        // return模板檔案的名稱,對應src/main/resources/templates/tab.html
        return "tab";  
    }
    
}

至此,配置及頁面跳轉已經完成。啟動後,可以通過

http://localhost:8080/tab.html

進行訪問。正常訪問結果如下:




附件:

在thymeleaf 的使用過程中,我們經常會用到程式碼提示,thymeleaf 的頁面編輯中也有自動提示。如下:



自動提示外掛安裝地址:

https://www.thymeleaf.org/eclipse-plugin-update-site/

下載安裝之後即可使用。


原始碼下載地址:

https://download.csdn.net/download/u011561335/10413152


參考博文:

https://blog.csdn.net/winter_chen001/article/details/78330142

https://blog.csdn.net/u012706811/article/details/52185345