IDEA解決SSM項目的靜態資源路徑問題：HTML,CSS,JS

直接上圖（項目目錄結構）：

我們主要關注webapp。

如上圖，建議把js，css，layui，首頁等文件放在WEB-INF外部，WEB-INF放程序的主要網頁，index頁面，welcome，各種管理頁面等（如下圖）

 

現在我們進入了重頭戲了：路徑設置。

 

一、上圖發現，我們的login頁面在webapp下，就是項目啟動的一級目錄下

　　1、此時找到登陸頁面有兩種方法：在web.xml配置為歡迎界面，項目啟動就直接跳轉此頁面。

　　　頁面地址

 

　　2、輸入一級目錄下的systemLogion.html

 

我們推斷出此訪問路徑按照webapp為根路徑，即http://localhost:8080/empmanage  這一坨代表webapp，其實從target文件也可以映照這個結論

 

二、上面找到了根路徑，我們開始設置springMVC-web.xml文件（主要是釋放靜態資源的路徑----若不釋放，系統運行后會把這些資源進行攔截）

 

<!--釋放靜態資源-->
<mvc:default-servlet-handler></mvc:default-servlet-handler>
<mvc:resources mapping="/images/**" location="/images/"></mvc:resources>
<mvc:resources mapping="/css/**" location="/css/"></mvc:resources>
<mvc:resources mapping="/js/**" location="/js/"></mvc:resources>
<mvc:resources mapping="/layui/**" location="/layui/"></mvc:resources>
<mvc:resources mapping="/pages/**" location="/pages/"></mvc:resources>

 

　　1、釋放了靜態資源文件之后，在系統運行后，我們可以從http://localhost:8080/empmanage/js/cloud.js    這個路徑直接訪問js等文件（除了WEB-INF內的其他任何文件）

 

　　2、但是要注意一點：系統執行到不同的頁面，是根據當前頁面請求的地址，去找相應的js等文件。

　　比如我們的systemlogin.html頁面的js，css路徑設置如下圖：

　　但是WEB-INF里面的操作頁面的css，js路徑如下：

 

　　通過對比我們發現，WEB-INF頁面的路徑多了一個-----   “ ../  ” ------

　　

三、這是因為：當我們在登陸頁面和WEB-INF下的index頁面時，請求地址（瀏覽器地址）分別為

 

 

　　這時登陸頁面加入js/cloud.js我們可以訪問到相應的js頁面，所以登陸頁面的js路徑：js/**

　　但是index頁面是經過一次controller進行跳轉之后的路徑（user/index.do ---這是在一個controller里的），所以index頁面的css，js路徑： ../js/**

四、當我們在WEB-INF的index頁面中需要執行ajax無頁面刷新異步請求的時候，如：

　　此時請求controller的地址和js的地址類似，當前瀏覽器的地址不變，我們需要  ../  回到根路徑，然后去找controller（如上圖）。

 

編寫不易，求個小心心吧。。。。

本人若有敘述不當之處，請各位看官不吝賜教！