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

2023-07-16 21:37:03 72

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

一、历史回顾

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



404
/error/404.html

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

二、SpringBoot中配置

1、默认异常页面

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

2、定制异常页面

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

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

/**
*统一异常页面处理
*
*@AuthorLizhou
**/
@Configuration
publicclassExceptionPageConfig{

/**
*SpringBoot2.0以上版本
*WebServerFactoryCustomizer代替之前版本的EmbeddedWebServerFactoryCustomizerAutoConfiguration
*
*@return
*/
@Bean
publicWebServerFactoryCustomizerwebServerFactoryCustomizer(){
return(container->{
ErrorPageerror400Page=newErrorPage(HttpStatus.BAD_REQUEST,"/400");
ErrorPageerror404Page=newErrorPage(HttpStatus.NOT_FOUND,"/404");
ErrorPageerror500Page=newErrorPage(HttpStatus.INTERNAL_SERVER_ERROR,"/500");
container.addErrorPages(error400Page,error404Page,error500Page);
});
}
}

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

importcom.zyxx.common.utils.PasswordUtils;
importio.swagger.annotations.Api;
importio.swagger.annotations.ApiOperation;
importorg.apache.shiro.SecurityUtils;
importorg.springframework.stereotype.Controller;
importorg.springframework.web.bind.annotation.GetMapping;

/**
*
*前端控制器
*
*
*@authorlizhou
*@since2020-07-15
**/
@Api(tags="后台管理端--异常处理")
@Controller
publicclassSysExceptionController{

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

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

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

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

importcom.zyxx.common.utils.PasswordUtils;
importio.swagger.annotations.Api;
importio.swagger.annotations.ApiOperation;
importorg.apache.shiro.SecurityUtils;
importorg.springframework.stereotype.Controller;
importorg.springframework.web.bind.annotation.GetMapping;

/**
*
*前端控制器
*
*
*@authorlizhou
*@since2020-07-15
**/
@Api(tags="后台管理端--异常处理")
@Controller
publicclassSysExceptionController{

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

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

@ApiOperation(value="请求500页面",notes="请求500页面")
@GetMapping("500")
publicStringserverError(){
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;
}

.errorh2{
font-size:32px;
}

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

.errorspan.triangle{
top:70%;
right:0%;
border-left:20pxsolid#535353;
border-top:15pxsolidtransparent;
border-bottom:15pxsolidtransparent;
}

.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:inset20px0px20px-15pxrgba(150,150,150,0.8),20px0px20px-15pxrgba(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%;
}

.errorh2{
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;
}

.errorh2{
font-size:18px;
}

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

.errorspan.triangle{
top:70%;
right:-3%;
border-left:10pxsolid#535353;
border-top:8pxsolidtransparent;
border-bottom:8pxsolidtransparent;
}

.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;
}

.errorh2{
font-size:32px;
}

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

.errorspan.triangle{
top:70%;
right:0%;
border-left:20pxsolid#535353;
border-top:15pxsolidtransparent;
border-bottom:15pxsolidtransparent;
}

.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:inset20px0px20px-15pxrgba(150,150,150,0.8),20px0px20px-15pxrgba(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%;
}

.errorh2{
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;
}

.errorh2{
font-size:18px;
}

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

.errorspan.triangle{
top:70%;
right:-3%;
border-left:10pxsolid#535353;
border-top:8pxsolidtransparent;
border-bottom:8pxsolidtransparent;
}

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

三、测试

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

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

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