SpringBoot集成Freemarker并使用layout模板

1 篇文章 0 订阅
1 篇文章 0 订阅

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

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

Freemarker简介

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

Freemarker和Thymeleaf对比

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

Freemarker

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

优点

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

缺点

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

Thymeleaf

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

优点

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

缺点

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

为什么选择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地址:端口/

img

可以看到,页面正常展示,并且已经将数据渲染成功

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>

页面控制器

IndexController.java

/**
 * @author C.W
 * @date 2022/5/17 11:25
 * @desc 首页
 */
@Controller
public class IndexController {

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

}

结果展示

img

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值