1. 程式人生 > >SpringBoot簡明教程之Web檢視層(一):WebJars及靜態資源對映規則

SpringBoot簡明教程之Web檢視層(一):WebJars及靜態資源對映規則

SpringBoot簡明教程之檢視層(一):靜態資源對映規則及WebJars的使用

文章目錄

專案建立

SpringBoot專案的建立過程已經在:

SpringBoot簡明教程之快速建立第一個SpringBoot應用中進行了詳細的介紹,這裡就不再進行贅述。

靜態資源對映規則

我們在org/springframework/boot/autoconfigure/web/ResourceProperties.class中看到了如下的程式碼:

 private static final String[] CLASSPATH_RESOURCE_LOCATIONS = new String[]{"classpath:/META-INF/resources/", "classpath:/resources/", "classpath:/static/", "classpath:/public/"
};

也就意味在SpringBoot在查詢任何資源時,都會在一下資料夾中去找到相應的對映檔案:

"classpath:/META-INF/resources/",
"classpath:/resources/", 
"classpath:/static/",
"classpath:/public/"

靜態資源對映優先順序

例如,我們在static資料夾中建立index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
Title</title> </head> <body> Hi,歡迎關注公眾號:Newtol </body> </html>

啟動SpringBoot專案,並訪問:http://localhost:8080/

瀏覽器返回:

Hi,歡迎關注公眾號:Newtol

訪問成功。

在classpath目錄(即為:SpringBoot下的resources目錄)中建立resources資料夾,並建立如下的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
hello,歡迎關注公眾號:Newtol
</body>
</html>

再次啟動SpringBoot專案,並訪問:http://localhost:8080/

瀏覽器返回:

hello,歡迎關注公眾號:Newtol

可見,我們重新編寫的index.html檔案就覆蓋了之前在static資料夾中的index.html。例外幾種情況就不再一一展示,我們也可以得出結論,靜態對映檔案的優先順序關係:

"classpath:/META-INF/resources/" >"classpath:/resources/"> "classpath:/static/"> "classpath:/public/"

我們之前使用的都是預設的歡迎頁(index.html),所以我們無需在訪問的時候指定具體的資源名字也可以正確的對映到,是因為如果我們指定具體的資源資訊,SpringBoot會自動到每個資料夾中尋找命名為index.html的資源。

例如:我們在classpath:/resources/resources下建立test資料夾,並建立test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    hi,這是test!歡迎關注公眾號:Newtol
</body>
</html>

啟動專案,如果我們輸入:http://localhost:8080/test

就會發現瀏覽器報錯:

Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.

Thu Oct 25 19:11:45 CST 2018
There was an unexpected error (type=Not Found, status=404).
No message available

這是因為,當我們輸入http://localhost:8080/test時,SpringBoot無法在test目錄下找到預設的資源,就會報404。這時我們就需要訪問:http://localhost:8080/test/test.html才能正確的獲取資源資訊了,瀏覽器返回:

hi,這是test!歡迎關注公眾號:Newtol

Favicon圖示的修改

正常情況下,當我們訪問網頁時,我們發現SpringBoot頁面的圖示為:

在這裡插入圖片描述

如果我們想要更改前面的小圖示,我們應該怎麼做呢?其實很簡單,我們只需要將我們的圖示命名為favicon.ico並且放在我們預設的靜態資料夾下,例如:
在這裡插入圖片描述

啟動專案,然後再次訪問http://localhost:8080/test/test.html

發現圖示已經更改成功:

在這裡插入圖片描述

修改預設的靜態資料夾

如果我們想自定義SpringBoot的靜態資料夾的地址,我們應該如何進行配置呢?

我們在application.yml中進行如下配置:

spring:
  resources:
    static-locations: classpath:/resources/test/

我們就將預設的資料夾指向了resources中下的test資料夾,我們再訪問:http://localhost:8080/,就會發現報錯404:

Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.

Thu Oct 25 19:42:17 CST 2018
There was an unexpected error (type=Not Found, status=404).
No message available

我們在test資料夾中建立index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    hello,這裡是新的靜態資原始檔夾!
</body>
</html>

啟動專案,訪問:http://localhost:8080/

瀏覽器返回:

hello,這裡是新的靜態資原始檔夾!

預設的靜態資料夾修改成功!

WebJars

WebJars簡介

Webjars的官網是這樣介紹它的:

WebJars are client-side web libraries (e.g. jQuery & Bootstrap) packaged into JAR (Java Archive) files.

大致的意思是,WebJars是將我們在檢視層所中需要的大多數例如jQuery和Bootstrap等資源打成的Jar包,以對資源進行統一依賴管理,WebJars的jar包部署在Maven中央倉庫上。

WebJars示例

接下來,我們將演示如何匯入Bootstrap資源到專案中。

首先,我們先到WebJars的官網,找到我們想要使用的資源版本:

在這裡插入圖片描述

然後我們將對應的配置加入到pom.xml配置檔案中:

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>3.3.7-1</version>
</dependency>

然後我們就會發現:我們匯入的依賴的目錄結構,跟我們之前介紹的靜態資源對映規則是一致的。

在這裡插入圖片描述

然後,我們重新編寫test資料夾下的index.html檔案:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" />
<script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"><br/>
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong> Hello,歡迎關注公眾號:Newtol!</strong>
</div>
</div>
</body>
</html>

訪問:http://localhost:8080/

瀏覽器返回:

在這裡插入圖片描述

匯入Bootstrap資源成功!對於其他資源的匯入,基本都是大同小異的過程,這裡就不再展示。

總結

我們介紹了有關SpringBoot中關於靜態資源載入的一些規則,以及如何根據專案的實際需要去更改預設的靜態資料夾,最後我們介紹了Webjars的使用,webjars極大的方便了我們對於一些web資源的管理。

原始碼地址

點我點我

聯絡作者

有關轉載、錯誤指正、問題諮詢等事宜請掃碼關注個人公眾號進行聯絡,更有大量視訊學習資源分享