1. 程式人生 > >關於專案下js、css等檔案的引用問題

關於專案下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

 至此,問題解決



以上純屬個人見解,如果錯誤,望大家斧正