thymeleaf导航栏---公共页面元素抽取

最新推荐文章于 2023-03-02 17:20:46 发布
最新推荐文章于 2023-03-02 17:20:46 发布
阅读量4.5k 收藏 7
点赞数
分类专栏： springboot 文章标签： springboot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaolulu916/article/details/90517113
版权

1.public.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>1</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/bootstrap-theme.css" />
</head>

<body>
<div class="container">
    <!--顶部导航-->
    <div class="row" >
        <div class="nav col-sm-12 "  th:fragment="public_top">
            <ul class="nav nav-tabs">
                <li>
                    <a>首页</a>
                </li>
                <li >
                    <a>水果</a>
                </li>
                <li class="nav-link active">
                    <a>自我介绍</a>
                </li>
                <li>
                    <a>fuxk</a>
                </li>
            </ul>
        </div>
    </div>
    <br />
    <!--内容-->
    <div class="row" >
        <div class="col-sm-2" >
            <ul class="nav nav-list" th:fragment="public_left">
                <li class="nav-header">List header</li>
                <li ><a  class="nav-link active" href="#" th:href="@{/index3}" th:class="${activeUri=='index3'?'nav-link active':'nav-link'}">Home</a></li>
                <li class="nav-link"><a href="#" th:href="@{/index2}" th:class="${activeUri=='index2'?'nav-link active':'nav-link'}">Library</a></li>
                <li><a class="nav-link" href="#" th:href="@{/index1}" th:class="${activeUri=='index1'?'nav-link active':'nav-link'}">Applications</a></li>
                <li class="nav-header">Another list header</li>
                <li><a href="#">Profile</a></li>
                <li class="active"><a href="#">Settings</a></li>
                <li class="divider"></li>
                <li><a href="#">Help</a></li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript" src="assets/js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</body>

</html>
</body>
</html>

2. index1.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" >
    <title>1</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/bootstrap-theme.css" />
</head>

<body>
<div class="container">
    <!--顶部导航-->
    <div class="row" th:insert="~{public :: public_top}">
    </div>
    <br />
    <!--内容-->
    <div class="row">
        <div class="col-sm-2" th:insert="~{public :: public_left}">
        </div>
        <div class="col-sm-10">
            <table class="table table-hover">
                <thead>
                <tr class="alert-info active table-">
                    <td><b>名称1</b></td>
                    <td><b>单价1</b></td>
                    <td><b>库存1</b></td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>番茄1</td>
                    <td>1.11</td>
                    <td>31</td>
                </tr>
                <tr>
                    <td>苹果1</td>
                    <td>2.51</td>
                    <td>101</td>
                </tr>
                <tr>
                    <td>哈密瓜</td>
                    <td>2.5</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>草莓</td>
                    <td>2.5</td>
                    <td>10</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript" src="assets/js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</body>

</html>
</body>
</html>

3. index2.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>1</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/bootstrap-theme.css" />
</head>

<body>
<div class="container">
    <!--顶部导航-->
    <div class="row" th:insert="~{public :: public_top}">
    </div>
    <br />
    <!--内容-->
    <div class="row">
        <div class="col-sm-2" th:insert="~{public :: public_left}">
        </div>
        <div class="col-sm-10">
            <table class="table table-hover">
                <thead>
                <tr class="alert-info active table-">
                    <td><b>名称2</b></td>
                    <td><b>单价2</b></td>
                    <td><b>库存2</b></td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>番茄2</td>
                    <td>2.22</td>
                    <td>21</td>
                </tr>
                <tr>
                    <td>苹果1</td>
                    <td>2.51</td>
                    <td>101</td>
                </tr>
                <tr>
                    <td>哈密瓜</td>
                    <td>2.5</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>草莓</td>
                    <td>2.5</td>
                    <td>10</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript" src="assets/js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</body>

</html>
</body>
</html>

4.Controller

package com.lulu.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HelloController {

    @RequestMapping("index")
    public String goMain() {

        return "index";
    }

    @RequestMapping("index1")
    public String goMain1() {
        return "index1";
    }

    @RequestMapping("index2")
    public String goMain2() {
        return "index2";
    }

    @RequestMapping("index3")
    public String goMain3() {
        return "index3";
    }
}

5. 运行效果：

鲸鱼姐
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用Thymeleaf模板封装页面公有部分CSS、JS失效，导航栏发生变化等问题
莫得感情的小猪头的博客
04-04 807
简述 一般来说，一个网站的各个网页中的导航栏，页尾，菜单等部分都是相同或相似的，可以将这部分代码提取成模板供其它页面使用。 要实现该功能，可以使用Thymeleaf模板的 th:replace、th:include或th:insert属性，借助th:fragment属性来实现。 属性 特点 th:replace 不保留自己的主标签，保留th:fragment的主标签 th:in...
SpringBoot代码复用——thymeleaf提取导航栏并插入或替换元素
z2431435的博客
04-07 1384
文章目录创建通用文件commons提取导航栏1.找到导航栏所在代码块2.把导航栏的前端代码块移入commons并命名3.在各个有需求的html文件中使用导航栏组件 创建通用文件commons 注意：commons和所有要用thymeleaf的html文件都应该设置引用： <!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd"> <html xmlns="http://www.w
thymeleaf
qq_38930240的博客
10-30 427
jsp不支持jar包 jsp Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用。它的功能特性如下： Spring MVC中@Controller中的方法可以直接返回模板名称，接下来Thymeleaf模板引擎会自动进行渲染 模板中的表达式支持Spring表达式语言（Spring EL) 表单支持，并兼容Spring MVC的数据绑定与验证机...
使用Thymeleaf设置导航栏选中后高亮
debugtoday的博客
01-06 914
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
Thymeleaf+MySQL实现一个两级树状目录首页导航栏
BaldwinM的博客
03-26 1109
第一次完成Web端开发，发现UI界面可以通过数据库实现UI的各用户的特性化设置。
thymeleaf-extras-java8time-3.0.4.RELEASE.jar
12-10
thymeleaf-extras-java8time-3.0.4.RELEASE.jar
thymeleaf-extras-java8time-3.0.1.RELEASE-API文档-中文版.zip
04-23
赠送jar包：thymeleaf-extras-java8time-3.0.1.RELEASE.jar； 赠送原API文档：thymeleaf-extras-java8time-3.0.1.RELEASE-javadoc.jar； 赠送源代码：thymeleaf-extras-java8time-3.0.1.RELEASE-sources.jar； 赠送...
thymeleaf-extras-java8time-3.0.4.RELEASE-API文档-中英对照版.zip
05-04
赠送jar包：thymeleaf-extras-java8time-3.0.4.RELEASE.jar； 赠送原API文档：thymeleaf-extras-java8time-3.0.4.RELEASE-javadoc.jar； 赠送源代码：thymeleaf-extras-java8time-3.0.4.RELEASE-sources.jar； 赠送...
thymeleaf-layout-dialect-1.2.4.jar
05-31
Thymeleaf 的一种方言，允许您使用布局/装饰器模板来设置内容样式。 nz.net.ultraq.thymeleaf/thymeleaf-layout-dialect/1.2.4/thymeleaf-layout-dialect-1.2.4.jar
thymeleaf模板实现页面动态配置
雅俗共赏的博客
03-02 783
一个后台管理系统，一个业务系统，在后台管理系统中配置某一个页面的各种数据数据方式，例如下拉框、单选框、输入框等，然后业务系统读取对应的配置，渲染页面。
多种左侧树形菜单导航
04-22
左侧树形菜单导航大全,提供多种左侧树形实例
thymeleaf 页面引用实现动态布局加载
风子杨的博客中心
02-11 5022
thymeleaf 页面引用实现动态布局加载 最近在学习使用 springboot+thymeleaf，在把基本的框架布局功能实现了之后，发现了一些新的问题，就是所有页面都是全加载，也就是说每个页面都要实现布局，真是费时又费力。介于之前的web开发经验，一般都是上左右的布局方式，对于一些小的信息化系统建设也是很方便的一说。 通过这几天不停的看资料（其实就是百度...
Thymeleaf通过fragment实现组件化
m0_63176399的博客
10-29 138
方式二： 在要提取的公共片段上添加能够唯一标识该标签的id或css等属性，之后通过 {模板名 :: 选择器} 的方式引用。 样例 需要抽取的公共片段component.html，我们可以将多个需要抽取的片段写在一个文件里面： 111 222 333 在页面中使用： 【一线大厂Java面试题解析+核心总结学习笔记+最新架构讲解视频+实战项目源码讲义】 浏览器打开：qq.cn.hn/FTf 免费领取 -8"> hello 结果： 注意：在调用fra
使用Thymeleaf模板封装页面公有部分（CSS，JS，导航栏等）
零零JA
09-10 603
使用Thymeleaf模板封装页面公有部分（CSS，JS，导航栏等） 简述 一般来说，一个网站的各个网页中的导航栏，页尾，菜单等部分都是相同或相似的，可以将这部分代码提取成模板供其它页面使用。 要实现该功能，可以使用Thymeleaf模板的 th:replace、th:include或th:insert属性，借助th:fragment属性来实现。 属性 特点 t...
一篇文章解决springboot+thymeleaf多语言国际化
热门推荐
caiycx的博客
07-17 3万+
1.前言 博主最近在写一个多语言的项目，因为之前没实际接触过多语言的设计，所以写这篇文章记录下这次多语言开发的过程。 博主的开发环境是：Springboot1.5.6 + thymeleaf，需要注意的是，springboot 1.x和2.x有比较大的差别。 文章实现的主要功能： springboot+thymeleaf最基本的国际化配置 自定义配置国际化，区域解析器 读取多个分类的国际化文件； 后台设置前端页面显示国际化信息的文件 利用拦截器和注解自动设置前端页面显示国际化信息的文件
Spring Boot学习记录 04SpringBoot Thymeleaf应用
柏竹的博客
09-20 210
SpringBoot Thymeleaf应用 Thymeleaf是用于 Web 和 独立环境 的Java模板引擎（类似于JSP） SpringBoot 为 Thymeleaf 提供一系列的默认配置，Thymeleaf依赖 一旦导入，项目会自动配置 thymeleaf优点： Thymeleaf 在有网络和无网络的环境下皆可运行，通过美工实现页面数据的动静结合 有网络则覆盖静态显示的内容数据 无网络则显示默认静态的内容数据 SpringBoot完美整合，springboot默认整合thymeleaf Spr
thymeleaf抽取公共页面
郝开的博客
11-25 1575
在开发Web网站的时候，HTML页面有很多是相同的，如果每一个页面都写一遍，不仅非常麻烦，而且非常不利于后期的更改。典型的如导航栏、页脚等，每个HTML页面几乎都一样。在Thymeleaf中我们通过如下的机制来抽取处公共的页面，并在需要的时候引入这个页面就可以了。
html怎样抽出头部导航页面,thymeleaf导航栏---公共页面元素抽取
weixin_32557787的博客
06-03 537
1.public.html Title 1 首页 水果 ...
thymeleaf-extras-springsecurity5和thymeleaf-layout-dialect
最新发布
04-04
thymeleaf-extras-springsecurity5是一个Thymeleaf与Spring Security集成的库，可以方便地在Thymeleaf中使用Spring Security的安全特性。它提供了一些额外的Thymeleaf标签，如sec:authorize和sec:authentication等，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值