SpringBoot中定制异常页面的实现方法

定制异常页面，可以避免用户产生恐慌心理，使得产品有更好的用户体验。今天来学习在 SpringBoot 中如何定制开发异常页面

一、历史回顾

在 SpringMVC 年代，我们的异常页面一般配置在 web.xml 文件中，如下：

<!-- 配置404页面 -->
<error-page>
   <error-code>404</error-code>
   <location>/error/404.html</location>
 </error-page>

这里我们指定了异常请求状态码 404，然后配置了 404 异常请求的页面地址，这就意味着如果某一个请求发生了 404 异常，则会出现 404.html 界面

二、SpringBoot中配置

1、默认异常页面

这是 SpringBoot 中默认的异常页面，返回的是一堆异常信息和异常状态码，那用户固然是看不懂这些信息的，容易使得用户产生恐慌的心里，从而影响产品的用户体验

2、定制异常页面

SpringBoot 中定制异常页面非常简单，我们需要一个配置文件 ExceptionPageConfig.java

import org.springframework.boot.web.server.ConfigurableWebServerFactory;
import org.springframework.boot.web.server.ErrorPage;
import org.springframework.boot.web.server.WebServerFactoryCustomizer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpStatus;

/**
 * 统一异常页面处理
 *
 * @Author Lizhou
 **/
@Configuration
public class ExceptionPageConfig {

  /**
   * SpringBoot2.0以上版本
   * WebServerFactoryCustomizer代替之前版本的EmbeddedWebServerFactoryCustomizerAutoConfiguration
   *
   * @return
   */
  @Bean
  public WebServerFactoryCustomizer<ConfigurableWebServerFactory> webServerFactoryCustomizer() {
    return (container -> {
      ErrorPage error400Page = new ErrorPage(HttpStatus.BAD_REQUEST, "/400");
      ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/404");
      ErrorPage error500Page = new ErrorPage(HttpStatus.INTERNAL_SERVER_ERROR, "/500");
      container.addErrorPages(error400Page, error404Page, error500Page);
    });
  }
}

可以看出，这里我们配置了 400、404、500 三种异常页面，然后我们需要编写 API 请求异常页面 SysExceptionController.java

import com.zyxx.common.utils.PasswordUtils;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.apache.shiro.SecurityUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

/**
 * <p>
 * 前端控制器
 * </p>
 *
 * @author lizhou
 * @since 2020-07-15
 **/
@Api(tags = "后台管理端--异常处理")
@Controller
public class SysExceptionController {

  @ApiOperation(value = "请求400页面", notes = "请求400页面")
  @GetMapping("400")
  public String badRequest() {
    return "sys/exception/400";
  }

  @ApiOperation(value = "请求404页面", notes = "请求404页面")
  @GetMapping("404")
  public String notFound() {
    return "sys/exception/404";
  }

  @ApiOperation(value = "请求500页面", notes = "请求500页面")
  @GetMapping("500")
  public String serverError() {
    return "sys/exception/500";
  }
}

API 写好，下面我们就需要开发异常页面的展示信息了，这里贴一张页面吧，404.html

import com.zyxx.common.utils.PasswordUtils;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.apache.shiro.SecurityUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

/**
 * <p>
 * 前端控制器
 * </p>
 *
 * @author lizhou
 * @since 2020-07-15
 **/
@Api(tags = "后台管理端--异常处理")
@Controller
public class SysExceptionController {

  @ApiOperation(value = "请求400页面", notes = "请求400页面")
  @GetMapping("400")
  public String badRequest() {
    return "sys/exception/400";
  }

  @ApiOperation(value = "请求404页面", notes = "请求404页面")
  @GetMapping("404")
  public String notFound() {
    return "sys/exception/404";
  }

  @ApiOperation(value = "请求500页面", notes = "请求500页面")
  @GetMapping("500")
  public String serverError() {
    return "sys/exception/500";
  }
}

然后所需要的 exception.css

.error .clip .shadow {
  height: 180px;
}

.error .clip:nth-of-type(2) .shadow {
  width: 130px;
}

.error .clip:nth-of-type(1) .shadow, .error .clip:nth-of-type(3) .shadow {
  width: 250px;
}

.error .digit {
  width: 150px;
  height: 150px;
  line-height: 150px;
  font-size: 120px;
  font-weight: bold;
}

.error h2 {
  font-size: 32px;
}

.error .msg {
  top: -190px;
  left: 30%;
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 32px;
}

