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裡。
該頁面存放在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。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
