SpringBoot页面跳转访问css、js等静态资源引用无效解决
SpringBoot页面跳转访问css、js等静态资源引用无效解决
原文链接:https://blog.csdn.net/qq_41647999/article/details/83788265
目录
一、页面跳转
二、情况说明
三、 问题解决方案
1、 引入thymeleaf的依赖包
2、 项目路径
注意
(1) 页面引用外部静态资源的方式
(2) 核心解决方案
一、页面跳转
如果你还没有实现页面跳转,推荐阅读:SpringBoot跳转渲染页面(详解)
二、情况说明
SpringBoot整合thymeleaf实现的页面跳转,该页面引用外部css、js等静态资源。
如果你发现跳转页面成功之后出现下图情况,说明我等的就是你!我为了解决这个问题阅读了很多博客,这个问题我整整卡了一天的时间,终于有幸看到了一篇文章解决了我的问题,于是将解决方案总结了。
在浏览器中按了F12之后发现,根本就没有成功访问静态资源!但是你发现你在编辑器里面按着Ctrl用鼠标点的时候静态资源都能够访问。报些错误真的是花里胡哨的~ No mapping found for HTTP request with URI(静态资源路径)
三、 问题解决方案
我一步一步的讲,如果您已经完成了某些步骤,可以直接跳过。
1、 引入thymeleaf的依赖包
在pom.xml的文件中加入
<!-- 引入thymeleaf依赖包 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2、 项目路径
TestController里面写的是页面的跳转代码,跳转的是后台的登录界面。我还是把代码拿出来你参考下吧。
(1) 注意
SpringBoot会默认从下面的目录去读取:
(1) static里面放所有的静态资源。
(2) templates里面放页面,这里是templates -> admin,我是放在admin这个文件里面的。
TestController.java
package com.demo.demo.Controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class TestController {
@RequestMapping(value = "/admin",method = RequestMethod.GET)
public String index(){
//后缀为.html的文件名
return "admin/index";
}
}
(2) 页面引用外部静态资源的方式
注意我这里的静态资源的路径,虽然编辑器找不到资源,但是页面是能够正确访问的。
(3) 核心解决方案
(单独内容,不想看可跳过此段括号。最近一次更新时间 2019-08-28,大家好,没想到这文章能解决很多人的问题,今天特地更新一下,根据我这一段时间的技术提升,有了新的解决方案。那就是引入css的方式改成Thymeleaf的方式,比如 <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/> 用了@接路径,css、js等放在resources的static下面。)
请看我的Controller里面有一个UsingStaticController。
你新建一个Java class,代码如下:
package com.demo.demo.Controller;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
@Configuration
public class UsingStaticController extends WebMvcConfigurationSupport {
public void addResourceHandlers(ResourceHandlerRegistry registry) {
// classpath表示在resource目录下,/static/** 表示在URL路径中访问如
// http://localhost:8080/static/ 即可访问到resource下的static目录
registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
}
}
再次重新运行项目,问题就解决了。
到此处,我以为我的问题解决了,其实登陆(index.html)成功之后是不能成功跳转到主页(admin.html)的。
如果你也遇到了相同的情况,请继续阅读以下解决方案。
看一下我是如何跳转主页的
index.html
这个涉及到thymeleaf表单提交的问题。因为这个页面引用的很多外部样式无法实现页面效果,所以只选取了关键代码。
th:action="@{/user}" 这个是提交给后台的URL地址,请看下方的Controller的代码。
<form th:action="@{/user}" method="post">
<div class="row cl">
<div class="formControls col-xs-8">
<inputtype="text" placeholder="账户">
</div>
</div>
<div class="row cl">
<div class="formControls col-xs-8">
<input type="password" placeholder="密码">
</div>
</div>
<div class="row cl">
<input type="submit" value=" 登 录 ">
<input type="reset"value=" 取 消 ">
</div>
</form>
PagesController.java代码
package com.demo.demo.Controller;
import com.demo.demo.Model.Message;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class PagesController {
@RequestMapping(value = "/admin",method = RequestMethod.GET)
public String index(){
//后缀为.html的文件名
return "admin/index";
}
//响应表单上的POST请求
@RequestMapping(value = "/user",method = RequestMethod.POST)
public String save(@ModelAttribute(value="message") Message message) {
return "admin/admin";
}
}
成功跳转到菜单之后,左侧边栏的li 大家应该都知道这都是html的页面。
在我的admin目录(目录截图请往上翻)里面有几个图表html:
这是因为,点击左侧边栏之后找不到页面造成的,也就是说你发送的请求没有得到响应。解决方案如下PagesController的代码更改。
package com.demo.demo.Controller;
import com.demo.demo.Model.Message;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class PagesController {
@GetMapping("/admin")
public String index(){
//后缀为.html的文件名
return "admin/index";
}
@GetMapping("/charts-1")
public String charts_1(){
return "admin/charts-1";
}
@GetMapping("/charts-2")
public String charts_2(){
return "admin/charts-2";
}
@GetMapping("/charts-3")
public String charts_3(){
return "admin/charts-3";
}
@GetMapping("/charts-4")
public String charts_4(){
return "admin/charts-4";
}
@GetMapping"/charts-5")
public String charts_5(){
return "admin/charts-5";
}
@GetMapping("/charts-6")
public String charts_6(){
return "admin/charts-6";
}
@GetMapping("/charts-7")
public String charts_7(){
return "admin/charts-7";
}
@GetMapping("/echarts")
public String echarts(){
return "admin/echarts";
}
@GetMapping("/admin-role")
public String admin_role(){
return "admin/admin-role";
}
@PostMapping("/user")
public String save(@ModelAttribute(value="message") Message message) {
return "admin/admin";
}
}
左侧边栏的页面显示的问题也就解决了!
————————————————
版权声明:本文为CSDN博主「MrDJun」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_41647999/article/details/83788265
SpringBoot页面跳转访问css、js等静态资源引用无效解决相关推荐
- SpringBoot 页面跳转后css和js效果都无效了
发现前端路径是"xxxx/xxxx.css",都改成"/xxxx/xxxx.css"或"~/xxxx/xxxx.css"就没问题了. 复习一 ...
- [html] 对于写一个页面布局,html/css/js这三者你是先写哪个后写哪个?
[html] 对于写一个页面布局,html/css/js这三者你是先写哪个后写哪个? 快捷键创建模板html+css写出结构写js做交互 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
- HTML期末作业课程设计期末大作业——体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码)...
HTML期末作业课程设计期末大作业--体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
- HTML期末作业课程设计期末大作业——体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码)
HTML期末作业课程设计期末大作业--体育排球5页面带注册HTML+CSS+JS(学生网页设计作业源码) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
- GET http://localhost:18086/css/all.css:浏览器无法访问项目下的静态资源
在做畅购商城项目时,浏览器无法访问项目下的静态资源,报错信息如下图所示.老师只提了一个可能原因:不能用相对路径href="./css/all.css",改为绝对路径href=& ...
- 运维实践-最新Nginx二进制构建编译lua-nginx-module动态链接Lua脚本访问Redis数据库读取静态资源隐式展现...
关注「WeiyiGeek」公众号 设为「特别关注」每天带你玩转网络安全运维.应用开发.物联网IOT学习! 本章目录: 0x0n 前言简述 知识引入 Lua模块指令阶段 0x01 部署环境 安装说明 安 ...
- 在JSP中常见问题,防止SpringMVC拦截器拦截js等静态资源文件的解决方案
在JSP中常见问题,防止SpringMVC拦截器拦截js等静态资源文件的解决方案 参考文章: (1)在JSP中常见问题,防止SpringMVC拦截器拦截js等静态资源文件的解决方案 (2)https: ...
- 配置nginx作为静态资源服务器 css,js,image等资源直接访问
1.传统的web项目,一般都将静态资源存放在 webroot 的目录下,这样做很方便获取静态资源,但是如果说web项目很大,用户很多,静态资源也很多时,服务器的性能 或许就会很低下了.这种情况下一般都 ...
- iframe子页面与父页面元素的访问以及js变量的访问
后台管理系统嵌套了很多iframe页面,想要取得父页面的元素,需要特殊的写法,总是记不住,写下来方便寻找 // eg:iframe页面找父页面的 #nav $('#nav',parent.docume ...
最新文章
- TCP/IP协议——ARP详解
- 计算机网络或计算机基础知识点滴1
- CVPR 2021 更好的Backbone,伯克利谷歌提出BoTNet,精度达84.7%
- python自学流程-python 学习流程
- linux平台及windows平台mysql重启方法
- OpenCV C++ 02 - Create a Blank Image Display
- BLE-NRF51822教程1-常用概念
- 「理解HTTP」之常见的状态码
- 微信小程序 ----- this.getOpenerEventChannel is not a function
- 《软件创富----共享软件创业之道》读后感
- 推荐十款很好用的HTML工具编写软件
- 【MySQL】轻松学习 唯一索引
- 大一自我总结[zz]
- ddl是什么意思网络语_跟随你大学的流行词语 DDL 你竟还不知道?
- input 获取焦点的情况
- 有关球 圆柱 圆锥 的计算
- 拒不协助执行会有什么后果?
- 优化产品交互逻辑来提升产品性能
- python中predict函数_sklearn中predict()与predict_proba()用法区别
- 你会用“お”和“ご”吗?
热门文章
- 2021物联网学习路线
- RedHat7配置IdM server
- Geronimo3.0中配置默认的security
- Android,下拉上二楼,demo演示
- A Scion Drives Toyota Back To Basics
- 信息学奥赛一本通:1219.马走日
- java socket 解析自定义包头
- 苹果海外现金量“超微软和高通之和”
- 最简单实现微信活动报名功能,只要将我的微信号拉入群(续)
- hiai和鸿蒙的关系,DevEco Studio使用指导专题( HiAI 第一期)-- 表格识别