.error span.triangle {
  top: 70%;
  right: 0%;
  border-left: 20px solid #535353;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.error .container-error-404 {
  top: 50%;
  margin-top: 250px;
  position: relative;
  height: 250px;
  padding-top: 40px;
}

.error .container-error-404 .clip {
  display: inline-block;
  transform: skew(-45deg);
}

.error .clip .shadow {
  overflow: hidden;
}

.error .clip:nth-of-type(2) .shadow {
  overflow: hidden;
  position: relative;
  box-shadow: inset 20px 0px 20px -15px rgba(150, 150, 150, 0.8), 20px 0px 20px -15px rgba(150, 150, 150, 0.8);
}

.error .clip:nth-of-type(3) .shadow:after, .error .clip:nth-of-type(1) .shadow:after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: 0px;
  z-index: 9999;
  height: 100%;
  width: 10px;
  background: linear-gradient(90deg, transparent, rgba(173, 173, 173, 0.8), transparent);
  border-radius: 50%;
}

.error .clip:nth-of-type(3) .shadow:after {
  left: -8px;
}

.error .digit {
  position: relative;
  top: 8%;
  color: white;
  background: #1E9FFF;
  border-radius: 50%;
  display: inline-block;
  transform: skew(45deg);
}

.error .clip:nth-of-type(2) .digit {
  left: -10%;
}

.error .clip:nth-of-type(1) .digit {
  right: -20%;
}

.error .clip:nth-of-type(3) .digit {
  left: -20%;
}

.error h2 {
  font-size: 24px;
  color: #A2A2A2;
  font-weight: bold;
  padding-bottom: 20px;
}

.error .tohome {
  font-size: 16px;
  color: #07B3F9;
}

.error .msg {
  position: relative;
  z-index: 9999;
  display: block;
  background: #535353;
  color: #A2A2A2;
  border-radius: 50%;
  font-style: italic;
}

.error .triangle {
  position: absolute;
  z-index: 999;
  transform: rotate(45deg);
  content: "";
  width: 0;
  height: 0;
}

@media (max-width: 767px) {
  .error .clip .shadow {
    height: 100px;
  }

  .error .clip:nth-of-type(2) .shadow {
    width: 80px;
  }

  .error .clip:nth-of-type(1) .shadow, .error .clip:nth-of-type(3) .shadow {
    width: 100px;
  }

  .error .digit {
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 52px;
  }

  .error h2 {
    font-size: 18px;
  }

  .error .msg {
    top: -110px;
    left: 15%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
  }

  .error span.triangle {
    top: 70%;
    right: -3%;
    border-left: 10px solid #535353;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
  }

  .error .container-error-404 {
    height: 150px;
  }
}

所需要的 exception.js

.error .clip .shadow {
  height: 180px;
}

.error .clip:nth-of-type(2) .shadow {
  width: 130px;
}

.error .clip:nth-of-type(1) .shadow, .error .clip:nth-of-type(3) .shadow {
  width: 250px;
}

.error .digit {
  width: 150px;
  height: 150px;
  line-height: 150px;
  font-size: 120px;
  font-weight: bold;
}

.error h2 {
  font-size: 32px;
}

.error .msg {
  top: -190px;
  left: 30%;
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 32px;
}

.error span.triangle {
  top: 70%;
  right: 0%;
  border-left: 20px solid #535353;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.error .container-error-404 {
  top: 50%;
  margin-top: 250px;
  position: relative;
  height: 250px;
  padding-top: 40px;
}

.error .container-error-404 .clip {
  display: inline-block;
  transform: skew(-45deg);
}

.error .clip .shadow {
  overflow: hidden;
}

.error .clip:nth-of-type(2) .shadow {
  overflow: hidden;
  position: relative;
  box-shadow: inset 20px 0px 20px -15px rgba(150, 150, 150, 0.8), 20px 0px 20px -15px rgba(150, 150, 150, 0.8);
}

.error .clip:nth-of-type(3) .shadow:after, .error .clip:nth-of-type(1) .shadow:after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: 0px;
  z-index: 9999;
  height: 100%;
  width: 10px;
  background: linear-gradient(90deg, transparent, rgba(173, 173, 173, 0.8), transparent);
  border-radius: 50%;
}

.error .clip:nth-of-type(3) .shadow:after {
  left: -8px;
}

.error .digit {
  position: relative;
  top: 8%;
  color: white;
  background: #1E9FFF;
  border-radius: 50%;
  display: inline-block;
  transform: skew(45deg);
}

