SpringBoot使用thymeleaf实现布局方案一,不懂就out了(循序渐进的超级详细讲解方式) - 第424篇

在搭建一个网页的时候,一般的会分为header、content、footer,也就是导航部分、中间的内容部分、以及底部。对于header和footer这两个部分一般的是很多页面公用的,那么这时候,我们会把公共的部分进行抽离出来,这就是所谓的thymeleaf布局。

       这一节就到大家来看看其中的一种布局方案。

一、准备工作

       在具体讲解布局方案之前,我们一起先来大家一个基本的页面,包含header、content以及footer。

       在具体的讲解之前,说明一下基本的环境:

(1)OS:Mac OS

(2)Spring Boot版本:2.6.7

(3)JDK:1.8

(4)thymeleaf:3.0

在使用idea构建的时候,默认选择的是11。现在都jdk十几了,我是不是有必要也升级到比较新的版本呢?亲爱的粉丝,你们觉得呢?

1.1 构建项目

       使用Idea工具构建一个spring boot项目,取名为springboot-thymeleaf-layout。

       啥,你说你不喜欢这个名称,那你随意,只要你开心,想取啥就取啥,O(∩_∩)O哈哈~

1.2 页面映射

       编写一个Controller,当访问/index的时候,访问index.html页面

package com.kfit.website.controller;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;/** * *  官网的控制器 * * @author 悟纤「公众号SpringBoot」 * @date 2022-04-23 * @slogan 大道至简 悟在天成 */@Controllerpublic class WebsiteController {    /**     * 跳转到首页页面     * @return     */    @RequestMapping(value = {"/index","/"})    public String index(){        return "/index";    }}

1.3 index.html页面

       接下来就是页面了,在resources/templates先创建index.html:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <!-- 导航部分 -->    <header style="text-align: center;height: 40px;background: cadetblue;"> 首页 | 产品 | 关于我们 </header>    <!-- 内容部分 -->    <div  style="text-align: center;;height: 150px;">内容部分</div>    <!-- 顶部部分 -->    <footer style="text-align: center;;height: 40px;background: #2e2e41;color:white;">@版权所有 公众号SpringBoot</footer></body></html>

说明:在实际中,样式部分以及前端页面有前端工程师进行编写,这里仅仅是示例。当然你如果你也会前端技术的话,那么你就是别人家的孩子了——全栈架构师,牛牪犇逼。

1.4 启动测试

       启动应用访问地址:

http://127.0.0.1:8080/index

二、使用include/replace/insert进行布局

       在前端的<header>、<footer>是写在了index.html中,我们紧接着编写product.html,aboutus.html会发现它们也需要<header>、<footer>,而且基本上是大同小异,如果非得说有区别的话,那就是当前页面的的时候,可能会高亮。

       那么我们就得思考,这样子的话<header>、<footer>就应该抽离出来变成公共的部分,当你在开发的时候,到这一步就能想到后面发生的很多步,以此来进行设计,这个就是架构,一不小心你还在开发工程师的时候,就拥有了架构思维。

       那么公共部分怎么抽离出来呢,这就是本节的重点th:include和th:replace。

2.1 抽离出来header和footer

       首先将header和footer抽离出来,定义两个页面header和footer。

       对应的common/header.html代码:

<!-- 导航部分 --><header style="text-align: center;height: 40px;background: cadetblue;"> 首页 | 产品 | 关于我们 </header>

2.2 使用include/replace引入

       接下来就是使用th:include/th:replace引入header.html和footer.html。

       对于th:include/th:replace有什么区别呢?

(1)th:include:引入子模块的children,依然保留父模块的tag。加载模板的内容:读取加载节点的内容(不含节点名称),替换div内容

(2)th:replace:引入子模块的所有,不保留父模块的tag。替换当前标签为模板中的标签,加载的节点会整个替换掉加载他的div

       先看下th:include的方式,在index.html的代码就会变成:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <header th:include="common/header.html"></header>    <!-- 内容部分 -->    <div  style="text-align: center;;height: 150px;">内容部分</div>    <footer th:include="common/footer.html"></footer></body></html>

       运行效果是一样的,主要看下th:include生成的源码:

依然保留父模块的tag<header>。加载模板的内容:读取加载节点的内容(不含节点名称),替换div内容

              接下来看下th:replace的方式,在index.html的代码就会变成:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <header th:replace="common/header.html"></header>    <!-- 内容部分 -->    <div  style="text-align: center;;height: 150px;">内容部分</div>    <footer th:replace="common/footer.html"></footer></body></html>

       运行效果是一样的,主要看下th:replace生成的源码:

       不保留父模块的tag<header>。替换当前标签为模板中的标签,加载的节点会整个替换掉加载他的div

2.3 thymleaf3.0的insert

       Thymeleaf 3.0 之后不再推荐使⽤ th:include.

l  th:insert:将被引用的模板片段插⼊到自己的标签体中

l  th:replace:将被引用的模板片段替换掉自己

l  th:include:类似于 th:insert,⽽不是插⼊⽚段,它只插⼊此⽚段的内容。

看下insert生成的效果:



       可以看到这里的效果和th:include很类似,暂时看不出来区别。

