整合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");
    }
}

从源码中我们可以看到，欢迎页的静态资源文件默认就是index.html页面，并且只要该页面存放在resources目录下的默认路径中，就会被"/**"映射。

classpath:/META-INF/resources/ 
classpath:/resources/
classpath:/static/ 
classpath:/public/
/：当前项目的根路径

也就是只要index.html页面在以上几个目录内，就会自动被Spring Boot探测到。

2.实验验证

2.1 创建web项目(略)

目录结构如下，在该项目中，我们在resources目录下，创建4个子文件夹，具体参考上一章节。然后在每个子文件夹中，都存放一个index.html文件，但是文件内容略有不同，每个文件都有自己的编号。

每个index.html文件内容的编号不同，以此类推！

2.2 启动项目测试

我们启动web项目，输入地址http://localhost:8080会发现，默认加载的是META-INF/resources目录下的index.html文件，为什么呢？这与静态资源文件夹的优先级有关系哦，我们上一章节已经讲过了

二.自定义欢迎页面

但在实际开发中，我们有时候就希望先访问登录界面，然后登录成功后再跳到主页面，那此时如何将登录页面作为欢迎页面呢？

这个可以有两种实现方式。

视图控制器配置方式；
Controller直接实现方式；

1.视图控制器配置方式

1.1 创建配置类

我们可以在上面的web项目中，创建一个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"是请求转发到的页面名称
        registry.addViewController("/").setViewName("forward:home.html");
        //设置优先级
        registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
        super.addViewControllers(registry);
    }

}

1.2 创建home.html页面

我们在static目录下创建一个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直接实现方式

我们在上一个例子的基础之上，创建一个Controller类。

注意：

把上一个案例中DefaultViewConfig配置类的@Configure注解去掉，避免影响到本次实验。

2.1 项目结构：

2.2 创建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就可以看到如下欢迎界面。

三.结合Thymeleaf模板实现欢迎页面

我们可以结合Thymeleaf模板，来实现欢迎页面。

1.添加依赖包

在该web项目的pom.xml文件中添加依赖包。

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

2.配置模板路径

创建application.properties文件，添加如下配置，其实默认也是这个配置。

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

3.创建login.html页面

创建login.html存放到/templates/目录下。

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

4.创建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即可看到欢迎界面。

四.设置网站图标Favicon

1.Favicon简介

很多时候，企业网站一般都会有一个对应的网站图标(Favicon)，在浏览器访问网站时，对应的浏览器标签上会出现对应的图标。例如csdn网站上的小图标。

2.Favicon源码分析

我们可以看看Spring中关于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版本区别

在SpringBoot 1.x版本中对Favicon进行了默认支持，并且可以通过如下配置进行关闭操作:

spring.mvc.favicon.enabled=false ## 关闭

默认的Favicon图标效果：

但到了SpringBoot2.x版本后，在Spring Boot项目的issues中提出，如果用户不进行自定义的Favicon的设置，而Spring Boot项目会提供默认的图标，而如果提供默认的Favicon图标，则可能会导致泄露网站的开发框架这样的信息。

因此，在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以后的版本，去掉了默认的自动配置，需要我们手动在每一个页面添加自己网站的Favicon图标。

我们可以在static目录下创建一个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图标已经换成了我自己的图标。

章来源：freecodecamp网址：https://chinese.freecodecamp.org/

HTML 是一种标记语言，使用特殊的语法或标记来向浏览器描述网页的结构。HTML 元素由开始和结束标签构成，标签之间是文本内容。不同的标签可以让文本内容以标题、段落、列表等形式展现。

在这个课程中，你将通过编写一个展示猫咪图片的应用，学习最常见的 HTML 元素——它们可以用来构成任何网页。

向 HTML 元素问好通过

欢迎访问 freeCodeCamp 的 HTML 编程挑战。这些挑战将会帮助你逐步掌握 Web 开发。

首先，我们采用 HTML 制作一个简单的网页。你可以直接在网页内置的代码编辑器中编辑代码。

你看到编辑器中的 <h1>Hello</h1> 了吗？那是一个 HTML 元素。

大部分 HTML 元素都有一个开始标签和一个结束标签。

开始标签像这样：

<h1>

结束标签像这样：

</h1>

开始标签和结束标签的唯一区别就是结束标签多了一个斜杠。

每个挑战都有测试，任何时候你点击“运行测试”按钮，就可以运行测试。如果代码通过测试，将会弹出一个窗口，你就可以进入下一个挑战。

要通过这个挑战的测试，需要修改 h1 元素的文本为 Hello World。

具体要求如下：

h1 元素的内容文本应为 Hello World。

源代码如下：

<h1>Hello</h1>

更改后如下：

<h1>Hello world</h1>

什么学习网页制作？

互联网时代的今天，各种各样的网页充斥着我们的生活。只要使用浏览器，打开的每一个页面都可以称之为网页。即使使用头条这样的APP，其内容布局、展示的方法也脱胎于网页页面设计的方法与原则。可以说页面的概念已经遍布我们的信息化世界。

作为芸芸众生中的一员，学习网页制作对我们的事业、生活有怎样的帮助呢？

第一，学习网页制作有助于理解网络信息的传播运行机制，即使通过本课程不能全面了解这些核心机制，也能为大家铺垫下继续深入学习的知识基础。即使自己不必亲自制作网页，在使用第三方工具时，比如微信公众号、微信小程序或者其他自动网页或网站生成工具时也会比没有基础的人更快的掌握这些工具。

