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文件中相对路径、绝对路径

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的路径。修改为绝对路径或相对路径即可。