8.3.2 用户表示层

作者: 张桂元贾燕枫姜波出处:人民邮电出版社　2008-05-08 23:51　砖好评论条　进入论坛

阅读提示：《征服Ajax——Web 2.0快速入门与项目实践（Java）》本书结构清晰、注重实用、深入浅出，非常适合作为Eclipse中Ajax应用开发的自学或培训教材，同时，也适合作为Java Web开发人员的参考用书。本文介绍了博客的用户表示层。

8.3.2 用户表示层

在用户表示层中，主要是一些相关的JSP页面，用于实现图8-2～8-7所示的页面。该层中的JSP页面应该放在对应项目的WebRoot目录下。本章只给出相应JSP页面中最核心部分的代码，详细代码及效果可以参考本书附带光盘中的程序源代码。

1．博客个人维护管理中心首页（blogAdminMain.jsp）

该页面为框架页，整个页面一共分成三个部分，具体对应页面文件及功能如下。

• adminTop.jsp页面：顶端页面，一般可以放置网站的logo或者广告条；

• adminLeft.jsp页面：管理主菜单，提供博客进入不同维护管理界面的超级链接；

• adminMain.jsp页面：一个欢迎页面，实际使用时，可以在该页面中加入相关的系统使用说明等信息。

2．左侧框架页面（adminLeft.jsp）

在该页面中，提供了博客进入不同维护管理界面的超级链接。核心程序代码及相关解释如下：

……
<font color="#000000">管理主菜单</font>
……
<font color="#000000"><a href="adminArticle.jsp" target="main">文章管理</a></font>
</td>
</tr>
<tr>
<td width="100%" height="8" align="center">
<font color="#000000"><a href="adminSort.jsp" target="main">分类管理</a></font>
</td>
</tr>
<tr>
<td width="100%" height="8" align="center">
<font color="#000000"><a href="adminLink.jsp" target="main">链接管理</a></font>
</td>
</tr>
<tr>
<td width="100%" height="7" align="center">
<font color="#000000"><a href="adminSelf.jsp" target="main">个人资料管理</a></font>
</td>
</tr>
<tr>
<td width="100%" height="7" align="center">
<font color="#000000"><a href="adminLogo.jsp" target="main">个人logo管理</a></font>
</td>
…….

在上面的页面中，如果博客单击“文章管理”超级链接，将跳转到“adminArticle.jsp”页面，以进行文章信息的维护管理功能。如果博客单击“分类管理”超级链接，将跳转到“adminSort.jsp”页面，以进行文章分类信息的维护管理功能。如果博客单击“链接管理”超级链接，将跳转到“adminLink.jsp”页面，进行链接信息的维护管理功能。如果博客单击“个人资料管理”超级链接，将跳转到“adminSelf.jsp”页面，进行个人基本信息的维护管理功能。如果博客单击“个人logo管理”超级链接，将跳转到“adminLogo.jsp”页面，进行图片的上传，实现个人Logo的维护管理功能。

3．文章信息管理页面（adminArticle.jsp）

本页面是在单击“文章管理”超级链接后跳转到的页面，在该页面中，博客可以分类显示文章信息列表，并删除对应的文章记录。核心程序代码如下：

……
<script language="javascript" src="images/adminArticle.js" type="text/ javascript"></script>
……
<body text="#FCD447" onload="loadRequest()">
……
<font color="#FF0000"><b>Blog文章管理</b></font>
</td>.
……
<font color="#FF0000"><b>文章分类</b></font>
<select id="sort" onchange="sortChange()">
</select>
……
<td width="25%" align="center">
<b>文章名称</b>
</td>
<td width="25%" align="center">
<b>发表时间</b>
</td>
<td width="50%" colspan="2" align= "center">
<b>操作</b>
</td>
</tr>
<tbody id="articleList"></tbody>
……

注意：在该页面中，使用了Ajax技术，在页面装载时通过onload事件调用了“loadRequest()”函数，该函数包含在JavaScript脚本文件“adminArticle.js”中。该函数借助Ajax提交“"adminArticle?action=load" ”请求，以获取服务器端数据库中的文章及分类信息，以进行文章列表信息和文章分类信息的动态装入工作。对应HTML中的DOM对象的名称分别为“sort”和“articleList”。

