一、前言
之前就有小夥伴問我,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/
下呢?因爲創建項目時,該目錄默認被創建好了,所以就放在它下面即可,如下:
運行結果如下: