使用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" >

這樣修改下大概就可以成功解決問題。