Spring Boot无法访问css,js等静态资源的问题

版权声明:本文为博主原创文章,若要转载请标注出处。 https://blog.csdn.net/yu514950381/article/details/78015088

前言

在intellij IDEA中编写了一个Spring Boot项目,运行时发现外链的css样式无法载入进页面,但是按住Ctrl又能点进css文件,这证明编辑器是能识别到这个css文件的。那么浏览器中的网页没有css样式的原因就在于spring boot对静态资源的访问方式了。网上有很多方法,但大多比较复杂,不适合我们这种基础程序员,因此我挑了一个比较实用和推荐的方法进行简化讲解,希望能帮到大家。如有错误,还请大神指出。

原理

spring boot框架里面包括了很多spring框架大家族的默认配置文件,其中的springmvc配置文件中有对静态资源的限制和拦截。如果静态文件没有放在框架默认的或者自己之后手动添加的扫描路径下,那么框架是会对这些静态资源进行拦截从而导致页面找不到相关的资源

解决方法

规范项目结构

使用官方默认的扫描路径。毕竟框架的好处就是严格按照要求搭好之后几乎所有的操作都会变得简单,一句话概括就是一劳永逸
spring boot对静态资源的默认扫描路径是:

classpath:/static
classpath:/public
classpath:/resources
classpath:/META-INF/resources

那么我们直接将静态资源放入下列路径即可(以static为例)

访问资源

在test.html代码中的地址为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="timg.jpg"/>
</body>
</html>

thymeleaf代码中的地址为

<img th:src="@{/timg.jpg}"/>

图片即可正确访问到
这里写图片描述


配置自定义映射路径

上面的方法的确是可行的,但是对于一个有强迫症的程序员来说,把css,js还有图片等文件放在一起可是会要了命的,大部分人的编程习惯是自己新建文件夹然后依次归类,比如这样

这里写图片描述

这个时候如果还是按照默认配置来,就会出现404的情况。

<img src="images/timg.jpg"/>

原因是因为默认路径虽然是在static下,但并没有包含static 下的各个文件夹,因此当我们把静态文件移入这些文件夹后,spring boot就不认识了。因此,为了让spring boot认识,我们需要添加一个配置类来把我们自己的路径添加进去,具体代码如下

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
public class MyConfig extends WebMvcConfigurerAdapter{

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
    }
}

较简单的方法

网上有一个简单的方法就是对spring-boot的配置文件application.properties文件直接进行修改。不过我个人不太推荐那些方法,重写后会破坏springboot本身的一些配置(虽然一般破坏之后反而更加方便规范了)。所以我们就尽量少用配置文件而改用java代码进行修改。
/static/** 的意思是将static下的所有文件夹及相关子文件夹都添加进扫描路径,那么修改之后重启项目就可以对static下的静态资源进行分类而且访问的时候不会出现404了。
修改的方法就是打开application.properties配置文件,在里面加一行spring.mvc.static-path-pattern=/static/**即可。

参考资料

http://blog.csdn.net/isea533/article/details/50412212
http://www.cnblogs.com/magicalSam/p/7189476.html

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试