【Spring Boot】Thymeleaf模板引擎 — Thymeleaf页面布局

Thymeleaf页面布局

熟悉Thymeleaf的语法和表达式后,后面开发起来会更加得心应手。接下来好好研究一下Thymeleaf如何实现完整的Web系统页面布局。

1.引入代码片段

在模板中经常希望包含来自其他模板页面的内容,如页脚、页眉、菜单等。为了做到这一点,Thymeleaf提供了th:fragment属性。下面通过在页面中添加标准的版权页脚的场景来演示如何引入代码片段。

步骤01 定义版权页脚代码片段。

在templates目录下创建版权模板页面footer.html,示例代码如下:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body><div th:fragment="copyright">&copy; 2020 The Thymeleaf footer</div>
</body>
</html>

在上面的示例中,我们创建了版权页面footer.html,使用th:fragment属性定义了一个代码片段,名为copyright。

步骤02 引入代码片段模板。

创建一个普通的模板页面layout.html。使用th:insert或th:replace属性引入之前定义的copyright版权页面,示例代码如下:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
<h1>Thymeleaf模板引擎</h1>
<h3>页面布局</h3>
<div th:insert="~{footer :: copyright}"></div>
</body>
</html>

在上面的示例中,在layout.html中通过th:insert引入先前定义的footer.html中的copyright代码片段,“~{footer :: copyright}”就是在当前模板页面引入的footer.html模板中的copyright片段。

步骤03 启动验证。

启动项目后,在浏览器中输入地址http://localhost:8080/layout,验证主页是否能正常引入footer.html代码片段,如图所示。

在这里插入图片描述
layout.html页面通过th:insert属性成功将footer页面的版权信息包含在主页中。

2.片段表达式语法规范

Thymeleaf片段表达式非常实用,可以实现模板页面的复用,避免相同内容需要修改多个页面的情况。

2.1 标记选择器

片段表达式的语法非常简单,其核心是标记选择器,由底层的AttoParser解析库定义,类似于XPath表达式或CSS选择器。片段表达式有以下3种不同的格式:

1)~{templatename::selector}:包含templatename和selector两个参数,其中templatename为页面模板的名称,selector为模板中定义的代码片段。例如上面示例中的“~{footer :: copyright}”就是在当前模板页面引入footer.html模板中的copyright片段。

2)~{templatename}:引入名为templatename的完整模板。

3)~{::selector}~{this::selector}:Thymeleaf支持从同一个模板插入一个片段,如果在当前的模板上找不到,将向最初处理的模板遍历,直到选择器匹配上对应的模板。

此外,标记选择器的模板名和选择器还可以包含条件判断或三目运算等其他表达式语法,比如:

<div th:insert="footer :: (${user.isAdmin}? #{footer.admin} : #{footer.normaluser})"></div>

通过判断后台用户是否是管理员从而引入相应的代码片段,实现管理员和普通用户的页面区分。

2.2 引用普通的模板

标记选择器非常强大,可以包含不使用任何th:fragment属性的片段,甚至可以是来自完全不了解Thymeleaf的不同应用程序的标记代码:

    <div id="copy-section">&copy; 2023 The Thymeleaf footer</div>

我们可以使用上面的片段,只需通过它的id属性引用,类似于CSS选择器:

<div th:insert="~{footer :: #copy-section}"></div>

2.3 th:insert、th:replace和th:include的区别

th:insert、th:replace和th:include的功能基本类似,三者之间的差异如下:

  • th:insert是最简单的,它简单地插入指定的片段作为其宿主标签的主体。
  • th:replace实际上用指定的片段替换它的主机标签。
  • th:include与th:insert类似,但它并不插入片段,只插入该片段的内容。

3.可参数化片段

Thymeleaf支持在th:fragment定义的片段中指定一组参数,这使得模板片段更像一个可重复调用的函数。通过不同的参数控制模板的显示,从而达到模板共用的效果。

下面用th:fragment定义的片段指定一组参数:

    <div th:fragment="frag(onevar, twovar)"><p th:text="${onevar} + '-' + ${twovar}">...</p></div>

定义的frag片段包含两个参数,不需要定义参数的类型。

使用th:insert或th:replace调用此片段时,需要传入两个参数:

    <div th:replace="::frag (${value1},${value2})">...</div><div th:replace="::frag (onevar=${value1},twovar=${value2})">...</div>

片段的参数传递与函数调用类似,通过传入的参数控制页面显示。

实战:实现页面整体布局

一般业务处理系统页面整体布局基本上固定的。常用的框架模式将页面分为头部、左侧菜单栏、尾部和中间的展示区等页面。我们可以使用Thymeleaf的代码片段功能,实现应用系统页面整体布局。

下面通过示例演示Thymeleaf如何实现页面整体布局。

