一步一步做项目（24）前端显示页面
在前面 一步一步做项目（23）制作主页的基础上进行，由于前面已经建立了前端页面组件，这里就可以直接使用了。
页面布局
页面布局继承主页元素，页头页尾不变，中间是显示的内容，中间也可以分两栏来布局，添加导航栏或其他宣传栏，这里采用最简单的布局方式，显示清单的页面布局如下：
显示详细信息的页面布局如下：
# index.jsp
显示考生列表的页面为index.jsp，放在examinee目录下，代码如下：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<jsp:include page="../includes/beginning.jsp" flush="true" />
</head>
<body id="page-top">
<jsp:include page="../includes/topFront.jsp" flush="true" />
<section class="page-section mainContent" id="mainContent">
<div class="container">
<h2
class="page-section-heading text-center text-uppercase text-secondary">
<s:text name="Examinee.title.index" />
</h2>
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon">
<i class="fas fa-star"></i>
</div>
<div class="divider-custom-line"></div>
</div>
<!-- Items -->
<div class="row">
<!-- Item1 -->
<s:iterator value="model">
<div class="col-md-6 col-lg-4"
style="padding-bottom: 20px !important;">
<a
href="${pageContext.request.contextPath}/examinee/browse?examineeId=${examineeId}">
<i class="fas fa-user mr-2"></i> <s:property value="examineeName" />
<br /> <i class="fas fa-address-book mr-2"></i>
<s:property value="examineeAddress" />
</a>
</div>
</s:iterator>
</div>
<!-- /.row -->
</div>
</section>
<jsp:include page="../includes/scrollToTop.jsp" flush="true" />
<jsp:include page="../includes/footer.jsp" flush="true" />
<jsp:include page="../includes/copyright.jsp" flush="true" />
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/curie/jqBootstrapValidation.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/curie/contact.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/curie/freelancer.js"></script>
</body>
</html>
这里也可以采用长列表来显示，具体采用什么方式，可以自由调整。
browse.jsp
显示列表详细信息的代码放在browse.jsp中，同样在examinee目录中，代码如下：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<jsp:include page="../includes/beginning.jsp" flush="true" />
</head>
<body id="page-top">
<jsp:include page="../includes/topFront.jsp" flush="true" />
<section class="page-section mainContent" id="mainContent">
<div class="container">
<h2
class="page-section-heading text-center text-uppercase text-secondary">
<s:text name="Examinee.title.browse" />
</h2>
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon">
<i class="fas fa-star"></i>
</div>
<div class="divider-custom-line"></div>
</div>
<!-- Items -->
<div class="row">
<table class="table table-striped">
<!-- examineeId -->
<tr>
<td class="span3 verticalMiddle text-right" width="120px"><s:text name="Examinee.fieldName.examineeId"/></td>
<td class="span9 verticalMiddle"><s:property value="model.examineeId"/></td>
</tr>
<!-- /examineeId -->
<!-- examineeName -->
<tr>
<td class="span3 verticalMiddle text-right"><s:text name="Examinee.fieldName.examineeName"/></td>
<td class="span9 verticalMiddle"><s:property value="model.examineeName"/></td>
</tr>
<!-- /examineeName -->
<!-- examineeSex -->
<tr>
<td class="span3 verticalMiddle text-right">
<s:text name="Examinee.fieldName.examineeSex"/>
</td>
<td class="span9 verticalMiddle"><s:property value="model.examineeSexIdView"/></td>
</tr>
<!-- /examineeSex -->
<!-- examineeAddress -->
<tr>
<td class="span3 verticalMiddle text-right"><s:text name="Examinee.fieldName.examineeAddress"/></td>
<td class="span9 verticalMiddle"><s:property value="model.examineeAddress"/></td>
</tr>
<!-- /examineeAddress -->
<!-- examineeCreator -->
<tr class="hidden">
<td class="span3 verticalMiddle text-right" width="120px">
<s:text name="Examinee.fieldName.examineeCreator"/>
</td>
<td class="span9 verticalMiddle"><s:property value="model.examineeCreator"/></td>
</tr>
<!-- /examineeCreator -->
<!-- examineeCreatingTime -->
<tr class="hidden">
<td class="span3 verticalMiddle text-right" width="120px">
<s:text name="Examinee.fieldName.examineeCreatingTime"/>
</td>
<td class="span9 verticalMiddle"><s:date name="model.examineeCreatingTime" format="yyyy年MM月dd日"/></td>
</tr>
<!-- /examineeCreatingTime -->
<!-- examineeAuditor -->
<tr class="hidden">
<td class="span3 verticalMiddle text-right" width="120px">
<s:text name="Examinee.fieldName.examineeAuditor"/>
</td>
<td class="span9 verticalMiddle"><s:property value="model.examineeAuditor"/></td>
</tr>
<!-- /examineeAuditor -->
<!-- examineeAuditingTime -->
<tr class="hidden">
<td class="span3 verticalMiddle text-right" width="120px">
<s:text name="Examinee.fieldName.examineeAuditingTime"/>
</td>
<td class="span9 verticalMiddle"><s:date name="model.examineeAuditingTime" format="yyyy年MM月dd日"/></td>
</tr>
<!-- /examineeAuditingTime -->
<!-- status -->
<tr>
<td class="span3 verticalMiddle text-right"><s:text name="Examinee.fieldName.examineeStatus"/></td>
<td class="span9 verticalMiddle"><s:property value="model.examineeStatusView"/></td>
</tr>
<!-- /status -->
</table>
</div>
<!-- /.row -->
</div>
</section>
<jsp:include page="../includes/scrollToTop.jsp" flush="true" />
<jsp:include page="../includes/footer.jsp" flush="true" />
<jsp:include page="../includes/copyright.jsp" flush="true" />
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/curie/jqBootstrapValidation.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/curie/contact.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/curie/freelancer.js"></script>
</body>
</html>
这里只是通过一个简单的表格来显示列表中的项的详细信息，非常简单，你也可以进行更多的修饰，以获取更强的效果。
配置
在前面完成的java基础上，这里只进行action的配置即可，不需要再重新编写java代码，这里将相关的配置放在struts-examinee.xml文件中，代码如下：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.5//EN"
"http://struts.apache.org/dtds/struts-2.5.dtd">
<struts>
<package name="cmis.examinee" extends="struts-default"
namespace="/examinee">
<interceptors>
<interceptor name="auth"
class="cn.lut.curiezhang.interceptor.AccessInterceptor" />
<interceptor-stack name="authStack">
<interceptor-ref name="auth" />
</interceptor-stack>
<interceptor name="log"
class="cn.lut.curiezhang.interceptor.UserLogInterceptor" />
<interceptor-stack name="logStack">
<interceptor-ref name="log">
</interceptor-ref>
</interceptor-stack>
</interceptors>
<global-results>
<!-- 定义名为exception的全局result -->
<result name="login" type="redirect">/login/login.jsp</result>
<result name="loginAdmin" type="redirect">/login/login.jsp</result>
<result name="noAccess" type="redirect">/admin/error/noAccess.jsp
</result>
<result name="noPermission" type="redirect">/admin/error/noPermission.jsp
</result>
</global-results>
<!-- START examineeAction -->
<action name="index" class="examineeAction" method="index">
<result name="success">index.jsp</result>
<interceptor-ref name="logStack" />
<interceptor-ref name="authStack" />
<interceptor-ref name="basicStack" />
</action>
<action name="browse" class="examineeAction" method="browse">
<result name="success">browse.jsp</result>
<interceptor-ref name="logStack" />
<interceptor-ref name="authStack" />
<interceptor-ref name="basicStack" />
</action>
<!-- END examineeAction -->
</package>
</struts>
创建好了配置文件后，还要在struts.xml中包含刚才创建的配置，在struts.xml中添加如下代码：
<include file="struts-examinee.xml" />
这样，就完成前端页面的推送了。
