上一篇檔案 我們介紹了 IntelliJ  IEDA工具建立 SpringBoot 以及 模板引擎 thymeleaf的簡單用法。今天這篇 介紹 如何使用 thymeleaf 訪問靜態資源 如css，js，圖片之類的。

       這次我們打算寫一個登入頁面，那麼我們需要匯入css，js之類的東西。首先靜態資源預設放在哪呢？

       預設static放資源，如css，js，圖片等。 templates放html。這些都是 springboot預設配置。我們這裡不做修改，預設就預設唄。你改了位置也不見得有多了不得。

       我們知道html檔案如果引用css或者js，通常是採用相對路徑，如下：

<link href="../../static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

               效果圖就是下面這樣：

但是如果是web應用，我們用localhost的形式訪問，又會發生什麼呢。

這說明什麼，說明在web應用中，static就是根路徑了，所以不能出現static。

  那這又怎麼解決呢。 thymeleaf是這樣解決的。

<link href="../../static/bootstrap/css/bootstrap.min.css" rel="stylesheet" 
 
type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>

th:href="@{/bootstrap/css/bootstrap.min.css}"/>

就相當於所有的關於路徑都有前面加上 th: 什麼的。事實上還有 th:src,th:attr什麼的。

那麼接下來又發生什麼呢。

如果是本地開啟html，識別不了的th:href就直接展示，因為html元素的屬性是可以任意拓展的，識別不了就直接展示。那接下來看localhost:8080訪問是怎樣的呢

    完美解決。當然js同樣道理

<link href=
 
"../../static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
<link href="../../static/layer/skin/layer.css" rel="stylesheet" type="text/css" th:href="@{/layer/skin/layer.css}"/>
<link href="../../static/login/form-elements.css" rel="stylesheet" type="text/css" th:href="@{/login/form-elements.css}"/>
<link href="../../static/login/style.css" rel="stylesheet" type="text/css" th:href="@{/login/style.css}"/>
<script type="text/javascript" src="../../static/jquery-1.11.0.min.js" th:src="@{/jquery-1.11.0.min.js}"></script>
<script type="text/javascript" src="../../static/layer/layer.js" th:src="@{/layer/layer.js}"></script>
<script type="text/javascript" src="../../static/login/jquery.backstretch.min.js"
th:src="@{/login/jquery.backstretch.min.js}"></script>

那麼資源訪問，這塊感覺使用thymeleaf模板引擎是要比jsp引擎要好，至少可以做到本地可以直接瀏覽頁面效果，做到前段和後端的分離。

   那麼是不是所有問題都解決了呢。我原本也這樣以為，但突然我用了一個外掛jquery.backstretch.min.js。用來讓圖片全屏作為背景的。那麼這個是要在指令碼中訪問圖片url。我們看看遇到怎樣的難題。

<script type="text/javascript">
$(document).ready(function () {
        $.backstretch("../../static/login/1413012235-43G.png");

$.backstretch("圖片路徑")

但是這就頭疼了。如果寫成上面，本地的可以，但localhost:8080方式肯定不行。

$.backstretch("/login/1413012235-43G.png");

那麼這個問題，我們難道就只能二者選擇其一嗎？ 有解決辦法的。

 我們可以使用類似jsp中的contextpath來解決。解決方法如下。定義如下標籤。

<a href="../../static"
th:href="@{${#httpServletRequest.getScheme()}+ '://' + ${#httpServletRequest.getServerName()}+ ':'+${#httpServletRequest.getServerPort()}+${#httpServletRequest.getContextPath()}+'/' }"
id="contextPath"></a>

@{

  ${#httpServletRequest.getScheme()}

  + '://' + ${#httpServletRequest.getServerName()}

  + ':'+${#httpServletRequest.getServerPort()}

  + ${#httpServletRequest.getContextPath()}+'/' 

}

上面的就是獲得web應用的contextPath。看到我給上述a標籤一個id為contextPath了嗎？那麼指令碼中訪問就 簡單多了。

var contextPath = $('#contextPath').attr('href');
$.backstretch(contextPath+"/login/1413012235-43G.png")// 完美解決

好了，本篇關於 thymeleaf 資源和路徑 的相關問題 就記錄到這了。