版权提醒
本系列文章为原创内容。转载请注明文章来源。

前言

本文为搭建 SSSP 框架极简书店教程系列的其中一篇。本文主要内容：实现访问未定义 Action 自动跳转 404 页面与从 404 页面返回首页功能。

创建 404.jsp

文件位置：web 目录

返回首页的 url：${pageContext.request.contextPath}/index.action 对应命名空间为 "/" 的 package ，即前台首页。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

	<title>404</title>

	<!-- Google font -->
	<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,900" rel="stylesheet">

	<!-- Custom stlylesheet -->
	<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" />

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
		  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
		  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->

</head>

<body>

	<div id="notfound">
		<div class="notfound">
			<div class="notfound-404">
				<h1>Oops!</h1>
			</div>
			<h2>404 - Page not found</h2>
			<p>您正在查找的页面可能已被删除，因为其名称已更改或暂时不可用。</p>
			<a href="${pageContext.request.contextPath}/index.action">返回首页</a>
		</div>
	</div>

</body><!-- This templates was made by Colorlib (https://colorlib.com) -->

</html>

对应 css 文件

web/css/style.css

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

#notfound {
  position: relative;
  height: 100vh;
}

#notfound .notfound {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.notfound {
  max-width: 410px;
  width: 100%;
  text-align: center;
}

.notfound .notfound-404 {
  height: 280px;
  position: relative;
  z-index: -1;
}

.notfound .notfound-404 h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 230px;
  margin: 0px;
  font-weight: 900;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  background: url('../img/bg.jpg') no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: cover;
  background-position: center;
}


.notfound h2 {
  font-family: 'Montserrat', sans-serif;
  color: #000;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 0;
}

.notfound p {
  font-family: 'Montserrat', sans-serif;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 20px;
  margin-top: 0px;
}

.notfound a {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
  background: #0046d5;
  display: inline-block;
  padding: 15px 30px;
  border-radius: 40px;
  color: #fff;
  font-weight: 700;
  -webkit-box-shadow: 0px 4px 15px -5px #0046d5;
          box-shadow: 0px 4px 15px -5px #0046d5;
}


@media only screen and (max-width: 767px) {
    .notfound .notfound-404 {
      height: 142px;
    }
    .notfound .notfound-404 h1 {
      font-size: 112px;
    }
}

此 404 页面效果还需要一张背景图，不方便传到博客，请到此项目的 GitHub 存储库中获取。

创建 index.jsp

文件位置：web 目录

因为前台页面也有非常的重复部分，所以也采用了拆分页面。

当前仅用于演示从 404 页返回首页，所以商品表中信息随便写写。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Bookstore首页</title>
    <!-- 引入CSS样式和JS脚本文件等-->
    <%@include file="common/headContext.jsp"%>
</head>
<body>

    <!-- 引入顶部导航条-->
    <%@include file="common/common_top.jsp"%>

    <!--中部介绍区-->
    <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
        <h1 class="display-4">欢迎光临！</h1>
        <p class="lead">找到您想要的图书，然后将它放入购物车。您为您的订单支付后，我们将尽快安排物流配送。</p>
    </div>

    <!--商品区-->
    <div class="container">
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <thead>
                <tr>
                    <th>书号</th>
                    <th>书名</th>
                    <th>单价</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>加入购物车</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1,001</td>
                    <td>random</td>
                    <td>data</td>
                    <td>placeholder</td>
                    <td>text</td>
                    <td><button type="button" class="btn btn-sm btn-outline-secondary">加入</button></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

公用文件没什么特殊要提的，所以这里不再赘述，需要的话请到此项目的 Github 存储库中获取。

Struts 配置文件

如果没有对应的 Action ，则使用默认 Action 访问 404.jsp 页面。

    <!--公共配置信息-->
    <package name="default" extends="struts-default">
        <!--遇到未配置的Action时将执行以下Action-->
        <default-action-ref name="defaultAction"/>
        <!--用于打开404页面的Action-->
        <action name="defaultAction">
            <result name="success">/404.jsp</result>
        </action>
    </package>

配置 Struts 前台配置文件

向 foreground.xml 添加以下内容：

    <package name="foreground" namespace="/" extends="struts-default" strict-method-invocation="false">
        <action name="index">
            <result>/index.jsp</result>
        </action>
    </package>