整合SpringMVC之歡迎頁面與自定義Favicon

.Spring Boot設置歡迎頁面

1.默認歡迎頁的源碼

在Spring Boot中，默認的歡迎界面是index.html，那為什么這樣呢？我們可以看看源碼是怎么定義的。

public class WebMvcAutoConfiguration {
   private Optional<Resource> getWelcomePage() {
       String[] locations = getResourceLocations(this.resourceProperties.getStaticLocations());
       return Arrays.stream(locations).map(this::getIndexHtml).filter(this::isReadable).findFirst();
   }

    private Resource getIndexHtml(String location) {
        return this.resourceLoader.getResource(location + "index.html");
    }
}

從源碼中我們可以看到，歡迎頁的靜態(tài)資源文件默認就是index.html頁面，并且只要該頁面存放在resources目錄下的默認路徑中，就會被"/**"映射。

classpath:/META-INF/resources/ 
classpath:/resources/
classpath:/static/ 
classpath:/public/
/：當前項目的根路徑

也就是只要index.html頁面在以上幾個目錄內(nèi)，就會自動被Spring Boot探測到。

2.實驗驗證

2.1 創(chuàng)建web項目(略)

目錄結(jié)構(gòu)如下，在該項目中，我們在resources目錄下，創(chuàng)建4個子文件夾，具體參考上一章節(jié)。然后在每個子文件夾中，都存放一個index.html文件，但是文件內(nèi)容略有不同，每個文件都有自己的編號。

每個index.html文件內(nèi)容的編號不同，以此類推！

2.2 啟動項目測試

我們啟動web項目，輸入地址http://localhost:8080會發(fā)現(xiàn)，默認加載的是META-INF/resources目錄下的index.html文件，為什么呢？這與靜態(tài)資源文件夾的優(yōu)先級有關(guān)系哦，我們上一章節(jié)已經(jīng)講過了

二.自定義歡迎頁面

但在實際開發(fā)中，我們有時候就希望先訪問登錄界面，然后登錄成功后再跳到主頁面，那此時如何將登錄頁面作為歡迎頁面呢？

這個可以有兩種實現(xiàn)方式。

視圖控制器配置方式；
Controller直接實現(xiàn)方式；

1.視圖控制器配置方式

1.1 創(chuàng)建配置類

我們可以在上面的web項目中，創(chuàng)建一個WebMvcConfigurerAdapter類。

package com.yyg.boot.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

/**
 * @Description Description
 * @Author 一一哥Sun
 * @Date Created in 2020/3/21
 */
@Configuration
public class DefaultViewConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        //這里的"/"是訪問路徑，"forward:home.html"是請求轉(zhuǎn)發(fā)到的頁面名稱
        registry.addViewController("/").setViewName("forward:home.html");
        //設置優(yōu)先級
        registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
        super.addViewControllers(registry);
    }

}

1.2 創(chuàng)建home.html頁面

我們在static目錄下創(chuàng)建一個home.html頁面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
</head>
<body>
    <h1>一一哥的Home頁面...</h1>
</body>
</html>

1.3 運行測試

接著我們運行程序，輸入地址：http://localhost:8080就可以看到如下歡迎界面。

2. Controller直接實現(xiàn)方式

我們在上一個例子的基礎之上，創(chuàng)建一個Controller類。

注意：

把上一個案例中DefaultViewConfig配置類的@Configure注解去掉，避免影響到本次實驗。

2.1 項目結(jié)構(gòu)：

2.2 創(chuàng)建Controller

package com.yyg.boot.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * @Description Description
 * @Author 一一哥Sun
 * @Date Created in 2020/3/21
 */
@Controller
public class WelcomeController {

    @RequestMapping("/")
    public String view() {
        return "forward:home.html";
    }

}

2.3 運行測試

接著我們運行程序，輸入地址：http://localhost:8080就可以看到如下歡迎界面。

三.結(jié)合Thymeleaf模板實現(xiàn)歡迎頁面

我們可以結(jié)合Thymeleaf模板，來實現(xiàn)歡迎頁面。

