使用SSM框架运行项目静态资源(img、js、css等)无法引用的问题

【问题】

今天整合了下SSM看看是否有用，写了个login.jsp界面相关静态资源如下

结果运行下总是显示的是没有样式的界面，这让我百思不得其解，网上搜索了第一种解决方法如下

【方案一】关于jsp中引用css外部样式无效时的处理方法

    今天做项目遇到的一个小问题，如下所示：

<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">

  引用外部css样式时，无效。然而在相同目录下的其他jsp文件也用了相同的路径引入该css样式，发现没有啥问题。这就很奇怪了，检查代码后发现没有问题。那问题只可能出在路径上。 将相对路径改为绝对路径后，发现就没问题了。

<link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">

解析:这个方法对于解决不是使用框架的web项目是有用的之前我自己试过，但是这个方法解决不了我的问题所以我继续寻找 解决方法。

【方案二】

对于第一种方法不成功，于是我换了种说法去搜索答案，解决SSM项目下静态资源(img、js、css)无法引用的问题，然后网上就出现一大堆 方案，于是我就找到了解决方法，下面我将自己遇到的问题在下面详细阐述。

1.问题所在，因为在配置web.xml中我们会加入下面这一句代码

<servlet-mapping>
		<servlet-name>springmvc</servlet-name>
		<!--/:拦截了所有请求(除了jsp) -->
		<url-pattern>/</url-pattern>
</servlet-mapping>

其中这个<url-pattern>/</url-pattern>不仅会拦截jsp还会拦截我们css、js等样式导致我们无法访问，最终在界面显示的是没有样式的。

2.解决问题，那么我们该如何解决这个问题呢

第一步:在web.xml中找到以下配置项,添加这段代码

<!-- 静态资源 -->
<servlet-mapping>
	<servlet-name>default</servlet-name>
	<url-pattern>*.css</url-pattern>
	<url-pattern>*.js</url-pattern>
	<url-pattern>*.gif</url-pattern>
	<url-pattern>*.png</url-pattern>
	<url-pattern>*.jpg</url-pattern>
</servlet-mapping>

添加后如下图所示

第二步:在spring-mvc.xml的<beans>标签内添加以下配置

<!-- 引入静态资源 -->
		<mvc:resources mapping="/css/**" location="/css/**" />
		<mvc:resources mapping="/bootstrap/**" location="/bootstrap/**" />
		<mvc:resources mapping="/fonts/**" location="/fonts/**" />
		<mvc:resources mapping="/img/**" location="/img/**" />
		<mvc:resources mapping="/jquery/**"  location="/jquery/**" /> 
		<mvc:resources mapping="/script/**"  location="/script/**" /> 
		<mvc:resources mapping="/layer/**"  location="/layer/**" /> 

这个是按照我自己WebContext下有哪些静态资源写的这个你们可以按照自己有哪些静态资源添加，请不要照抄我这段代码

第三步：在你需要引用的jsp页面里面前面添加${pageContext.request.contextPath}

<link type="text/css" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="${pageContext.request.contextPath}/css/font-awesome.min.css" rel="stylesheet">
<link type="text/css" href="${pageContext.request.contextPath}/css/login.css" rel="stylesheet" >

这样修改下大概就可以成功解决问题。