【SpringBoot】FreeMarker视图渲染

一、FreeMarker 简介

1.1 什么是FreeMarker？

1.2 Freemarker模板组成部分

1.3 为什么要使用FreeMarker

二、Springboot集成FreeMarker

2.1 配置

2.2 数据类型

2.2.1 字符串

2.2.2 数值

2.2.3 布尔值

2.2.4 日期

2.3 常见指令

2.3.2 assign

2.3.3 include

...

三、常见指令实现增删改查（综合案例）⭐

3.1 后端

3.2 前端

3.3 效果展示

3.3.1 新增功能

3.3.2 修改功能

3.3.3 查询功能

3.3.4 删除功能

一、FreeMarker 简介

1.1 什么是FreeMarker？

FreeMarker是一款 模板引擎 ，它允许开发人员使用模板和数据来生成输出文本，如HTML网页、电子邮件、配置文件和源代码等。它是一个Java类库，可以被嵌入到开发人员所创建的产品中。开发人员可以使用FreeMarker来动态生成和渲染视图，以便将数据呈现给最终用户。

官方手册https://freemarker.apache.org/

下面是一些关键点：

模板引擎： FreeMarker是一种模板引擎，允许开发者定义模板文件，其中包含要动态填充的占位符或表达式。这些模板文件可以包含HTML、XML、文本等。
动态内容生成： FreeMarker的主要用途是根据模板和数据生成最终的输出内容。模板中的占位符将被实际的数据替代，从而生成动态的、个性化的输出。
嵌入式组件： FreeMarker是一个Java类库，可以轻松地集成到Java应用程序中。这使得开发人员可以在他们的Java应用中使用FreeMarker来处理视图层的动态内容生成。
面向程序员： FreeMarker通常被程序员用于构建动态的用户界面或生成其他类型的文本输出。它不直接面向最终用户，而是提供给开发人员一个工具，使他们能够以更灵活和动态的方式生成内容。

1.2 Freemarker模板组成部分

FreeMarker模板文件主要由如下4个部分组成:

文本：直接输出的部分
注释：使用 <#-- ... --> 格式做注释，里面内容不会输出
插值：即 ${...} 或 #{...} 格式的部分，类似于占位符，将使用数据模型中的部分替代输出
FTL指令：即FreeMarker指令，全称是：FreeMarker Template Language，和HTML标记类似，但名字前加#予以区分，不会输出

1.3 为什么要使用FreeMarker

FreeMarker在Spring Boot中被广泛使用的原因与其特性和与Spring Boot的集成有关。

轻量级： FreeMarker相对轻量，不引入过多的依赖，易于集成和使用。
与Spring框架整合良好： FreeMarker与Spring框架集成良好，通过Spring Boot的自动配置，可以很容易地配置FreeMarker作为模板引擎。
Spring Boot 默认支持： Spring Boot对多个模板引擎提供了自动配置支持，包括FreeMarker。因此，Spring Boot项目中使用FreeMarker非常方便，只需在依赖中引入相应的starter即可。
开箱即用： FreeMarker可以作为Spring Boot的一部分，无需额外的配置。这使得开发者能够快速启动项目并使用FreeMarker构建视图。
简化模板文件的构建： FreeMarker的模板语法相对简洁，可以更容易地与后端Java代码交互。在Spring Boot项目中，Java对象的数据可以直接在FreeMarker模板中使用。

FreeMarker的诞生是为了取代JSP。虽然JSP功能强大，可以写Java代码实现复杂的逻辑处理，但是页面会有大量业务逻辑，不利于维护和阅读，更不利于前后台分工，容易破坏MVC结构，所以舍弃JSP，选择使用FreeMarker是大势所趋。

二、Springboot集成FreeMarker

2.1 配置

1、配置pom.xml，引入依赖：

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

2、添加application.yml配置：

  freemarker:
    # 设置模板后缀名
    suffix: .ftl
    # 设置文档类型
    content-type: text/html
    # 设置页面编码格式
    charset: UTF-8
    # 设置页面缓存
    cache: false
    # 设置ftl文件路径
    template-loader-path: classpath:/templates
    # 设置静态文件路径，js,css等
    mvc:
      static-path-pattern: /static/**

3、新建模板文件（.ftl）

在resources/templates目录新建一个.ftl文件

第一创建是没有这个文件类型的选项的，所以我们要定义个.ftl格式的文件：

settings --> Editor --> File and Code Templates

该内容模板于html差不多的，最后在创建文件的时候就有个一个.ftl格式的文件选项

index.ftl：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Freemarker</title>
</head>
<body>
<h1>Hello FreeMarker!!!</h1>
</body>
</html>

Controller：

package com.ycxw.boot.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * @author 云村小威
 * @create 2023-12-13 18:57
 */
