对于公共页面（导航栏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实现 LeetCode 394 字符串解码

    394. 字符串解码 给定一个经过编码的字符串,返回它解码后的字符串. 编码规则为: k[encoded_string],表示其中方括号内部的 encoded_string 正好重复 k 次.注意 k ...

  2. java中Dateformat类的详细使用（详解）

    DateFormat其本身是一个抽象类,SimpleDateFormat 类是DateFormat类的子类,一般情况下来讲DateFormat类很少会直接使用,而都使用SimpleDateFormat ...

  3. DMR windows 软件x64

    解压缩以后,默认使用串口4的USB热点板,用notepad2软件修改MMDVM.ini的呼号,ID,频率,串口号保存在打开DMR.bat即可,晶体有偏移的运行DMR500.bat https://sh ...

  4. struts用action的属性接收参数

    新建一个javaweb项目 在项目中加入Struts.xml( 选中项目右键MyEclipse-->project facets-->Struts2-->finish) 在src项目 ...

  5. （三）linux三剑客之sed

    一.sed是什么? 二.sed的工作原理? 三.sed的基本用法? 四.sed的进阶使用? 一.sed是什么? sed 就是一个非交互式流编译器: 交互式:文件缓存.人工编译.全局并行可逆 非交互式: ...

  6. SQL Msg 18054, Level 16, State 1

    今天接到一个看起来很简单的任务--修改数据库中的一项数据.听起来很简单吧. 在网上搜索了一下,很快就拼凑出了相应的 SQL 语句: UPDATE [suivi].[dbo].[numSerie]SET ...

  7. 匿名实现类&匿名对象

    学习过程中经常搞不清匿名类&匿名对象怎么用,今天就把常用的方式总结一遍. 1.创建了非匿名实现类的非匿名对象 //定义USB接口 interface USB{ void inputInofo( ...

  8. fiddler修改请求参数

    1.打开fiddler ,点击界面左侧左侧底部 2.此图标为before request请求(修改请求参数时,设置这个,可以修改请求参数) 3..再次点击该按钮,将图标切换到下图after respo ...

  9. UltraEdit常用技巧

    Tip 1: Alt+C 列模式可以说最初选择使用这个文本编辑软件,原因很简单,就是因为“她”具有列编辑模式.如果您还不知道什么是列编辑模式的话,我想您应该好好研究一下啦.这是一个超级“赞”的功能.在 ...

  10. 03.DRF-设计方法

    RESTful设计方法 1. 域名 应该尽量将API部署在专用域名之下. https://api.example.com 如果确定API很简单,不会有进一步扩展,可以考虑放在主域名下. https:/ ...