java项目导入css或者js以及其它资源失效(没效果)的终极完美解决方案

java项目导入css或者js以及其它资源失效(没效果)的终极完美解决方案

昨天在写一个项目的时候,发现外部引入的.css .js等文件,相对路径的配置都是正确的,就是一直起不到效果,于是各种摸索,终于找到了一套完美的解决方案,来分享给大家。

1.首先最重要的是你一定要保证你的外部引入文件不能再WEB-INF目录下,这个目录是受保护的,所以如果你的外部引入文件再此目录下,请在WebContent中自己创建一个存放资源文件的目录

2.其次就是你的引入的相对路径一定要写正确,这个写错了,神仙也改不了你的错误,记住使用${pageContext.request.contextPath}来获取你的项目名,比如我在WebContet中创建了个存放登录资源的目录login,我要引用里面的文件,我就这么写 <link type="text/css" href="${pageContext.request.contextPath}/login/style.css" rel="stylesheet" />

3.如果以上两步都没有问题的话,那么接下来谈的就是重点的解决方案了,其实主要就是2个原因,一个是你的全站编码过滤器,一个是安全过滤器导致的。

我们先来讨论下编码过滤器,如果你的编码过滤器里,处理response的编码是这么写的,那么恭喜你中招了response.setContentType("text/html; charset="+encoding);

打开火狐浏览器(强烈推荐调试使用),可以看到如下提示调试结果可以发现提示样式表单是获取到了,但是被你的全站编码过滤器把"text"/css给强制转换成了"text"/html 导致其未被载入 ,解决的方法也很简单,在全站编码过滤器里,把response.setContentType("text/html; charset="+encoding); 改成

 response.setCharacterEncoding(encoding); 

下面来讨论下第二个原因,第二个原因很简单,就是你的css,js等外部引入文件,被你的网站安全过滤器filter给拦截了,只需要在过滤器里加入如下代码放行即可else if (path.contains(".css") || path.contains(".js") || path.contains(".gif")) { chain.doFilter(request, response); }

经过了以上步骤,你感觉都没问题了,返回刷新,发现还是不行,那就没错了,因为浏览器的缓存机制,F5的普通刷新,可能不能马上有效果,请按下你的ctrl+F5清除缓存刷新,哈哈哈哈哈,是不是发现,已经成功了呢!

(ps:第一篇文章,纪念一下很多东西还不太熟,以后遇到的问题也会发这种类似的文章的,大家哆哆支持- -)

猜你喜欢

转载自blog.csdn.net/weixin_45185577/article/details/106327880