thyemleaf引入js和css路徑問題

問題描述

在公共模闆架構檔案layout.html頭部引入css和js檔案，在不同的Controller中提示css和js檔案找不到。

問題解決

主要是檔案相對路徑和絕對路徑的問題。

thyemleaf的th:href=“@{...}”标簽路徑如果用“/”開頭的，則路徑最終為目前項目下的路徑；如果不是用“/”開頭的即相對路徑，則路徑最終以目前通路的Controller路徑的相對路

徑。

例如：

項目名admin_test

相對路徑：<link th:href="@{css/bootstrap.min.css}" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css"/>

在http://localhost:8080/admin_test/merchant下通路相對路徑http://localhost:8080/admin_test/css/bootstrap.min.css（正确路徑）

在http://localhost:8080/admin_test/merchant/input下通路相對路徑http://localhost:8080/admin_test/merchant/css/bootstrap.min.css（錯誤路徑）

絕對路徑：<link th:href="@{/css/bootstrap.min.css}" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css"/>

在http://localhost:8080/admin_test/merchant下通路絕對路徑http://localhost:8080/admin_test/css/bootstrap.min.css（正确路徑）

在http://localhost:8080/admin_test/merchant/input下通路絕對路徑http://localhost:8080/admin_test/css/bootstrap.min.css（正确路徑）

結論

在公共架構檔案中引入檔案，用“/”開頭的絕對路徑，保證檔案引用的是基于項目名下的。