解决SpringBoot页面跳转无法访问静态资源的问题
初学SpringBoot,写项目的时候遇到了问题,原本的页面是这样的
但启动项目后是这样的
这是因为thymeleaf中引入静态资源及模板需要使用到 th:xxx 属性,否则无法在动态资源中访问静态资源。
记录一下解决方案。
访问css
需要用到 th:href 来引入css资源,格式为 th:href = “@{文件路径}”
如
<link rel="stylesheet" href="css/jquery-ui.min.css" th:href="@{/css/jquery-ui.min.css}" />
访问js
需要用到 th:src 来引入js资源,格式为 th:src = “@{文件路径}”
如
<script src="js/jquery.js" th:src="@{/js/jquery.js}"></script>
这里如果项目结构是这样:
那么写法上不需要像静态页面那样引入
include页面
当要把页面拆分为模板,使用include方式(html中为jquary.load方式)引入时,需要使用
th:include=“要引入的html文件名::html中th:fragment属性中的值”
<div id="pageTop" >
<header class="am-topbar am-topbar-inverse" th:include="topbar::topbarNav"></header>
</div>
<div class="super-bar">
<div id="pageLeft" >
<div class="left-sidebar" th:include="leftsider::leftSiderNav"></div>
</div>
<div id="pageMain" >
<div class="main-content" th:include="maincontent::mainContentNav"></div>
</div>
</div>
如th:include=“topbar::topbarNav”,即引用了topbar.html页面的某个标签
注意!!!如上图,topbar.html使用了th:fragment标签引入到index.html页面后,它的class属性不会随着过去(但它的子元素的不会受到影响),需要在index所引用的位置添加相应的class
解决SpringBoot页面跳转无法访问静态资源的问题的更多相关文章
- Springboot访问静态资源&WebJars&图标&欢迎页面
目录 概述 1.访问WebJar资源 2.访问静态资源 3.favicon.ico图标 4.欢迎页面 概述 使用Springboot进行web开发时,boot底层实际用的就是springmvc,项目中 ...
- Spring MVC前台使用html页面作为视图,配置静态资源后Controller控制器不起作用的解决办法
1.Spring MVC搭建项目的时候,想使用html页面作为前端的视图,你会发现html页面不能访问,原因是由于Spring拦截器将其拦截寻找控制器的缘故,解决办法就是配置静态资源: <mvc ...
- nodejs 构建本地web测试服务器 以及 解决访问静态资源的问题!
直接打开html文件,是以file:///方式打开的,这种方式很多时候会遇到跨域的问题,因此我们一般会搭建一个简易的本地服务器,来运行测试页面. 一.构建静态服务器 1.使用express模块 建立个 ...
- springboot 2.X 在访问静态资源的的时候出现404的问题
通过idea快速搭建一个springboot项目: springboot版本2.1.6 在网上看的资料,springboot静态资源访问如下: "classpath:/META‐INF/re ...
- 【SpringBoot】06.SpringBoot访问静态资源
SpringBoot访问静态资源 1.SpringBoot从classpath/static的目录 目录名称必须是static 启动项目,访问http://localhost:8080/0101.jp ...
- 用node.js express设置路径后 子路径下的页面访问静态资源路径出问题
在routes/news_mian.js 设置了访问news_main.html 的路径 '/',通知设置一个访问news-page.html的子路径'/newspage'子路径.但是在访问loacl ...
- django 不能访问静态资源的解决办法
最近在中文win10下使用python的django搭建web测试服务器,发现一个诡异的现象,正常配置好django的模型,视图和模板, 1.setting.py内容如下: ""& ...
- SpringBoot学习5:访问静态资源
springboot默认从项目的resources里面的static目录下或者webapp目录下访问静态资源 方式一:在resources下新建static文件(文件名必须是static) 在浏览器中 ...
- springBoot怎样访问静态资源?+静态资源简介
1.静态资源 怎样通过浏览器访问静态资源? 注意:不需要加static目录.因为只是告诉springboot目录,而不是静态资源路劲. 这时访问路径就需要加上/static
随机推荐
- http连接,缓存,cookie,重定向,代理
早期的HTTP协议使用短连接,收到响应后就立即关闭连接,效率很低: HTTP/1.1默认启用长连接,在一个连接上收发多个请求响应,提高了传输效率: 服务器会发送“Connection: ...
- 第【7】章: 数递归、DFS、剪枝、回溯等问题 学习报告
(7.2)节: 递归问题 1.题干: 递归方便表达,但是性能上消耗过多 1.有个小孩正在上楼梯,楼梯有n阶台阶,小孩一次可以上1阶.2阶.3阶. 请实现一个方法,计算小孩有多少种上楼的方式. ...
- python可变与不可变数据类型+深浅拷贝
转自:https://www.cnblogs.com/miaomiaokaixin/p/11497813.html 一:学习内容 python3中六种数据类型 python赋值 python浅拷贝 p ...
- Centos7安装Docker1.9.1
1.先检查是否安装旧版本docker [root@registry ~]# rpm -qa|grep docker 我这里没有安装,如果安装,请rpm -e 卸载2.编辑docker.repo文件,写 ...
- 动态页面技术(EL/JSTL)
EL技术 EL 表达式概述 EL(Express Lanuage)表达式可以嵌入在jsp页面内部,减少jsp脚本的编写,EL出现的目的是要替代jsp页面中脚本(java代码)的编写. EL从域中取出数 ...
- 手写Vuex源码
Vuex原理解析 Vuex是基于Vue的响应式原理基础,所以无法拿出来单独使用,必须在Vue的基础之上使用. 1.Vuex使用相关解析 main.js import store form './s ...
- A - A Simple Problem with Integers (线段树的区间修改与区间查询)
You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. One type of op ...
- PHP 超级全局变量讲解
PHP 超级全局变量 超级全局变量在PHP 4.1.0之后被启用, 是PHP系统中自带的变量,在一个脚本的全部作用域中都可用. PHP 超级全局变量 PHP中预定义了几个超级全局变量(superglo ...
- luogu P3645 [APIO2015]雅加达的摩天楼 分块 根号分治
LINK:雅加达的摩天楼 容易想到设\(f_{i,j}\)表示第i个\(doge\)在第j层楼的最小步数. 转移显然是bfs.值得一提的是把初始某层的\(doge\)加入队列 然后转移边权全为1不需要 ...
- Spring 参数注入
一个(类)Bean可能包含多种属性,这些属性怎么配置??? 见下: 用People Dog Cat Tiger Panda五个类来学习一些常用的=_= 重点在XML <!--基本类型注入- ...