SpringBoot 學習筆記_整合視圖層
聲明：
本次學習參考 《SpringBoot + Vue 開發實戰》 · 王松（著） 一書。
本文的目的是爲了記錄我在學習的過程和遇到的一些問題以及解決辦法。
如有侵權，請聯繫我刪除。
SpringBoot 整合視圖層技術
目前企業級開發中，前後端分離是趨勢，但是視圖層技術還佔有一席之地。SpringBoot 對視圖層技術提供了很好的支持，官方推薦使用模板引擎
Thymeleaf。
整合 Thymeleaf
Thymeleaf 是新一代 Java 模板引擎，與傳統 java 模板引擎不同的是，Thymeleaf 支持 HTML 原型，既可以讓前端工程師在瀏覽器中直接打開查看樣式，也可以讓後端工程師結合真實數據查看顯示效果。同時， SpringBoot 提供了 Thymeleaf 自動化配置解決方案。
-
在 pom.xml 中添加相關依賴
<!-- Thymeleaf 相關依賴 --> <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> -
配置 Thymeleaf
SpringBoot 爲 Thymeleaf 提供了自動化配置類
ThymeleafAutoConfiguration， 相關配置屬性在ThymeleafProperties類中查看該類的源碼，部分如下：
public class ThymeleafProperties { private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8; public static final String DEFAULT_PREFIX = "classpath:/templates/"; public static final String DEFAULT_SUFFIX = ".html"; private boolean checkTemplate = true; private boolean checkTemplateLocation = true; private String prefix = DEFAULT_PREFIX; private String suffix = DEFAULT_SUFFIX; private String mode = "HTML"; private Charset encoding = DEFAULT_ENCODING; private boolean cache = true; private Integer templateResolverOrder; private String[] viewNames; private String[] excludedViewNames; private boolean enableSpringElCompiler; private boolean renderHiddenMarkersBeforeCheckboxes = false; private boolean enabled = true; ... }可以看到，默認的模板位置在
classpath:/templates/，默認模板後綴.html我們也可以在
application.properties文件中對其進行自定義配置：# 是否開啓緩存(通常：開發時 false，線上時 true) spring.thymeleaf.cache=true # 檢查模板是否存在 spring.thymeleaf.check-template=true # 檢查模板位置是否存在 spring.thymeleaf.check-template-location=true # 模板文件編碼 spring.thymeleaf.encoding=UTF-8 # 模板文件位置 spring.thymeleaf.prefix=classpath:/templates/ # Content-Type 配置 spring.thymeleaf.servlet.content-type=text/html # 模板文件後綴 spring.thymeleaf.suffix=.html -
配置控制器(以
BookController爲例)，在控制器中返回ModelAndView@GetMapping("/books") public ModelAndView books(){ List<Book> books = new ArrayList<>(); books.add(new Book("三國演義", "羅貫中", 65.3F)); books.add(new Book("西遊記", "吳承恩", 55.1F)); books.add(new Book("水滸傳", "施耐庵", 36.7F)); books.add(new Book("紅樓夢", "曹雪芹", 52.3F)); ModelAndView mv = new ModelAndView(); mv.addObject("books", books); mv.setViewName("books"); return mv; } -
創建視圖
在 resource 目錄中的 template 目錄中創建 books.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>thymeleaf</title> </head> <body> <table border="1"> <tr> <td>圖書名稱</td> <td>圖書作者</td> <td>圖書價格</td> </tr> <tr></tr> <tr th:each="book:${books}"> <td th:text="${book.name}"></td> <td th:text="${book.author}"></td> <td th:text="${book.price}"></td> </tr> </table> </body> </html> -
運行測試
https://localhost:8080/books