SpringBoot簡明教程之視圖層（一）：靜態資源映射規則及WebJars的使用

文章目錄

SpringBoot簡明教程之視圖層（一）：靜態資源映射規則及WebJars的使用

項目建立
靜態資源映射規則

靜態資源映射優先級
Favicon圖標的修改
修改默認的靜態文件夾

WebJars

WebJars簡介
WebJars示例

總結
源碼地址
聯繫做者

項目建立

SpringBoot項目的建立過程已經在：SpringBoot簡明教程之快速建立第一個SpringBoot應用中進行了詳細的介紹，這裏就再也不進行贅述。css

靜態資源映射規則

咱們在org/springframework/boot/autoconfigure/web/ResourceProperties.class中看到了以下的代碼：html

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

也就意味在SpringBoot在查找任何資源時，都會在一下文件夾中去找到相應的映射文件：java

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

靜態資源映射優先級

例如，咱們在static文件夾中建立index.htmljquery

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

啓動SpringBoot項目，並訪問：http://localhost:8080/git

瀏覽器返回：github

Hi,歡迎關注公衆號：Newtol

訪問成功。web

在classpath目錄（即爲：SpringBoot下的resources目錄）中建立resources文件夾，並建立以下的index.htmlspring

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

再次啓動SpringBoot項目，並訪問：http://localhost:8080/bootstrap

瀏覽器返回：瀏覽器

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資源的管理。

源碼地址

點我點我

聯繫做者

有關轉載、錯誤指正、問題諮詢等事宜請掃碼關注我的公衆號進行聯繫，更有大量視頻學習資源分享

SpringBoot簡明教程之Web視圖層（一）：WebJars及靜態資源映射規則