解决springmvc请求丢失js等静态资源的方法

桃扇骨 2022-06-10 06:18 250阅读 0赞

最近做的一个项目，要求所有页面中的静态资源全部使用服务器项目的绝对路径，所以将页面中的静态资源都改成如下情况：

![Center][]

Web.xml中springmvc的配置代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> &lt;servlet&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;servlet-name&gt;springMVC&lt;/servlet-name&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;servlet-class&gt;org.springframework.web.servlet.DispatcherServlet&lt;/servlet-class&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;init-param&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;param-name&gt;contextConfigLocation&lt;/param-name&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;param-value&gt;classpath:springmvc-servlet.xml&lt;/param-value&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/init-param&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;load-on-startup&gt;1&lt;/load-on-startup&gt; &nbsp;&nbsp;&nbsp; &lt;/servlet&gt; &nbsp;&nbsp;&nbsp; &lt;servlet-mapping&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;servlet-name&gt;springMVC&lt;/servlet-name&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;url-pattern&gt;/&lt;/url-pattern&gt; &nbsp;&nbsp;&nbsp; &lt;/servlet-mapping&gt; </td> 
 </tr> 
 </tbody> 
</table>

这时候请求页面会发现页面无法加载所有的静态资源（js,css等），它会认为springmvc无法匹配到相关的资源，日志如下：

![Center 1][]

浏览器端后台如下：

![Center 2][]

这时候页面所有的样式和js效果都没有了。

下面是最近找到的2中解决方法：

第一种：使用spring mvc 的 <mvc:resources >标签用来处理静态文件，在springmvc的xml配置文件中加上如下代码：

<table> 
 <tbody> 
 <tr> 
 <td> &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;!-- 静态资源(js/css)的访问 --&gt;&nbsp; &nbsp;&nbsp;&nbsp; &lt;mvc:resources location="/css/" mapping="/css/**"/&gt; &nbsp;&nbsp;&nbsp; &nbsp;&lt;mvc:resources location="/js/" mapping="/js/**"/&gt; </td> 
 </tr> 
 </tbody> 
</table>

第二种方式：

在springmvc的xml配置文件中加上如下代码，使用默认的handler处理：

<table> 
 <tbody> 
 <tr> 
 <td> &lt;!--&nbsp; 对静态资源文件的访问， Web应用服务器默认的Servlet名称是"default" --&gt; &nbsp;&nbsp;&nbsp; &lt;!-- 容器默认的DefaultServletHandler处理所有静态内容与无RequestMapping处理的URL --&gt; &nbsp;&nbsp;&nbsp; &lt;mvc:default-servlet-handler/&gt; </td> 
 </tr> 
 </tbody> 
</table>

以上即为我总结的2中解决方法。

[Center]: /images/20220610/ebf4c3267a0047119a9dd3c78ca2e4b7.png
[Center 1]: /images/20220610/7d8c1559fda64656968cf4ab0d470037.png
[Center 2]: /images/20220610/2e6786305e4c446d824fd3b3213bba72.png