SpringBoot中定制异常页面（404页面配置提高用户体验）

程序员文章站 2022-06-19 16:26:31

定制异常页面，可以避免用户产生恐慌心理，使得产品有更好的用户体验。今天来学习在 SpringBoot 中如何定制开发异常页面一、历史回顾在 SpringMVC 年代，我们的异常页面一般配置在 web.xml 文件中，如下：

404

/error/404.html...

定制异常页面，可以避免用户产生恐慌心理，使得产品有更好的用户体验。今天来学习在 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中定制异常页面（404页面配置提高用户体验）
这是 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

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>404</title> <link rel="stylesheet" th:href="@{/css/exception.css}" media="all"> </head> <body> <div class="error"> <div class="container-floud"> <div style="text-align: center"> <div class="container-error-404"> <div class="clip"> <div class="shadow"> <span class="digit thirdDigit"></span> </div> </div> <div class="clip"> <div class="shadow"> <span class="digit secondDigit"></span> </div> </div> <div class="clip"> <div class="shadow"> <span class="digit firstDigit"></span> </div> </div> <div class="msg">OH! <span class="triangle"></span> </div> </div> <h2 class="h1">很抱歉，你访问的页面找不到了</h2> </div> </div> </div> <script type="text/javascript" th:src="@{/js/excepiton.js}"></script> <script> load(4, 0, 4); </script> </body> </html>

然后所需要的 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

function randomNum() { return Math.floor(Math.random() * 9) + 1; } var loop1, loop2, loop3, time = 30, i = 0, number; function load(num1, num2, num3) { loop3 = setInterval(function () { if (i > 40) { clearInterval(loop3); document.querySelector('.thirdDigit').textContent = num1; } else { document.querySelector('.thirdDigit').textContent = randomNum(); i++; } }, time); loop2 = setInterval(function () { if (i > 80) { clearInterval(loop2); document.querySelector('.secondDigit').textContent = num2; } else { document.querySelector('.secondDigit').textContent = randomNum(); i++; } }, time); loop1 = setInterval(function () { if (i > 100) { clearInterval(loop1); document.querySelector('.firstDigit').textContent = num3; } else { document.querySelector('.firstDigit').textContent = randomNum(); i++; } }, time); }