1.添加依賴包

在該web項目的pom.xml文件中添加依賴包。

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

2.配置模板路徑

創(chuàng)建application.properties文件，添加如下配置，其實默認也是這個配置。

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

3.創(chuàng)建login.html頁面

創(chuàng)建login.html存放到/templates/目錄下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
    <h1>一一哥的登錄頁面...</h1>
</body>
</html>

4.創(chuàng)建Controller接口

package com.yyg.boot.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * @Description Description
 * @Author 一一哥Sun
 * @Date Created in 2020/3/21
 */
@Controller
public class WelcomeController {

//    @RequestMapping("/")
//    public String view() {
//        return "forward:home.html";
//    }

    @RequestMapping("/")
    public String login() {
        return "login";
    }
}

5.運行測試

輸入地址，http://localhost:8080即可看到歡迎界面。

四.設置網(wǎng)站圖標Favicon

1.Favicon簡介

很多時候，企業(yè)網(wǎng)站一般都會有一個對應的網(wǎng)站圖標(Favicon)，在瀏覽器訪問網(wǎng)站時，對應的瀏覽器標簽上會出現(xiàn)對應的圖標。例如csdn網(wǎng)站上的小圖標。

2.Favicon源碼分析

我們可以看看Spring中關(guān)于Favicon的源碼。

@Configuration
@ConditionalOnProperty(value = {"spring.mvc.favicon.enabled"},matchIfMissing= true)
public static class FaviconConfiguration implements ResourceLoaderAware {
    private final ResourceProperties resourceProperties;
    private ResourceLoader resourceLoader;

    public FaviconConfiguration(ResourceProperties resourceProperties) {
        this.resourceProperties = resourceProperties;
    }

    public void
    setResourceLoader(ResourceLoader resourceLoader) {
        this.resourceLoader = resourceLoader;
    }

    @Bean
    public SimpleUrlHandlerMapping faviconHandlerMapping() {
        SimpleUrlHandlerMapping mapping = new SimpleUrlHandlerMapping();
        mapping.setOrder(-2147483647);
        mapping.setUrlMap(Collections.singletonMap("**/favicon.ico", this.faviconRequestHandler()));
        return mapping;
    }

    @Bean
    public ResourceHttpRequestHandler faviconRequestHandler() {
        ResourceHttpRequestHandler
        requestHandler = new ResourceHttpRequestHandler();
        requestHandler.setLocations(this.resolveFaviconLocations());
        return requestHandler;
    }

    private List<Resource> resolveFaviconLocations() {
    String[] staticLocations = WebMvcAutoConfiguration.WebMvcAutoConfigurationAdapter.getResourceLocations(this.resourceProperties.getStaticLocations());
    List<Resource> locations = new ArrayList(staticLocations.length + 1);
    Stream var10000 = Arrays.stream(staticLocations);
    ResourceLoader var10001 = this.resourceLoader;
    var10001.getClass();
    var10000.map(var10001::getResource).forEach(locations::add);
    locations.add(new ClassPathResource("/"));
    return
    Collections.unmodifiableList(locations);
   }
}

3.SpringBoot 1.x與2.x版本區(qū)別

在SpringBoot 1.x版本中對Favicon進行了默認支持，并且可以通過如下配置進行關(guān)閉操作:

spring.mvc.favicon.enabled=false ## 關(guān)閉

默認的Favicon圖標效果：

但到了SpringBoot2.x版本后，在Spring Boot項目的issues中提出，如果用戶不進行自定義的Favicon的設置，而Spring Boot項目會提供默認的圖標，而如果提供默認的Favicon圖標，則可能會導致泄露網(wǎng)站的開發(fā)框架這樣的信息。

因此，在Spring Boot2.2.x中，將默認的favicon.ico移除，同時也不再提供上述application.properties中的屬性配置。更多詳細信息可查看對應的issues：https://github.com/spring-pr

4.SpringBoot2.x項目中添加Favicon

在2.x以前的版本，直接將你需要的favicon.ico文件存放在static下面就可以。