2.4 th:fragment代码片段加载

       对于header和footer可以单独一个页面,也可以在同一个页面,那么这时候,怎么确定要加载哪一部分呢?th:fragment就派上用场了。fragment有碎片; 片段之意,也就是定义一段代码碎片标识。

       首先定义common.html,包含header.html和footer.html的代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <!-- 导航部分 -->    <header th:fragment="header" style="text-align: center;height: 40px;background: cadetblue;"> 首页 | 产品 | 关于我们 </header>    <!-- 顶部部分 -->    <footer th:fragment="footer" style="text-align: center;;height: 40px;background: #2e2e41;color:white;">@版权所有 公众号SpringBoot</footer></body></html>

说明:这里定义了代码片段header和footer,通过th:fragment进行指定。

       仅紧着看下index.html的代码,也可以新建一个index2.html进行测试:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <header th:insert="common/common::header"></header>    <!-- 内容部分 -->    <div  style="text-align: center;;height: 150px;">内容部分</div>    <footer th:insert="common/common::footer"></footer></body></html>

       使用th:insert生成的源码:

       使用th:include生成的源码:

       <header标签的样式不见了,那么效果就会变成:

使用th:replace生成的源码:

       从这里就可以看出th:insert和th:include的区别了?具体区别,自己仔细观察生成的源码,自行总结下。

       到这里,我先说明一下,大部分情况下建议使用th:replace,可以看出生成的代码干净利落,不出现多余的父类标签。当然如果你的父类标签有样式的时候,那么就使用th:insert。

2.5 当前页面公用部分引入

       在一个页面中,也会出现有些部分的代码样式是一样的,你可以把这部分叫做模板。

       那么当前页面的样式如何引入呢?小子们上代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <header th:replace="common/common::header"></header>    <!-- 内容部分 -->    <div  style="text-align: center;height: 150px;">内容部分</div>    <div th:include="::#pageCommon"></div>    <footer th:replace="common/common::footer"></footer><template id="pageCommon">    <div style="text-align: center;">页面公用部分</div></template></body></html>

说明:

(1)使用::#pageCommon,元素选择器的方式就可以引入了。

(2)<template>标签:标记用作容纳页面加载时对用户隐藏的 HTML 内容的容器。如果您有一些需要重复使用的 HTML 代码,则可以使用 <template> 标记。

       效果:

此时生成的源代码:

       这里就不能使用th:insert和th:replace了,看下生成的源码:

       看源码会发现,此时<template>节点也被携带过来了,由于<template>隐藏特性,内容根本不会显示出来:

       有人会问,我就是想喜欢th:replace,我们老大说只能使用th:replace,那么此时怎么破呢?这个也很好破,只需要稍微修改一个地方即可:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <header th:replace="common/common::header"></header>    <!-- 内容部分 -->    <div  style="text-align: center;height: 150px;">内容部分</div>    <div th:replace="::#pageCommon"></div>    <footer th:replace="common/common::footer"></footer><template>    <div id="pageCommon" style="text-align: center;">页面公用部分</div></template></body></html>

       细心的网页肯定发现了,我这里这是把id移动到了内部div上,这时候就可以使用th:replace了,看下生成的源码:

       但是这里会引发出来一个新的问题,什么问题呐?我们在一开始说到到,对于<template>是页面的公共内容,那么很显然会被多处引入,而这里的div的id为pageCommon,很显然要对这个元素操作的时候就麻烦了。

       那么针对这种情况怎么破呢?很简单,这里提供关键词:选择器。

2.6 参数传递

       很多时候,我们的common.html也会有一些不一样的地方,比如首页激活的时候,会多出来一个class属性,那么一方面可以根据页面地址的不同进行条件的判断,另外一方面就是是否在引入代码的时候,是否可以引入参数呢?

       需要先修改common.html,当然也可以复制出来一份common2.html,允许参数的传递:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <!-- 导航部分 -->    <header th:fragment="header(param1,param2)" style="text-align: center;height: 40px;background: cadetblue;">        首页 | 产品 | 关于我们 - <span th:text="${param1} +'--'+ ${param2}"></span>    </header>    <!-- 顶部部分 -->    <footer th:fragment="footer" style="text-align: center;;height: 40px;background: #2e2e41;color:white;">@版权所有 公众号SpringBoot</footer></body></html>

       然后修改index.html进行参数传递,也可以复制出来一份index3.html:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <header th:replace="common/common2::header('/index.html',1000)"></header>    <!-- 内容部分 -->    <div  style="text-align: center;height: 150px;">内容部分</div>    <footer th:replace="common/common2::footer"></footer></body></html>

       效果:

       可以获取到参数之后,那么就可以根据这些参数进行一些特殊的处理了。

总结

       最后和大家总结下:

(1)布局方案th:include/th:replace/th:insert,其中include在thymeaf在3.0之后就不推荐使用了。

(2)代码片段th:fragment,在一个页面可以定义多段代码片段,以此通过th:replace=“common:: fragmentId”的方式引入不通过的代码片段。

(3)参数的传递:在使用th:fragment的时候,可以接一个参数列表。

       这节就先到这里,对于th:include/th:replace/th:insert或者thymeleaf的使用你还有其它的疑问吗?请留言!







购买完整视频,请前往:http://www.mark-to-win.com/TeacherV2.html?id=287