thymeleaf:在一个页面中引入其它的页面
这个在jsp中很容易实现,但是springBoot不推荐使用jsp,建议使用thymeleaf,下面是在thymeleaf中引入界面的方法
1.修改配置文件
spring:
mvc:
static-path-pattern: /static/**
thymeleaf:
prefix:
classpath: /templates/
在springBoot中,静态资源(如js,css,图片,静态html)都放在static当中,动态资源(如html)放在templates中。
这是我的目录结构

现在我要在index.html中引入main.html
2.修改main.html

用<div th:fragment="main"></div>把整个页面包裹起来,包裹的内容就是你要在index.html引入的部分
3.修改index.html,因为springBoot自动把static当作当前目录,所以要用../templates/shop/main而不是/templates/shop/main。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:replace="../templates/shop/main :: main"></div>
</body>
</html>
thymeleaf:在一个页面中引入其它的页面的更多相关文章
- 同一页面中引入多个JS库产生的冲突解决方案(转)
发生JS库冲突的主要原因:与jQuery库一样,许多JS库都使用‘$’符号作为其代号.因此在一个页面中引入多个JS库,并且使用‘$’作为代号时,程序不能识别其代表哪个库(这个是我自己的解释,但更深的原 ...
- 页面中引入js的几种方法
通常大家最为熟悉的是一下两种方法: 在页面中直接写入<script type="text/javascript">js代码</script>. 在页面中引入 ...
- 页面中引入mui 地址选择,点击页面中其他input时页面回到顶部
问题:在页面中引入mui地址选择时,点击页面中的input页面会滚到顶部(谷歌浏览器中出现的bug),在手机上点击input会出现跳动.开始的时候是想修改mui.min.js里的滚动事件,但是后来找到 ...
- JSP页面中引入另一个JSP页面
一个JSP页面中引入另一个JSP页面,相当于把另一个JSP页面的内容复制到对应位置: <%@include file="date.jsp" %> 一般页面的top和bo ...
- 在UTF-8页面中引入编码为GBK的JavaScript文件乱码问题了
原文地址:http://js8.in/2009/12/11/%E5%AF%B9%E5%BC%95%E7%94%A8%E5%A4%96%E9%83%A8javascript%E9%A1%B5%E9%9D ...
- https http 混合访问_https 页面中引入 http 资源的解决方式
解决android 5.0 webview不能加载http与https混合内容的问题 在使用WebView加载https资源文件时,如果认证证书不被Android认可,那么会出现无法成功加载对应资源问 ...
- 在html页面中引入另一个html页面
我们在使用html编写一个网站的时候,通常情况下头部和尾部是相同的,如果一个网站的每个页面都把这些代码写一遍,不仅浪费时间,还显得重复代码很多,所以此时把重复的页面单独摘出来,在用到的时候从外部直接引 ...
- jsp页面中引入文件路径问题的解决方案(使用request获取项目路径)【原创】
在项目页面中,总会引入一些js和css,相对路径or绝对路径的选择就显得至关重要了!下面是项目中遇到的问题和解决方案,做一下记录! 环境: myEclipse创建工程,使用jsp+css+js,项目目 ...
- Java项目在jsp页面中引入jquery框架的步骤
环境:在Java web项目中引入juqery框架 工具:MyEclipse8.5 [步骤如下] A:新建一个Java web项目TestJquery,在WebRoot目录下创建一个jquery文件 ...
随机推荐
- [LOJ 2133][UOJ 131][BZOJ 4199][NOI 2015]品酒大会
[LOJ 2133][UOJ 131][BZOJ 4199][NOI 2015]品酒大会 题意 给定一个长度为 \(n\) 的字符串 \(s\), 对于所有 \(r\in[1,n]\) 求出 \(s\ ...
- [SpingBoot guides系列翻译]Redis的消息订阅发布
Redis的消息 部分参考链接 原文 CountDownLatch 概述 目的 这节讲的是用Redis来实现消息的发布和订阅,这里会使用Spring Data Redis来完成. 这里会用到两个东西, ...
- npm install说明
一.常用简写 npm install=npm i.在git clone项目的时候,项目文件中并没有 node_modules文件夹,项目的依赖文件可能很大.直接执行,npm会根据package.jso ...
- 【mysql报错】MySQL host is blocked because of many connection errors; 解决方法
MySQL host is blocked because of many connection errors; 报错 环境 操作系统:Linux 数据库:mysql5.7.27 错误提示 jHost ...
- ts缓存批量下载合并
批量下载 curl -O https://cdn-host.media.yunxi.tv/recordM3u8/195820b37cec499da7a4b1b28269c7d0/tranbox/195 ...
- Kubernetes 安全概念详解
Kubernetes 安全框架 API 认证三关 • 访问K8S集群的资源需要过三关:认证.鉴权.准入控制• 普通用户若要安全访问集群API Server,往往需要证书.Token 或者用户名+密码 ...
- C# 获取社会统一信用代码
时间不多,废话少说: 网络请求代码如下: using System; using System.Collections.Generic; using System.Linq; using System ...
- PC端页面适应不同的分辨率的方法
原文链接:https://www.jianshu.com/p/4850a7b22228 一.根据不同的分辨率,加载不同的CSS样式文件 这个方法的思路是,分别针对800.1280.1440.1600. ...
- redis笔记3
redis持久化机制 redis提供了两种持久化策略 RDB RDB的持久化策略: 按照规则定时将内存的数据同步到磁盘 snapshot redis在指定的情况下会触发快照 自己配置的快照规则 sav ...
- 通过MES技术居然可以防止制造数据造假?
近些年来我们经历了太多制造数据造假事件,特别是前段时间曝出的医药制造事件更是将我们群众的愤怒值推到了最高点.不过我们最应当做的是,冷静下来,思考一下各行各业的我们是不是都该做些什么了?毕竟当下一个灾难 ...