步骤01 在templates/layout目录下新建footer.html、header.html、left.html等各区域模板页面。

footer.html的内容如下:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>footer</title>
</head>
<body><footer th:fragment="footer"><div style="position: fixed; bottom: 0px; background-color: green; width:100%"><h1 style="text-align:center">我是底部</h1></div></footer>
</body>
</html>

left.html的内容如下:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>left</title>
</head>
<body>
<left th:fragment="left"><div style="background-color: red; width:200px;height: 80vh"><h1 style="margin: 0;">我是左侧</h1></div>
</left>
</body>
</html>

header.html的内容如下:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>header</title>
</head>
<body>
<header th:fragment="header"><div style="background-color: blue; height: 100px"><h1 style="margin: 0;text-align: center;">我是头部</h1></div>
</header>
</body>
</html>

步骤02 在templates目录下新建index.html页面,内容如下:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Layout</title>
</head>
<body style="margin: 0px;"><div th:replace="layout/header :: header"></div><div th:replace="layout/left :: left"></div><div th:replace="layout/footer :: footer"></div>
</body>
</html>

在上面的示例中,我们在index.html页面中使用th:replace的语法将网站的头部、尾部、左侧引入页面中。

步骤03 在后端添加访问入口。

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

步骤04 运行验证。

前面3个步骤完成之后,启动后访问地址http://localhost:8080/layout/index,可以看到页面显示效果如图所示。

在这里插入图片描述

index.html页面已经成功地引入了页面的头部、尾部、左侧,实现了页面的整体布局。实际项目中以index.html为模板,任何页面使用此布局时,只需要替换中间的内容即可。

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

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

相关文章

基于java汽车销售分析与管理系统设计与实现

摘 要 计算机现在已成为人们办公和生活不可或缺的组成部分&#xff0c;在工作范畴计算机成熟运用大大提升了工作人员的工作效率&#xff0c;化繁为简&#xff0c;加速社会经济发展。在生活上&#xff0c;人们可以通过计算机互联网更快的了解到全球时事要闻、听到最新潮流音乐、…

以产品经理的角度去讲解原型图---会议OA项目

目录 一.前言 二.原型图 2.1 原型图是什么 3.1 原型图的作用 三.演示讲解 3.1 项目背景 3.2 项目介绍 3.2.1 会议管理&#xff08;会议的发起&#xff0c;通知&#xff09; 3.2.2 投票管理&#xff08;会议的流程重大决策记录&#xff09; 3.2.3 会议室管理 3.2.4 系统管…

Pytorch Tutorial【Chapter 1. Basic operation of tensor】

Pytorch Tutorial 文章目录 Pytorch TutorialChapter 1. Basic operation of tensorReference Chapter 1. Basic operation of tensor 本节介绍有关张量Tensor的基本操作 Tensor相当于numpy中的ndarrays 创建空Tensor和全零Tensor&#xff0c;torch.zeros(d0,d1)类似于numpy…

使用Beautiful Soup等三种方式定制Jmeter测试脚本

目录 背景介绍 实现思路 把脚本数据读出&#xff0c;使用正则表达式&#xff08;re库&#xff09;匹配关键数据进行修改 把脚本数据读出&#xff0c;使用BeautifulSoup的xml解析功能解析后修改 通过Beautiful Soup Beautiful Soup 具体实现 使用string.Template字符替换…

Air32 | 合宙Air001单片机内部FLASH读写示例

Air32 | 合宙Air001单片机内部FLASH读写示例 代码已经通过测试&#xff0c;开发环境KEIL-MDK 5.36。 测试代码 void FLASH_RdWrTest(void) {uint32_t Address;uint32_t PageReadBuffer[FLASH_PAGE_SIZE >> 2];uint32_t PageWriteBuffer[FLASH_PAGE_SIZE >> 2];mem…

b站视频标题的获取(xpath、jsonpath的一个简单应用)

目录 1.目的2.代码的演示 注&#xff1a;该篇文章为本人原创&#xff0c;由于本人学习有限&#xff0c;若有错误或者笔误或者有问题&#xff0c;欢迎大家进行批评指正&#xff0c;谢谢。 1.目的 在b站大学上&#xff0c;为了更好的写笔记&#xff0c;本人根据学到的Python(即Py…

springboot家政服务管理系统java家务保姆资源 jsp源代码mysql

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 springboot家政服务管理系统 系统1权限&#xff1a;管…

Qt项目的打包和依赖添加

windows打包方式 windeployqt 添加可执行文件的依赖关系 链接 注意&#xff1a;windeployqt并不会添加用户自定义的库&#xff0c;用户自定义生成的库需要用户自己加入&#xff1b; 先用windeployqt添加依赖关系&#xff0c;再用enigma virtual box打包。 enigma virtual …

