SpringBoot页⾯跳转访问css、js等静态资源引⽤⽆效解决
（六）
⽬录
别急着出去，耐⼼看⼀下对你有收获！今天是 2021年3⽉31⽇，这篇⽂章是2018-11-06发的，⾄今这篇⽂章也修改过多次。Thymeleaf 默认的静态⽂件路径是 resources 下的 static⽂件夹，页⾯路径是 templates，在 templates 中的页⾯⽂件如果要使⽤static 的css或js等⽂件，实际上使⽤ th:src="@{/.../...}"或th:href="@{/.../...}"，例如此处使⽤ static 下的 css⽂件夹中的
bootstrap.css，那么正确的操作姿势是：<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>，如此引⽤⽂件是不需要任何配置的。如果你需要⾃定义thymeleaf 的⽂件路径请继续向下阅读：
⼀、页⾯跳转
如果你还没有实现页⾯跳转，推荐阅读：
⼆、情况说明
SpringBoot整合thymeleaf实现的页⾯跳转，该页⾯引⽤外部css、js等静态资源。
如果你发现跳转页⾯成功之后出现下图情况，说明我等的就是你！我为了解决这个问题阅读了很多博客，这个问题我整整卡了⼀天的时间，终于有幸看到了⼀篇⽂章解决了我的问题，于是将解决⽅案总结了。
在浏览器中按了F12之后发现，根本就没有成功访问静态资源！但是你发现你在编辑器⾥⾯按着Ctrl⽤⿏标点的时候静态资源都能够访问。报些错误真的是花⾥胡哨的~  No mapping found for HTTP request with URI（静态资源路径）
三、问题解决⽅案
我⼀步⼀步的讲，如果您已经完成了某些步骤，可以直接跳过。
1、引⼊thymeleaf的依赖包
在l的⽂件中加⼊
<!-- 引⼊thymeleaf依赖包 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2、项⽬路径
thymeTestController⾥⾯写的是页⾯的跳转代码，跳转的是后台的登录界⾯。我还是把代码拿出来你参考下吧。（1）注意
SpringBoot会默认从下⾯的⽬录去读取：
（1） static⾥⾯放所有的静态资源。
（2） templates⾥⾯放页⾯，这⾥是templates -> admin，我是放在admin这个⽂件⾥⾯的。
TestController.java
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，代码如下：
import t.annotation.Configuration;
import org.springframework.fig.annotation.ResourceHandlerRegistry;
import org.springframework.fig.annotation.WebMvcConfigurationSupport;
@Configuration
public class UsingStaticController extends WebMvcConfigurationSupport {
public void addResourceHandlers(ResourceHandlerRegistry registry) {
// classpath表⽰在resource⽬录下，/static/** 表⽰在URL路径中访问如
// 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：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。