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>

原文地址:https://www.cnblogs.com/rao11/p/12051591.html

时间: 2024-10-11 06:07:10

thymeleaf:在一个页面中引入其它的页面的相关文章

页面中引入带中文的JS文件乱码问题

1. WebConfig: ? 1 <globalization requestEncoding="gb2312" responseEncoding="gb2312" fileEncoding="gb2312"/> 2.<META http-equiv="content-type" content="text/html; charset=gb2312"> 3.<script t

页面中引入js的几种方法

通常大家最为熟悉的是一下两种方法: 在页面中直接写入<script type="text/javascript">js代码</script>. 在页面中引入外部文件<script src="xx.js"></script>. 下面再介绍几种页面引入js的代码: 在js中引入外部js,通过document.wirite("scr"+"ipt src='xx.js'></scr&q

JSP页面中引入另一个JSP页面

一个JSP页面中引入另一个JSP页面,相当于把另一个JSP页面的内容复制到对应位置: <%@include file="date.jsp" %> 一般页面的top和bottom固定的时候可以用这种方式 原文地址:https://www.cnblogs.com/suhfj-825/p/8214929.html

Java项目在jsp页面中引入jquery框架的步骤

环境:在Java  web项目中引入juqery框架 工具:MyEclipse8.5 [步骤如下] A:新建一个Java web项目TestJquery,在WebRoot目录下创建一个jquery文件夹 B:下载jquery-1.8.3.min.js放入jquery文件夹中 C:创建jsp页面 <%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%&g

ckeditor4.x操作之在页面中引入(一)

一.使用方法:1.在页面<head>中引入ckeditor核心文件ckeditor.js <script src="ckeditor/ckeditor.js"></script> 2.在使用编辑器的地方插入HTML控件<textarea> <textarea class="ckeditor"></textarea> 3.将相应的控件替换成编辑器代码 4.配置编辑器 ckeditor的配置都集中在

iframe的跨域高度自适应(通过跨域页面中嵌套本域页面)

实习不久接到一个任务,在网页中嵌套另一个工程的网页.本以为这是轻而易举的一件事情,结果被测试姐姐折腾得够呛.多次和我谈心说到这个高度固定导致iframe出现滚动条有多么不好看,对于工程整体的影响有多么恶劣.因为跨域的原因,这个需求被拖了许久,真是很痛苦的一件事.最终在我离开公司之前搞定了这个单. 这里就把我的研究过程写下来以供大家参考. 首先需要了解一下何为同域,何为跨域: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名

Vue ---在for循环修改页面中某个值,页面没有及时刷新问题(使用this.$forceUpdate()解决)

最近使用vue开发时,在一个函数中使用for循环,改变了页面中的值,在函数中查看是修改成功的,但是页面中没有及时刷新. 解决方法: 运用this.$forceUpdate()强制刷新. export default { data() { return { dataList:[], }; }, methods: { getData() { var _this = this; var dataList = []; dataList = response.data.data; for(var i=0;

https 页面中引入 http 资源的解决方式

今天在做echart地图页面的时候,碰到一个小问题,页面报错如下: 原因是我在github-page的页面上,请求了一个http协议的jq库,但是我的github是基于https协议的,这显然是协议不同导致的报错.怎么解决呢?我在segmentfault上查了一下,有如下方法: 相对协议 什么是相对协议呢? 简而言之,就是将URL的协议(http.https)去掉,只保留//及后面的内容.这样,在使用https的网站中,浏览器会通过https请求URL,否则就通过http发送请求. <img s

html页面中引入html

我们写页面通常会遇到这种情况,一个模块很多页面都用到,那么我们为了方便就会单独写到一个页面,然后引入进去,我知道的有三种: 1.用标签<iframe></iframe> 例: <iframe align="center" height="570" src="lib/sideBarL.html" frameborder="no" border="0" marginwidth=&q