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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/91339.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c# - - - 安装.net core sdk

如图&#xff0c;安装的是.Net Core 2.2版本 查看安装成功

【计算机网络】HTTPs 传输流程

HTTPS和HTTP的区别 1、HTTP协议传输的数据都是未加密的&#xff0c;是明文的&#xff0c;使用HTTP协议传输隐私信息非常不安 HTTPS协议是由SSLHTTP协议构建的可进行加密传输、身份认证的网络协议&#xff0c;要比http协议安全。 2、HTTPS协议需要到CA申请证书&#xff0c;一般…

NS2安装及入门实例——(ns2.35 / Ubuntu20.04)

文章目录 一、ns2安装1、更新系统源2、准备工作3、下载安装包4、安装5、问题① 问题1② 问题2③ 问题3 6、安装成功7、环境配置 二、nam安装1、安装2、问题 三、实例 一、ns2安装 1、更新系统源 sudo apt-get update sudo apt-get upgrade2、准备工作 sudo apt-get install …

Python Flask Web开发二:数据库创建和使用

前言 数据库在 Web 开发中起着至关重要的作用。它不仅提供了数据的持久化存储和管理功能&#xff0c;还支持数据的关联和连接&#xff0c;保证数据的一致性和安全性。通过合理地设计和使用数据库&#xff0c;开发人员可以构建强大、可靠的 Web 应用程序&#xff0c;满足用户的…

恒运资本:a股总市值怎么看?

跟着经济开展和金融商场的壮大&#xff0c;投资者越来越重视股市的行情。而对于A股商场来说&#xff0c;总市值是一个非常重要的目标。那么&#xff0c;A股总市值怎么看&#xff1f;以下是本文的详细剖析。 一、A股总市值界说与核算方法 首要需要了解A股总市值的界说和核算方法…

C++-list实现相关细节和问题

前言&#xff1a;C中的最后一个容器就是list&#xff0c;list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。list的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中通过指…

Qt 解析XML文件 QXmlStreamReader

如何使用QXmlStreamReader来解析格式良好的XML&#xff0c;Qt的文档中指出&#xff0c;它是一种更快、更方便的Qt自己的SAX解析器&#xff08;QXmlSimpleReader&#xff09;的替代&#xff0c;它也较快&#xff0c;在某种情况下&#xff0c;比DOM&#xff08;QDomDocument&…

【调试经验】Ubuntu22.04 安装和配置MySQL 8.0.34

本文共计1469字&#xff0c;预计阅读时间5分钟 在安装新版本的MySQL到电脑时&#xff0c;按着网上一些教程执行发现错误繁多&#xff0c;最后索性自己摸索并把服务装好了。自己也整理了一下在操作时的笔记&#xff0c;上传上来希望能帮助到大家。 目录 正文 安装MySQL 配置…

【24考研】:四川大学计算机学院23届874考研考情分析

四川大学计算机学院23届CS考研考情分析 作者&#xff1a;老李 往年都是大佬们做的&#xff0c; 今年正好自己在做公众号这一块&#xff0c; 因此不自量力的承担这个工作&#xff0c;顺便锻炼一点pandas包和plt包的应用能力。 所以形式上我也会仿照一下往年的大佬。 21考情&a…

IDEA全局统一设置Maven

原来每次打开新建的项目都需要经过 File-> Settings 重新配置maven&#xff0c;这样很不爽 然而经过 File-> New Projects Setup -> Settings for New Projects 后&#xff0c;再如上图配置后就全局设置好了

Matlab 基本教程

1 清空环境变量及命令 clear all % 清除Workspace 中的所有变量 clc % 清除Command Windows 中的所有命令 2 变量命令规则 &#xff08;1&#xff09;变量名长度不超过63位 &#xff08;2&#xff09;变量名以字母开头&#xff0c; 可以由字母、数字和下划线…

华为 连接OSPF和RIP网络---OSPF和RIP网络相互引入

路由引入简介 不同路由协议之间不能直接共享各自的路由信息&#xff0c;需要依靠配置路由的引入来实现。 获得路由信息一般有3种途径&#xff1a;直连网段、静态配置和路由协议。可以将通过这3种途径获得的路由信息引入到路由协议中&#xff0c;例如&#xff0c;把直连网段引入…