zoukankan      html  css  js  c++  java
  • springMVC 引入静态资源Js的方式

    前两天项目出现了Js无法引入的情况,本篇博客先总结分析+批判自己犯的低级错,再说说几种访问静态资源的方式!

    首先,由于在web.xml里面的servlet拦截匹配为<url-pattern>/</url-pattern>,所以,默认的时拦截所有请求。当项目访问引入的js文件,其实也是在服务器上,根据文件目录加载js文件。我那个为什么就没引进去呢?

    首先,我把script文件夹放在了WEB-INF文件目录下,所以。。。。。。。也就呵 呵了

    以下介绍两种引入静态资源,尤其是Js的方式,一种是本地引用,一种是从第三方引用!

    一、本地引用

    1.1,在spring的配置文件中添加如下一行:

    <mvc:default-servlet-handler/>

    在系统找不到Servlet时,并不会报404,而是会去静态资源里面找。

    注意,需要是spring3.0.5以上版本。Ps,有的说是3.0.4版本以上,有的说是3.0.5以上,我也不知道,反正我们配置的依赖spring jar包是4打头的,哈哈哈哈哈哈哈。。。。。。

    1.2,在web.xml中添加对静态资源的拦截

    <servlet-mapping>
    	<servlet-name>default</servlet-name>
    	<url-pattern>*.js</url-pattern>
    </servlet-mapping> 
    以后缀结尾,写到其他Servlet拦截前面,如果有filter的话,再往前。除了可以是js结尾,也可以是图片路径,css后缀之类的静态资源。

    1.3,在springmvc的配置文件里使用<mvc:resources>

    这个配置最不简单,但是好像项目里经常就是这样配置的:

    <!-- 资源映射 -->  
    <mvc:resources location="/img/" mapping="/img/**" /> 
    <mvc:resources location="/script" mapping="/script/**" />

    上面的写法,就是要将每个静态资源的路径都加以映射,但其实静态资源也就那么几类,所以,还可以有如下写法:

    <mvc:resources location="/" mapping="/**/*.js"/>
    <mvc:resources location="/" mapping="/**/*.css"/>
    不过,要是有图片资源,而图片资源的格式类型有很多的话,那还是用文件夹映射的方式比较靠谱。。。。。。


    我目前就只写了个<mvc:default-servlet-handler /> ,感觉挺省事儿的!


    二、从CDN引入

    本地引入的,一般都是我们项目自己写的js文件之类的,那么每次开发时,其实都会用到其他很多Js库,比如说JQuery之类,或者什么AngularJs、Bootstrap之类的,有时候项目里会采用配置依赖,然后下载的方式。但,还有一种更为稳定的方式,那就是从CDN获取。

    CDN:CDN的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。


    三、思考

    我在想,以后项目要不要把前端和后端的代码分别打包部署。更甚至是把一个有特别要求的系统的静态Js、CSS之类的都特别部署之类的。我瞎想的,想想以后还是用CDN引入一些Js吧,快呀,能压缩精简的,人家都给压缩精简了。再有就是人家逛其他网页的时候,就下载了一些Js库什么的,就近获取,那得多快多省事。

    我最近对写Js代码还挺有点小想法的,回头看看自己几年前,我只能说,我无比的庆幸,那时候的代码规范不咋地,以至于上面没有我的署名注释。。。。不然丢人要丢大了



  • 相关阅读:
    关于Allele(等位基因)的理解
    beta 分布的详细介绍(转载)
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
  • 原文地址:https://www.cnblogs.com/hhx626/p/7534602.html
Copyright © 2011-2022 走看看