定制異常頁面，可以避免用戶產(chǎn)生恐慌心理，使得產(chǎn)品有更好的用戶體驗。今天來學(xué)習(xí)在 SpringBoot 中如何定制開發(fā)異常頁面

一、歷史回顧

在 SpringMVC 年代，我們的異常頁面一般配置在 web.xml 文件中，如下：

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

這里我們指定了異常請求狀態(tài)碼 404，然后配置了 404 異常請求的頁面地址，這就意味著如果某一個請求發(fā)生了 404 異常，則會出現(xiàn) 404.html 界面

二、SpringBoot中配置

1、默認(rèn)異常頁面

這是 SpringBoot 中默認(rèn)的異常頁面，返回的是一堆異常信息和異常狀態(tài)碼，那用戶固然是看不懂這些信息的，容易使得用戶產(chǎn)生恐慌的心里，從而影響產(chǎn)品的用戶體驗

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;/** * 統(tǒng)一異常頁面處理 * * @Author Lizhou **/@Configurationpublic 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 = '后臺管理端--異常處理')@Controllerpublic 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 寫好，下面我們就需要開發(fā)異常頁面的展示信息了，這里貼一張頁面吧，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 = '后臺管理端--異常處理')@Controllerpublic 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 頁面，頁面可以提示一些友好的文字，從而安撫用戶緊張的心理，其實也是一個不錯的選擇吧

到此這篇關(guān)于SpringBoot中定制異常頁面的實現(xiàn)方法的文章就介紹到這了,更多相關(guān)SpringBoot 定制異常頁面內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！