SpringBoot集成Freemarker并使用layout模板

大家早上好鸭，今天又是周一了，大家的周一综合症有没有犯呢，一起来摸鱼吧(手动狗头)

本文章最先发布于我的个人博客，简书为同步发布，如有需要，可以访问腿短快跑的个人博客获取更多内容

Freemarker简介

FreeMarker 是一款模板引擎：即一种基于模板和要改变的数据，并用来生成输出文本(HTML网页，电子邮件，配置文件，源代码等)的通用工具。它不是面向最终用户的，而是一个Java类库，是一款程序员可以嵌入他们所开发产品的组件。

Freemarker和Thymeleaf对比

Freemarker和Thymeleaf都是一种模板渲染引擎，两者各有优缺点

Freemarker

用Java语言编写的模板引擎，它基于模板来生成文本输出
与Web容器无关，即在运行时，它并不知道Servlet或HTTP
不仅可以用作表现层的实现技术，而且还可以用于生成XML，JSP或Java 等

优点

不能编写java代码，可以实现严格的mvc分离
性能不错
内置大量常用功能，使用非常方便
支持表达式语言
支持宏定义（类似jsp标签）
类似于jsp，学习成本低，符合以前使用jsp的习惯

缺点

不是官方标准
使用</>这样的语法，就无法直接使浏览器渲染出原本页面的样子

Thymeleaf

是个XML/XHTML/HTML5模板引擎，可以用于Web与非Web应用。
主要目标是提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。
可扩展性非常棒：可以使用它定义自己的模板属性集合，这样就可以计算自定义表达式并使用自定义逻辑。

优点

使用了标签属性做为语法，模版页面直接用浏览器渲染，浏览器可以直接打开模板文件，使得前端和后端可以并行开发
适合做服务器端渲染，通过服务器端模版渲染，客户端收到的是在服务器端根据模版渲染后的html信息
可以支持前段浏览器渲染
可以作为模板引擎框架
springboot官方推荐方案

缺点

模板必须符合xml规范。js脚本必须加入<![CDATA[]]>标识，否则一个&符号就会导致后台模板合成抛异常
错误信息不友好

为什么选择Freemarker

上面我们对别了 Freemarker 和 Thymeleaf 的优缺点，其实在项目的最开始，我一直是使用 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 模板，每个文件只需要引入模板即可达到效果

创建公用组件

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>

创建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>

创建页面

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>

页面控制器