@Controller
public class IndexController {

    @RequestMapping("/")
    public String home(){
        return "index";
    }
}

一个基本的数据显示就成功了

2.2 数据类型

2.2.1 字符串

在文本中确定字符串值的方法是看双引号，比如： "some text"，或单引号，比如： 'some text'。这两种形式是等同的。如果文本自身包含用于字符引用的引号 ( " 或 ')或反斜杠时，应该在它们的前面再加一个反斜杠；这就是转义。转义允许直接在文本中输入任何字符，也包括换行。

${"It's \"quoted\" and this is a backslash: \\"}

字符串类型处理：

方法	含义
?substring(start,end)	截取字符串（左闭右开）
?uncap_first	首字母小写输出
?cap_first	首字母大写输出
?lower_case	字母转小写输出
?upper_case	字母转大写输出
?length	获取字符串长度
?starts_with("xx")?string	是否以指定字符开头（boolean类型）
?ends_with("xx")?string	是否以指定字符结尾（boolean类型）
?index_of("xx")	获取指定字符的索引
?trim	去除字符串前后空格
?replace("xx","xx")	替换指定字符串

字符串空值情况处理：

FreeMarker 的变量必须赋值，否则就会抛出异常。而对于 FreeMarker 来说，null 值和不存在的变量是完全一样的，因为 FreeMarker 无法理解 null 值。

<#-- 如果值不存在，直接输出会报错 -->
<#--${str}-->
<#-- 使用!，当值不存在时，默认显示空字符串 -->
${str!}<br>
<#-- 使用!"xx"，当值不存在时，默认显示指定字符串 -->
${str!"这是一个默认值"}<br>
<#-- 使用??，判断字符串是否为空；返回布尔类型。如果想要输出，需要将布尔类型转换成字符串 -->
${(str??)?string}<br>

注意事项：

使用??或?starts_with("xx")，判断字符串是否为空或指定字符开头；返回布尔类型。如果想要输出，需要将布尔类型转换成字符串在后面添加 ?c or ?string

例如：
${"嗨害嗨"?starts_with("我")}
${str??}
不进行转换则会报错

2.2.2 数值

输入不带引号的数字就可以直接指定一个数字，必须使用点作为小数的分隔符而不能是其他的分组分隔符。

${0.45}<br>
${18}<br>
<#-- 将数值转换成字符串输出 -->
${1000?c} <br>
<#-- 将数值转换成货币类型的字符串输出 -->
${1000?string.currency} <br>
<#-- 将数值转换成百分比类型的字符串输出 -->
${0.45?string.percent} <br>
<#-- 将浮点型数值保留指定小数位输出 （##表示保留两位小数） -->
${0.45723123?string["0.##"]} <br>

2.2.3 布尔值

直接写 true 或者 false 就表示一个布尔值了，不需使用引号。

在freemarker中布尔类型不能直接输出；如果输出要先转成字符串

${flag?c}<br>
${flag?string}<br>
${flag?string("yes","no")}<br>

2.2.4 日期

日期变量可以存储和日期/时间相关的数据。

在freemarker中日期类型不能直接输出；如果输出要先转成日期型或字符串

日期格式输出：

输出方式	说明
?date	年月日
?time	时分秒
?datetime	年月日时分秒
?string("自定义格式")	指定格式

<#-- 输出日期格式 -->
${createDate?date} <br>
<#-- 输出时间格式 -->
${createDate?time} <br>
<#-- 输出日期时间格式 -->
${createDate?datetime} <br>
<#-- 输出格式化日期格式 -->
${createDate?string("yyyy年MM月dd日 HH时mm分ss秒")} <br>

注意事项：

在.ftl文件中不能直接创建时间需要通过后端传入时间进行显示（替换掉createDate）

2.3 常见指令

2.3.2 assign

使用该指令你可以创建一个新的变量，或者替换一个已经存在的变量。

案例演示：

<#-- 创建一个str的变量 -->
<#assign str="hello">
<#-- 输出str -->
${str} <br>
<#-- 一次创建多个变量 -->
<#assign num=1 names=["嗨","害","嗨"] >
${num} and ${names?join(",")}

2.3.3 include

可以使用它在你的模板中插入另外一个 FreeMarker 模板文件 (由 path 参数指定)

该标签主要用于引入其他资源，简化数据

首先创建一个公共页面定义一个变量存储本地访问路径

在index.ftl中进行引入调用src数值

<#-- 引入公共页面 -->
<#include "common.ftl">
<a href="${src}/xxx"></a>

...

还有如：if/elseif/else、list指令在下面的综合案例中进行演示👇

三、常见指令实现增删改查（综合案例）⭐

3.1 后端

BookMapper.xml

    <select id="list" resultMap="BaseResultMap" resultType="com.ycxw.boot.entity.Book">
        select
        <include refid="Base_Column_List"/>
        from t_book
        where 1=1
        <if test="bookname !=null and bookname !=''">
            and bookname like CONCAT('%',#{bookname},'%')
        </if>
    </select>

在此添加了模糊查询的方法，其他的增删改都是自动生成。

BookMapper.java

package com.ycxw.boot.mapper;

import com.ycxw.boot.entity.Book;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;

import java.util.List;

/**
* @author 云村小威
* @description 针对表【t_book(书本信息表)】的数据库操作Mapper
* @createDate 2023-12-12 14:50:45
* @Entity com.ycxw.boot.entity.Book
*/
@Repository
public interface BookMapper {

    List<Book> list(@Param("bookname")String bookname);

    ...其他方法
}

BookService.java

package com.ycxw.boot.service;

import com.ycxw.boot.entity.Book;
import org.apache.ibatis.annotations.Param;

import java.util.List;

/**
 * @author 云村小威
 * @create 2023-12-12 15:11
 */
public interface BookService {
    List<Book> list(@Param("bookname")String bookname);

    int insert(Book record);

    int deleteByPrimaryKey(Long id);

    int updateByPrimaryKey(Book record);
}

BookServiceImpl.java

package com.ycxw.boot.service.impl;

import com.ycxw.boot.entity.Book;
import com.ycxw.boot.mapper.BookMapper;
import com.ycxw.boot.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @author 云村小威
 * @create 2023-12-12 15:12
 */
@Service
public class BookServiceImpl implements BookService {

    @Autowired
    private BookMapper bookMapper;

    @Override
    public List<Book> list(String bookname) {
        return bookMapper.list(bookname);
    }

    @Override
    public int insert(Book record) {
        return bookMapper.insert(record);
    }

    @Override
    public int deleteByPrimaryKey(Long id) {
        return bookMapper.deleteByPrimaryKey(id);
    }

    @Override
    public int updateByPrimaryKey(Book record) {
        return bookMapper.updateByPrimaryKey(record);
    }
}

IndexController.java

package com.ycxw.boot.controller;

import com.ycxw.boot.entity.Book;
import com.ycxw.boot.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import java.util.List;

/**
 * @author 云村小威
 * @create 2023-12-13 18:57
 */
@Controller
public class IndexController {
    @Autowired
    private BookService bookService;

    /**
     * 查询所有
     *
     * @param model
     * @return
     */
    @RequestMapping("/")
    public String home(Model model) {
        List<Book> list = bookService.list(null);
        model.addAttribute("book", list);
        return "index";
    }

    /**
     * 新增
     *
     * @param book
     * @return
     */
    @PostMapping("/add")
    public String add(@RequestBody Book book) {
        bookService.insert(book);
        return "redirect:/";
    }

    /**
     * 删除
     *
     * @param book
     * @return
     */
    @RequestMapping("/del")
    public String del(Book book) {
        bookService.deleteByPrimaryKey(book.getId().longValue());
        return "redirect:/";
    }

    /**
     * 修改
     *
     * @param book
     * @return
     */
    @PutMapping("/edit")
    public String edit(@RequestBody Book book) {
        bookService.updateByPrimaryKey(book);
        return "redirect:/";
    }

    /**
     * 模糊查询
     *
     * @param bookname
     * @param model
     * @return
     */
    @RequestMapping(value = "/search", method = RequestMethod.POST)
    public String search(@RequestParam("bookname") String bookname, Model model) {
        // 在这里使用 bookname 进行相关的处理
        List<Book> list = bookService.list(bookname);
        model.addAttribute("book", list);
        return "index"; // 返回搜索结果页面
    }


}

3.2 前端

common.ftl （公共资源）

<#--引入当前项目的运行路径-->
<#assign src="${springMacroRequestContext.contextPath}">
<#--引入样式与脚本-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<!-- 引入Bootstrap的JavaScript文件（需要在jQuery之后引入） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>

index.ftl（自定义引擎模版）

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>FreeMarker</title>
    <#--引入公共模块-->
    <#include "common.ftl">
</head>
<body>
<div class="container mt-5" id="body">
    <div class="row justify-content-center">
        <div class="col-3">
            <input type="text" class="form-control" id="input" placeholder="请输入书籍名称"
                   style="width: 300px"/>
        </div>
        <div class="col-2">
            <button type="submit" class="btn btn-dark mb-3" onclick="query()">搜索</button>
            <button type="button" class="btn btn-outline-dark mb-3" data-bs-toggle="modal"
                    data-bs-target="#exampleModal">
                新增书籍
            </button>
        </div>

    </div>
    <div class="row">
        <table class="table table-hover" style="width: 65%;margin: auto">
            <thead class="table-dark">
            <tr>
                <th>序号</th>
                <th>书籍名称</th>
                <th>价格</th>
                <th>类型</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <#if book??>
                <#list book as b>
                    <tr>
                        <td>${b.id}</td>
                        <td>${b.bookname}</td>
                        <td>${b.price}</td>
                        <td>${b.booktype}</td>
                        <td>
                            <a href="${src}/del?id=${b.id}">删除</a>
                            <a href="javascript:void(0);"
                               onclick="editModal('${b.id}', '${b.bookname}', '${b.booktype}', ${b.price})"
                               data-bs-toggle="modal" data-bs-target="#editModal">修改</a>
                        </td>
                    </tr>
                </#list>
            </#if>
            </tbody>
        </table>
    </div>
</div>
<!-- 新增弹窗 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">新增书籍</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- 表单 -->
                <form>
                    <div class="mb-3">
                        <label for="title" class="form-label">书籍名称</label>
                        <input type="text" class="form-control" id="name" placeholder="请输入标题">
                    </div>
                    <div class="mb-3">
                        <label for="author" class="form-label">类型</label>
                        <select class="form-select" id="bookType" aria-label="Default select example">
                            <option selected>请选择书籍类型</option>
                            <option value="动作">动作</option>
                            <option value="冒险">冒险</option>
                            <option value="文学">文学</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="price" class="form-label">价格</label>
                        <input type="number" class="form-control" id="price" placeholder="请输入价格">
                    </div>
                    <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal" aria-label="Close">取消
                    </button>
                    <button type="button" class="btn btn-dark" onclick="add()">提交</button>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 修改弹窗 -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">修改书籍</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- 表单 -->
                <form>
                    <div class="mb-3">
                        <label for="id" class="form-label">书籍编号</label>
                        <input type="text" class="form-control" id="id" disabled>
                    </div>
                    <div class="mb-3">
                        <label for="title" class="form-label">书籍名称</label>
                        <input type="text" class="form-control" id="name_edit" placeholder="请输入标题">
                    </div>
                    <div class="mb-3">
                        <label for="author" class="form-label">类型</label>
                        <select class="form-select" id="type_edit" aria-label="Default select example">
                            <option selected>请选择书籍类型</option>
                            <option value="动作">动作</option>
                            <option value="冒险">冒险</option>
                            <option value="文学">文学</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="price" class="form-label">价格</label>
                        <input type="number" class="form-control" id="price_edit" placeholder="请输入价格">
                    </div>
                    <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal" aria-label="Close">取消
                    </button>
                    <button type="button" class="btn btn-dark" onclick="edit()">确认修改</button>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    /*模糊查询*/
    function query() {
        //获取输入值
        var name = $("#input").val();
        // 发送AJAX请求
        $.ajax({
            url: "${src}/search",
            type: "POST",
            contentType: "application/x-www-form-urlencoded",
            data: {"bookname": name},
            success: function (data) {
                //更新整个页面元素
                $("#body").html(data);
            }
        });
    }

    /*新增方法*/
    function add() {
        // 获取表单数据
        var name = $("#name").val();
        var type = $("#bookType").val();
        var price = $("#price").val();
        // 创建一个对象来存储表单数据
        var book = {
            bookname: name,
            booktype: type,
            price: price
        };
        // 发送AJAX请求
        $.ajax({
            url: "${src}/add",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify(book),
            success: function (res) {
                console.log(res);
                // 请求成功处理逻辑
                alert("书籍添加成功！");
                // 关闭弹窗
                var modal = $("#exampleModal");
                modal.modal("hide");
                // 刷新页面
                location.reload();
            }
        });
    }

    /* 修改方法(回显数据) */
    function editModal(id, name, type, price) {
        // 将数据设置到弹窗表单中
        $("#id").val(id);
        $("#name_edit").val(name);
        $("#type_edit").val(type);
        $("#price_edit").val(price);

        // 显示修改弹窗
        $("#editModal").modal("show");
    }

    /*修改方法*/
    function edit() {
        // 获取表单数据
        var id = $("#id").val();
        var name = $("#name_edit").val();
        var type = $("#type_edit").val();
        var price = $("#price_edit").val();
        // 创建一个对象来存储表单数据
        var book = {
            id: id,
            bookname: name,
            booktype: type,
            price: price
        };
        // 发送AJAX请求
        $.ajax({
            url: "${src}/edit",
            type: "PUT",
            contentType: "application/json",
            data: JSON.stringify(book),
            success: function (res) {
                console.log(res);
                // 请求成功处理逻辑
                alert("书籍修改成功！");
                // 关闭弹窗
                var modal = $("#editModal");
                modal.modal("hide");
                // 刷新页面
                location.reload();
            }
        });
    }
</script>
</html>