当用户在文章分类的下拉列表框中，选择对应的文章类别后，通过onchange事件调用“sortChange()”函数，在该函数中借助Ajax技术提交“"action=show" + "&sortid="+ sortid”请求，以获取数据服务器中指定文章分类的文章信息列表，动态装入到名称为“articleList”的动态表格中。

用户单击动态表格中对应文章记录的删除按钮时，根据脚本文件“adminArticle.js”中的设定，将提交“"adminArticle?action=delete" + "&articleid=" + id”请求，以删除指定文章编号的文章信息，然后动态刷新名称为“articleList”的动态表格中的数据。

4．文章分类信息管理页面（adminSort.jsp）

本页面是在单击“分类管理”超级链接后跳转到的页面，在该页面中，博客可以对文章的分类信息进行添加及删除等操作。核心程序代码如下：

……
<script language="javascript" src="images/adminSort.js" type="text/javascript"> </script>
……
……
……
<b><font color="#FF0000">新分类名称</font></b><b><font color="#FF0000">：</font></b>
<input style="BORDER-RIGHT: #e78d00 1px solid; BORDER-TOP: #e78d00 1px solid; BORDER-LEFT: #e78d00 1px solid; WIDTH: 125px; BORDER-BOTTOM: #e78d00 1px solid; " name="name">
<input class="button-submit" type="submit" value="添加" onclick="addSort()">
……
<td width="25%" align="center">
<b>分类名称</b>
</td>
<td width="50%" colspan="2" align="center">
<b>操作</b>
</td>
</tr>
<tbody id="sortList"></tbody>
……

该页面中同样使用了Ajax技术，在页面装载时通过onload事件调用了“loadRequest()”函数，该函数包含在JavaScript脚本文件“adminSort.js”中。该函数借助Ajax提交“"adminSort?action=load"”请求，以获取服务器端数据库中的文章分类信息，进行文章分类信息的动态装入工作。对应HTML中的DOM对象的名称分别为“sortList”。

当用户在新分类名称的文本框中，输入待增加的分类名称之后，单击“添加”按钮，将调用“addSort()”函数，该函数将提交“"action=add" + "&name="+ name”请求，将对应的分类信息保存到数据库对应的分类信息表中。为了解决中文信息的乱码问题，这里采用的是POST方式提交数据信息。

当用户单击动态表格中对应分类记录的删除按钮时，根据脚本文件“adminSort.js”中的设定，将提交“"adminSort?action=delete" + "&id=" + id”请求，以删除指定分类编号的分类信息，然后动态刷新名称为“sortList”的动态表格中的数据。

5．链接信息管理页面（adminLink.jsp）

本页面是在单击“链接管理”超级链接后跳转到的页面，在该页面中，博客可以对博客页面中的友情链接信息列表进行添加及删除等操作。核心程序代码如下：

……
<script language="javascript" src="images/adminLink.js" type="text/javascript"> </script>
……
<body text="#FCD447" onload="loadRequest() ">
……
<b><font color="#FF0000">新链接名称：</font></b>
<input style="BORDER-RIGHT: #e78d00 1px solid; BORDER-TOP: #e78d00 1px solid; BORDER-LEFT: #e78d00 1px solid; WIDTH: 125px; BORDER-BOTTOM: #e78d00 1px solid; " name="name">
<b><font color="#FF0000">地址：</font></b>
<input style="BORDER-RIGHT: #e78d00 1px solid; BORDER-TOP: #e78d00 1px solid; BORDER-LEFT: #e78d00 1px solid; WIDTH: 125px; BORDER-BOTTOM: #e78d00 1px solid; " name="url">
<input class="button-submit" type="submit" value="添加" style="width: 40; height: 20" onclick="addLink() ">
……
<td width="25%" align="center">
<b>链接名称</b>
</td>
<td width="46%" align="center">
<b>链接地址</b>
</td>
<td width="29%" colspan="2" align="center">
<b>操作</b>
</td>
</tr>
<tbody id="linkList"></tbody>
……

