Spring Boot Thymeleaf 页面布局 2-6

最新推荐文章于 2022-01-06 16:06:45 发布
最新推荐文章于 2022-01-06 16:06:45 发布
阅读量3.8k 收藏 1
点赞数 1
分类专栏： Spring Boot 文章标签： Thymeleaf  
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34227896/article/details/102650318
版权

页面布局就是对前端的页面进行划分区域，每个区域有不同的职责，布局是为了更好地重复利用前端代码，
避免大量重复性的劳动。在现有的前端系统中，页面布局成了前端开发最重要的工作之一， Thymeleaf 在设
计之初对页面布局就有考虑，通过 Thymeleaf 的相关语法可以很容易地实现对前端页面布局。

快速入手


Spring Boot 2.0 将布局单独提取了出来，需要单独引入依赖： thymeleaf-layout-dialect。
 

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>

首先定义一个代码⽚片段 copyright.html，放到 layout 目录下：
 

<footer th:fragment="copyright">
&copy; 2018
</footer>

th:fragment 定义一个代码片段，创建 index.html 在页面任何地方引入：

<body>
<div th:insert="layout/copyright :: copyright"></div>
<div th:replace="layout/copyright :: copyright"></div>
</body>

th:insert 和 th:replace 区别， insert 只是加载， replace 是替换。


Thymeleaf 3.0 推荐使用 th:insert 替换 2.0 的 th:replace。
layout 是文件夹地址， fileName 是文件名，语法这样写 layout/fileName:htmlhead，其中， htmlhead 是指定
义的代码片段，如 th:fragment="htmlhead"。

创建一个 indexController，指向 index.html：
 

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

在浏览器中输入网址， http://localhost:8080/index，可以看到以下信息：

© 2018
© 2018

可以看到两条版权信息，说明两种方式都可以引入版权页面信息，这就是 Thymeleaf 最简单的页面布局了。


Thymeleaf 的这种特性，可以让我们在开发过程中避免写很多重复的代码，如果页面有共同的头部、尾
部或者其他地⽅方均可采用这种技术。
 

片段表达式

Thymeleaf 3.0 引入了一种新型的表达式，作为一般 Thymeleaf 标准的语法表达式之一，它就是： 片段表达
式。
 

它使用类似 ~{commons::footer} 的语法，作用在 th:insert 和 th:replace 的内部。使⽤用片段表达式支持引入片
段的同时传参来构造目标页面，大大提高了代码复用的灵活度。接下来使用一个案例来介绍片段表达式的使用。
 

创建一个 base.html 基础页面，作为后续其他页面引入的模板。
 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
<title th:replace="${title}">comm title</title>
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/myapp.css}"
>
<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
<script type="text/javascript" th:src="@{/js/myapp.js}"></script>
<th:block th:replace="${links}" />
</head>
<body>
</body>
</html>

使用 th:fragment 创建了一段代码片段，命名为 common_header 并且支持传入两个参数 title 和 links，并且
指明了在页面中使用的位置：

  • <title th:replace="${title}">comm title</title> 在此位置插入传入的 title；
  • <th:block th:replace="${links}" /> 在此位置插入传入的 link， th:block 作为页面的自定义使用不会展示到页面中。

接下来创建一个 fragment.html 页面，来使用上面创建的 common_header 代码片段。
 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="base :: common_header(~{::title},~{::link})">
<title>Fragment - Page</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/cs/fragment.css}">
</head>
<body>
</body>
</html>

在 fragment.html 的页面中使用 th:replace 引入了 common_header 代码片段，并且在页面中添加了 title
和 link 作为参数传递到 common_header 页面中。

在 IndexController 中添加访问入口：
 

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

重新启动项目后，在浏览器中输入网址， http://localhost:8080/fragment，右键单击查看源代码，可以看到以
下信息：

 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Fragment - Page</title>
<link rel="stylesheet" type="text/css" media="all" href="/css/myapp.css">
<link rel="shortcut icon" href="/images/favicon.ico">
<script type="text/javascript" src="/js/myapp.js"></script>
<link rel="stylesheet" href="/css/bootstrap.min.css"><link rel="stylesheet" hr
ef="/cs/fragment.css">
</head>
<body>
</body>
</html>

说明 fragment.html 页面已经引入了 base.html 页面中的代码片段， fragment.html 页面中传入的 title 和 link已经成功地插入到了 base.html 页面的代码片段中。

