对于公共页面（导航栏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 350 两个数组的交集 II（二）

    350. 两个数组的交集 II 给定两个数组,编写一个函数来计算它们的交集. 示例 1: 输入: nums1 = [1,2,2,1], nums2 = [2,2] 输出: [2,2] 示例 2: 输入 ...

  2. Java实现LeetCode_0020_ValidParentheses

    package javaLeetCode.primary; import java.util.Scanner; import java.util.Stack; public class ValidPa ...

  3. python—模块与包

    模块: (一个.py文件就是一个模块module,模块就是一组功能的集合体,我们的程序可以导入模块来复用模块里的功能.) 模块分三种: 1.python标准库 2.第三方模块 3.应用程序自定义模块 ...

  4. idea 启动命令行的时候提示不能创建PTY

    问题描述: 昨天上午,凯哥还在好好的使用idea,中午的时候,360扫描,好像要升级还是要干嘛的,没细看,然后凯哥就点击确定.结果到下午使用idea的Terminal 命令行的时候提示,如下图错误: ...

  5. Burpsuite intruder模块 越过token进行爆破，包含靶场搭建

    安装靶场 链接:https://pan.baidu.com/s/19X0oC63oO2cQKK6UL5xgOw 提取码:yq7f 下载完成放入网站根目录 点击初始化安装 出现错误,进行跟踪 发现是数据 ...

  6. mysql中drop、delete、truncate的区别简述

    一.区别 1.去什么? truncate table 和 delete只删除数据(记录)不删除表的结构;drop语句将删除表的数据(记录)和表结构依赖的约束(constrain),触发器(trigge ...

  7. zabbix 监控进程,端口

    环境介绍 操作系统:centos 7.4 zabbix版本:zabbix server 3.4.7 客户端:zabbix-agent 3.4.7 监控进程:mysqld 监控端口:3306 tcp 进 ...

  8. @Component、@Service、@Controller、@Rrepository说明

    自己开发了一个股票智能分析软件,功能很强大,需要的点击下面的链接获取: https://www.cnblogs.com/bclshuai/p/11380657.html 1       Spring容 ...

  9. uniapp 基于 flyio 的 http 请求封装

    之前写请求都是用别人封装好的,直接 import request 完事,自己第一次写还是一头雾水,学习了一波搞清楚了些,可以写简单的封装了. 首先要搞清楚为什么封装请求,同其他的封装一样,我们把不同请 ...

  10. Jenkins入门教程（一）：Windos下Jenkins的安装教程

    Jenkins的安装教程 Jenkins安装前的准备 1.安装jenkins前首先确保你的电脑已经安装了JDK,由于jenkins是基于java开发的 JDK下载地址 2.下载jenkins的安装包 ...