该页面中同样使用了Ajax技术，在页面装载时，通过onload事件调用了“loadRequest()”函数，该函数包含在JavaScript脚本文件“adminLink.js”中。该函数借助Ajax提交“"adminLinks?action=load"”请求，以获取服务器端数据库中的链接信息，进行链接信息的动态装入工作。对应HTML中的DOM对象的名称分别为“linkList”。

当用户在新链接名称及链接地址文本框中，输入待增加的信息之后，单击“添加”按钮，将调用“addLink()”函数，在该函数中，将提交“"action=add" + "&name="+ name + "&url="+ url1”请求，将对应的链接信息保存到数据库对应的链接信息表中。为了解决中文信息的乱码问题，这里采用的是POST方式提交数据信息。

当用户单击动态表格中删除按钮时，根据脚本文件“adminLink.js”中的设定，将提交“"adminLinks?action=delete" + "&id=" + id”请求，以删除指定链接编号的链接信息，然后动态刷新名称为“linkList”的动态表格中的数据。

6．个人基本信息管理页面（adminSelf.jsp）

本页面是在单击“个人资料管理”超级链接后跳转到的页面，在该页面中，博客可以对个人基本信息编辑修改。核心程序代码如下：

……
<%
Blog blog = (Blog)session.getAttribute(Constants.LOGIN_USER_KEY);
Integer modiFlag = (Integer)session.getAttribute(Constants.MODIFY_OK_KEY);
if (modiFlag!=null){
out.println("修改成功！");
session.removeAttribute(Constants.MODIFY_OK_KEY);
}
%>
……
<b><font color="#FF0000">博客个人资料</font></b>
……
…… <form method="post" action="saveSelf">
博客标题
</td>
<td>
<input class="text" size="26" name="subject" value="<%=blog.getSubject()%>">
……
博客密码
</td>
<td>
<input class="text" size="20" name="psw" value=" <%=blog.getPassword()%>">
……
<td class="redfont" nowrap width="10%" height="30">
确认密码
</td>
<td>
…… <input class="text" size="20" name= "psw2"value=
"<%=blog.getPassword()%>">
<td class="redfont" height="30">
博客邮件地址
</td>
<td width="90%">
<input class="text" size="20" name="email" value="<%=blog.getEmail()%>">
……
<input class="button-submit" id="save" type="submit"
value="确认修改" name="save">
……

页面获取登录验证通过后，借助session的对应属性保存博客相关信息，然后在对应的表单中动态装入。

当博客完成对应信息的修改，单击“确认修改”按钮之后，将提交“saveSelf”请求，以借助Servlet程序完成数据库中对应数据表信息的更新工作。

7．个人Logo图片管理页面（adminLogo.jsp）

本页面是在单击“个人Logo管理”超级链接后跳转到的页面，在该页面中，博客可以实现图片上传，以更换自己的Logo图片。核心程序代码如下：

……
<%
Integer modiFlag = (Integer)session.getAttribute(Constants.MODIFY_OK_KEY);
if (modiFlag!=null){
out.println("修改成功！");
session.removeAttribute(Constants.MODIFY_OK_KEY);
}
%>
……
……
<form enctype="multipart/form-data" method ="post"action="saveLogo">

<tr>
<td class="redfont" valign="top" height="30">
博客图片
</td>
<td>
<input type="file" name="image">
……
<input class="button-submit" id="save" type="submit" value="确认修改" name="save">
……

当博客借助浏览按钮选择了对应的图片文件，单击“确认修改”按钮之后，将提交“saveLogo”请求以借助Servlet实现图片文件的上传。注意该表单中的enctype="multipart/form-data"设置是为了确保文件信息的正确传递。

回书目 上一节 下一节

关于 Ajax Java 的

文章

博文

帖子

· 8.3.7 技术难点详解(05/09)

· 8.3.6 控制处理层(05/09)

· 8.3.5 业务逻辑层(05/08)

· 8.3.4 数据持续层(05/08)

· 8.3.3 Ajax技术相关脚本文件(05/08)

· 使用xmlhttp和Java session监听改善站内消息系..

· JAVA中的集合类