这就是片段表达式最常用的使用方式之一，也是版本 3.0 针对页面布局推出的最新语法。因为这一点，许多
布局（或页面）技术在 Thymeleaf 3.0 中变得更容易使用。
 

页面布局

按照上面这个思路路很容易做页面布局，按照常用的框架模式，将页面分为头部、左侧菜单栏、尾部和中间的
展示区来做个示例：
 

在 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"></meta>
<title>footer</title>
</head>
<body>
<footer th:fragment="footer">
<h1>我是 尾部</h1>
</footer>
</body>
</html>

header.html：
 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>header</title>
</head>
<body>
<header th:fragment="header">
<h1>我是 头部</h1>
</header>
</body>
</html>

left.html：
 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>left</title>
</head>
<body>
<left th:fragment="left">
<h1>我是 左侧</h1>
</left>
</body>
</html>

templates 目录下新建 layout.html 页面内容如下：
 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultra
q.net.nz/web/thymeleaf/layout">
<head>
<meta charset="UTF-8"></meta>
<title>Layout</title>
</head>
<body>
<div >
<div th:replace="layout/header :: header"></div>
<div th:replace="layout/left :: left"></div>
<div layout:fragment="content" > content</div>
<div th:replace="layout/footer :: footer"></div>
</div>
</body>
</html>

引入布局的语法命名空间： xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"，使用 th:replace
的语法将网站的头部、尾部、左侧引入到页面中，同时定义了一个代码片段 content，可以作为后期页面正文的替换内容。
 

后端添加访问入口：
 

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

启动后访问地址： http://localhost:8080/layout，可以看到页面展示如下：
 

我是 头部
我是 左侧
content
我是 尾部

可以看出 layout.html 页面已经成功地引入了页面的头部、尾部、左侧。接下来以 layout.html 作为一个页面
模板，任何页面想使用此布局时，只需要替换中间的 content 模块即可，新建 home.html 来测试：
 

<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/
web/thymeleaf/layout" layout:decorate="layout">
<head>
<meta charset="UTF-8"></meta>
<title>Home</title>
</head>
<body>
<div layout:fragment="content" >
<h2>个性化的内容</h2>
</div>
</body>
</html>
  • <html> 标签中添加 layout:decorate="layout" 使用 layout.html 页面的布局。
  • <div layout:fragment="content" > 替换 layout.html 页面中的 content 代码片段。
  • layout:decorator 标签在 3.0 过期，推荐使用新的标签 layout:decorate 进行页面布局。

Controller 添加访问：
 

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

重启后，在浏览器中输入网址 http://localhost:8080/home，发现 home.html 页面已经采用了 layout.html 的页
面布局， content 部分的内容被替换为： “个性化的内容”，展示内容如下：
 

我是 头部
我是 左侧
个性化的内容
我是 尾部

这样其他页面如果都是类似的结构都可以采用这样的方式来使用。
采用页面模板布局的时候有两个关键设置：

  • 在模板页面定义需要替换的部分 layout:fragment="content"；
  • 在需要引入模板的页面头部写 layout:decorate="layout""，再修改 layout:fragment="content" 中的内容。

总结

通过本课的学习发现 Thymeleaf 对代码片段重复利利用、页面布局都有很好的支持， Thymeleaf 3.0 引入代码
片段语法更加方便布局技术的使用。 Thymeleaf 3.0 的页面布局技术，降低了后端开发人员学习页面布局的成本，使用页面布局技术后会高效地复用前端页面，减少了开发量、稳定前端页面结构。
点击这⾥下载源码

