14.5 编写新闻发布系统的JSP页面
14.5 编写新闻发布系统的JSP页面
根据上面设计的新闻发布系统，编写其JSP页面。
14.5.1 新闻发布的展示页面show.jsp
该页面存放在WEB-INF/jsp下，用来展示已经发布的新闻，并按照新闻类别进行显示。这里将新闻标题放在Map数组中，建立新闻类别id和新闻标题之间的对应关系。首先将新闻类别通过循环展示出来，同时每显示一个新闻类别，将新闻类别对应的新闻标题再通过循环显示出来。show.jsp的代码如下：
<%@page contentType="text/html;charset=GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@page import="java.util.*,com.gd.util.*,com.gd.vo.*,com.gd.po.Newstype,com.gd.po.New"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新闻发布的展示页面</title>
<style type="text/css">
<!--
.style1 {font-family: "隶书"}
-->
</style>
</head>
<%
List listNewsType = (List)request.getAttribute("listNewsType");
Map mapNews = (Map)request.getAttribute("mapNews");
%>
<body>
<table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0" >
<%
for (int i = 0; listNewsType != null && i < listNewsType.size(); i++) {
%>
<tr height="100%">
<td height="20"><strong><%=((Newstype)listNewsType.get(i)).getType()%></strong></td>
<td><strong><%=((Newstype)listNewsType.get(i + 1)).getType()%></strong></td>
</tr>
<tr height="100%">
<td height="150"><ol>
<%
List newsHeads = (List)mapNews.get((((Newstype)listNewsType.get(i)).getId()));
for (int j = 0; newsHeads != null && j < newsHeads.size(); j++) {
%>
<li><%=((New)newsHeads.get(j)).getContent() %></li>
<%}%>
</ol></td>
<td><ol>
<%
newsHeads = (List)mapNews.get((((Newstype)listNewsType.get(++i)).getId()));
for (int j = 0; newsHeads != null && j < newsHeads.size(); j++) {
%>
<li><%=((New)newsHeads.get(j)).getContent() %></li>
<%}%>
</ol></td>
</tr>
<tr height="100%" style=" border-top-width:1">
<td height="15" style=" border-top-width:1"><div align="right" class="style1" >》更多内容</div></td>
<td style=" border-top-width:1"><div align="right" class="style1" >》更多内容</div></td>
</tr>
<%}%>
</table>
</body>
</html>
代码说明：Map mapNews = (Map)request.getAttribute("mapNews")，这里通过Map来循环把每种新闻类别的内容显示出来。
14.5.2 发布新闻页面release.jsp
该页面存放在WEB-INF/jsp下，主要通过表单来提交用户填写的新闻标题和内容及发布人，这里添加了一个辅助类NewsUtil.java，主要用来获取当前日期。release.jsp的代码如下：
<%@page contentType="text/html;charset=GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@page import="java.util.List,com.gd.util.*,com.gd.vo.User,com.gd.po.Newstype"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>发布新闻页面</title>
<style type="text/css">
<!--
.style1 {
font-size: large;
font-weight: bold;
}
-->
</style>
</head>
<%
List newsTypes = (List)request.getAttribute("newsTypes");
User user = (User)request.getAttribute("user");
%>
<body>
<form name="form1" method="post" action="/myNews/release.do">
<table width="100%" height="160" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="17" colspan="2"><div align="center" class="style1">发布新闻</div></td>
</tr>
<tr>
<td width="126" height="19"><strong>新闻标题</strong></td>
<td width="560"><input name="head" type="text" size="100%"></td>
</tr>
<tr>
<td height="73"><strong>新闻内容</strong></td>
<td><p>
<textarea name="content" cols="100%" rows="30"></textarea>
</p>
</td>
</tr>
<tr>
<td height="19" colspan="2"><strong>发布时间：</strong><%=NewsUtil.getCurrentDate()%>
<strong>发布人</strong>：<%=user.getUsername()%> <strong>新闻类别</strong>：
<select name="newsType">
<%
for (int i = 0; newsTypes != null && i < newsTypes.size(); i++) {
Newstype newsType = (Newstype)newsTypes.get(i);
%>
<option value = '<%=newsType.getId()%>'><%=newsType.getType()%></option>
<%}%>
</select></td>
</tr>
<tr>
<td height="18"> </td>
<td><input type="submit" name="insert" value="提交">
<input type="submit" name="update" value="修改">
<input type="submit" name="delete" value="删除"></td>
</tr>
</table>
</form>
</body>
</html>
代码说明：NewsUtil.getCurrentDate()，这里添加一个辅助类NewsUtil，用来负责
myNews系统的一些辅助方法，该类在包com.gd.util里。
14.5.3 用户注册页面regedit.jsp
该页面存放在WEB-INF/jsp下，主要通过表单来提交用户填写的用户名和密码。regedit.jsp的示例代码如下：
<%@page contentType="text/html;charset=GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用户注册页面</title>
</head>
<body>
<form name="form1" method="post" action="/myNews/regedit.do">
<table width="100%" height="251" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="17" colspan="2"><div align="center"><strong>注册用户</strong></div></td>
</tr>
<tr>
<td width="18%"><strong>用户名：</strong></td>
<td width="82%"><input type="text" name="username"></td>
</tr>
<tr>
<td><strong>密码：</strong></td>
<td><input type="password" name="password1"></td>
</tr>
<tr>
<td><strong>确认密码：</strong></td>
<td><input type="password" name="password2"></td>
</tr>
<tr>
<td colspan="2"><div align="center">
<input type="submit" name="Submit" value="注册">
<input type="reset" name="Submit" value="重置">
</div></td>
</tr>
</table>
</form>
</body>
</html>
14.5.4 管理员登录页面login.jsp
该页面存放在WEB-INF/jsp下，主要通过表单来提交用户填写的用户名和密码，用于验证用户是否填写正确。login.jsp的示例代码如下：
<%@page contentType="text/html;charset=GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>管理员登录页面</title>
</head>
<body>
<form name="form1" method="post" action="/myNews/login.do">
<table width="100%" height="251" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="17" colspan="2"><div align="center"><strong>管理员登录</strong></div></td>
</tr>
<tr>
<td width="18%"><strong>用户名：</strong></td>
<td width="82%"><input type="text" name="username"></td>
</tr>
<tr>
<td><strong>密码：</strong></td>
<td><input type="password" name="password1"></td>
</tr>
<tr>
<td><strong>确认密码：</strong></td>
<td><input type="password" name="password2"></td>
</tr>
<tr>
<td colspan="2"><div align="center">
<input type="submit" name="Submit" value="登录">
<input type="reset" name="Submit" value="重置">
</div></td>
</tr>
</table>
</form>
</body>
</html>
14.5.5 错误处理页面error.jsp
该页面存放在WEB-INF/jsp下，主要用来捕捉并显示程序出现的Exception信息。error.jsp的示例代码如下：
<%@page contentType="text/html;charset=GBK"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>错误处理页面</title>
<style type="text/css">
<!--
.style1 {
color: #000000;
font-weight: bold;
}
.style2 {color: #FF0000}
-->
</style>
</head>
<% Exception ex = (Exception)request.getAttribute("Exception"); %>
<body>
<table width="100%" border="1">
<tr>
<td colspan="2"><div align="center"><strong>错误信息显示</strong></div></td>
</tr>
<tr>
<td width="22%" height="141"><span class="style1">错误信息是：</span></td>
<td width="78%"><span class="style2"><%=ex.getMessage();%></span></td>
</tr>
</table>
</body>
</html>
如果要使用该页面，则需要在Spring的配置文档中增加以下代码：
<bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMapping-
ExceptionResolver">
<property name="exceptionMappings">
<props>
<prop key="java.sql.SQLException">error</prop>
<prop key="java.sql.IOException">error</prop>
</props>
</property>
</bean>
代码说明：只要发生了SQLException异常或IOException异常，就会连接至/WEB-INF/
jsp/error.jsp。