· 计算Java日期－－学习怎样创建和使用日期

· JAVA对象转为Java String的几种常用方法

· 用来读取QQwry.dat的java代码

· 使用xmlhttp和Java session监听改善站内消息系..

· JAVA中的集合类

· 计算Java日期－－学习怎样创建和使用日期

· JAVA对象转为Java String的几种常用方法

· 用来读取QQwry.dat的java代码

专题

我也说两句

叫好

拍砖

中国最大的网络技术网站 ·
技术成就梦想

·假期读书充电

· 系统分析师自测获奖名..
· Linux结课考试自测获奖..
· 上周Linux系统命令的使..
· 上周真题冲刺测试获奖..
· 全国计算机等考四级模..
· 08年3月各大网上书店及..

· 网络工程师模拟测试获..
· 全国计算机软考考试指..
· 3月24日WCF聊天活动积..
· 全国计算机等级考试四..
· 软件项目估计：第2版
· 系统分析师基础知识自..

排行榜

·假期读书充电 (查看6046次)
·1.2 网络定义 (查看1118次)
·《网管员必读—网络应用》自测.. (查看938次)
·历次技术自测获奖网友详细信息 (查看911次)
·SQL Server入门到精通技术自测.. (查看864次)

·超级网管员——网络应用技术自测试题答案 (5个砖)
·SQL Server入门到精通技术自测试题答案 (5个砖)
·网管员全真面试题自测获奖结果及答案解析 (4个砖)
·免费讲座：搜索引擎营销打造成功网站 (3个砖)
·历次技术自测获奖网友详细信息 (3个砖)

·假期读书充电 (13个好)
·1.2 网络定义 (3个好)
·Visual C++数字图像处理开发入门与编程实践 (3个好)
·《游戏开发核心技术-剧本与角色创造》阅读不枯燥 (3个好)
·SQL Server入门到精通技术自测试题答案 (3个好)

·征服Ajax——Web 2.0快速入门与项目实践（Java） (05月)
·Visual C++程序设计自学手册 (05月)
·MYSQL Cookbook第2版中文版 (05月)
·Adding Ajax中文版 (05月)
·SOC设计UML实务手册 (05月)

·资深黑客详谈网页木马攻击原理与防..
·深度XP SP3免激活克隆V8.1版惊现

· 密码的最佳选择与管理..
· 路由器基础知识
· 微软解散雅虎董事会竞..
· 北电CEO：不会沦为二流..
· 求伯君称WPS将全面转型
· 揭秘：黑客如何对微软..
· SQL Server安全模型让..
· Vista、Unix和MacOS补..

· 华为证实出售50%-60%手..
· Java堆和栈与StringBui..
· IT人必备十大热门技能
· 高管跳槽不断谷歌回应..
· 下一代软件工程师去向..
· 独家：Oracle 11gR1中..
· 关于防止员工泄露公司..
· JBoss AS的调优与瘦身

订阅技术快讯

电子杂志下载

名称：SQL Server数据库管理精品黄皮书
简介：书中文章经过精挑细选，便于用户能根据自己的实际工作和学习，快速在本书寻找到相关资料。内容涵盖了SQL Server的安装与升级、语句查询、数据备份和恢复、自动化任务、数据同步、数据字典、安全和预防、性能和优化、集群等各方面应用信息，以及DBA管理人员在数据库管理工作中

名称：2007路由技术大全
简介：《2007路由技术大全》由51CTO.com网站特别策划制作，该书包括路由器技术、路由器产品、路由器配置、安全设置、路由器故障处理、路由器密码恢复，以及广大网友在实践使用中的心得经验和技巧文章，内容注重实用性，适用于初学者入门，也适合多年从业者提高，是一本实践和理论完

名称：网络安全精品应用黄皮书
简介：《2007精品网络安全黄皮书》包括了9个大类24个小类， 800余篇文章，内容包含了熊猫烧香病毒、DDOS攻击、ARP病等热点问题的介绍及解决方案。从病毒查杀、防范、系统、数据等各方面的安全设置到黑客技术的了解、防范，涉及到了安全应用的全部领域, 由浅至深内容全面。

专题

最多好

最多砖