Web项目中总会遇到对错误页面的设计,好的错误页面处理,会让软件体验更佳,可以帮助运维人员了解基本错误信息,更好的维护软件。当然从底层避免错误是更好的软件开发方式,但我们很难避免软件一些非常隐性的Bug。
以下对网页错误页提示码进行汇总,并对最常见的404错误给出示例页面Demo。
2xx-
成功:这类状态提示码代表服务器成功地接受了客户端请求。
200:确定,客户端请求已成功。 201:已创建。 202:已接受。 203:非权威性信息。 204:无内容。 205:重置内容。 206:部分内容。
3xx- 重定向:客户端浏览器必须采取更多操作来实现请求。
301:对象已永久移走,即永久重定向。 302:对象已临时移动。 304:未修改。 307:临时重定向。
4xx-客户端错误:发生错误,客户端请求不存在的页面,客户端未提供有效的身份验证信息。
401:访问被拒绝。 401.1:登录失败。 401.2:服务器配置导致登录失败。 401.3:由于ACL对资源的限制而未获得授权。 401.4:筛选器授权失败。 401.5:ISAPI/CGI应用程序授权失败。 401.7:访问被Web服务器上的URL授权策略拒绝。这个错误代码为IIS6.0所专用。 403:禁止访问:IIS定义了许多不同的403错误,它们指明更为具体的错误原因: 403.1:执行访问被禁止。 403.2:读访问被禁止。 403.3:写访问被禁止。 403.4:要求SSL。 403.5:要求SSL128。 403.6:IP地址被拒绝。 403.7:要求客户端证书。 403.8:站点访问被拒绝。 403.9:用户数过多。 403.10:配置无效。 403.11:密码更改。 403.12:拒绝访问映射表。 403.13:客户端证书被吊销。 403.14:拒绝目录列表。 403.15:超出客户端访问许可。 403.16:客户端证书不受信任或无效。 403.17:客户端证书已过期或尚未生效。 403.18:在当前的应用程序池中不能执行所请求的URL。这个错误代码为IIS6.0所专用。 403.19:不能为这个应用程序池中的客户端执行CGI。这个错误代码为IIS6.0所专用。 403.20:Passport登录失败。这个错误代码为IIS6.0所专用。 404:未找到。 404.0:没有找到文件或目录。 404.1:无法在所请求的端口上访问Web站点。 404.2:Web服务扩展锁定策略阻止本请求。 404.3:MIME映射策略阻止本请求。 405:用来访问本页面的HTTP谓词不被允许(方法不被允许)。 406:客户端浏览器不接受所请求页面的MIME类型。 407:要求进行代理身份验证。 412:前提条件失败。 413:请求实体太大。 414:请求URI太长。 415:不支持的媒体类型。 416:所请求的范围无法满足。 417:执行失败。 423:锁定的错误。
5xx-服务器错误:服务器由于遇到错误而不能完成该请求。
500:内部服务器错误。 500.12:应用程序正忙于在Web服务器上重新启动。 500.13:Web服务器太忙。 500.15:不允许直接请求Global.asa。 500.16:UNC授权凭据不正确。这个错误代码为IIS6.0所专用。 500.18:URL授权存储不能打开。这个错误代码为IIS6.0所专用。 500.100:内部ASP错误。 501:页眉值指定了未实现的配置。 502:Web服务器用作网关或代理服务器时收到了无效响应。 502.1:CGI应用程序超时。 502.2:CGI应用程序出错。 503:服务不可用。这个错误代码为IIS6.0所专用。 504:网关超时。 505:HTTP版本不受支持。
以下以404错误提示码为例,设计的错误页面示例Demo:
示例1:error1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); // 获得本项目的地址(例如: http://localhost:8080/MyApp/)赋值给basePath变量 String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; // 将 "项目路径basePath" 放入pageContext中,待以后用EL表达式读出。 pageContext.setAttribute("basePath", basePath); %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=gbk" /> <script type="text/javascript" src="<%=basePath%>static/js/jquery-1.8.2.min.js"></script> <title>抱歉,您访问的页面正在整修中</title> <!--[if lte IE 8]> <style type="text/css"> h2 em{color:#e4ebf8;} </style> <![endif]--> <script type="text/javascript"> function returnFirst() { window.location = "https://www.baidu.com"; } $(function(){ var timeDom = $("#time"); function timeEve(){ if(timeDom.length==0) return false; var num = parseInt(timeDom.html()); function countDown(){ if(num<=1){ window.location.href="https://www.baidu.com/"; return false; } window.setTimeout(function(){ num--; timeDom.html(num); countDown(); },1000); }; countDown(); } timeEve(); }); </script> <style> body { MARGIN: 0px auto; WIDTH: 950px; margin:0 auto; FONT: 11px "Lucida Grande",Arial,Verdana,sans-serif; BACKGROUND: url(<%=basePath%>static/image/error/body_bg.jpg) #d4d4d4 repeat-x; padding-top:80px; } div.error404_main { POSITION: relative; MARGIN: 31px 21px 0px; WIDTH: 950px; BACKGROUND: url(<%=basePath%>static/image/error/error404.jpg) no-repeat; HEIGHT: 500px } span.main_txt { POSITION: absolute; TEXT-ALIGN: center; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; WIDTH: 200px; PADDING-RIGHT: 0px; DISPLAY: block; HEIGHT: 200px; COLOR: #1d1d1d; TOP: 240px; PADDING-TOP: 2px; LEFT: 750px } span.main_txt span { MARGIN: 2px 2px 8px; DISPLAY: block } span.main_txt a { COLOR: #1d1d1d } div.error404_guide { POSITION: relative; BACKGROUND-COLOR: #b4b4b4; MARGIN: 0px 21px; WIDTH: 950px; HEIGHT: 100px } </style> </head> <body class="page"> <div class="error404_main"> <span class="main_txt"> <div> <div id="time">10</div> <div>秒后为您跳转到系统 <a href="javascript:void(0);" onclick="returnFirst()" >首页</a></div> </div> <span><a href="javascript:history.go(-1);">?返回上一页</a></span> </span> </div> </body> </html>
示例1效果截图:
示例2:error2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); // 获得本项目的地址(例如: http://localhost:8080/MyApp/)赋值给basePath变量 String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; // 将 "项目路径basePath" 放入pageContext中,待以后用EL表达式读出。 pageContext.setAttribute("basePath", basePath); %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=gbk" /> <script type="text/javascript" src="<%=basePath%>static/js/jquery-1.8.2.min.js"></script> <title>抱歉,您访问的页面正在整修中</title> <style type="text/css"> body{margin:0;padding:0;font:14px/1.6 Arial,Sans-serif;} a:link,a:visited{color:#007ab7;text-decoration:none;} h1{ position:relative; z-index:2; width:540px; height:0; margin:110px auto 15px; padding:230px 0 0; overflow:hidden; xxxxborder:1px solid; background-image: url(static/image/error/Main.jpg); background-repeat: no-repeat; } h2{ position:absolute; top:17px; left:187px; margin:0; font-size:0; text-indent:-999px; -moz-user-select:none; -webkit-user-select:none; user-select:none; cursor:default; width: 534px; } h2 em{display:block;font:italic bold 200px/120px "Times New Roman",Times,Serif;text-indent:0;letter-spacing:-5px;color:rgba(216,226,244,0.3);} .link a{margin-right:1em;} .link,.texts{width:540px;margin:0 auto 15px;color:#505050;} .texts{line-height:2;} .texts dd{margin:0;padding:0 0 0 15px;} .texts ul{margin:0;padding:0;} .portal{color:#505050;text-align:center;white-space:nowrap;word-spacing:0.45em;} .portal a:link,.portal a:visited{color:#505050;word-spacing:0;} .portal a:hover,.portal a:active{color:#007ab7;} .portal span{display:inline-block;height:38px;line-height:35px;} .portal span span{padding:0 0 0 20px;} .portal span span span{padding:0 20px 0 0;background-position:100% -80px;} .STYLE1 { font-family: Arial, Helvetica, sans-serif; font-size: 65px; } </style> <!--[if lte IE 8]> <style type="text/css"> h2 em{color:#e4ebf8;} </style> <![endif]--> <script type="text/javascript"> function returnFirst() { window.location = "<%=basePath%>reloadHome.do"; } $(function(){ var timeDom = $("#time"); function timeEve(){ if(timeDom.length==0) return false; var num = parseInt(timeDom.html()); function countDown(){ if(num<=1){ window.location.href="<%=basePath%>reloadHome.do"; return false; } window.setTimeout(function(){ num--; timeDom.html(num); countDown(); },1000); }; countDown(); } timeEve(); }); </script> </head> <body> <h1></h1> <p class="link"> <a href="javascript:void(0);" onclick="returnFirst()" >?返回首页</a> <a href="javascript:history.go(-1);">?返回上一页</a> </p> <p> <dl class="texts" > <dt>抱歉,您访问的页面正在整修中...</dt> <dt><span id="time" > 10 </span>秒后为您跳转到系统首页 </dt> </dl> </p> </body> </html>
示例2效果截图:
时间: 2024-08-28 11:12:35