关于项目下js、css等文件的引用问题

前阵子被“文件引用路径”这个问题折腾了好久,后来才渐渐明白是怎么一回事。
大家都知道,为了安全性问题,项目开发时不会直接把页面文件放在 Webapp(WebContent) 下,而是放在 Webapp(WebContent) 下的 WEB-INF 目录中,因为 WEB-INF 目录只对服务端开放,对于客户端是访问不到了。那么,问题来了,在 WEB-INF 目录如何引用非 WEB-INF 目录(也即是 Webapp 或者 WebContent ) js css 等外部文件呢?
下面是项目的目录结构(项目使用 maven 构建)

   


首先,先说明一下在webapp下的inde.jsp文件如何去引用webapp下的common/jquery.min.js文件

由于index.jspcommon文件夹是在同一级目录下,于是我们可以采用正常相对路径的引用方式即可,如下:



接下来我们看看在WEB-INF目录引用非WEB-INF目录下文件出现的一些问题

首先是我们前端登录页面frontLogin.jsp,登录验证交由front/login.action控制器处理



登录成功,进入 /WEB-INF/jsp/front/user/index.jsp(在项目中已经配置了视图解析器的前缀“/WEB-INF/jsp/”,这样不用很麻烦的去写jsp文件的全路径了)



那么问题来了,如何在index.jsp文件中去引用webapp下的common/jquery.min.js文件呢?

大家都会想到采用绝对路径或者是相对路径两种引用方式

方式1、绝对路径:/common/jquery.min.js, 可是结果呢?



很明显,引用路径中少了项目名字。于是改成这样:/Tourism/common/jquery.min.js


哎,可以了耶。但是,这样的引用方式有一个问题:引用文件时所有的路径都得加上项目名字“/Tourism”,这无疑是不合理的,再说了,万一项目名字改变了呢,那岂不是得去改所有的引用路径。

于是采用方式2、相对路径:../../../common/jquery.min.js

哇,这种方式不得吐血啊,这么多级的目录。但是呢,这种方式也是不正确的,index.jsp文件中并不能正常的引用jquery.min.js文件。

折腾了好久也没解决这个问题。。。。。

后来,打开Chrome浏览器,按F12,查看项目编译后的目录结构,如下:


马上明白了是怎么一回事了。index.jsp是由/front/login.action控制器返回视图而显示的,此时相当于index.jsp就是挂载在/front/login.action目录中,于是,采用相对路径的引用方式:../common/jquery.min.js

 至此,问题解决



以上纯属个人见解,如果错误,望大家斧正

猜你喜欢

转载自blog.csdn.net/weixin_37778823/article/details/80722999