快捷導(dǎo)航

SpringBoot整合Thymeleaf與FreeMarker視圖層技術(shù)

更新時(shí)間：2022年08月13日 11:28:27 作者：一只小熊貓呀

在目前的企業(yè)級(jí)應(yīng)用開發(fā)中，前后端分離是趨勢(shì)，但是視圖層技術(shù)還占有一席之地。Spring Boot 對(duì)視圖層技術(shù)提供了很好的支持，福安防推薦使用的模板引擎是Thymeleaf，不過(guò)想FreeMarker也支持，JSP技術(shù)在這里并不推薦使用

整合Thymeleaf

Thymeleaf是新一代Java模板引擎，類似于Velocity、FreeMarker等傳統(tǒng)Java模板引擎。與傳統(tǒng)Java模板引擎不同的是，Thymeleaf支持HTML原型，既可以讓前端工程師在瀏覽器中直接打開查看樣式，也可以讓后端工程師結(jié)合真實(shí)數(shù)據(jù)查看顯示效果。同事，Spring Boot提供了Thymeleaf自動(dòng)化配置解決方案，因此在Spring Boot中使用Thymeleaf 非常方便。Spring Boot整合Thymeleaf 主要可通過(guò)如下步驟

1. 創(chuàng)建工程添加依賴

新建一個(gè)Spring Boot工程，然后添加spring-boot-starter-web 和spring-boot-starter-thymeleaf 依賴

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--    整合Thymeleaf    -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2. 配置Thymeleaf

Spring Boot為Thymeleaf提供了自動(dòng)化配置類ThymeleafAutoConfiguration，相關(guān)的配置屬性在ThymeleafProperties 類中，ThymeleafProperties類部分源碼如下：

@ConfigurationProperties(prefix = "spring.thymeleaf")
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";
}

由此配置可以看到，默認(rèn)的模板位置在classpath:/templates/，默認(rèn)的模板后綴名為.html。如果使用IDEA創(chuàng)建Spring Boot 項(xiàng)目，templates文件夾默認(rèn)會(huì)創(chuàng)建。如需對(duì)默認(rèn)的Thymeleaf 配置參數(shù)進(jìn)行自定義配置，可以在application.properties 中進(jìn)行配置，部分常見配置如下：

#是否開啟緩存，開發(fā)時(shí)可設(shè)置為false，默認(rèn)為true
spring.thymeleaf.cache=false
#檢查模版是否存在，默認(rèn)為true
spring.thymeleaf.check-template=true
#檢查模版位置是否存在，默認(rèn)為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

3. 配置控制器

創(chuàng)建Book實(shí)體類，然后在Controller中返回ModelAndView，如下：

public class Book {
    private int id;
    private String name;
    private String author;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getAuthor() {
        return author;
    }
    public void setAuthor(String author) {
        this.author = author;
    }
}

@RestController
public class BookController {
    @GetMapping(value = "/books")
    public ModelAndView books(){
        List<Book> books = new ArrayList<>();
        Book b1 = new Book();
        b1.setId(1);
        b1.setAuthor("唐家三少");
        b1.setName("斗羅大陸Ⅰ");
        Book b2 = new Book();
        b2.setId(2);
        b2.setAuthor("唐家三少");
        b2.setName("斗羅大陸Ⅱ");
        books.add(b1);
        books.add(b2);
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.addObject("books",books);
        modelAndView.setViewName("books");
        return modelAndView;
    }
}

4. 創(chuàng)建視圖

在resources目錄下的templates目錄中創(chuàng)建books.html，如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>圖書列表</title>
</head>
<body>
<table border="1">
    <tr>
        <td>圖書編號(hào)</td>
        <td>圖書名稱</td>
        <td>圖書作者</td>
    </tr>
    <tr th:each="book:${books}">
        <td th:text="${book.id}"></td>
        <td th:text="${book.name}"></td>
        <td th:text="${book.author}"></td>
    </tr>
</table>
</body>
</html>

代碼解釋：

首先在第二行導(dǎo)入Thymeleaf 的名稱空間
通過(guò)遍歷將books中的數(shù)據(jù)展示出來(lái)，Thymeleaf中通過(guò)th:each進(jìn)行集合遍歷，通過(guò)th:text展示數(shù)據(jù)

5. 運(yùn)行

瀏覽器輸入"http://localhost:8081/books"，查看運(yùn)行結(jié)果，如圖：

整合FreeMarker

FreeMarker 是一個(gè)非常古老的模板引擎，可以用在Web環(huán)境或者非Web環(huán)境中。FreeMarker 需要經(jīng)過(guò)解析才能在瀏覽器中展示出來(lái)。FreeMarker 不僅可以用來(lái)配置HTML頁(yè)面模板，也可以作為電子郵件模板、配置文件模板以及源碼模板。整合步驟如下：

1. 創(chuàng)建項(xiàng)目添加依賴

創(chuàng)建Spring Boot項(xiàng)目，然后添加spring-boot-starter-web和spring-boot-starter-freemarker依賴，如下：

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--    整合FreeMarker    -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>

2. 配置FreeMarker

Spring Boot對(duì)FreeMarker 也提供了自動(dòng)化配置類FreeMarkerAutoConfiguration，相關(guān)的配置屬性在FreeMarkerProperties中，F(xiàn)reeMarkerProperties的部分源碼如下：

@ConfigurationProperties(prefix = "spring.freemarker")
public class FreeMarkerProperties extends AbstractTemplateViewResolverProperties {
	public static final String DEFAULT_TEMPLATE_LOADER_PATH = "classpath:/templates/";
	public static final String DEFAULT_PREFIX = "";
	public static final String DEFAULT_SUFFIX = ".ftl";
    ...
}

FreeMarker 默認(rèn)模板位置和Thymeleaf 一樣，都在classpath:/templates/中，默認(rèn)文件后綴是.ftl，開發(fā)者可以在application.properties 中對(duì)這些默認(rèn)配置進(jìn)行修改，如下：

3. 控制器

控制器和Thymeleaf 中的控制器一樣，這里不再重復(fù)

4. 創(chuàng)建視圖

在resources目錄下的templates目錄中創(chuàng)建books.ftl 文件，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖書列表FreeMarker</title>
</head>
<body>
<table border="1">
    <tr>
        <td>圖書編號(hào)</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>

代碼解釋：

先判斷model中的books部位可控并且books中有數(shù)據(jù)，然后再進(jìn)行遍歷

5. 運(yùn)行

瀏覽器輸入"http://localhost:8081/books"，查看運(yùn)行結(jié)果，如圖：

到此這篇關(guān)于SpringBoot整合Thymeleaf與FreeMarker視圖層技術(shù)的文章就介紹到這了,更多相關(guān)SpringBoot整合視圖層內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: