对于公共页面（导航栏nav、页头head、页尾footer）的抽取有三种方式：
        1）基于iframe进行抽取，这种方式很有效，但比较老了，另外为了页面的自适应性，还得做不少工作；
        2）如果是jsp页面，则可以通过<%@ include file="head.jsp"%>进行抽取
        3）利用ajax进行页面加载，但有不少问题
       基于Springboot后台开发框架，JSP虽然还是可以用，但已经强烈推荐使用Thymeleaf模板了，这个时候问题就来了，Thymeleaf模板是html页面，又不想通过iframe或者ajax的方式，那我们该如何做？
       其实，Thymeleaf已经给我们提供了极好的方式，并且不仅仅是页面，还可以对样式CSS、Javascript进行抽取。
       使用Thymeleaf模板的 th:replace、th:include或th:insert属性，借助th:fragment属性来实现。
th:replace----不保留自己的主标签，保留th:fragment的主标签
th:include----保留自己的主标签，不保留th:fragment的主标签
th:insert----保留自己的主标签，也保留th:fragment的主标签
1、公共抽取部分的页面定义，如mycommon.html

说明：
1）<head th:fragment="commonHeader(title)">
<title th:text="${title}"></title>其中的${title}，这样页面的标题就灵活了。
2）一般在页面头部引入CSS，而在页尾引入JS，这样保证页面出现在用户面前样式就已经加载，提高用户体验
2、在具体页面中引入公共部分，如mydemo.html

说明：
th:replace，include，th:insert三者的使用形式皆如：th:include="模板路径::id"
    更详细的细节，大家可以可以参见视频：https://edu.51cto.com/sd/091c7 ，希望对大家有所帮助

如何针对Thymeleaf模板抽取公共页面的更多相关文章

  1. SpringBoot入门篇--使用Thymeleaf模板引擎进行页面的渲染

    在做WEB开发的时候,我们不可避免的就是在前端页面之间进行跳转,中间进行数据的查询等等操作.我们在使用SpringBoot之前包括我在内其实大部分都是用的是JSP页面,可以说使用的已经很熟悉.但是我们 ...

  2. spring boot用ModelAndView向Thymeleaf模板传参数

    最近在调试一个Spring Boot向Thymeleaf模板传参数的例子,但踩了很多坑,这里就把详细过程记录下来,以供大家参考. 先说下,这里遇到哪些坑呢? 1 我用的是IDEA社区版,这不支持JSP ...

  3. Thymeleaf静态资源引入方式及公共页面代码抽取

    静态资源引入 Thymeleaf模板引擎url问题,要用如下的方式写,确保在任何情况下都能访问到 <!-- Bootstrap core CSS --> <link href=&qu ...

  4. thymeleaf公共页面元素抽取

    1.抽取公共片段 使用thymeleaf的th:fragment为样抽取的公共片段命名, 如下把div标签命名为 copy,就可以获取到div整个里的内容<div th:fragment=&qu ...

  5. thymeleaf 模板使用 提取公共页面

    切记!!!thymeleaf模板的使用,姿势很重要!!!姿势不对,可能导致样式.js等的使用受到影响 前台开发中,由于页面目录结构不同,可能导致引入的公共页面中的的跳转路径在部分页面能用,部分页面不能 ...

  6. 11、SpringBoot-CRUD-thymeleaf公共页面元素抽取

    thymeleaf公共页面元素抽取 存在一种现象:两个文件的代码只有一部分代码不一样 其余的均相同,此时就可以提取公共的代码去简化开发 .抽取公共片段 <div th:fragment=&quo ...

  7. SpringBoot thymeleaf模板页面没提示，SpringBoot thymeleaf模板插件安装

    SpringBoot thymeleaf模板插件安装 SpringBoot thymeleaf模板Html页面没提示 SpringBoot  thymeleaf模板页面没提示 SpringBoot t ...

  8. 通过动态包含和Ajax机制抽取Web应用的公共页面

    在Java Web应用开发中,经常遇到的一种情况是,许多的页面中都包含着“公共页面”,这部分动态页面的特征是:访问量大,会带来较大的性能压力.功能设计上会动态地改变自身的元素.比如在登录前和登录后所展 ...

  9. Spring Boot (4) 静态页面和Thymeleaf模板

    静态页面 spring boot项目只有src目录,没有webapp目录,会将静态访问(html/图片等)映射到其自动配置的静态目录,如下 /static /public /resources /ME ...

随机推荐

  1. Java实现 蓝桥杯VIP 算法训练 P1102

    定义一个学生结构体类型student,包括4个字段,姓名.性别.年龄和成绩.然后在主函数中定义一个结构体数组(长度不超过1000), 并输入每个元素的值,程序使用冒泡排序法将学生按照成绩从小到大的顺序 ...

  2. Java实现 蓝桥杯 历届试题 国王的烦恼

    问题描述 C国由n个小岛组成,为了方便小岛之间联络,C国在小岛间建立了m座大桥,每座大桥连接两座小岛.两个小岛间可能存在多座桥连接.然而,由于海水冲刷,有一些大桥面临着不能使用的危险. 如果两个小岛间 ...

  3. java实现巧排扑克牌

    ** 巧排扑克牌** 小明刚上小学,学会了第一个扑克牌"魔术",到处给人表演.魔术的内容是这样的: 他手里握着一叠扑克牌:A,2,-J,Q,K 一共13张.他先自己精心设计它们的顺 ...

  4. Linux脚本安装包

    脚本安装包 并不是独立的软件安装包类型,常见安装的是源码包,是人为把安装过程写成了自动安装的脚本,只要执行脚本,定义简答的参数,就可以实现安装,非常类似于Windows下软件的安装方式. 安装过程(安 ...

  5. 通过SecureCRT向远程Linux主机上传和下载文件

    有时候直接在Linux服务器上通过 wget 或 curl 工具下截比较大的网络文件时会比较慢,这时我们通常会改用在Windows平台通过迅雷等更加现代化的下载功具下好目标文件(迅雷开会员才能更高速的 ...

  6. opencv 移植

    1.ubunut系统搭建opencv+python开发环境 1.1.ubuntu系统安装pip3工具 sudo apt-get install python3-pip //安装python模块安装工具 ...

  7. ubuntu12.04 empathy添加qq登陆

    1,

  8. 总结:修改相关postgres用户密码

    1.修改linux系统postgres用户的密码 PostgreSQL会创建一个默认的linux用户postgres,修改该用户密码的方法如下: 步骤一:删除用户postgres的密码 sudo  p ...

  9. String Problem（模板）【最短路】

    String Problem 题目链接(点击) Boy Valera likes strings. And even more he likes them, when they are identic ...

  10. Quartz.Net系列（二）：介绍、简单使用、对比Windows计划任务

    1.介绍 Quartz是功能强大的开源作业调度库,几乎可以集成到任何Java应用程序中-从最小的独立应用程序到最大的电子商务系统.Quartz可用于创建简单或复杂的计划,以执行数以万计,数以万计的工作 ...