天天看點
傳回

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" target="_blank" rel="external nofollow"  />  
<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" target="_blank" rel="external nofollow"  />  
<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" target="_blank" rel="external nofollow"  />  
<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" target="_blank" rel="external nofollow"  />  
<script type="text/javascript" src="/scripts/dtree.js"></script>  

三、靜态資源、動态資源概念

      靜态資源：一般用戶端發送請求到web伺服器，web伺服器從記憶體在取到相應的檔案，傳回給用戶端，用戶端解析并渲染顯示出來。

      動态資源：一般用戶端請求的動态資源，先将請求交于web容器，web容器連接配接資料庫，資料庫處理資料之後，将内容交給web伺服器，web伺服器傳回給用戶端解析渲染處理。

四、Spring MVC通路不到靜态資源的三種解決方式

       （1）靜态資源通路不到原因 

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

（2）解決方法

       第一種解決方法 

第一種：在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主配置檔案中加上這個标簽就搞定了，不需要其他的額外的配置。

注意：使用了上述三種方法修改配置檔案後，依然無法通路，修改下html檔案中的src引用echarts.js的路徑。修改為絕對路徑或相對路徑即可。

spring mvc 靜态資源
上一篇: spring mvc傳回各種視圖及通路靜态檔案源代碼下載下傳位址（依賴包已經加上）
下一篇: mvc java html頁面_Spring MVC - 靜态頁面

繼續閱讀