但到了2.2.X以后的版本，去掉了默認的自動配置，需要我們手動在每一個頁面添加自己網(wǎng)站的Favicon圖標。

我們可以在static目錄下創(chuàng)建一個images目錄，里面存放自己的Favicon.ico圖標。

4.1 html頁面中添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="icon" href="images/Favicon.ico" type="image/x-icon"/>
</head>
<body>
<h1>一一哥的登錄頁面...</h1>
</body>
</html>

4.2 Thymeleaf頁面中添加

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Hello Favicon</title>
<link rel="icon" th:href="@{/favicon.ico}" type="image/x-icon"/>
</head>
<body>
<h1>Hello 一一哥!</h1>
</body>
</html>

5.重啟項目測試

我們重新訪問頁面，可以看到Favicon圖標已經(jīng)換成了我自己的圖標。

章來源：freecodecamp網(wǎng)址：https://chinese.freecodecamp.org/

HTML 是一種標記語言，使用特殊的語法或標記來向瀏覽器描述網(wǎng)頁的結(jié)構(gòu)。HTML 元素由開始和結(jié)束標簽構(gòu)成，標簽之間是文本內(nèi)容。不同的標簽可以讓文本內(nèi)容以標題、段落、列表等形式展現(xiàn)。

在這個課程中，你將通過編寫一個展示貓咪圖片的應用，學習最常見的 HTML 元素——它們可以用來構(gòu)成任何網(wǎng)頁。

向 HTML 元素問好通過

歡迎訪問 freeCodeCamp 的 HTML 編程挑戰(zhàn)。這些挑戰(zhàn)將會幫助你逐步掌握 Web 開發(fā)。

首先，我們采用 HTML 制作一個簡單的網(wǎng)頁。你可以直接在網(wǎng)頁內(nèi)置的代碼編輯器中編輯代碼。

你看到編輯器中的 <h1>Hello</h1> 了嗎？那是一個 HTML 元素。

大部分 HTML 元素都有一個開始標簽和一個結(jié)束標簽。

開始標簽像這樣：

<h1>

結(jié)束標簽像這樣：

</h1>

開始標簽和結(jié)束標簽的唯一區(qū)別就是結(jié)束標簽多了一個斜杠。

每個挑戰(zhàn)都有測試，任何時候你點擊“運行測試”按鈕，就可以運行測試。如果代碼通過測試，將會彈出一個窗口，你就可以進入下一個挑戰(zhàn)。

要通過這個挑戰(zhàn)的測試，需要修改 h1 元素的文本為 Hello World。

具體要求如下：

h1 元素的內(nèi)容文本應為 Hello World。

源代碼如下：

<h1>Hello</h1>

更改后如下：

<h1>Hello world</h1>

什么學習網(wǎng)頁制作？

互聯(lián)網(wǎng)時代的今天，各種各樣的網(wǎng)頁充斥著我們的生活。只要使用瀏覽器，打開的每一個頁面都可以稱之為網(wǎng)頁。即使使用頭條這樣的APP，其內(nèi)容布局、展示的方法也脫胎于網(wǎng)頁頁面設計的方法與原則。可以說頁面的概念已經(jīng)遍布我們的信息化世界。

作為蕓蕓眾生中的一員，學習網(wǎng)頁制作對我們的事業(yè)、生活有怎樣的幫助呢？

第一，學習網(wǎng)頁制作有助于理解網(wǎng)絡信息的傳播運行機制，即使通過本課程不能全面了解這些核心機制，也能為大家鋪墊下繼續(xù)深入學習的知識基礎。即使自己不必親自制作網(wǎng)頁，在使用第三方工具時，比如微信公眾號、微信小程序或者其他自動網(wǎng)頁或網(wǎng)站生成工具時也會比沒有基礎的人更快的掌握這些工具。

第二，學好網(wǎng)頁制作是制作網(wǎng)站的基礎，如果您因為事業(yè)需要或者個人愛好打算制作自己的網(wǎng)站或博客，無論是打算使用php還是Java還是Python去構(gòu)建您的網(wǎng)站，精通網(wǎng)頁制作技術(shù)是您的第一塊技術(shù)基石。