淹死的鱼pp
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Spring Boot】Thymeleaf模板引擎 — Thymeleaf页面布局
衍生星球的博客
08-08 766
熟悉Thymeleaf的语法和表达式后，后面开发起来会更加得心应手。接下来好好研究一下Thymeleaf如何实现完整的Web系统页面布局。
在Springboot项目中使用thymleaf和layout进行页面布局和局部刷新
KimiKudo的博客
07-31 4630
由于之前项目是Springboot+VUE,但是VUE对于IE8及以下的浏览器存在兼容问题,所以最近可能需要重新做前端项目,不再前后端分离,而是在springboot里全部完成,由于springboot2.0以上已不再支持jsp文件,所以使用HTML+JQuery来重写前端,后端也使用springboot返回页面.但是对于页面布局.嵌套.异步刷新等问题不太熟悉.最近又重新学了一下thymleaf,...
springboot2 thymeleaf 使用layout实现母版功能
weixin_33847182的博客
09-19 806
最近在学习springboot，继承母版可以复用我们公共的界面内容，很方便。但是，我在使用thymeleaf layout时遇到了坑，我网上找了好多都是比较老的版本，在新版本中不能正常使用了。最后花时间解决了，这里记录下来，以便帮助自己或其他人不要踩坑。thymeleaf在springboot1...
thymeleaf中layout:fragment的使用和布局
sddaaa的博客
05-27 2万+
我是用的spring boot 直接的构建的  所有的都是HTML5方式使用的 注意版本和依赖thymeleaf中layout:fragment的使用layout.html是布局文件 就是最外面通用一个只要理解了谁引用了谁就好了=================decorator方式是整个布局文件替换 不是片段替换=================index.html引用layout.html后 ...
Spring Boot2.0系列教程之模板引擎 Thymeleaf（四）
zjh_746140129的博客
07-30 1993
Spring Boot 推荐使用 Thymeleaf 来代替 JSP，Thymeleaf 模板到底是什么来头呢，下面我们来聊聊。 Thymeleaf 介绍 Thymeleaf 是一款用于渲染 XML/XHTML/HTML 5 内容的模板引擎。类似 JSP、Velocity、FreeMaker 等，它也可以轻易的与 Spring MVC 等 Web 框架进行集成作为 Web 应用的模板引擎。与其...
spring-boot html thymeleaf
03-07
在实际开发中，你可以创建一个简单的 Spring Boot 项目，引入 Thymeleaf 依赖，然后在控制器中编写逻辑，返回视图名，Thymeleaf 将自动处理模板和模型数据，生成动态 HTML 页面。这极大地提高了开发效率和代码的...
spring boot+thymeleaf+bootstrap实现后台管理系统界面
08-28
Spring Boot+Thymeleaf+Bootstrap实现后台管理系统界面 Spring Boot是一款基于Java的开源框架，旨在简化基于Spring的应用程序的开发过程。Thymeleaf是一个modern server-side Java模板引擎，能够将HTML、XML、TEXT...
spring boot+bootstrap+thymeleaf
04-10
Spring Boot、Bootstrap和Thymeleaf是现代Web开发中常用的技术栈，它们分别在不同的层面上解决了开发效率和用户体验的问题。下面将详细解释这三个技术及其整合应用。 **Spring Boot** Spring Boot是由Pivotal团队...
spring boot+thymeleaf项目实战
02-09
6. **国际化**：Spring Boot支持多种语言，Thymeleaf可以通过`th:text="#{message.key}"`来显示不同语言的消息。 7. **错误处理和模板布局**：学习如何使用Thymeleaf处理Spring MVC的模型错误，并创建可重用的布局...
spring boot+thymeleaf+bootstrap 简单实现后台管理系统界面（看评论酌情下载）
12-07
Spring Boot 提供了基础的框架结构和依赖管理，Thymeleaf 负责动态生成和渲染HTML页面，而Bootstrap 则用于设计和美化用户界面。 首先，我们需要在Spring Boot项目中引入Thymeleaf 和 Bootstrap 的依赖。这通常通过...
SpringBoot学习叁——themeleaf模版引擎之公共页面引用（菜单栏制作）
chenguixu的博客
06-24 1397
1、菜单栏抽取为单独页面 <html xmlns:th="http://www.thymeleaf.org"> 使用thymeleaf引擎解析页面 th:fragment="topBar" 声明为片段 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <...
thymeleaf中fragment 的layout布局
shanshan_blog的博客
03-24 1万+
1 配置 如果要引入fragment的layout，需要添加依赖： compile('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:1.2.1') 2 layout的引用 定义一个layout文件，目录为/WEB-INF/views/task/layout.html，内容如下： html> head>     title l
FragmentLayout
xiening的专栏
05-18 2060
 guide和refrence所给出的代码，apiDemo也有代码，但运行时出问题。重新改过。(Google也出问题啊）1.原文代码只有一个文件FragmentLayout.java,(Shakespeare.java是个数据文件)但注意到包含三个静态类，DetailsActivity.java,DetailsFragment.java,TitlesFragment.java。在竖直不然就Ti...
thymeleaf模版实现页面布局(layout)两种方法
热门推荐
Hylun的专栏
12-06 2万+
方法一： 使用thymeleaf的layout:fragment标签，布局页如下： html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"> head> meta http-equiv="Content-Type" content
thymeleaf的简单用法-布局标签
malimingwq的博客
02-09 2018
最近简单学习使用了thymeleaf模板引擎，现在把一些理解写出来，可能理解的很浅或者有偏差，希望读者理解，并评论对我指正，让我能够有所进步，并改正偏差。一.eclipse或myeclipse 设置HTML模板Window-&gt;Preferences-&gt;输入templates-&gt;选择HTML下的HTML Source 下的Templates-&gt;New-&gt;Name中填写t...
Layui实现点击左侧导航栏菜单，在右侧内容生成对应的目录页，可右键删除所有页
程序羊的博客
03-19 1854
在layui的后台管理页面上，通过jquery实现点击导航栏，呈现浏览器新打开页面的效果，并支持右键删除所有。详情请往下看。
thymeleaf 页面引用实现动态布局加载
风子杨的博客中心
02-11 5026
thymeleaf 页面引用实现动态布局加载 最近在学习使用 springboot+thymeleaf，在把基本的框架布局功能实现了之后，发现了一些新的问题，就是所有页面都是全加载，也就是说每个页面都要实现布局，真是费时又费力。介于之前的web开发经验，一般都是上左右的布局方式，对于一些小的信息化系统建设也是很方便的一说。 通过这几天不停的看资料（其实就是百度...
使用Thymeleaf设置导航栏选中后高亮
debugtoday的博客
01-06 916
1、首先引入JS，用#thisNav接收后台标记的字段，获取该页面的id，根据class="a-first"取到需高亮导航的id(此id需要根据后台字段获取th:data-id="${nav.id}")，逻辑：若该页面id与选中的导航id一致thisValue == item.dataset.id，则在class="a-first"这个class中追加一个selected样式 window.onload = function(){ var thisValue = document.querySe
自定义fragmentlayout
weixin_30660027的博客
05-07 176
一、抽取视图文件，实例化需要在xml文件中 先上效果图： 　　 1、 编写 xml布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="ht...
spring boot+thymeleaf实现拦截器
最新发布
05-24
好的，下面是使用Spring Boot和Thymeleaf实现拦截器的步骤： 1.创建一个拦截器类，该类需要实现HandlerInterceptor接口。在该类中，您可以实现三个方法：preHandle，postHandle和afterCompletion。这些方法分别在处理程序执行之前，之后和完成之后调用。 ```java import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.stereotype.Component; import org.springframework.web.servlet.HandlerInterceptor; import org.springframework.web.servlet.ModelAndView; @Component public class MyInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { // 在请求处理之前进行调用（Controller方法调用之前） System.out.println("请求处理之前调用……"); return true; // 如果返回false，则请求中断 } @Override public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception { // 请求处理之后进行调用，但是在视图被渲染之前（Controller方法调用之后） System.out.println("请求处理之后调用……"); } @Override public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception { // 在视图被渲染之后调用（主要用于资源清理工作） System.out.println("视图渲染之后调用……"); } } ``` 2.将拦截器注册到应用程序中。在Spring Boot应用程序中，您可以通过使用WebMvcConfigurerAdapter类来注册拦截器。在该类中，您可以重写addInterceptors方法，并将您的拦截器添加到拦截器链中。 ```java import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.InterceptorRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; @Configuration public class WebAppConfiguration extends WebMvcConfigurerAdapter { @Autowired private MyInterceptor myInterceptor; @Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(myInterceptor); } } ``` 3.使用Thymeleaf进行视图渲染。在您的控制器方法中，您可以返回一个包含视图名称和模型对象的ModelAndView对象。在视图中，您可以使用Thymeleaf模板来渲染HTML内容。在下面的示例中，我们将使用layout.html作为页面布局，并使用th:replace指令将内容注入到该布局中。 ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>My Page</title> </head> <body> <div th:replace="layout :: content"> <h1 th:text="${message}">Hello, World!</h1> </div> </body> </html> ``` 4.创建一个包含布局的Thymeleaf模板。在该模板中，您可以定义页面的基本结构和样式，并使用th:fragment指令定义页面的各个部分。在下面的示例中，我们将使用layout.html作为页面布局，并使用th:fragment指令定义页面的内容部分。 ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title th:text="${pageTitle}">My Site</title> </head> <body> <div th:fragment="content"></div> </body> </html> ``` 以上就是使用Spring Boot和Thymeleaf实现拦截器的步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值