一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務器之家：專注于服務器技術及軟件下載分享
分類導航

PHP教程|ASP.NET教程|Java教程|ASP教程|編程技術|正則表達式|C/C++|IOS|C#|Swift|Android|VB|R語言|JavaScript|易語言|vb.net|

服務器之家 - 編程語言 - Java教程 - SpringBoot中定制異常頁面的實現方法

SpringBoot中定制異常頁面的實現方法

2020-09-11 00:55Asurplus、 Java教程

這篇文章主要介紹了SpringBoot中定制異常頁面的實現方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

定制異常頁面，可以避免用戶產生恐慌心理，使得產品有更好的用戶體驗。今天來學習在 SpringBoot 中如何定制開發異常頁面

一、歷史回顧

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

?
1
2
3
4
5
<!-- 配置404頁面 -->
<error-page>
   <error-code>404</error-code>
   <location>/error/404.html</location>
 </error-page>

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

二、SpringBoot中配置

1、默認異常頁面

SpringBoot中定制異常頁面的實現方法

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

2、定制異常頁面

SpringBoot 中定制異常頁面非常簡單，我們需要一個配置文件 ExceptionPageConfig.java

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
.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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
.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

SpringBoot中定制異常頁面的實現方法

那，通過訪問一個項目中并不存在的 API，得到 404 頁面，頁面可以提示一些友好的文字，從而安撫用戶緊張的心理，其實也是一個不錯的選擇吧

到此這篇關于SpringBoot中定制異常頁面的實現方法的文章就介紹到這了,更多相關SpringBoot 定制異常頁面內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！

原文鏈接：https://blog.csdn.net/qq_40065776/article/details/107863418

延伸 · 閱讀

精彩推薦
主站蜘蛛池模板： 国产毛片在线高清视频 | 精品国产麻豆免费人成网站 | 毛片亚洲毛片亚洲毛片 | 久久视频精品3线视频在线观看 | 蜜月aⅴ免费一区二区三区 蜜桃影像传媒推广 | 色噜噜视频影院 | 99久女女精品视频在线观看 | 视频免费观看在线播放高清 | 男男18视频免费网站 | 亚洲大片免费观看 | 欧美高清国产 | 2019年国产不卡在线刷新 | 久久re热在线视频精6 | 精品久久伦理中文字幕 | 国产二区精品视频 | 99精品影视 | 亚洲精品午夜级久久久久 | 百合女女师生play黄肉黄 | 四虎国产精品视频免费看 | 免费视屏| 精品欧美一区二区三区在线观看 | 成人免费视频大全 | 免费高清在线视频色yeye | 教室眠催白丝美女校花 | 亚洲精品久久久久69影院 | 久久亚洲午夜牛牛影视 | 30分钟的高清视频在线观看 | 特黄特黄一级高清免费大片 | 毛片资源 | 调教麻麻成贱m | katsumi精品hd| 非洲一级毛片又粗又长aaaa | 免费精品国产在线观看 | 蜜桃成熟3在线观看 | 女人叉开腿让男人桶 | 国产精品久久久久久久久久久威 | 免费国产高清精品一区在线 | 日本一卡2卡3卡4卡乱 | 欧美灰丝袜丝交nylons | 日本一道一区二区免费看 | 狠狠色狠狠色综合日日小蛇 |