IntelliJ IDEA+SpringBoot中静态资源访问路径陷阱:静态资源访问404

<h1>
    <span class="link_title"><a href="/zhoucheng05_13/article/details/78197766">
    IntelliJ IDEA+SpringBoot中静态资源访问路径陷阱:静态资源访问404        
       
    </a>
    </span>

     
</h1>
<div class="article_manage clearfix">
   
    
</div>    <style type="text/css">        
        .embody{
            padding:10px 10px 10px;
            margin:0 -20px;
            border-bottom:solid 1px #ededed;                
        }
        .embody_b{
            margin:0 ;
            padding:10px 0;
        }
        .embody .embody_t,.embody .embody_c{
            display: inline-block;
            margin-right:10px;
        }
        .embody_t{
            font-size: 12px;
            color:#999;
        }
        .embody_c{
            font-size: 12px;
        }
        .embody_c img,.embody_c em{
            display: inline-block;
            vertical-align: middle;               
        }
         .embody_c img{               
            width:30px;
            height:30px;
        }
        .embody_c em{
            margin: 0 20px 0 10px;
            color:#333;
            font-style: normal;
        }
</style>
<script type="text/javascript">
    $(function () {
        try
        {
            var lib = eval("("+$("#lib").attr("value")+")");
            var html = "";
            if (lib.err == 0) {
                $.each(lib.data, function (i) {
                    var obj = lib.data[i];
                    //html += '<img src="' + obj.logo + '"/>' + obj.name + "&nbsp;&nbsp;";
                    html += ' <a href="' + obj.url + '" target="_blank">';
                    html += ' <img src="' + obj.logo + '">';
                    html += ' <em><b>' + obj.name + '</b></em>';
                    html += ' </a>';
                });
                if (html != "") {
                    setTimeout(function () {
                        $("#lib").html(html);                      
                        $("#embody").show();
                    }, 100);
                }
            }      
        } catch (err)
        { }
        
    });
</script>

今天在使用SpringBoot时遇到静态资源无法访问的问题,百思不得其解,最终解决,记录下来。

问题描述

html页面中访问static文件夹下的index.css文件失败,浏览器调试模式下发现404。
项目目录结构如下:

这里写图片描述


HTML代码截图

这里写图片描述

路径正常,可以通过ctrl+鼠标左键直接访问。


但是当运行应用后,浏览器访问时却发现无法获取文件,,F12打开开发者调试工具查看结果如下:
这里写图片描述

百思不得其解。于是各种百度,最终在一篇讲解SpringBoot静态资源访问的博客中收到了启发,解决了问题。

解决方案

那篇博客中写道:

在SpringBoot中,默认配置的/**映射到/static。
静态资源映射还有一个配置选项,为了简单这里用.properties方式书写:

spring.mvc.static-path-pattern=/** # Path pattern used for static
resources.

这个配置会影响默认的/**,例如修改为/static/**后,只能映射如/static/js/sample.js这样的请求(修改前是/js/sample.js)。这个配置只能写一个值,不像大多数可以配置多个用逗号隔开的。

这句“(修改前是/js/sample.js)”给了我启发,于是我也将我的路径去掉前面的“/static”,测试,成功!
修改后HTML页面代码截图:
这里写图片描述

注意!这时IDEA高亮显示,表示IDEA找不到该路径!


运行结果截图:
这里写图片描述

此时获取index.css文件成功!并且路径是”/css/index.css”!

即,解决方案是:去掉路径前的“/static”!

总结

这次出错的原因主要在于自己对SpringBoot的静态资源映射不够了解。不过,之所以记录下这个问题,并分享给大家,有两点原因:

  1. 是因为在这个错误中IntelliJ IDEA起了助纣为虐的作用,错误的路径它显示为正确,而正确的路径它却高亮显示找不到,这个坑可能会误导很多人。
  2. 是因为SpringMVC中正确的路径是要加上“/static”的,之前用SpringMVC写项目时一直这么用的,存在定势思维。

关于SpringBoot的路径说明可以参考这篇博客:http://blog.csdn.net/catoop/article/details/50501706

<script type="text/javascript">
    function btndigga() {
        $(".csdn-tracking-statistics[data-mod='popu_222'] a").click();
    }
    function btnburya() {
        $(".csdn-tracking-statistics[data-mod='popu_223'] a").click();
    }
        </script>



<div style="clear:both; height:10px;"></div>

2017-01-24更新


这个问题这次碰上的情况是自己在写静态资源位置的时候配置了多个,其实默认只要配置一个就好了,可以向上面那样配置(直接配置/**),可以用下面的配置:
resources: # 指定静态资源的路径</br>
    static-locations: classpath:/static/</br>
  使用的时候不用加static路径即可
posted @ 2018-01-24 14:38  星朝  阅读(19168)  评论(0编辑  收藏  举报