IDEA解决SSM项目的静态资源路径问题:HTML,CSS,JS--详解

IDEA解决SSM项目的静态资源路径问题:HTML,CSS,JS

 

直接上图(项目目录结构):

我们主要关注webapp。

如上图,建议把js,css,layui,首页等文件放在WEB-INF外部,WEB-INF放程序的主要网页,index页面,welcome,各种管理页面等(如下图)

 

现在我们进入了重头戏了:路径设置。

 

一、上图发现,我们的login页面在webapp下,就是项目启动的一级目录下

  1、此时找到登陆页面有两种方法:在web.xml配置为欢迎界面,项目启动就直接跳转此页面。

   页面地址

 

  2、输入一级目录下的systemLogion.html

 

我们推断出此访问路径按照webapp为根路径,即http://localhost:8080/empmanage  这一坨代表webapp,其实从target文件也可以映照这个结论

 

二、上面找到了根路径,我们开始设置springMVC-web.xml文件(主要是释放静态资源的路径----若不释放,系统运行后会把这些资源进行拦截)

 

<!--释放静态资源-->
<mvc:default-servlet-handler></mvc:default-servlet-handler>
<mvc:resources mapping="/images/**" location="/images/"></mvc:resources>
<mvc:resources mapping="/css/**" location="/css/"></mvc:resources>
<mvc:resources mapping="/js/**" location="/js/"></mvc:resources>
<mvc:resources mapping="/layui/**" location="/layui/"></mvc:resources>
<mvc:resources mapping="/pages/**" location="/pages/"></mvc:resources>

 

  1、释放了静态资源文件之后,在系统运行后,我们可以从http://localhost:8080/empmanage/js/cloud.js    这个路径直接访问js等文件(除了WEB-INF内的其他任何文件)

 

  2、但是要注意一点:系统执行到不同的页面,是根据当前页面请求的地址,去找相应的js等文件。

  比如我们的systemlogin.html页面的js,css路径设置如下图:

  但是WEB-INF里面的操作页面的css,js路径如下:

 

  通过对比我们发现,WEB-INF页面的路径多了一个-----   “ ../  ” ------

  

三、这是因为:当我们在登陆页面和WEB-INF下的index页面时,请求地址(浏览器地址)分别为

 

 

  这时登陆页面加入js/cloud.js我们可以访问到相应的js页面,所以登陆页面的js路径:js/**

  但是index页面是经过一次controller进行跳转之后的路径(user/index.do ---这是在一个controller里的),所以index页面的css,js路径: ../js/**

四、当我们在WEB-INF的index页面中需要执行ajax无页面刷新异步请求的时候,如:

  此时请求controller的地址和js的地址类似,当前浏览器的地址不变,我们需要  ../  回到根路径,然后去找controller(如上图)。

 

编写不易,求个小心心吧。。。。

本人若有叙述不当之处,请各位看官不吝赐教!

 

posted @ 2019-04-03 10:10  一株小石头  阅读(12352)  评论(0编辑  收藏  举报