zoukankan      html  css  js  c++  java
  • 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的错误提示页面

    下一周会持续更新()

  • 相关阅读:
    【Struts2】 国际化
    【Struts2】进阶
    【Struts2】简介及入门
    【Distributed】互联网安全架构
    【Mac】 开启原生的 NTFS 硬盘格式支持
    swagger2简单使用
    自定义异常和异常处理
    enum简单使用
    Interceptor
    修改docker下mysql配置
  • 原文地址:https://www.cnblogs.com/zhaochunhui/p/11332089.html
Copyright © 2011-2022 走看看