SpringBoot2.1.X 访问静态资源（img、html、css、js）

淡淡的烟草味﹌ 2024-04-18 18:21 27阅读 0赞

**一、目录结构**  
src/main/java：存放代码  
src/main/resources  
static: 存放静态文件，比如 css、js、image, （访问方式 http://localhost:8080/js/main.js）  
templates:存放静态页面jsp,html,tpl  
config:存放配置文件,application.properties  
![20190910152144696.png][]

**二、如果要访问templates目录下的页面，那么就必须添加Springboot访问静态资源的Jar文件**

<dependency>
    		   <groupId>org.springframework.boot</groupId>
    		   <artifactId>spring-boot-starter-thymeleaf</artifactId>
    		</dependency>

注意：如果不引人这个依赖包，html文件应该放在默认加载文件夹里面，  
比如resources、static、public这个几个文件夹，才可以访问；

**启动主程序，运行效果**

![20190910152446998.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

再写个Controller访问(注意这是默认的返回视图的文件位置)

//注意不能用@RestController,这个返回的是JSON格式的,现在要返回的是HMTL。
    @Controller
    public class FilterController {
    
        @RequestMapping("/my/index")
        public Object index(){
            return "index";
        }
    }

HMTL页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="../css/index.css">
        <script src="../js/index.js"></script>
    </head>
    <body>
    <h1>how are you!</h1>
    
    <a href="javascript:fun()"><img src="../images/1.png" /></a>
    
    <hr/>
    <img src="../images/2.jpg"/>
    </body>
    
    </html>

启动：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1][]

三、如果在resouces目录下，创建自己的目录myjs时，那又如何访问这个目录下的文件呢？

![20190910153712815.png][]

默认配置 官网地址：https://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-developing-web-applications.html\#boot-features-spring-mvc-static-content

**application.properties文件中必须要写配置：**

spring.resources.static-locations = classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,classpath:/myjs/

记得在后面加上 ,classpath:/myjs/

**启动访问： http://localhost:8080/test.js**

![20190910153950637.png][]

[20190910152144696.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/4e750d6ecd33462387fe6d62f06ce457.png
[20190910152446998.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/4b661954ea95454d98cfd48e243edbae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/c6530a8392814ae8a9887e776d2750a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ce963cc712d7447fa73b19f8dea9e8d1.png
[20190910153712815.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/60a85dac614a439d8923449bbbcffca2.png
[20190910153950637.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8d2c6ec272bc48889683bbda900dd386.png