Spring Boot自定义错误视图

方式3. 自定义实现错误视图解析,统一错误处理

如果不想要使用缺省的错误处理视图解析器,想要定制一些自己的东西(比如说:错误引导信息等),按照官方文档的建议我们可以自定义实现错误视图解析接口来处理。

下面就是通过实现错误视图解析接口ErrorViewResolver,将4xx、5xx的错误页面集中在一个自定义视图上:

1)实现 ErrorViewResolver 接口

package com.hongyang.admin.web;import org.springframework.boot.autoconfigure.web.servlet.error.ErrorViewResolver;import org.springframework.http.HttpStatus;import org.springframework.stereotype.Component;import org.springframework.web.servlet.ModelAndView;import javax.servlet.http.HttpServletRequest;import java.util.Map;/** * 实现自定义的错误视图解析器

*/@ComponentpublicclassAdminErrorViewResolverimplements ErrorViewResolver {

    /**    * 实现ErrorViewResolver约定方法,

    * 返回统一的错误视图.

    * @param request

    * @param status

    * @param model

    * @return*/    @Override

    publicModelAndView resolveErrorView(HttpServletRequest request, HttpStatus status, Map model) {

        returnnewModelAndView("/error/index", model);

    }

}

正在上传... 取消

2)完成错误视图,在templates/error下添加index.ftlh视图(freemarker模板)

正在上传... 取消

<!DOCTYPE html><html><head ><link href="/content/public/images/logo-small.png" rel="shortcut icon"/><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>${status}</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="format-detection" content="telephone=no"><style>        body {            position: fixed;            z-index: 10;            top: 0;            left: 0;            right: 0;            bottom: 0;            width: 100%;            padding: 0;            margin: 0px;            font-size: 14px;            background: #fff;            word-wrap: break-word;}        p {            padding: 0 15px;}        .btn {            border: 0px;            color: #fff;            cursor: pointer;            text-align: center;            background-color: #ff7a5f\0;            box-shadow: #cccccc 0 2px 15px 0;            -webkit-box-shadow: 0 2px 7px 0 rgba(0,0,0,0.2);            background: radial-gradient(circle at 300% 50%, rgb(255, 195, 114) 50%, rgb(255, 105, 90) 100%);            transition: all .2s ease-out,box-shadow .2s ease-out;}        .btn:hover {            color: #FFFFFF;            transform: scale(1.1);}        .btn:focus {            outline: none;}        .container {            margin: 8% auto;}        .container p {            margin: 35px auto;            text-align: center;}        .container img {            width: 20%;}        .container .font {            color: #848484;}        .container .btn-back {            width: 180px;            height: 35px;            border-radius: 6px;}        #container-info {            display: none;            position: fixed;            z-index: 11;            top: 5%;            left: 0;            right: 0;            margin: 0 auto;            width: 65%;            height: 85%;            overflow: hidden;            border-radius: 4px;            border: 1px solid #f1986e;            background-color: #fff;            box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgb(242, 154, 110);}        #container-info .btn-close {            position: absolute;            right: 5px;            top: 5px;            width: 25px;            height: 25px;            line-height: 25px;            font-size: 22px;            padding: 2px;            border-radius: 50%;            text-align: center;}        #container-info p {            font-size: 12px;            line-height: 20px;}        .show {            display: block !important;}        .cor-r {            color: red;}        @media (max-width: 767px) {            .container img {

                width: 50%;}            #container-info {                width: 85%;}        }

        .panel-heading {            height: 32px;            line-height: 32px;            padding: 5px 15px;}        .panel-body {            height: calc(85vh - 40px);            overflow: auto;}        .panel-orange .panel-heading {            background-color: #ffa0681f;            color: #ff6f5c;}</style></head><body><form id="form1"><div class="container"><p><img src="/content/public/images/error_${status}.png"/></p><p class="font">${error},<a onclick="errorDetail(true)" href="javascript: void(0)">点击查看明细</a>!</p><p><button type="button" class="btn btn-back" id="btnBack">返回</button></p></div><div id="container-info"><span class="btn btn-close" onclick="errorDetail(false)">×</span><div class="panel panel-orange"><div class="panel-heading">                错误说明

            </div><div class="panel-body"><#if path??><p><b>请求的URL:</b>${path}</p></#if><#if message??><p><b>异常信息:</b><span class="cor-r">${message}</span></p></#if><#if trace??><p><b>StackTrace:</b><br>${trace}</p></#if></div></div></div><script type="text/javascript">        window.onload =function () {

            var btn = document.getElementById("btnBack");

            btn.onclick =function () {

                var url = document.referrer;

                if (url.indexOf("home/main") >0) {

                    window.parent.tabDelete();

                    return;

                }

                window.history.back(-1);

            }

        }

        function errorDetail(isShow) {

            var con = document.getElementById("container-info");

            con.className = isShow ?"show" : ""; // 兼容IE8        }

    </script></form></body></html>

Absorbing material: www.goodsmaterial.com

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容