springboot中无法访问static下静态资源的问题，如static/js/jquery.js无法访问的问题

￡神魔★判官ぃ 2023-02-11 07:19 1阅读 0赞

thymeleaf中引入外部JS的方式：  
(1)在static下新建文件夹放入外部JS文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70]  
(2)static下的静态资源访问规则可能受application.properties中spring.mvc.static-path-pattern和spring.resources.static-locations有关！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70 1]  
(3)注意(2)中的配置文件不生效时，和MyWebMVCConfig.java中对静态资源的重定位有关系！

package com.steno.propertiestest.common;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    @Configuration
    public class MyWebMVCConfig implements WebMvcConfigurer { 
    
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) { 
            System.out.println("==========静态资源拦截！============");
            //将所有/static/** 访问都映射到classpath:/static/ 目录下
            registry.addResourceHandler("/static/**/").addResourceLocations("classpath:/static/");
        }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70 2]  
(4)thymeleaf中使用th:src="@\{/js/jquery.js\}"引入外部JS文件

<!doctype html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8"/>
        <title>springboot-thymeleaf</title>
        
        <script type="text/javascript" th:src="@{/js/jQuery-2.1.4.min.js}"></script>
        <script>
            function testRestGetPage(){ 
                jQuery.ajax({ 
                    url : "/project/books?page=0&size=2&sort=bookid,desc",
                    data : "",
                    type : "get",
                    datatype : "json",
                    success : function(result){ 
                        console.log(result);
                    }
                });
            }
        </script>
    </head>
    
    <body>
        
        <p th:text="'hello, ' + ${book.author} + '的' + ${book.name} + '!'" />
        <button type="button" onclick="testRestGetPage()">查询分页按钮</button>
    </body>
    </html>

(5)访问JS或者直接访问页面查看加载信息  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70 3]  
直接访问JS：  
http://localhost:8081/project/js/jQuery-2.1.4.min.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70 4]  
http://localhost:8081/project/static/js/jQuery-2.1.4.min.js访问：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200522104341756.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200522104542846.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200522104722466.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200522105006777.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200522105026619.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200522105057117.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA0NTk3Mzg=,size_16,color_FFFFFF,t_70