通常狀況下,在web工程裏,css js png jpg 這類資源文件,由瀏覽器發起請求,由 tomcat、jetty、nginx 這類進程直接接管,相似於 jfinal、Struts、spring mvc 框架都不會去幹預.css
而 WEB-INF 目錄下面因爲有 jar 包、配置文件等須要被保護的文件,因此 tomcat、jetty 這類 java web 容器自然禁止對 WEB-INF 之下一切資源的訪問
所以, css、js 這類文件生來就不該該被放在 WEB-INF 之下,這個是由好久之前的 java web 規範決定的
若是必定要放在 WEB-INF 之下,須要添加 Filter 接管這類資源的請求,而後象 tomcat、jetty 同樣將這類資源的內容自行加載並響應給客戶端前端
靜態資源文件應該都在webapp目錄下,目錄結構以下:java
假若有須要把靜態資源出於安全之類的緣由放在了WEB-INF目錄下,那麼springmvc應該首先作以下配置:jquery
<!--靜態資源訪問 --> <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>
而後在前端頁面中調用靜態資源.nginx
在調用靜態資源的時候,會涉及到路徑問題,相對路徑和絕對路徑.web
1、相對路徑和絕對路徑
先解釋下相對路徑和絕對路徑的區別:spring
網上搜到的內容以下:瀏覽器
1.什麼是絕對路徑:tomcat
你們都知道,在咱們平時使用計算機時要找到須要的文件就必須知道文件的位置,而表示文件的位置的方式就是路徑,例如只要看到這個路徑: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的,這個時候在頁面的前面就須要引用,路徑的不對,會致使相關引用也不對。
2、引用路徑
那麼針對路徑,咱們是如何引用呢?這就是第二個問題,引用。
1.${pageContext.request.contextPath}是JSP取得絕對路徑的方法,等價於<%=request.getContextPath()%>
好比個人項目名稱叫project,那麼${ctx}就是/project
說明下:
假定你的名稱爲project,你在瀏覽器中輸入請求路徑:
http://localhost:8088/project/list.jsp
則執行下面向行代碼後打印出以下結果:
一、 System.out.println(request.getContextPath()); //可返回站點的根路徑。也就是項目的名字
打印結果:/project
二、System.out.println(request.getServletPath());
打印結果:/list.jsp
三、 System.out.println(request.getRequestURI());
打印結果:/project/list.jsp
四、 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.js2. ./js/jquery.js