SpringBoot簡單項目學習筆記06（錯誤頁面定製）

時間 2020-07-06

標籤 springboot 簡單項目學習筆記錯誤頁面定製欄目 Spring 简体版

原文原文鏈接

github項目地址https://github.com/H-Designer/SpringBootjavascript

上一節總結的是：員工信息提交、員工信息修改、員工信息刪除（http://www.javashuo.com/article/p-oplnshll-ka.html）css

這一節要總結的是:錯誤頁面的定製html

##14、錯誤頁面的定製
1）、在有模板引擎的狀況下：error/狀態碼；將錯誤頁面界面命名爲：錯誤狀態碼.html 放在模版引擎文件夾下的error文件夾下
發生此狀態碼的錯誤就會來到對應的文件下 
        可使用4XX、5XX爲名來命名文件的名稱，首先當發生錯誤的時候，會進行精確查找，當精確查找找不到的狀況下，纔會匹配對應的xx文件
        頁面能夠進行獲取的信息：
                timestamp:時間戳
                status：狀態碼
                error：錯誤提示
                exception：異常
                message：異常消息
                 errors：JSR303數據校驗的錯誤

例如，4XX.html就能夠寫成這樣的文件內容：
<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="asserts/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="asserts/css/dashboard.css" rel="stylesheet">
<style type="text/css">
/* Chart.js */

@-webkit-keyframes chartjs-render-animation {
from {
opacity: 0.99
}
to {
opacity: 1
}
}

@keyframes chartjs-render-animation {
from {
opacity: 0.99
}
to {
opacity: 1
}
}

.chartjs-render-monitor {
-webkit-animation: chartjs-render-animation 0.001s;
animation: chartjs-render-animation 0.001s;
}
</style>
</head>
<body>
<div th:replace="commons/bar::topbar"></div
<div class="container-fluid">
<div class="row">
<div th:replace="commons/bar::#sidebar(activeuri='')"></div>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<h1>status:[[${status}]]</h1>
<h2>timestamp:[[${timestamp}]]</h2>
<h2>error:[[${error}]]</h2>
<h2>exception:[[${exception}]]</h2>
<h2>message:[[${message}]]</h2>
<h2>errors:[[${errors}]]</h2>
</main>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js" ></script>
<script type="text/javascript" src="asserts/js/popper.min.js" ></script>
<script type="text/javascript" src="asserts/js/bootstrap.min.js" ></script
<!-- Icons -->
<script type="text/javascript" src="asserts/js/feather.min.js" ></script>
<script>
feather.replace()
</script>
<!-- Graphs -->
<script type="text/javascript" src="asserts/js/Chart.min.js" ></script>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
datasets: [{
data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
lineTension: 0,
backgroundColor: 'transparent',
borderColor: '#007bff',
borderWidth: 4,
pointBackgroundColor: '#007bff'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
display: false,
}
}
});
</script>
</body>
</html>
其中仍是將頭部和左部的邊框進行相同元素的抽取，而後只進行編寫本身想要的部分便可
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<h1>status:[[${status}]]</h1>
<h2>timestamp:[[${timestamp}]]</h2>
<h2>error:[[${error}]]</h2>
<h2>exception:[[${exception}]]</h2>
<h2>message:[[${message}]]</h2>
<h2>errors:[[${errors}]]</h2>
</main>
這樣就能夠將錯誤信息的內容進行抽取，而後在網頁進行顯示，完成頁面的佈局風格（嚴格的佈局風格能夠根據本身的設計來進行，只有錯誤信息能夠進行獲取，頁面的佈局風格就是根據本身設計）

2）、在沒有模板引擎的狀況下（模版引擎找不到錯誤頁面），就在靜態資源文件夾（static）下找
這時候，只是沒有thymeleaf的語法規則，沒法取到對應的信息
3）、以上的錯誤頁面都沒有的時候，就是默認來到Spring Boot的錯誤提示頁面