一般情況下,在web工程里,css js png jpg 這類資源文件,由瀏覽器發起請求,由 tomcat、jetty、nginx 這類進程直接接管,類似於 jfinal、Struts、spring mvc 框架都不會去干預.
而 WEB-INF 目錄下面由於有 jar 包、配置文件等需要被保護的文件,所以 tomcat、jetty 這類 java web 容器天然禁止對 WEB-INF 之下一切資源的訪問
因此, css、js 這類文件生來就不應該被放在 WEB-INF 之下,這個是由很久以前的 java web 規范決定的
如果一定要放在 WEB-INF 之下,需要添加 Filter 接管這類資源的請求,然后象 tomcat、jetty 一樣將這類資源的內容自行加載並響應給客戶端
靜態資源文件應該都在webapp目錄下,目錄結構如下:
假如有需要把靜態資源出於安全之類的原因放在了WEB-INF目錄下,那么springmvc應該首先做如下配置:
<!--靜態資源訪問 --> <mvc:default-servlet-handler/> <!--把符合/js/**匹配規則的請求,映射到目錄/WEB-INF/js/下--> <mvc:resources mapping="/js/**" location="WEB-INF/js/"/> <!--<mvc:resources mapping="/img/**" location="WEB-INF/img/"/>--> <mvc:resources mapping="/css/**" location="WEB-INF/css/"/> <!--<mvc:resources mapping="/commons/**" location="WEB-INF/commons"/>--> <!--<mvc:resources mapping="/upload/**" location="WEB-INF/upload/"/>--> <!-- 配置ViewResolver視圖解析器 --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <!--這里配置的目的是,把controller返回的邏輯視圖名,加入前綴/WEB-INF/jsp/,加入后綴.jsp.例如controller 返回的是邏輯視圖名為test,則會被拼接為/WEB-INF/jsp/test.jsp --> <property name="prefix" value="/WEB-INF/jsp/"/> <property name="suffix" value=".jsp"/> </bean>
然后在前端頁面中調用靜態資源.
在調用靜態資源的時候,會涉及到路徑問題,相對路徑和絕對路徑.
一、相對路徑和絕對路徑
先解釋下相對路徑和絕對路徑的區別:
網上搜到的內容如下:
1.什么是絕對路徑:
大家都知道,在我們平時使用計算機時要找到需要的文件就必須知道文件的位置,而表示文件的位置的方式就是路徑,例如只要看到這個路徑:c:/website/img/photo.jpg我們就知道photo.jpg文件是在c盤的website目錄下的img子目錄中。類似於這樣完整的描述文件位置的路徑就是絕對路徑。我們不需要知道其他任何信息就可以根據絕對路徑判斷出文件的位置。而在網站中類似以http://www.pckings.net/img/photo.jpg來確定文件位置的方式也是絕對路徑。
另外,在網站的應用中,通常我們使用"/"來表示根目錄,/img/photo.jpg就表示photo.jpg文件在這個網站的根目錄上的img目錄里。但是這樣使用對於初學者來說是具有風險性的,因為要知道這里所指的根目錄並不是你的網站的根目錄,而是你的網站所在的服務器的根目錄,因此當網站的根目錄與服務器根目錄不同時,就會發生錯誤。
2.什么是相對路徑:
讓我們先來分析一下為什么會發生圖片不能正常顯示的情況。舉一個例子,現在有一個頁面index.htm,在這個頁面中聯接有一張圖片photo.jpg。他們的絕對路徑如下:
c:/website/index.htm
c:/website/img/photo.jpg
如果你使用絕對路徑c:/website/img/photo.jpg,那么在自己的計算機上將一切正常,因為確實可以在指定的位置即c:/website/img/photo.jpg上找到photo.jpg文件,但是當你將頁面上傳到網站的時候就很可能會出錯了,因為你的網站可能在服務器的c盤,可能在d盤,也可能在aa目錄下,更可能在bb目錄下,總之沒有理由會有c:/website/img/photo.jpg這樣一個路徑。那么,在index.htm文件中要使用什么樣的路徑來定位photo.jpg文件呢?對,應該是用相對路徑,所謂相對路徑,顧名思義就是自己相對與目標位置。在上例中index.htm中聯接的photo.jpg可以使用img/photo.jpg來定位文件,那么不論將這些文件放到哪里,只要他們的相對關系沒有變,就不會出錯。
另外我們使用“../”來表示上一級目錄,“../../”表示上上級的目錄,以此類推。(學習過dos的朋友可能更容易理解)
總結:
個人簡單來說,絕對路徑說白了就是完整路徑,比如我在同一目錄(C:\Users)有A.TXT和B.TXT兩個文件,那么絕對路徑就是C:\Users\A.txt和C:\Users\B.txt 而絕對路徑就是A.txt和B.txt,因為它們兩都在C:\Users這個目錄下的。
而我們常常在頁面會用到引用CSS或者圖片的,js的,這個時候在頁面的前面就需要引用,路徑的不對,會導致相關引用也不對。
二、引用路徑
那么針對路徑,我們是如何引用呢?這就是第二個問題,引用。
1.${pageContext.request.contextPath}是JSP取得絕對路徑的方法,等價於<%=request.getContextPath()%>
比如我的項目名稱叫project,那么${ctx}就是/project
說明下:
假定你的名稱為project,你在瀏覽器中輸入請求路徑:
http://localhost:8088/project/list.jsp
則執行下面向行代碼后打印出如下結果:
1、 System.out.println(request.getContextPath()); //可返回站點的根路徑。也就是項目的名字
打印結果:/project
2、System.out.println(request.getServletPath());
打印結果:/list.jsp
3、 System.out.println(request.getRequestURI());
打印結果:/project/list.jsp
4、 System.out.println(request.getRealPath("/"));
打印結果:C:\Tomcat 7.0\webapps\project\test
2.<base href="<%=basePath%>"> 所謂的小腳本
這里的${basePath}獲得是絕對路徑,比如http://localhost:8088/project/list.jsp,這里的${basePath}是http://localhost:8088/project/ 注意包含最后一個‘/’的。
---------------------
一般情況下,項目最好用絕對路徑 <%=basePath%>/js/jquery.js
其中basePath是下面的值
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
為什么要這么做?因為從靜態的jsp路徑來看它和js的路徑相對關系是../js/,但是往往很多時候我們不是直接訪問jsp頁面的,是通過其他的jsp頁面或者servlet,或者struts的action通過forward的方式轉發過來訪問的,這時候請求的當前路徑就不是該jsp的路徑,而是轉發過來之前那個jsp,servlet或action的路徑,所以和js的相對路徑關系就可能不再是../js/了,而在實際使用中,訪問同一個jsp可能由很多不同的來源,那么它的相對路徑關系可能隨時都可能改變,這時候jsp頁面里寫死的相對路徑就無法訪問到對應的資源了。所以要使用絕對路徑訪問。
例如:
假如我們要訪問這個頁面,http://localhost:8080/web/jsp/abc.jsp
abc.jsp的相對路徑是http://localhost:8080/web/jsp/,abc.jsp里引用了../js/jquery.js,這時候直接訪問abc.jsp是沒有問題的。
但如果由以下三個請求轉發到abc.jsp來訪問
1. http://localhost:8080/web/business/test/test.jsp
相對路徑是http://localhost:8080/web/business/test/,訪問js需要使用../../js/jquery.js
2. http://localhost:8080/web/struts/action/test.action
相對路徑是http://localhost:8080/web/struts/test/,(?)訪問js需要使用../../js/jquery.js
相對路徑是http://localhost:8080/web/struts/action/
3. http://localhost:8080/web/servlet
相對路徑是http://localhost:8080/web/,訪問js需要使用js/jquery.js
這時候abc.jsp里的../js/jquery.js的死路徑就不能正確訪問到js了。
===========================================
而真正的相對於web工程的絕對路徑寫法是:/ 代表url根路徑,例如http://localhost:8080/web/js/jquery.js里的http://localhost:8080/,而./代表web工程根路徑http://localhost:8080/web/
所以你還可以這么寫:
1. /web/js/jquery.js
2. ./js/jquery.js