SpringBoot2.x系列教程11--设置项目欢迎页面与自定义Favicon图标

简介: 前言在上一章节中,壹哥 给大家讲解了在SpringBoot项目中如何处理静态资源,明白了静态资源的存储位置,今天我会对静态资源做进一步的处理。既然我们的项目中存在多个页面,那在项目启动时,首先应该展示哪个页面呢?我们不可能一次性把所有的页面都展现出来,总有一个默认展示的页面,这里我们把这个默认展示的页面成为欢迎页。那么在SpringBoot中,该如何设置欢迎页面呢?请仔细阅读今天的内容,壹哥 带你实现欢迎页面的设置。一. Spring Boot中配置欢迎页面接下来我们就开始学习,在SpringBoot中如何配置欢迎页面。1. 默认欢迎页的源码在Spring Boot中,默认的欢迎

前言

在上一章节中,壹哥 给大家讲解了在SpringBoot项目中如何处理静态资源,明白了静态资源的存储位置,今天我会对静态资源做进一步的处理。

既然我们的项目中存在多个页面,那在项目启动时,首先应该展示哪个页面呢?我们不可能一次性把所有的页面都展现出来,总有一个默认展示的页面,这里我们把这个默认展示的页面成为欢迎页。那么在SpringBoot中,该如何设置欢迎页面呢?请仔细阅读今天的内容,壹哥 带你实现欢迎页面的设置。

一. Spring Boot中配置欢迎页面

接下来我们就开始学习,在SpringBoot中如何配置欢迎页面。

1. 默认欢迎页的源码

在Spring Boot中,默认的欢迎界面名称是index.html,那为什么是这样呢?我们可以看看源码中是怎么定义的。

