SpringBoot simple project study notes 06 (error page customization)

Address github project (project in progress and will soon complete update will be uploaded)

On a summary is: submit employee information, employee information changes, employee information deleted ( https://www.cnblogs.com/zhaochunhui/p/11332064.html )

To summarize this section is: a custom error page

## 14 , custom error pages
 1), in the presence of template engine situation: error / status code; the error page interface named: error status code on error .html file template engine folder under the folder 
happen this error status code will come under the corresponding file 
        can use 4XX, 5XX name to name the name of the file, first when an error occurs, it will accurately locate, pinpoint when the case can not be found, will match xx corresponding document 
        pages can be acquired information: 
                timestamp: timestamp 
                status: status code 
                error: error 
                exception: exception 
                message: exception message 
                 errors: JSR303 data parity errors 

e.g., 4XX.html can be written as contents of the file : 
<! 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> 
wherein the head portion or the border and the left portion of the same element is extracted, and then they want to write only a portion to
 <Role main = "main" class = "COL-MD-. 9 ml-SM-Auto COL-LG-10 Pt-. 3 PX-. 4"> 
<h1 of> Status: [[$ {Status}]] </ h1 of> 
<H2> timestamp: [[$ {timestamp}]] </ H2> 
<H2> error: [[$ {error}]] </ H2> 
<H2> Exception: [[$ {Exception}]] </ H2> 
<H2> Message: [[ Message {} $]] </ H2> 
<H2> errors: [[$ {errors}]] </ H2> 
</ main>
This allows the contents of the error information are extracted and then displayed on the page, complete the layout style pages (strict layout style can be carried out according to their own design, only error information can be acquired, page layout style is based on their design )

 2) in case there is no template engine (template engine can not find the error page), in static resource folder ( static looking) at 
this time, but no grammatical rules thymeleaf can not get to the corresponding information
 3) the above error pages are not the time, came to Spring Boot is the default error page of

Next week will continue to update ()

Guess you like

Origin www.cnblogs.com/zhaochunhui/p/11332089.html