.error .clip:nth-of-type(2) .digit {
  left: -10%;
}

.error .clip:nth-of-type(1) .digit {
  right: -20%;
}

.error .clip:nth-of-type(3) .digit {
  left: -20%;
}

.error h2 {
  font-size: 24px;
  color: #A2A2A2;
  font-weight: bold;
  padding-bottom: 20px;
}

.error .tohome {
  font-size: 16px;
  color: #07B3F9;
}

.error .msg {
  position: relative;
  z-index: 9999;
  display: block;
  background: #535353;
  color: #A2A2A2;
  border-radius: 50%;
  font-style: italic;
}

.error .triangle {
  position: absolute;
  z-index: 999;
  transform: rotate(45deg);
  content: "";
  width: 0;
  height: 0;
}

@media (max-width: 767px) {
  .error .clip .shadow {
    height: 100px;
  }

  .error .clip:nth-of-type(2) .shadow {
    width: 80px;
  }

  .error .clip:nth-of-type(1) .shadow, .error .clip:nth-of-type(3) .shadow {
    width: 100px;
  }

  .error .digit {
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 52px;
  }

  .error h2 {
    font-size: 18px;
  }

  .error .msg {
    top: -110px;
    left: 15%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
  }

  .error span.triangle {
    top: 70%;
    right: -3%;
    border-left: 10px solid #535353;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
  }

  .error .container-error-404 {
    height: 150px;
  }
}

三、测试

项目启动后，我们访问一个并不存在的 API

那，通过访问一个项目中并不存在的 API，得到 404 页面，页面可以提示一些友好的文字，从而安抚用户紧张的心理，其实也是一个不错的选择吧

