SpringBoot中如何自定義首頁(默認頁)及favicon,你知道嗎?

一、前言

之前就有小夥伴問我,SpringBoot項目如何自定義首頁,因爲看到別人項目首頁都挺漂亮的,今天剛剛說一下這個首頁,順帶也說一下favicon。

二、自定義首頁

在瞭解如何自定義首頁之前,還是需要先了解一下SpringBoot中默認情況下訪問靜態資源的解決方案,可以參考我之前的博客,https://blog.csdn.net/java_miss_you/article/details/104362771

上面的博客中提到了共有5個路徑,這5個路徑下放首頁都可生效。下面我將一探究竟。

首先,在classpath:/static/classpath:/templates/下,分別放入index.html,至於裏面顯示的內容可以區分一下,如下:

classpath:/static/ -> index.html】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello static !</h1>
</body>
</html>

classpath:/templates/ -> index.html】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello thymeleaf !</h1>
</body>
</html>

至於爲什麼在classpath:/templates/下放index.html,是因爲我需要驗證一下,如果classpath:/static/下沒有index.html文件時,是否會訪問classpath:/templates/下的index.html文件?

因爲classpath:/templates/下的模板,一般情況下,需要使用Controller來訪問,所以,這裏我們還需要定義一個HelloController,如下:

@Controller
public class HelloController {

    @GetMapping("/index")
    public String hello(){
        return "index";
    }
}

啓動項目,在瀏覽器地址欄輸入http://localhost:8080/,看到底訪問的是哪個index.html文件,如下:
在這裏插入圖片描述
可以看到,默認情況下,是訪問classpath:/static/下的index.html,那麼接下來,我們把classpath:/static/下的index.html文件刪除,然後重啓項目,在瀏覽器使用Ctrl+F5刷新一下,再看看,如下:
在這裏插入圖片描述
這個結果正好驗證了我上面的假設是成立的,所以我們學習知識,不能靠假設,還需要通過源碼來驗證你的假設,下面我將對上面兩種情況用源碼進行驗證。

三、源碼剖析

首先,我們找到WebMvcAutoConfiguration類中的getWelcomePage方法,如下:
在這裏插入圖片描述
該方法中的第一行,其實就很熟悉了,我上面給的那篇博客中有詳細的介紹,這裏我只說明第一行,共返回了5個目錄,分別是:classpath:/META-INF/resources/classpath:/resources/classpath:/static/classpath:/public//,所以你的index.html放在上面的哪個目錄下都行。第二行就是在這5個目錄下依次去尋找index.html,有一個getIndexHtml方法,就是它的功勞,如下:
在這裏插入圖片描述
接下來,我們再看看爲什麼classpath:/static/下沒有index.html文件時,默認會訪問classpath:/templates/下的index.html,因爲創建項目時,我添加了thymeleaf依賴,如下:

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

如果沒有上面這個依賴,上面的假設將不會成立,那爲什麼添加了這個依賴後,這個假設就成立呢?

因爲SpringBoot默認已經集成了4種類型的模板,如下:
在這裏插入圖片描述
所以,只要添加了模板依賴,classpath:/templates/下的模板文件便可以訪問。

四、自定義favicon

給大家推薦一個製作favicon的網站,如:https://tool.lu/favicon/

先在上面的網站中,製作好自己想要的favicon,然後將該favicon放在項目的classpath:/static/下,其他favicon可以放的目錄和靜態資源可放目錄基本相同,至於爲什麼放classpath:/static/下呢?因爲創建項目時,該目錄默認被創建好了,所以就放在它下面即可,如下:
在這裏插入圖片描述
運行結果如下:
在這裏插入圖片描述

五、源碼地址

https://github.com/java22/welcome

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章