第三，如果您打算學習網(wǎng)絡爬蟲來分析一些網(wǎng)絡數(shù)據(jù)，了解網(wǎng)頁頁面構(gòu)成也是必要基礎，至少您要知道一個網(wǎng)頁頁面中每個標簽中對應的是哪些信息，才能有的放矢拿到自己想要的信息。

第四，如果您想學習編程，但是缺少相應的基礎知識，看不懂復雜的C語言教學，那么從網(wǎng)頁制作入手嘗試理解編程的語法也是一個很不錯的選擇。

除此之外，瀏覽器可以做的事情越來越多，比如webgl的出現(xiàn)，可以讓我們通過瀏覽器構(gòu)建3d世界，無論是虛擬現(xiàn)實（VR）還是增強現(xiàn)實（AR）都有很多開源免費的解決方案。TensorFlow的JavaScript版本的出現(xiàn)，讓我們可以通過結(jié)合瀏覽器學習使用人工智能技術(shù)，且非常容易實現(xiàn)。

所以，新的一年里，我打算做網(wǎng)頁制作的學習教程，讓更多沒有基礎卻對網(wǎng)絡技術(shù)感興趣的小伙伴能加入進來。

制作網(wǎng)頁需要學習哪些技術(shù)？

簡單來說學習網(wǎng)頁制作需要掌握三門技術(shù)。

第一，也是最基礎最核心的內(nèi)容是HTML超文本標記語言。大家不必糾結(jié)HTML到底是什么，但是一定要記住它能干什么。HTML通俗來說可以比喻成容器。大家試想，網(wǎng)頁里都有哪些內(nèi)容呢？

一般網(wǎng)頁中都會有文字、圖片、聲音、視頻、表格等內(nèi)容，這些內(nèi)容就是靠HTML中的標簽添加進頁面的。

所以說HTML這個工具就是個容器，我們使用HTML標簽語言為網(wǎng)頁添加所有需要的信息內(nèi)容。

第二，CSS層疊樣式表，這是一個用來裝飾頁面的工具。如果說HTML是個信息容器，那么如何讓這些信息條理清晰的顯示出來呢？那就需要CSS來幫忙了。如下圖所示，這是一個最簡單的頁面，只用到了HTML，里面裝了一個標題和一個只有六個字的段落。

為了讓這個頁面看起來美觀些，我們?yōu)槠涮砑觕ss樣式表。添加后如圖所示：

我們可以看出來，CSS讓標題文字換了顏色，也居中顯示了，背景也變成了藍色。

第三，JavaScript，這個工具相比HTML和CSS來講是最難學習的，學習JavaScript就是在學習編程了。它雖然只是個腳本語言，但是用到的知識和其他編程語言相差不大。

那JavaScript能干什么呢？

首先，它能為頁面中添加很多交互效果。舉個例子，我們常見的圖片翻頁、輪播很多就是基于JavaScript腳本實現(xiàn)的。

其次，JavaScript可以為傳統(tǒng)頁面擴展出很多新功能，例如結(jié)合three.js我們可以很容易的在頁面中構(gòu)建三維空間，或者實現(xiàn)一些3d游戲或其他三維動態(tài)演示效果。舉個例子（https://renaultespace.littleworkshop.fr/），打開可能略慢。3d展示的汽車廣告是不是很酷！

再次，JavaScript可以以網(wǎng)頁為基礎，實現(xiàn)各種各樣的在線小游戲，例如Phaser.js就是目前非常火的一個開源免費網(wǎng)頁游戲制作庫。phaser官網(wǎng)：http://phaser.io/

JavaScript為網(wǎng)頁的功能拓展提供了很多可能性，無論是3d顯示還是游戲制作還是未來的人工智能工具，都是由JavaScript都為大家提供了將功能引入到頁面的接口，這也是學習難度比較大的原因。不過只要堅持下去一定能學通的！

網(wǎng)站與網(wǎng)頁的區(qū)別？

網(wǎng)頁是指我們看到的單個頁面。這些頁面分為靜態(tài)頁面和動態(tài)頁面兩種。靜態(tài)頁面指的是不能與服務器進行數(shù)據(jù)交互的頁面，顧名思義動態(tài)頁面指的是可以與服務器進行數(shù)據(jù)交互的頁面，這一點大家不必糾結(jié)。

簡單來說，靜態(tài)頁面寫好后什么樣就是什么樣，誰打開都是事先編輯好的內(nèi)容，而動態(tài)頁面寫好后會隨著不同的訪問變換不同數(shù)據(jù)，動態(tài)頁面更像是一個頁面模板，隨時套用不同信息。

大部分網(wǎng)站中的頁面都是動態(tài)頁面。

如果使用靜態(tài)頁面做網(wǎng)站會出現(xiàn)什么問題呢？如果您有300篇博客文章，那您就要做300個靜態(tài)頁面來顯示，大型資訊網(wǎng)站信息量更加龐大，如果都用靜態(tài)頁面來做，占用的服務器空間也是龐大到不可想象。

網(wǎng)站中的動態(tài)頁面就解決了這個問題，例如一個簡單的網(wǎng)站我們只需一個主頁、文章頁、搜索頁基本上就可以了，這些頁面中沒有具體內(nèi)容，我們稱之為模板。當您打開后，顯示的內(nèi)容都是在數(shù)據(jù)庫中調(diào)出的。這樣，一個數(shù)據(jù)庫用來存儲壓縮過的精簡信息，這些信息通過不同頁面模板顯示在用戶面前就成為網(wǎng)站的基本運行模式。

例如在靜態(tài)頁面中顯示文字字數(shù)的代碼是這樣

<p>300字</p>

如果使用以php編寫的WordPress網(wǎng)站框架來動態(tài)顯示文章字數(shù)就是這樣

<p><?php echo zm_count_words($text); ?></p>

<?php echo zm_count_words($text); ?>這條語句可以調(diào)取數(shù)據(jù)庫中文章字數(shù)的記錄并顯示出來。這也我們通過這一條語句就可以顯示不同文章的字數(shù)了。

無論是靜態(tài)頁面還是動態(tài)頁面，他們的核心內(nèi)容都是一樣的，HTML，CSS，JavaScript都是必修知識。只是靜態(tài)頁面在HTML中插入信息，而動態(tài)頁面插入的是調(diào)取數(shù)據(jù)庫信息的語句。

因此，我們這個教程看起來是在做靜態(tài)頁面，但是我們學習的也是制作網(wǎng)站的基礎知識。

本教學學完能干什么？

第一，可以寫出靜態(tài)頁面。

第二，有能力讀懂他人寫好的頁面代碼。

第三，為繼續(xù)深入學習網(wǎng)站制作或更為炫酷的頁面制作打下基礎。

第四，掌握編程基礎，至少是基于JavaScript的。

我是大魚，致力于數(shù)字藝術(shù)技術(shù)分享！歡迎大家關(guān)注！祝愿大家2020年學有所成！

HTML學習目錄

HTML是什么？——零基礎自學網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎自學網(wǎng)頁制作

HTML頁面中head標簽有啥用？——零基礎自學網(wǎng)頁制作

初識meta標簽與SEO——零基礎自學網(wǎng)頁制作

HTML中的元素使用方法1——零基礎自學網(wǎng)頁制作

HTML中的元素使用方法2——零基礎自學網(wǎng)頁制作

HTML元素中的屬性1——零基礎自學網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎自學網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網(wǎng)頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎自學網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎自學網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網(wǎng)頁制作

封閉在家學網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎自學網(wǎng)頁制作

HTML表單元素初識1——零基礎自學網(wǎng)頁制作

HTML表單元素初識2——零基礎自學網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎自學網(wǎng)頁制作

HTML列表制作講解——零基礎自學網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎自學網(wǎng)頁制作

HTML中使用<a>標簽實現(xiàn)文本內(nèi)鏈接——零基礎自學網(wǎng)頁制作

在線咨詢

上一篇：HTML 之簡介
下一篇：20個超炫的html5視頻背景頁面

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商