第二，学好网页制作是制作网站的基础，如果您因为事业需要或者个人爱好打算制作自己的网站或博客，无论是打算使用php还是Java还是Python去构建您的网站，精通网页制作技术是您的第一块技术基石。

第三，如果您打算学习网络爬虫来分析一些网络数据，了解网页页面构成也是必要基础，至少您要知道一个网页页面中每个标签中对应的是哪些信息，才能有的放矢拿到自己想要的信息。

第四，如果您想学习编程，但是缺少相应的基础知识，看不懂复杂的C语言教学，那么从网页制作入手尝试理解编程的语法也是一个很不错的选择。

除此之外，浏览器可以做的事情越来越多，比如webgl的出现，可以让我们通过浏览器构建3d世界，无论是虚拟现实（VR）还是增强现实（AR）都有很多开源免费的解决方案。TensorFlow的JavaScript版本的出现，让我们可以通过结合浏览器学习使用人工智能技术，且非常容易实现。

所以，新的一年里，我打算做网页制作的学习教程，让更多没有基础却对网络技术感兴趣的小伙伴能加入进来。

制作网页需要学习哪些技术？

简单来说学习网页制作需要掌握三门技术。

第一，也是最基础最核心的内容是HTML超文本标记语言。大家不必纠结HTML到底是什么，但是一定要记住它能干什么。HTML通俗来说可以比喻成容器。大家试想，网页里都有哪些内容呢？

一般网页中都会有文字、图片、声音、视频、表格等内容，这些内容就是靠HTML中的标签添加进页面的。

所以说HTML这个工具就是个容器，我们使用HTML标签语言为网页添加所有需要的信息内容。

第二，CSS层叠样式表，这是一个用来装饰页面的工具。如果说HTML是个信息容器，那么如何让这些信息条理清晰的显示出来呢？那就需要CSS来帮忙了。如下图所示，这是一个最简单的页面，只用到了HTML，里面装了一个标题和一个只有六个字的段落。

为了让这个页面看起来美观些，我们为其添加css样式表。添加后如图所示：

我们可以看出来，CSS让标题文字换了颜色，也居中显示了，背景也变成了蓝色。

第三，JavaScript，这个工具相比HTML和CSS来讲是最难学习的，学习JavaScript就是在学习编程了。它虽然只是个脚本语言，但是用到的知识和其他编程语言相差不大。

那JavaScript能干什么呢？

首先，它能为页面中添加很多交互效果。举个例子，我们常见的图片翻页、轮播很多就是基于JavaScript脚本实现的。

其次，JavaScript可以为传统页面扩展出很多新功能，例如结合three.js我们可以很容易的在页面中构建三维空间，或者实现一些3d游戏或其他三维动态演示效果。举个例子（https://renaultespace.littleworkshop.fr/），打开可能略慢。3d展示的汽车广告是不是很酷！

再次，JavaScript可以以网页为基础，实现各种各样的在线小游戏，例如Phaser.js就是目前非常火的一个开源免费网页游戏制作库。phaser官网：http://phaser.io/

JavaScript为网页的功能拓展提供了很多可能性，无论是3d显示还是游戏制作还是未来的人工智能工具，都是由JavaScript都为大家提供了将功能引入到页面的接口，这也是学习难度比较大的原因。不过只要坚持下去一定能学通的！

网站与网页的区别？

网页是指我们看到的单个页面。这些页面分为静态页面和动态页面两种。静态页面指的是不能与服务器进行数据交互的页面，顾名思义动态页面指的是可以与服务器进行数据交互的页面，这一点大家不必纠结。

简单来说，静态页面写好后什么样就是什么样，谁打开都是事先编辑好的内容，而动态页面写好后会随着不同的访问变换不同数据，动态页面更像是一个页面模板，随时套用不同信息。

大部分网站中的页面都是动态页面。

如果使用静态页面做网站会出现什么问题呢？如果您有300篇博客文章，那您就要做300个静态页面来显示，大型资讯网站信息量更加庞大，如果都用静态页面来做，占用的服务器空间也是庞大到不可想象。

网站中的动态页面就解决了这个问题，例如一个简单的网站我们只需一个主页、文章页、搜索页基本上就可以了，这些页面中没有具体内容，我们称之为模板。当您打开后，显示的内容都是在数据库中调出的。这样，一个数据库用来存储压缩过的精简信息，这些信息通过不同页面模板显示在用户面前就成为网站的基本运行模式。

例如在静态页面中显示文字字数的代码是这样

<p>300字</p>

如果使用以php编写的WordPress网站框架来动态显示文章字数就是这样

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

<?php echo zm_count_words($text); ?>这条语句可以调取数据库中文章字数的记录并显示出来。这也我们通过这一条语句就可以显示不同文章的字数了。

无论是静态页面还是动态页面，他们的核心内容都是一样的，HTML，CSS，JavaScript都是必修知识。只是静态页面在HTML中插入信息，而动态页面插入的是调取数据库信息的语句。

因此，我们这个教程看起来是在做静态页面，但是我们学习的也是制作网站的基础知识。

本教学学完能干什么？

第一，可以写出静态页面。

第二，有能力读懂他人写好的页面代码。

第三，为继续深入学习网站制作或更为炫酷的页面制作打下基础。

第四，掌握编程基础，至少是基于JavaScript的。

我是大鱼，致力于数字艺术技术分享！欢迎大家关注！祝愿大家2020年学有所成！

HTML学习目录

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

在线咨询

上一篇：HTML 之简介
下一篇：20个超炫的html5视频背景页面

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商