1. 程式人生 > >SpringBoot集成Thymeleaf模板引擎

SpringBoot集成Thymeleaf模板引擎

lis arr type www mode html中 object erro pub

傳統的JSP+JSTL組合是已經過去了,Thymeleaf是Java服務端的模板引擎,與傳統的JSP不同,Thymeleaf可以使用瀏覽器直接打開,因為可以忽略掉拓展屬性,相當於打開原生頁面,給前端人員也帶來一定的便利。我的這個博客網站也是SpringBoot+Thymeleaf搭建的。

1. 依賴導入

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

2. Thymeleaf相關配置

因為Tymeleaf默認是開啟頁面緩存的,所以在開發的時候,需要關閉這個頁面緩存,其他基本不用怎麽配置。

server:
  port: 8088
spring:
  thymeleaf:
    cache: false #關閉緩存

3. 測試頁面訪問

3.1 訪問靜態頁面

這個和Thymeleaf沒啥關系,我也把它一並寫到這裏,一般做網站的時候,都會自己做一個404頁面和500頁面,為了給用戶一個友好的展示。SpringBoot中會自動識別模板目錄下的404.html和500.html,所以我們在templare/error下新建兩個html頁面,然後分別打印些信息。以404為例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    這是404頁面
</body>
</html>

再寫一個controller測試一下:

@Controller
public class TestController {
    @RequestMapping("/test")
    public String test404() {
        
return "index"; } @RequestMapping("/test505") public String test505() { int i = 1 / 0; return "index"; } }

當我們在瀏覽器中輸入localhost:8088/hello時,找不到對應的方法,就會跳轉到404.html顯示。
當我們在瀏覽器中輸入localhost:8088/test505時,會拋出異常,然後會自動跳轉到500.html顯示。

【註】使用模板引擎時,Controller層就不能用@RestController註解了,否則會把返回的String當作json解析了,直接返回了,就不會去找頁面,所以使用模板時要用@Controller註解。

3.2 Thymeleaf中處理對象

假如我們給前端傳一個對象,如下:

public class Blogger {
    private Long id;
    private String name;
    private String pass;
    // 省去set和get
}

然後在controller層中初始化一下:

@RequestMapping("/blogger")
public String testObject(Model model) {
    Blogger blogger = new Blogger();
    blogger.setId(1L);
    blogger.setName("倪升武");
    blogger.setPass("12345");
    model.addAttribute("blogger", blogger);
    return "blogger";
}

再寫一個blogger.html來渲染一下:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博主信息</title>
</head>
<body>
<form action="" th:object="${blogger}" >
    用戶編號:<input name="id" th:value="${blogger.id}"/><br>
    用戶姓名:<input type="text" name="username" th:value="${blogger.getName()}" /><br>
    登陸密碼:<input type="text" name="password" th:value="*{pass}" />
</form>
</body>
</html>

可以看出,使用th:object="${}"來獲取對象信息,然後在表單裏面可以有三種方式獲取對象屬性。

使用 th:value="*{屬性名}" 使用 th:value="${對象.屬性名}" 使用 th:value="${對象.get方法}"

可以看出,在Thymeleaf中可以像寫java一樣寫代碼,很方便。

3.3 Thymeleaf中處理List

List的話,就需要在前Thymeleaf中進行遍歷了。先模擬一個List。

@RequestMapping("/list")
public String testList(Model model) {
    List<Blogger> bloggerList = new ArrayList<>();
    Blogger blogger = new Blogger();
    blogger.setId(1L);
    blogger.setName("倪升武");
    blogger.setPass("12345");
    bloggerList.add(blogger);

    Blogger blogger2 = new Blogger();
    blogger2.setId(2L);
    blogger2.setName("ITcodai");
    blogger2.setPass("12345");
    bloggerList.add(blogger2);

    model.addAttribute("list", bloggerList);
    return "list";
}

然後list.html中來遍歷這個list。

<form action="" th:each="blogger : ${list}" >
    用戶編號:<input name="id" th:value="${blogger.id}"/>
    用戶姓名:<input type="text" name="password" th:value="${blogger.name}"/><br>
    登錄密碼:<input type="text" name="username" th:value="${blogger.getPass()}"/>
</form>

其實和JSTL差不多,Thymeleaf使用th:each進行遍歷,表單裏面可以直接使用${對象.屬性名},也可以使用${對象.get方法},但是不能使用*{屬性名},模板獲取不到。

Thymeleaf還有很多其他用法,這裏就不總結了,具體的可以參考Thymeleaf的官方文檔(v3.0)。

SpringBoot集成Thymeleaf模板引擎