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的错误提示页面
下一周会持续更新()