设置自定义的404页面
今天查询资料时发现一个有意思的框架，404页面的自定义，刚开始看到这个时候我心里很好奇啊，就自己设置了一下，以后终于看到404，500不用那么头疼了，各种的小游戏，暖心资源舒服.下面我给出详细的设置步骤以及结果展示图
servlet项目搭建完成后，访问不存在的uri会出现not found页面
如果servlet 抛出异常 也会看到这样的页面
这个时候我们可以在web.xml文件内配置404页面和500页面，当出现上述异常的时候，统一跳转到我们配置的页面，提高用户体验
web.xml 新增如下配置
<error-page>
<error-code>404</error-code>
<location>/WEB-INF/404.jsp</location>
</error-page>
<error-page>
<error-code>500</error-code>
<location>/WEB-INF/500.jsp</location>
</error-page>
这里要注意一下相对路径，不然tomcat会找不到配置的页面
下面时效果图代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HUGE - Multipurpose Coming Soon Error 404 Domain For Sale</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="description" content="The most powerful Coming Soon / Errors / Domain For Sale template"> <meta name="keywords" content="Enter, your, keywords"> <link href="static2/css/css.css" rel="stylesheet"> <link rel="stylesheet" href="static2/css/normalize.min.css"> <link rel="stylesheet" href="static2/css/bootstrap.min.css"> <link rel="stylesheet" href="static2/css/font-awesome.min.css"> <link rel="stylesheet" href="static2/css/style.css"> <link rel="stylesheet" href="static2/css/reveal.css"> </head> <body> <header> <span class="btn-menu"><img src="static2/picture/menu.svg"></span> </header> <section class="huge-section fluid-container"> <div class="row"> <div class="huge-side left-side col-xs-12 col-sm-6"> <div class="row"> <div class="huge-content col-xs-8 col-xs-offset-2"> <a href="javascript:;"> <img class="logo" src="static2/picture/logo.png"> </a> <h1>404</h1> <h2>The page you are looking for doesn't exist.</h2> <a class="btn" href="javascript:;"> Go back to our Homepage </a> <footer> <!--Social Icons--> <ul class="social-icons"> <li> <a href="javascript:;" class="social-icon"> <i class="fa fa-facebook" aria-hidden="true"></i> </a> </li> <li> <a href="javascript:;" class="social-icon"> <i class="fa fa-twitter" aria-hidden="true"></i> </a> </li> <li> <a href="javascript:;" class="social-icon"> <i class="fa fa-pinterest-p" aria-hidden="true"></i> </a> </li> <li> <a href="javascript:;" class="social-icon"> <i class="fa fa-instagram" aria-hidden="true"></i> </a> </li> </ul> <!--/Social Icons--> </footer> </div> </div> </div> <div class="huge-side right-side col-xs-12 col-sm-6"> <div class="huge-background-img"> <div id="container"> <div id="game"></div> <div id="score">0</div> <div id="instructions">Click (or press the spacebar) to place the block</div> <div class="game-over"> <h2>Game Over</h2> <p>You did great, you're the best.</p> <p>Click or spacebar to start again</p> </div> <div class="game-ready"> <div id="start-button">Start</div> <div></div> </div> </div> </div> </div> </div> </section> <nav class="menu col-xs-12 col-sm-6 block-revealer"> <div class="revealer-content"> <span class="btn-close"><img src="static2/picture/close.svg"></span> <ul class="menu-inner"> <li class="menu-item"><a class="menu-link" href="javascript:;">Home</a></li> <li class="menu-item"><a class="menu-link" href="javascript:;">Work</a></li> <li class="menu-item"><a class="menu-link" href="javascript:;">About</a></li> <li class="menu-item"><a class="menu-link" href="javascript:;">Contact</a></li> </ul> </div> <div class="revealer-animation"></div> </nav> <script src="static2/js/jquery.min.js"></script> <script src="static2/js/anime.min.js"></script> <script src="static2/js/reveal.js"></script> <script src='static2/js/three.min.js'></script> <script src='static2/js/TweenMax.min.js'></script> <script src="static2/js/tower-block.js"></script> </body> </html>