到此这篇关于SpringBoot中定制异常页面的实现方法的文章就介绍到这了,更多相关SpringBoot 定制异常页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • BGPMPLS VPN的实现技术

    BGP/MPLS VPN的实现技术 摘要 MPLS VPN技术是未来构建VPN的发展方向,越来越受到客户和运营商的青睐.BGP/MPLS VPN是第三层MPLS VPN技术.本文在对VRF.RD.RT几个重要概念进行解释之后,对BGP/MPLS VPN的数据转发过程和路由信息分发过程进行了较为详细的叙述.最后通过分析BGP/MPLS VPN的特点,分析了其市场前景. 关键词 多协议标签交换(MPLS) 虚拟局域网(VPN) 一.VPN技术概述 VPN(Virtual Private Networ

  • SpringBoot集成Beetl后统一处理页面异常的方法

    SpringBoot集成Beetl后统一处理页面异常的方法

    背景 SpringBoot集成Beetl后如果页面出现异常会将出现异常之前的页面输出到客户端,但是由于页面不完整会导致用户看到的页面错乱或者空白,如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 在控制台可以看到 >

  • spring boot请求异常处理并返回对应的html页面

    通过之前的学习,我知道中间件可以预处理http请求并返回相应页面(比如出现404异常,可以返回一个自己编写的异常界面,而非默认使用的白板404页面,很难看).其实spring boot也提供了这样的功能. 404异常处理: @Controller public class ErrorHandler404 implements ErrorController { private static final String ERROR_PATH = "/error"; @RequestMapp

  • SpringBoot中定制异常页面的实现方法

    定制异常页面,可以避免用户产生恐慌心理,使得产品有更好的用户体验.今天来学习在 SpringBoot 中如何定制开发异常页面 一.历史回顾 在 SpringMVC 年代,我们的异常页面一般配置在 web.xml 文件中,如下: <!-- 配置404页面 --> <error-page> <error-code>404</error-code> <location>/error/404.html</location> </erro

  • jsp页面中引用其他页面的简单方法

    初看这个标题....大家的感觉一定是好2啊.....博主一定要说jsp的动态引用(jsp:include)和静态引用(@include)了.介绍这两者区别的文章已经烂大街了..一搜一大把..博主竟然还来介绍这些老古董..果断alt+F4... 如果你确实是这么想的...那请先别急着关闭页面...今天我来分享一下自己的理解,算是对烂大街的东西的一点补充吧...(后面文字会比较啰嗦) 首先先说明下为什么会去讨论这个话题. 我在写自己的博客程序的时候(blogv2.labofjet.com),程序中的

  • SpringBoot中使用Servlet三大组件的方法(Servlet、Filter、Listener)

    SpringBoot中使用Servlet三大组件的方法(Servlet、Filter、Listener)

    本篇主要讲解SpringBoot当中使用Servlet三大组件,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧! 三大组件作用 1.Servlet Servlet是用来处理客户端请求的动态资源,也就是当我们在浏览器中键入一个地址回车跳转后,请求就会被发送到对应的Servlet上进行处理. Servlet的任务有: 1.接收请求数据:我们都知道客户端请求会被封装成HttpServletRequest对象,里面包含了请求头.参数等各种信息. 2.处理请求:通常我

  • layui框架中layer父子页面交互的方法分析

    本文实例讲述了layui框架中layer父子页面交互的方法.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ 可以从官网上下载最新版本. 还可点击此处本站下载. 当layer以iframe层的方式弹出新的窗口(子页面),如何在子页面中访问父页面的元素和函数. 1.访问父页面元素值 var parentId=parent.$("#id").val();//访问父页面元素值 2.访问父页面方法 va

  • SpringBoot中时间格式化的五种方法汇总

    SpringBoot中时间格式化的五种方法汇总

    目录 前言 时间问题演示 1.前端时间格式化 JS 版时间格式化 2.SimpleDateFormat格式化 3.DateTimeFormatter格式化 4.全局时间格式化 实现原理分析 5.部分时间格式化 总结 参考 & 鸣谢 前言 在我们日常工作中,时间格式化是一件经常遇到的事儿,所以本文我们就来盘点一下 Spring Boot 中时间格式化的几种方法. 时间问题演示 为了方便演示,我写了一个简单 Spring Boot 项目,其中数据库中包含了一张 userinfo 表,它的组成结构和数

  • SpringBoot中使用Swagger的超简单方法

    SpringBoot中使用Swagger的超简单方法

    Swagger号称世界上最流行的Api框架,它是RestFul 风格的Api.文档在线自动生成工具:Api文档与API定义同步更新.可以直接运行,能在线测试API接口:支持多种编程语言:(Java.PHP等). 官网:https://swagger.io/ springBoot使用swagger太麻烦,每次都需要编写config?如果我告诉你有这么一种方式,你只需要配置yml文件,你学还是不学? 整合Swagger 依赖: <!-- Swagger --> <dependency>

  • springboot中nacos-client获取配置的实现方法

    目录 1.导入nacos的maven包 2.nacos-config-spring-boot-autoconfigure解析 3.NacosConfigEnvironmentProcessor逻辑解析 在springboot中使用nacos的小伙伴是不是跟我有一样的好奇,springboot中nacos-client是怎么获取配置的?今天我跟了一下代码,大致的流程弄懂了,分享给大家. 1.导入nacos的maven包 <dependency> <groupId>com.alibab

  • SpringBoot中使用Quartz管理定时任务的方法

    定时任务在系统中用到的地方很多,例如每晚凌晨的数据备份,每小时获取第三方平台的 Token 信息等等,之前我们都是在项目中规定这个定时任务什么时候启动,到时间了便会自己启动,那么我们想要停止这个定时任务的时候,就需要去改动代码,还得启停服务器,这是非常不友好的事情 直至遇见 Quartz,利用图形界面可视化管理定时任务,使得我们对定时任务的管理更加方便,快捷 一.Quartz 简介 Quartz是一个开源的作业调度框架,它完全由Java写成,并设计用于J2SE和J2EE应用中.它提供了巨大的灵

  • SpringBoot 中使用 Validation 校验参数的方法详解

    SpringBoot 中使用 Validation 校验参数的方法详解

    目录 1. Validation 介绍 1.1 Validation 注解 1.2 @valid 和 @validated的区别 2. SpringBoot 中使用 Validator 校验参数 2.1 依赖引入 2.2 标注校验实体类 2.3 开启参数校验 2.3.1 简单参数校验 2.3.2 JavaBean 校验 2.4 捕捉参数校验异常 项目中写逻辑时,为保证程序的健壮性,需要对各种参数进行判断,这就导致业务代码不只健壮,还十分臃肿.其实 SpringBoot 中已经提供了 Valida

  • springboot中项目启动时实现初始化方法加载参数

    springboot中项目启动时实现初始化方法加载参数

    目录 springboot项目启动,初始化方法加载参数 1.@PostConstruct说明 2.@PreDestroy说明 第一种:注解@PostConstruct 第二种:实现CommandLineRunner接口 第三种:springboot的启动类 springboot初始化参数顺序 spring初始化参数顺序为 springboot项目启动,初始化方法加载参数 今天我看到项目中用到了 @PostConstruct 这个注解,之前没看到过,特地查了一下, 1.@PostConstruct

随机推荐