挑战Open AI!!!马斯克宣布成立xAI.

北京时间7月13日凌晨&#xff0c;马斯克在Twitter上宣布&#xff1a;“xAI正式成立&#xff0c;去了解现实。”马斯克表示&#xff0c;推出xAI的原因是想要“了解宇宙的真实本质”。Ghat GPT横空出世已有半年&#xff0c;国内外“百模大战”愈演愈烈&#xff0c;AI大模型的现状…

Apache Tomcat 问题漏洞

Apache Tomcat 环境问题漏洞(CVE-2022-42252) Apache Tomcat 信息泄露漏洞(CVE-2023-28708) 建议直接升级tomcat的小版本&#xff0c;即就是升级到最新版本 注&#xff1a;跨版本升级请自行百度 下载同大版本最新的tomcat 下载地址&#xff1a;https://tomcat.apache.org/…

nginx部署以及反向代理多域名实现HTTPS访问

nginx部署以及反向代理多域名实现 1.nginx部署 1.1 编写nginx部署文件 docker-compose.yml version: 3 services: nginx:restart: always image: nginx:1.20container_name: nginx-mainports:- 80:80- 443:443volumes: # 基础配置- /opt/nginx_main/nginx-info/nginx.conf:/…

【C++】STL——stack和queue的模拟实现、空间适配器、deque的介绍、增删查改函数的简单实现

文章目录 1.deque的简单介绍2.模拟实现stack3.模拟实现queue 1.deque的简单介绍 deque的介绍文档 deque(双端队列)&#xff1a;是一种双开口的"连续"空间的数据结构&#xff0c;双开口的含义是&#xff1a;可以在头尾两端进行插入和删除操作&#xff0c;且时间复杂度…

ElastAlert通过飞书机器人发送报警通知

前言 公司采用ELK架构搜集业务系统的运行日志&#xff0c;以前开发人员只有在业务出现问题的时候&#xff0c;才会去kibana上进行日志搜索操作&#xff0c;每次都是被用户告知系统出问题了&#xff0c;这简直是被啪啪打脸~ 于是痛定思痛&#xff0c;决定主动出击&#xff0c;…

几种常用线程池的定义和不同点

常用线程池的定义和不同点 线程池是一种常用的多线程处理方式&#xff0c;它可以在需要时创建线程执行任务&#xff0c;并在任务完成后重复利用这些线程。线程池的主要作用是提高程序的性能和效率&#xff0c;减少线程创建和销毁的开销&#xff0c;避免线程过多导致系统资源的…

(树) 剑指 Offer 54. 二叉搜索树的第k大节点 ——【Leetcode每日一题】

❓剑指 Offer 54. 二叉搜索树的第k大节点 难度&#xff1a;简单 给定一棵二叉搜索树&#xff0c;请找出其中第 k 大的节点的值。 示例 1: 输入: root [3,1,4,null,2], k 13/ \1 4\2 输出: 4示例 2: 输入: root [5,3,6,2,4,null,null,1], k 35/ \3 6/ \2 4/1 输出…

Nacos安装(centos7)

安装版本2.0.2&#xff0c;下载地址 Release 2.0.2 (Jun 11th, 2021) alibaba/nacos GitHub 安装 启动 到bin目录下 sh startup.sh -m standalone 访问http://192.168.23.130:8848/nacos 输入nacos/nacos登入

opencv-32 图像平滑处理-高斯滤波cv2.GaussianBlur()

在进行均值滤波和方框滤波时&#xff0c;其邻域内每个像素的权重是相等的。在高斯滤波中&#xff0c;会将中心点的权重值加大&#xff0c;远离中心点的权重值减小&#xff0c;在此基础上计算邻域内各个像素值不同权重 的和。 基本原理 在高斯滤波中&#xff0c;卷积核中的值不…

研究人员发现特斯拉汽车能被越狱,可免费解锁付费功能

Bleeping Computer 网站披露&#xff0c;柏林工业大学&#xff08;Technical University of Berlin&#xff09;的研究人员开发出一种新技术&#xff0c;可以破解特斯拉近期推出所有车型上使用的基于 AMD 的信息娱乐系统&#xff0c;并使其运行包括付费项目在内的任何软件。 实…

Debezium系列之:深入理解信号Topic和状态通知Topic

Debezium系列之:深入理解信号Topic和状态通知Topic 一、需求背景二、相关技术博客三、设置信号Topic四、设置通知Topic五、增量快照状态分类六、触发开始增量快照的数据格式七、触发停止增量快照的数据格式八、触发暂停增量快照的数据格式九、触发恢复增量快照的数据格式十、查…

Power BI数据清洗建议方案

目录 一、背景 二、数据清洗的概念 三、Power BI 数据清洗的挑战 四、Power BI 数据清洗的建议方案