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文件 ...
随机推荐
- MySQL实战45讲学习笔记:第三十四讲
一.本节概述 在实际生产中,关于 join 语句使用的问题,一般会集中在以下两类: 1. 我们 DBA 不让使用 join,使用 join 有什么问题呢?2. 如果有两个大小不同的表做 join,应该 ...
- 五、原子操作(CAS)
原子操作(CAS) 一.CAS(Compare And Set) Compare And Set(或Compare And Swap),CAS是解决多线程并行情况下使用锁造成性能损耗的一种机制,C ...
- HBuilder webApp开发(七)微信/QQ/新浪/腾讯微博分享
链接 https://blog.csdn.net/zhuming3834/article/details/51706256
- 一个动态构建 LambdaExpression Tree 的示例
直接贴代码了: public class ExpressionTreeBuildingSampleTwo : Sample { public override string Name { get; } ...
- Logstash:处理多个input
Logstash:处理多个input Logstash的整个pipleline分为三个部分: input插件:提取数据. 这可以来自日志文件,TCP或UDP侦听器,若干协议特定插件(如syslog或I ...
- mongodb复杂条件查询 (or与and)
分类专栏: mongodb 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/tjbsl/ ...
- Activex在没有电子秤api的情况下获取串口数据
大二做B/S架构的项目使用了安衡电子秤CHS-D+R和一款扫码枪,两个设备的串口使用一样,这款电子秤是相当的坑,没有开发的api,无奈只能自己开发Activex了,在B/S架构中进行引用Activex ...
- Scrapy 运行多个爬虫
本文所使用的 Scrapy 版本:Scrapy==1.8.0 一个 Scrapy 项目下可能会有多个爬虫,本文陈述两种情况: 多个爬虫 所有爬虫 显然,这两种情况并不一定是等同的.假设当前项目下有 3 ...
- git报错 - remote: HTTP Basic: Access denied
十年河东,十年河西,莫欺少年穷 学无止境,精益求精 git 拉取代码报: remote: HTTP Basic: Access denied,这是因为你的GIT密码修改后,需要重新认证授权,那么怎么操 ...
- SPC软控件提供商NWA的产品在各行业的应用(石油天然气行业)
Northwest Analytical (NWA)是全球领先的“工业4.0”制造分析SPC软件控件提供商.产品(包含: NWA Quality Analyst , NWA Focus EMI 和 N ...