publicclassWebMvcAutoConfiguration {
privateOptional<Resource>getWelcomePage() {
String[] locations=getResourceLocations(this.resourceProperties.getStaticLocations());
returnArrays.stream(locations).map(this::getIndexHtml).filter(this::isReadable).findFirst();
   }
privateResourcegetIndexHtml(Stringlocation) {
returnthis.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项目(略)

首先我们仿照之前的项目,创建一个新的web项目,创建过程略过。

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

但是每个index.html文件里代码内容的编号不同,以此类推!

2.2 启动项目测试

接下来我们启动这个web项目,输入地址
http://localhost:8080

会发现,默认加载的是META-INF/resources目录下的index.html文件,这是为什么呢?其实这与静态资源文件夹的优先级有关系哦,我们上一章节已经讲过了,你仔细回想一下。

二. 实现自定义欢迎页面

了解了欢迎页面的内部定义逻辑,接下来我们就进行自定义的欢迎页面配置,实现自己的个性化定制需求。

1. 实现自定义欢迎页面的方式

在实际开发中,有时候我们希望先访问登录界面,登录成功后再跳到主页面,那此时如何将登录页面作为欢迎页面呢?这里可以有两种实现方式:

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

接下来我会分别使用这两种方式来实现自定义的欢迎页面,我先以视图控制器配置方式来实现自定义的欢迎页面

2. 创建配置类

我们可以在上面的web项目中,创建一个WebMvcConfigurerAdapter类。

WebMvcConfigurerAdapter代码如下:

packagecom.yyg.boot.config;
importorg.springframework.context.annotation.Configuration;
importorg.springframework.core.Ordered;
importorg.springframework.web.servlet.config.annotation.ViewControllerRegistry;
importorg.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
importorg.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
/*** @Description Description* @Author 一一哥Sun* @Date Created in 2020/3/21*/@ConfigurationpublicclassDefaultViewConfigextendsWebMvcConfigurerAdapter {
@OverridepublicvoidaddViewControllers(ViewControllerRegistryregistry) {
//这里的"/"是访问路径,"forward:home.html"是请求转发到的页面名称registry.addViewController("/").setViewName("forward:home.html");
//设置优先级registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
super.addViewControllers(registry);
    }
}

3. 创建home.html页面

然后为了测试,创建一个home.html页面作为欢迎页面。

这里我是在static目录下创建一个home.html页面,代码如下:

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Home</title></head><body><h1>一一哥的Home页面...</h1></body></html>

4. 运行测试

接着我们运行程序,输入如下地址:
http://localhost:8080


然后就可以在浏览器中看到如下欢迎界面。

三. 以Controller直接实现自定义欢迎页面

接下来我们换一种实现思路,这里采用第2种实现方案,以Controller直接定义的方式来实现。

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

注意:

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

1. 创建Controller

我们首先创建一个Controller,内部代码如下:

packagecom.yyg.boot.web;
importorg.springframework.stereotype.Controller;
importorg.springframework.web.bind.annotation.RequestMapping;
/*** @Description Description* @Author 一一哥Sun* @Date Created in 2020/3/21*/@ControllerpublicclassWelcomeController {
@RequestMapping("/")
publicStringview() {
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><htmllang="en"><head><metacharset="UTF-8"><title>Login</title></head><body><h1>一一哥的登录页面...</h1></body></html>

4. 创建Controller接口

修改上面的Controller接口,增加一个login接口。

packagecom.yyg.boot.web;
importorg.springframework.stereotype.Controller;
importorg.springframework.web.bind.annotation.RequestMapping;
/*** @Description Description* @Author 一一哥Sun* @Date Created in 2020/3/21*/@ControllerpublicclassWelcomeController {
//    @RequestMapping("/")//    public String view() {//        return "forward:home.html";//    }@RequestMapping("/")
publicStringlogin() {
return"login";
    }
}

5. 运行测试

重启项目后,然后输入地址,http://localhost:8080
即可看到欢迎界面。

到此为止,我就带大家实现了自定义的欢迎页面配置。接下来我们看另一个静态资源的自定义配置。

五. 设置网站图标Favicon

1. Favicon简介

很多时候,企业网站上一般都会有一个对应的网站图标(Favicon),在访问该网站时,浏览器中对应的选项卡标签上会出现企业的logo图标,例如CSDN网站上的小图标。

那么既然CSDN网站可以设置自己的logo作为Favicon图标,那么我们的网站上是不是也可以设置呢?该如何实现呢?请先跟着 壹哥 看看源码中对此是怎么定义的。

2. Favicon源码分析

我们来看一下Spring中关于Favicon的源码定义。

@Configuration@ConditionalOnProperty(value= {"spring.mvc.favicon.enabled"},matchIfMissing=true)
publicstaticclassFaviconConfigurationimplementsResourceLoaderAware {
privatefinalResourcePropertiesresourceProperties;
privateResourceLoaderresourceLoader;
publicFaviconConfiguration(ResourcePropertiesresourceProperties) {
this.resourceProperties=resourceProperties;
    }
publicvoidsetResourceLoader(ResourceLoaderresourceLoader) {
this.resourceLoader=resourceLoader;
    }
@BeanpublicSimpleUrlHandlerMappingfaviconHandlerMapping() {
SimpleUrlHandlerMappingmapping=newSimpleUrlHandlerMapping();
mapping.setOrder(-2147483647);
mapping.setUrlMap(Collections.singletonMap("**/favicon.ico", this.faviconRequestHandler()));
returnmapping;
    }
@BeanpublicResourceHttpRequestHandlerfaviconRequestHandler() {
ResourceHttpRequestHandlerrequestHandler=newResourceHttpRequestHandler();
requestHandler.setLocations(this.resolveFaviconLocations());
returnrequestHandler;
    }
privateList<Resource>resolveFaviconLocations() {
String[] staticLocations=WebMvcAutoConfiguration.WebMvcAutoConfigurationAdapter.getResourceLocations(this.resourceProperties.getStaticLocations());
List<Resource>locations=newArrayList(staticLocations.length+1);
Streamvar10000=Arrays.stream(staticLocations);
ResourceLoadervar10001=this.resourceLoader;
var10001.getClass();
var10000.map(var10001::getResource).forEach(locations::add);
locations.add(newClassPathResource("/"));
returnCollections.unmodifiableList(locations);
   }
}

3. SpringBoot 1.x与2.x版本区别

从上面的源码中可知,SpringBoot中定义了一个spring.mvc.favicon.enabled属性,用于定义Favicon。其实在SpringBoot 1.x版本中,就对Favicon进行了默认支持,并且可以通过如下配置进行关闭操作:

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

SpringBoot 默认的Favicon图标效果如下所示:

但到了SpringBoot2.x版本后,在Spring Boot项目的issues问题中有人提出,如果用户没有设置自定义的Favicon,Spring Boot项目提供的默认图标可能会泄露网站的开发框架这样的敏感信息。

因此,在Spring Boot2.2.x版本中,将默认的favicon.ico属性移除了,同时也不再提供上述application.properties中的属性配置。更多详细信息可查看对应的issues:https://github.com/spring-pr

4. SpringBoot2.x项目中添加Favicon

在2.x以前的版本,如果我们要配置自定义的Favicon,直接将我们需要的favicon.ico图标文件存放在static目录下面就可以实现了。

但在SpringBoot 2.2.X以后的版本中,去掉了默认的自动配置,需要我们手动在每一个页面添加自己网站的Favicon图标。我们可以在static目录下创建一个images目录,里面存放自己的Favicon.ico图标,然后在需要的页面中自行引用该图标即可。

4.1 html页面中添加

在html页面页面中引用Favicon图标。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Login</title><linkrel="icon"href="images/Favicon.ico"type="image/x-icon"/></head><body><h1>一一哥的登录页面...</h1></body></html>

4.2 Thymeleaf页面中添加

在Thymeleaf模板中通过th:href标签引用favicon标签。

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

5. 重启项目测试

重启项目后,重新访问页面,我们就可以看到Favicon图标已经被换成了自己的图标。

结语

好了,这样我们就把今天的内容都讲完了,现在你知道该怎么配置欢迎页和自己的Favicon图标了吧?

今日小作业:

用苍老师的头像作为自己项目的Favicon图标,并且做一个漂亮的欢迎页面,吸引无数人来访问你的网站。

相关文章
|
24天前
|
JSON Java 数据格式
springboot中表字段映射中设置JSON格式字段映射
springboot中表字段映射中设置JSON格式字段映射
69 1
|
27天前
|
Java 应用服务中间件
SpringBoot获取项目文件的绝对路径和相对路径
SpringBoot获取项目文件的绝对路径和相对路径
64 1
SpringBoot获取项目文件的绝对路径和相对路径
|
18天前
|
存储 运维 安全
Spring运维之boot项目多环境(yaml 多文件 proerties)及分组管理与开发控制
通过以上措施,可以保证Spring Boot项目的配置管理在专业水准上,并且易于维护和管理,符合搜索引擎收录标准。
31 2
|
22天前
|
分布式计算 关系型数据库 MySQL
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型 图像处理 光通信 分布式计算 算法语言 信息技术 计算机应用
38 8
|
29天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
45 2
|
29天前
|
前端开发 Java Spring
SpringBoot项目thymeleaf页面支持词条国际化切换
SpringBoot项目thymeleaf页面支持词条国际化切换
60 2
|
29天前
|
JSON Java 数据库
SpringBoot项目使用AOP及自定义注解保存操作日志
SpringBoot项目使用AOP及自定义注解保存操作日志
38 1
|
1月前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
|
13天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
31 0
|
2月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,包括版本兼容性、安全性、性能调优等方面。
162 1