41、springboot 整合 FreeMarker 模版技术

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
springboot整合Thymeleaf
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>