SpringBoot之静态资源的访问与管理

简介: SpringBoot之静态资源的访问与管理

1.静态资源目录


只要静态资源放在类路径下,如项目中:在原本resources目录下面的/static目录在我们创建的springboot项目就有,或者是我们自己在resources下面创建的/public目录,或者是在原本的resources目录下自己自己创建的/resources目录,又或者是在原本resources目录下自己创建的/META-INF/resources目录。这些目录都是静态资源目录。


b6c48493c2464cfd8b6a8c87c9f386b0.png


下面我们在里面分别放入静态资源(这里放入不同的图片)来做测试。


c3b135183702413299e03343f1a82c98.png

aedb7367f9384d97808cd7bc851e6f84.png


cf255a7fec344de1a1ba60f6893911b0.png


会发现访问这四个目录下存放的图片我们都是能够正常地访问到的。(上面只演示了2个)。


我们通过访问 当前项目根路径/ + 静态资源名 就能访问到里面存放的静态资源。这个根目录/就是我们项目原本的resources目录等其他上面我们说的那些目录。SpringBoot默认将我们的静态资源目录映射为/**。


2.静态资源访问前缀


我们先来写一个Controller,继续来学习。


package com.example.demo01.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class HelloController {
    @RequestMapping("/1.png")
    public String hello(){
        return "aaa";
    }
}


上面我们请求方法的mapping我写为1.png,这时就就有一个问题值得我们去思考了。我们访问/1.png的时候,究竟访问返回的是aaa这个字符传还是1.png这张图片呢?我们不妨运行来做一个测试。


1bef69f7dfb64e86a50a853179c3b08a.png


会发现他返回的其实是aaa,而不是这张图片了。


原理: 请求进来,先去找Controller看能不能处理。不能处理的所有请求又都交给静态资源处理器。静态资源也找不到则响应404页面


我们一般希望所有的静态资源的访问路径都有一个前缀,可以通过在application.properties配置文件中添加如下的配置来实现:


spring.mvc.static-path-pattern=/res/**


此时,当我们访问静态资源时,就要加上/res的前缀才能进行访问了:


b3f6881601034f158d8b58357a17aa8c.png


这还没有完呢,springboot还支持我们更改我们的静态资源的默认存放路径,我们对配置文件添加一条配置:


spring.mvc.static-path-pattern=/res/**
spring.web.resources.static-locations=classpath:/haha


此时,我们重新运行项目,访问前目录存放的静态资源就会发现访问不了了。


我们把一张图片放到创建的haha文件夹中,重新运行:


1660caa69ae34205b1109a7d68991862.png


3.对webjar的支持


WebJars是一个很神奇的东西,可以让大家以jar包的形式来使用前端的各种框架、组件。WebJars是将客户端(浏览器)资源(JavaScript,Css等)打成jar包文件,以对资源进行统一依赖管理。WebJars的jar包部署在Maven中央仓库上。 因为我们在开发Java web项目的时候会使用像Maven,Gradle等构建工具以实现对jar包版本依赖管理,以及项目的自动化管理,但是对于JavaScript,Css等前端资源包,我们只能采用拷贝到webapp目录下的手工方式,这样做就无法对这些资源进行依赖管理。而且容易导致文件混乱、版本不一致等问题。那么WebJars就提供给我们这些前端资源的jar包形式,我们就可以进行 依赖管理 。


有一个专门的网站http://www.webjars.org/,我们可以到这个网站上找到自己需要的资源,在自己的工程中添加入maven依赖,即可直接使用这些资源了。


下面简单的来介绍一下webjar的基本使用:


(1) 在maven中央仓库中搜索我们需要的webjar,如jquery


e93b72dc395e42219c6d31e412de00c8.png


(2)然后在pom.xml中添加依赖:


<!-- https://mvnrepository.com/artifact/org.webjars/jquery -->
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.6.0</version>
</dependency>


a7df8b68a5944dfe852c6eb33e244e1f.png


然后我们就可以在浏览器中访问/webjars/jquery/3.6.0/jquery.js 就可以访问我们的webjars的资源了。


eef303666b494278b7aea25d2981b863.png


(这里给运行没有反应的各位提一点建议,就是把target目录删掉然后重新运行)


4.自定义index欢迎页


静态资源路径下index.html ,由于我们上面配置了默认的静态资源路径为classpath:/haha ,所以我们要在haha目录下面创建index.html。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo01</title>
</head>
<body>
<h1>害恶细君!</h1>
</body>
</html>


浏览器可以访问:


aa80a9f3171e4be394e6b2189022ad07.png


上面我们配置了静态资源的前缀和默认路径,所以访问时要加上/res/index.html才能访问,并且index.html还必需得放在我们定义的haha目录下。


如果我们把配置文件的这两行配置去掉的话,就得在原本springboot默认的静态资源目录中存放index.html。


之后我们运行http://localhost:8080直接就能访问到index.html了:


20f754bb98e84201b31e61dc8d61d0b0.png


这里我就要总结一下注意点了:


静态资源路径下index.html ,可以配置静态资源的存放路径,但是不可以配置静态资源的访问前缀,否则导致index.html不能被默认访问。


5.自定义favicon


这个favicon就是我们网站的小图标。我们的网站也可以自定义这样得一个小图标。


下面具体来演示如何使用:


(1)我们先把百度的favicon.ico图标给爬下来,然后放到我们的静态资源目录下面,就可以了。(注意:图标必须叫favicon.ico)


(2)重新运行项目,重新打开浏览器。


200127e5b95540e1b8ce954d848388a8.png

相关文章
|
21天前
|
JSON JavaScript 前端开发
springboot中使用knife4j访问接口文档的一系列问题
本文介绍了在Spring Boot项目中使用Knife4j访问接口文档时遇到的一系列问题及其解决方案。作者首先介绍了自己是一名自学前端的大一学生,熟悉JavaScript和Vue,正在向全栈方向发展。接着详细说明了如何解决Swagger请求404错误,包括升级Knife4j依赖、替换Swagger 2注解为Swagger 3注解以及修改配置类中的代码。最后,针对报JS错误的问题,提供了删除消息转换器代码的解决方法。希望这些内容能对读者有所帮助。
|
3月前
|
Java Spring
springboot静态资源目录访问,及自定义静态资源路径,index页面的访问
本文介绍了Spring Boot中静态资源的访问位置、如何进行静态资源访问测试、自定义静态资源路径和静态资源请求映射,以及如何处理自定义静态资源映射对index页面访问的影响。提供了两种解决方案:取消自定义静态资源映射或编写Controller来截获index.html的请求并重定向。
springboot静态资源目录访问,及自定义静态资源路径,index页面的访问
|
29天前
|
JavaScript 前端开发 Java
SpringBoot_web开发-webjars&静态资源映射规则
https://www.91chuli.com/ 举例:jquery前端框架
17 0
|
2月前
|
前端开发 Java
学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例
文章介绍了如何使用SpringBoot创建简单的后端服务器来处理HTTP请求,包括建立连接、编写Controller处理请求,并返回响应给前端或网址。
56 0
学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue个人健康管理网站设计和实现(源码+LW+部署讲解)
基于SpringBoot+Vue个人健康管理网站设计和实现(源码+LW+部署讲解)
76 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物饲养管理APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物饲养管理APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
4月前
|
Java Spring
Spring Boot实战:静态资源无法访问
Spring Boot实战:静态资源无法访问
72 0
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的二手家电管理平台的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的二手家电管理平台的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的个人健康管理网站的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的个人健康管理网站的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物饲养管理APP附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物饲养管理APP附带文章源码部署视频讲解等
34 1