在 web 專案開發過程中，我們常常使用到 JSP，以及對靜態資源，js，css 等引用，但是我們應該把這些資原始檔放在哪個目錄下面咧，怎麼引用。

當然如果是前後端分離的專案倒不用考慮這些。

WEB-INF：出於安全性的考慮，這個目錄是禁止外部直接訪問的，所以 JSP 頁面放在這個目錄及其子目錄下面是起到保護作用的。

在 jsp 頁面中少不了的是對 js，css 檔案的引用，那麼我們引用的時候又有兩種方式：

1）相對路徑：就是說相對於這個 jsp 頁面位置，js，css 檔案所在的位置，這種引用是相對的，當某一方位置發生變化是，這個相對路徑就得跟著改變。

2）絕對路徑：這是我們在開發中常用的，request.getcontextPath()

舉個例子：

引用根目錄下images的圖片：

引用同級目錄images的圖片：

引用上級目錄下的子目錄images的圖片：

引用上兩級目錄下的子目錄images的圖片：

在使用絕對路徑的時候，這樣子，對於整個專案是絕對的路徑。

jsp 使用絕對路徑引用 js，css 檔案，同時 js，css 檔案又放到了 WEB-INF 目錄下面，這時候的引用是失敗的，當我們在瀏覽器訪問的時候，會出現找不到引用的 js，css 檔案。

分析：

這個問題的原因正是由於 WEB-INF 拒絕外部直接訪問， 但是你可能會想，我的 JSP 檔案也放在這個目錄下面呀，為什麼瀏覽器可以訪問咧。

這時候，應該想想，你的 jsp 是直接通過 瀏覽器輸入什麼 http://..../xx.jsp 訪問的？不是吧，大部分時候我們是直接訪問 控制層 ，再由控制層控制返回那個 jsp 頁面給瀏覽器的。

所以這時候，就不屬於直接通過瀏覽器外部訪問這個 JSP 頁面了，而是通過了控制層訪問的，屬於內部訪問了，這樣 WEB-INF 當然不會禁止內部訪問。

你可能又會想，為什麼這些 js，css 檔案又引用不了，因為這時候已經不屬於內部訪問了。

那麼為什麼是外部訪問咧，因為當以絕對路徑引用的時候，request.getcontextPath()/WEB-INF/js/xx.js， 這時候會轉換為 xxx/WEB-INF/js/xx.js，很顯然就變成了外部引用了，WEB-INF 拒絕了訪問，所以我們一般會放到 WEB-INF 目錄外面，這樣：xxx/js/xx.js。

相對路徑時，如果通過controller後再返回對應的html或jsp頁面時，相對路徑可能會不是我們想要的，例如，在伺服器端，如果某js檔案路徑為：/js/xx.js，html檔案為/html/xx.html，並在在html中寫入一下相對路徑引用程式碼<script src="../js/jQuery.min.js"></script>，會有兩種結果發生，這裡假設filter不攔截訪問，並且配置了<mvc:resources location="/js/" mapping="/js/**" />，如果我們直接訪問路徑為：http://127.0.0.1:8080/(專案名)/html/xx.html，結果很一切正常，但是當我們通過controller對映返回對應的html頁面時，可能就會出錯了。

例如下面的controller對映如下：

1. @Controller
2. @RequestMapping("/download")  
3. publicclass DownloadController {  
4.     @RequestMapping(value="/develop/*",method=RequestMethod.GET,produces={"text/html"})  
5.     public String developPage()  {   
6.            return"xx";   
7.     }    
8. }  

    那麼這個時候相對路徑../js/xx.js在瀏覽器端解析後將為：http://127.0.0.1:8080/(專案名)/download/js/xx.js，於是悲催的事情就發生了，對應的js檔案將得不到正常的引用，原因很簡單，路徑不對了，自然找不到，網上查詢到的資料解釋為：匯入的js是相對當前請求的路徑的，而不是相對於你在伺服器檔案的放置目錄的。因此，正好印證了網上的解釋，../js/xx.js被瀏覽器端解析後地址就是http://127.0.0.1:8080/(專案名)/download/js/xx.js。

總結：儘量將靜態資原始檔放到 WEB-INF 目錄外面，並且以絕對路徑引用。

關注公眾號，分享乾貨，討論技術