SpringBoot集成Freemarker并使用layout模板

大家早上好鴨，今天又是周一了前酿，大家的周一綜合癥有沒有犯呢贼急，一起來摸魚吧(手動狗頭)

本文章最先發(fā)布于我的個人博客茅茂，簡書為同步發(fā)布，如有需要太抓，可以訪問腿短快跑的個人博客獲取更多內容

Freemarker簡介

FreeMarker 是一款模板引擎：即一種基于模板和要改變的數據空闲，并用來生成輸出文本(HTML網頁，電子郵件走敌，配置文件碴倾，源代碼等)的通用工具。它不是面向最終用戶的，而是一個Java類庫跌榔，是一款程序員可以嵌入他們所開發(fā)產品的組件异雁。

Freemarker和Thymeleaf對比

Freemarker和Thymeleaf都是一種模板渲染引擎，兩者各有優(yōu)缺點

Freemarker

用Java語言編寫的模板引擎僧须，它基于模板來生成文本輸出
與Web容器無關纲刀，即在運行時，它并不知道Servlet或HTTP
不僅可以用作表現層的實現技術担平，而且還可以用于生成XML示绊，JSP或Java 等

優(yōu)點

不能編寫java代碼，可以實現嚴格的mvc分離
性能不錯
內置大量常用功能暂论，使用非常方便
支持表達式語言
支持宏定義（類似jsp標簽）
類似于jsp面褐，學習成本低，符合以前使用jsp的習慣

缺點

不是官方標準
使用</>這樣的語法取胎，就無法直接使瀏覽器渲染出原本頁面的樣子

Thymeleaf

是個XML/XHTML/HTML5模板引擎盆耽，可以用于Web與非Web應用。
主要目標是提供一種可被瀏覽器正確顯示的扼菠、格式良好的模板創(chuàng)建方式摄杂，因此也可以用作靜態(tài)建模。
可擴展性非常棒：可以使用它定義自己的模板屬性集合循榆，這樣就可以計算自定義表達式并使用自定義邏輯析恢。

優(yōu)點

使用了標簽屬性做為語法，模版頁面直接用瀏覽器渲染秧饮，瀏覽器可以直接打開模板文件映挂，使得前端和后端可以并行開發(fā)
適合做服務器端渲染，通過服務器端模版渲染盗尸，客戶端收到的是在服務器端根據模版渲染后的html信息
可以支持前段瀏覽器渲染
可以作為模板引擎框架
springboot官方推薦方案

缺點

模板必須符合xml規(guī)范柑船。js腳本必須加入<![CDATA[]]>標識，否則一個&符號就會導致后臺模板合成拋異常
錯誤信息不友好

為什么選擇Freemarker

上面我們對別了 Freemarker 和 Thymeleaf 的優(yōu)缺點泼各，其實在項目的最開始鞍时，我一直是使用 Thymeleaf 作為模板渲染引擎的，但是最近要用到 layout 模板功能扣蜻，Thymeleaf支持并不是很好逆巍，在網上也參考了很多博客的內容，但是沒有實現很完美的莽使，因此考慮到了使用 Freemarker

集成Freemarker

引入依賴

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

項目配置

spring:
  freemarker:
    # 請求重寫
    allow-request-override: false
    # session重寫
    allow-session-override: false
    # 緩存模板
    cache: false
    # 模板編碼
    charset: UTF-8
    check-template-location: true
    # 類型
    content-type: text/html
    expose-request-attributes: false
    expose-session-attributes: false
    # 模板后綴名
    suffix: .ftl
    # 模板目錄
    template-loader-path: classpath:/templates/

前端代碼

templates/index.ftl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<body>
    <div>大家好锐极，我是 ${name}</div>
</body>
</html>

后端代碼

IndexController.java

/**
 * @author C.W
 * @date 2022/5/10 15:28
 * @desc
 */
@Controller
public class IndexController {

    @GetMapping("/")
    public String index(Model model) throws IOException {
        model.addAttribute("name", "腿短快跑");
        return "index";
    }

}

效果展示

訪問 http://IP地址:端口/

image.png

可以看到，頁面正常展示芳肌，并且已經將數據渲染成功

layout 模板功能

為什么需要layout

對于一個網站來說灵再，基本的框架結構在每個頁面都是相似的肋层，如果框架結構在每個文件中都重寫一遍，重復工作量很大翎迁，且當需要修改框架模板時槽驶，每個文件都需要修改，重復且容易出錯

使用 layout 模板鸳兽，每個文件只需要引入模板即可達到效果

創(chuàng)建公用組件

templates/components/header.ftl

<div style="background-color: green; color: white">
    這是頭部
</div>

templates/components/footer.ftl

<div style="background-color: blue; color: white">
    這是尾部, @CopyRight 腿短快跑
</div>

創(chuàng)建layout布局

templates/layout.ftl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<#macro css>
    <#nested>
</#macro>
<body>
    <!-- 引入header -->
    <#include "components/header.ftl">
    <!-- 布局  -->
    <#macro layout>
        <#nested>
    </#macro>
    <!-- 引入footer -->
    <#include "components/footer.ftl">
</body>
<#macro js>
    <#nested>
</#macro>
</html>

創(chuàng)建頁面

templates/index/index.ftl

<#include "../layout.ftl">

<@css>
    <style>
        .div {
            background-color: yellow;
        }
    </style>
</@css>

<@layout>
    <div class="div">
        大家好，我是 ${name}
    </div>
</@layout>

<@js>
    <script>
        alert('這是js')
    </script>
</@js>

頁面控制器