Spring MVC訪問靜態資源
一、問題產生
專案中需要使用ECharts畫關係圖譜，EChars網址http://echarts.baidu.com/，在上面的網站下載echartc.js外掛之後，在html裡面引用。
將寫好的HTML和下載的echarts.js放在一個檔案目錄下，然後瀏覽器開啟HTML檔案，可以正常訪問。
然後將HTML檔案index.html放到專案webapp目錄下的views資料夾下，echarts.js放到js路徑下。修改HTML裡面引用echarts.js檔案的路徑為：<script type="text/javascript" src="/city/js/echarts.js"></script>，其中city為專案名，然後啟動專案，瀏覽器訪問HTML：http://localhost:8080/city/views/index.html 訪問404.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script type="text/javascript" src="./echarts.js"></script> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和資料 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); </script> </body> </html>
二、HTML檔案中相對路徑、絕對路徑
假設使用下面的目錄結構：
-webapp
|-MyProject 目錄
|--WebContent 目錄
|---scripts 目錄
---dtree.js 檔案
|---styles 目錄
---main.css 檔案
|---pages 目錄
---test.jsp 檔案
1.使用相對於jsp頁面的相對路徑
<link type="text/css" rel="stylesheet" href="../styles/main.css" /> <script type="text/javascript" src="../scripts/dtree.js"></script>
這樣在頁面使用http://localhost:8080/MyProject/test.jsp訪問test.jsp時就可以引用到dtree.js和main.css。
2.使用相對於Web工程的相對路徑
對於1中的相對使用相對於於jsp頁面的相對路徑的這種方式，如果我們是設定action跳轉到test.jsp頁面，那麼這種使用相對路徑的方式就引用不到了。
例如我們當訪問http://localhost:8080/MyProject/main.do的時候，頁面跳轉到test.jsp頁面，如果使用方法1，就引用不到了。
這個時候我們可以使用相對於Web工程的相對路徑來引用：
<link type="text/css" rel="stylesheet" href="styles/main.css" />
<script type="text/javascript" src="scripts/dtree.js"></script> 但是請注意：使用方法2這種方式引用，如果直接訪問http://localhost:8080/MyProject/test.jsp，是引用不到的。
3.使用Web工程的絕對路徑
方法1和方法2都有缺點，都只適用一種情況，有沒有兩種情況都適用的呢？答案肯定的！
我們使用絕對路徑:
<link type="text/css" rel="stylesheet" href="/MyProject/styles/main.css" />
<script type="text/javascript" src="/MyProject/scripts/dtree.js"></script>
這樣，不管是通過http://localhost:8080/MyProject/main.do跳轉訪問test.jsp還是直接訪問
http://localhost:8080/MyProject/test.jsp，都可以成功引用。
注意：如果我們在部署Web應用時，沒有設定Context Root（一般情況下配置為工程名），也就是IP和埠後面不帶應用名，如http://localhost:8080/main.do和http://localhost:8080/test.jsp，這種情況在引用時就不能帶工程名了，應該這樣：
<link type="text/css" rel="stylesheet" href="/styles/main.css" />
<script type="text/javascript" src="/scripts/dtree.js"></script> 三、靜態資源、動態資源概念
靜態資源：一般客戶端傳送請求到web伺服器，web伺服器從記憶體在取到相應的檔案，返回給客戶端，客戶端解析並渲染顯示出來。
動態資源：一般客戶端請求的動態資源，先將請求交於web容器，web容器連線資料庫，資料庫處理資料之後，將內容交給web伺服器，web伺服器返回給客戶端解析渲染處理。
四、問題解決
（1）web.xml和spring-mvc.xml配置檔案的修改
Spring mvc 專案中頁面訪問不到靜態檔案，如img ， js ， css 等
起因：我們通常在springmvc專案中web.xml配置檔案中的內容為：
<servlet>
<servlet-name>springmvc001-servlet</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc001-main.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springmvc001-servlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
這就導致使用者的所用請求都被攔截給了DispatcherServlet
解決辦法有三種：
第一種：在web.xml檔案中啟用Tomcat的defaultServlet來處理靜態檔案
<!-- 直接新增即可達到效果 有些文章中說要放在dispatcherservlet的後面，我測試了一下，在web.xml檔案中沒有不存在這個問題-->
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.jpg</url-pattern>
<url-pattern>*.gif</url-pattern>
<url-pattern>*.png</url-pattern>
<url-pattern>*.js</url-pattern>
<url-pattern>*.css</url-pattern>
</servlet-mapping>
第二種：spring3.0.4以後版本提供了mvc:resources
在springmvc的主配置檔案中新增
<!-- 對靜態資原始檔的訪問 -->
<mvc:annotation-driven />
<mvc:resources mapping="/images/**" location="/images/" />
/images/**對映到 ResourceHttpRequestHandler進行處理，location指定靜態資源的位置.可以是web application根目錄下、jar包裡面，這樣可以把靜態資源壓縮到jar包中。cache-period 可以使得靜態資源進行web cache
再例如：
<mvc:resources location="/,classpath:/META-INF/publicResources/" mapping="/resources/**"/>
以上配置將Web根路徑"/"及類路徑下 /META-INF/publicResources/ 的目錄對映為/resources路徑。假設Web根路徑下擁有images、js這兩個資源目錄,在images下面有bg.gif圖片，在js下面有test.js檔案，則可以通過 /resources/images/bg.gif 和 /resources/js/test.js 訪問這二個靜態資源。
假設WebRoot還擁有images/bg1.gif 及 js/test1.js，則也可以在網頁中通過 /resources/images/bg1.gif 及 /resources/js/test1.js 進行引用
第三種：使用<mvc:default-servlet-handler/>，在springmvc主配置檔案中加上這個標籤就搞定了，不需要其他的額外的配置。
（2）使用了（1）中的方法修改配置檔案後，依然無法訪問，修改下html檔案中的src引用echarts.js的路徑。修改為絕對路徑或相對路徑即可。