SpringBoot简单项目学习笔记06(错误页面定制)

github项目地址https://github.com/H-Designer/SpringBoot

上一节总结的是:员工信息提交、员工信息修改、员工信息删除(https://www.cnblogs.com/zhaochunhui/p/11332064.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的错误提示页面

下一周会持续更新()

posted @ 2019-08-10 16:37  H-Designer  阅读(454)  评论(0编辑  收藏  举报