41、springboot 整合 FreeMarker 模版技术

_L_J_H_

已于 2024-04-18 12:16:36 修改

阅读量518

点赞数 1

分类专栏： Spring Boot 系列文章标签： spring boot FreeMarker

于 2023-08-30 10:46:16 首次发布

本文链接：https://blog.csdn.net/weixin_44411039/article/details/132565871

版权

Spring Boot 系列专栏收录该内容

107 篇文章 7 订阅

订阅专栏

springboot 整合 FreeMarker 模版技术

整合FreeMarker的自动配置：

FreeMarkerAutoConfiguration：负责整合Spring容器和获取FreeMarkerProperties加载的配置信息。

FreeMarkerServletWebConfiguration/FreeMarkerReactiveWebConfiguration：整合FreeMarker的自动配置类。

FreeMarkerProperties类则对应application.properties文件中关于FreeMarker的配置属性，它负责读取该文件并设置FreeMarker。

添加整合FreeMarker的starter：

在pom.xml文件中导入spring-boot-starter-freemarker

如要使用Bootstrap，则添加org.webjars:boostrap

如要使用版本无关的WebJar，则添加org.webjars:webjars-locator-core依赖

配置文件配置 Freemarker 的属性

在这里插入图片描述

页面变化

FreeMarker需要在页面模板中添加自己的指令，而且表达式还要写在HTML元素中，例如下面代码

<div class=“alert alert-danger”>${error}</div>

${error}就写在了HTML的<div…/>元素内，这就对原有HTML页面形成了污染；

Thymeleaf则只需为HTML标签中添加th:xxx属性，在模板被解析之前，这些属性会被浏览器直接忽略，因此它不会对原有HTML页面形成污染。

代码演示：

拷贝上一份 springboot整合Thymeleaf 的代码，修改成 freemarker

pom.xml 和 compiler.xml 文件里面需要把名字换成新的项目名，my_freemarker.iml 文件只需要修改文件名

在这里插入图片描述

1、修改依赖–>添加整合FreeMarker的starter

在这里插入图片描述

2、修改配置文件，整合freemarker 的一些配置属性

在这里插入图片描述

3、前端页面名字的后缀都改成 .ftlh

引入js文件的写法改变
在这里插入图片描述
index页面

main页面
在这里插入图片描述
books页面

效果也一样能出来：
在这里插入图片描述

具体前端代码：

index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!--  引入css样式，用 link 元素  ,  stylesheet 样式单 , .gz表示是打包的，但是springboot会自动解包 -->
    <!--  引入 Bootstrap 的 Web Jar 中的 CSS 样式  -->
    <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css">

    <!--  jquery 放在 bootstrap 前面，因为 bootstrap 需要依赖到 jquery  -->
    <!--  引入 jQuery 的 Web Jar 中的 js 脚本  -->
    <script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>

    <!--  引入 Bootstrap 的 Web Jar 中的 js 脚本  -->
    <script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!--  引入 popper 的 Web Jar 中的 Js 脚本  -->
    <script type="text/javascript" src="/webjars/popper.js/umd/popper.min.js"></script>

</head>
<body>
<div class="container">

    <img src="/logo.jpg" width="100px" height="100px" class="rounded mx-auto d-block">

    <h4>用户登录</h4>
    <#if error?exists>
        <div class="alert alert-danger"}>${error}</div>
    </#if>

    <form method="post" action="/login">
        <div class="form-group row">
            <label for="username" class="col-sm-3 col-form-label">用户名：</label>
            <div class="col-sm-9">
                <input type="text" id="username" name="username"
                       class="form-control" placeholder="输入用户名">
            </div>
        </div>
        <div class="form-group row">
            <label for="password" class="col-sm-3 col-form-label">密码：</label>
            <div class="col-sm-9">
                <input type="password" id="password" name="password"
                       class="form-control" placeholder="输入密码">
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-6 text-right">
                <button type="submit" class="btn btn-primary">登录</button>
            </div>
            <div class="col-sm-6">
                <button type="reset" class="btn btn-danger">重设</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>

main

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!--  引入css样式，用 link 元素  ,  stylesheet 样式单 , .gz表示是打包的，但是springboot会自动解包 -->
    <!--  引入 Bootstrap 的 Web Jar 中的 CSS 样式  -->
    <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css">

    <!--  jquery 放在 bootstrap 前面，因为 bootstrap 需要依赖到 jquery  -->
    <!--  引入 jQuery 的 Web Jar 中的 js 脚本  -->
    <script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>

    <!--  引入 Bootstrap 的 Web Jar 中的 js 脚本  -->
    <script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!--  引入 popper 的 Web Jar 中的 Js 脚本  -->
    <script type="text/javascript" src="/webjars/popper.js/umd/popper.min.js"></script>


</head>
<body>
<div class="container">
    <img src="/logo.jpg" width="100px" height="100px" class="rounded mx-auto d-block">
    <div class="text-info">您好，<span>${Session.username}</span></div>
    <br>
    职位:
    <div>
        <#--  springboot规定获取Session对象首字母要大写  -->
        <#switch Session['role']>
            <#case 'admin'>
                <span>管理员</span>
                <#break>
            <#case 'manager'>
                <span>项目经理</span>
                <#break>
            <#default>
                <span>普通员工</span>
        </#switch>
    </div>
    <br>
    <br>
    <a href="/viewBooks" class="btn btn-info">查看图书列表</a>
</div>
</body>
</html>

books

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>testBranch</title>
    <!--  引入css样式，用 link 元素  ,  stylesheet 样式单 , .gz表示是打包的，但是springboot会自动解包 -->
    <!--  引入 Bootstrap 的 Web Jar 中的 CSS 样式  -->
    <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css">

    <!--  jquery 放在 bootstrap 前面，因为 bootstrap 需要依赖到 jquery  -->
    <!--  引入 jQuery 的 Web Jar 中的 js 脚本  -->
    <script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>

    <!--  引入 Bootstrap 的 Web Jar 中的 js 脚本  -->
    <script type="text/javascript" src="/webjars/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!--  引入 popper 的 Web Jar 中的 Js 脚本  -->
    <script type="text/javascript" src="/webjars/popper.js/umd/popper.min.js"></script>

</head>
<body>
<div class="container">
    <img src="/logo.jpg" width="100px" height="100px" class="rounded mx-auto d-block">
    <table class="table table-hover">
        <tr>
            <th>序号</th>
            <th>Id</th>
            <th>书名</th>
            <th>价格</th>
        </tr>
        <#list books  as book>
            <tr>
                <td>${book_index}</td>
                <td>${book.id}</td>
                <td>${book.name}</td>
                <td>${book.price}</td>
            </tr>
        </#list>
    </table>
</div>
</body>
</html>