1、整合thymeleaf(官方推薦)
1.1 thymeleaf是什么
java新一代的模板引擎，支持html原型，可以讓前端工程師
直接瀏覽器查看樣式，也可以支持后端工程師結合真實數據查看效果。
1.2 整合步驟
- 添加依賴
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<version>1.5.12.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>1.5.12.RELEASE</version>
</dependency>
</dependencies>
-
配置thymeleaf
ctrl+shift+r全局搜索ThymeleafAutoConfiguration類，這是springboot為thymeleaf提供的配置類。而相關配置屬性在ThymeleafProperties這個類中。
image.png -
修改thymeleaf的默認配置(在application.properties)
部分常見配置
image.png
1.3 實戰
- 創建maven工程，不需要選擇項目框架
pom文件
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.ljs</groupId>
<artifactId>thymeleaf</artifactId>
<version>1.0-SNAPSHOT</version>
<name>thymeleaf</name>
<description>Demo project for Spring Boot</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.3.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<!--統一項目字符集編碼和java版本-->
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<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>
</dependencies>
</project>
- springboot啟動類，使用組合注解
@SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
- 實體類和Controller類
public class Book {
private Integer id;
private String name;
private String author;
//省略get和set
@Controller
public class BookController {
@GetMapping("/books")
public ModelAndView Books(){
List<Book> books = new ArrayList<>();
Book book1 = new Book();
book1.setId(1);
book1.setName("springboot");
book1.setAuthor("王松");
Book book2 = new Book();
book2.setId(2);
book2.setName("vue");
book2.setAuthor("王松");
books.add(book1);
books.add(book2);
ModelAndView mv = new ModelAndView();
mv.addObject("books", books);
//視圖名為books
mv.setViewName("books");
return mv;
}
}
- 創建模板
在resource下創建templates文件夾，創建books.html
注意第二行導入thymeleaf的名稱空間
<!DOCTYPE html>
<html lang="en" xmln:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>圖書列表</title>
</head>
<body>
<table border="1">
<tr>
<td>id</td>
<td>書名</td>
<td>作者</td>
</tr>
<tr th:each="book:${books}">
<td th:text="${book.id}"/>
<td th:text="${book.name}"/>
<td th:text="${book.author}"/>
</tr>
</table>
</body>
</html>
-
啟動運行
image.png
1.5 更多關于thymeleaf的基礎用法，
2、整合FreeMarker
2.1 freemarker
與Thymeleaf不同 FreeMarker 需要經過解析才能夠在瀏覽器中展示出來。 freeMarker不僅可以用來配置HTML頁面模板，也可以作為電子郵件模板、配置文件模板以及源碼模板等。
2.2 整合步驟
- 添加依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
-
配置freemarker
SpringBoot對FreeMarker也提供了自動化配置類 FreeMarkerAutoConfiguration ，相關的配屬性在FreeMarkerProperties
ctrl+shift+r全局搜索FreeMarkerProperties類
image.png -
修改freemarker默認配置(application.properties)
image.png
3.3 實戰
-
這次直接創建springboot工程，而不是maven工程
image.png pom文件直接加入上面兩個依賴就行
實體類和controller和上面一樣
模板文件
其中先判斷model中的books不為空并且有數據，然后再遍歷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖書列表</title>
</head>
<body>
<hr>
<table border="1">
<tr>
<td>圖書編號</td>
<td>圖書名稱</td>
<td>圖書作者</td>
</tr>
<#if books ??&&(books?size>0)>
<#list books as book>
<tr>
<td>${book.id}</td>
<td>${book.name}</td>
<td>${book.author}</td>
</tr>
</#list>
</#if>
</table>
</body>
</html>
- 運行
image.png
2.4 更多關于freemarker基礎用法
freemarker官網
3 小結
本章介紹了springboot整合視圖層技術，如果項目未完全分離可以使用上面兩種代替jsp，如果完全分離后端只需提供接口而不需要整合這些。
