JSP

实验目的：以投票系统为例，掌握Web应用项目的实现过程

1 建立系统框架

1-1 创建站点和页面

首先用DW创建一个使用JSP技术的站点jspvote
使用现成的Web设计模板Blue Rain，包括样例页面、图片和和附加样式表，复制到站点目录即可
编辑temp.htm作为原型页另存为其他页面（在导航菜单中加入三个相应的链接）：系统首页index.jsp，投票结果info.jsp，后台维护manage.jsp（及后台登录login.jsp）

1-2 添加数据库连接

准备好数据库文件vote.mdb，并输入一些数据供测试
在DW数据库面板中添加数据库连接connVote
驱动程序为sun.jdbc.odbc.JdbcOdbcDriver
连接URL为jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ=d:/vote.mdb

2 投票功能模块

2-1 首页index.jsp

功能：显示所有投票项供选择

打开首页index.jsp，添加记录集rsItems，获取voteinfo表的所有记录
插入表单，动作属性设为vote.jsp
表单中添加提示文本“请决定你的选择”，添加2行1列表格宽300像素
表格第一行单元格中添加单选钮id，选定值绑定到rsItems.id，单选钮后插入动态文本rsItems.item
选定表格第一行添加“重复区域”服务器行为
表格第二行插入投票按钮

2-2 投票处理页vote.jsp

功能：获取表单提交的投票项id，为voteinfo表相应投票项count字段加1

创建vote.jsp添加以下代码段即可：

<%@ include file="../Connections/connVote.jsp" %> 
<%
//根据统一设置创建数据库连接
Class.forName(MM_connVote_DRIVER);
Connection connVote = DriverManager.getConnection(MM_connVote_STRING,MM_connVote_USERNAME,MM_connVote_PASSWORD);
//根据表单提交的ID为voteinfo表相应投票项的count字段加1
PreparedStatement preUpdate = connVote.prepareStatement("UPDATE voteinfo SET count=count+1 WHERE id=?");
preUpdate.setObject(1, request.getParameter("id"));
preUpdate.executeUpdate();
connVote.close();
//投票后跳转至查看结果页
response.sendRedirect("info.jsp");
%>

（或是使用服务器行为，这会生成更通用但也更繁琐的代码）在数据工具栏中插入“已准备（插入、更新、删除）”，类型选择“更新”，SQL语句如下：
UPDATE voteinfo SET count=count+1 WHERE id=voteId
添加参数voteId，运行值为request.getParameter("id")
插入jsp:forward，跳转到info.jsp

2-3 投票结果页info.jsp

功能：显示各项得票数和得票率

添加2行3列表格宽500像素，第1行添加文本：投票项，得票数，得票率
添加记录集rsTotal，获取voteinfo表内容，再切换到高级模式修改查询语句：SELECT sum(count) as totalNum FROM voteinfo
添加记录集rsVotes，获取voteinfo表内容
在表格前插入代码段获取总票数赋值给变量: <% int totalNum=rsTotal.getInt("totalNum"); %>
在内容行投票项列插入动态文本显示投票项: rsVotes.item
在内容行左端插入代码段获取得票数赋值给变量: <% int num = rsVotes.getInt("count"); %>
在内容行得票数列插入表达式显示得票数和总票数: 得<%= num %>票，共<%= totalNum %>票
在内容行得票率列插入表达式显示得票率及柱形图: 得票率<img src="back.gif" width="<%= num*200/totalNum %>" height="9" /><%= num*100/totalNum %>%
（注意：由于计算得票率要用总票数作为分母，投票结果页必须已有人投票后才能正常显示，可以添加IP记录集不为空时才显示区域的服务器行为解决此问题）
选定内容行添加重复区域服务器行为显示rsVotes记录集的所有记录

2-4 防止重复投票

访问者投票的同时提交其IP地址信息，之后相同IP地址的访问者即无法再投票

修改系统首页index.jsp，在页顶添加代码段，用request对象获取访问者IP地址并赋值给阶段变量ip：
<% session.setAttribute("ip", request.getRemoteAddr()); %>
添加记录集rsIP，从voteip表中筛选ip字段等于阶段变量ip的记录
选定表单添加“如果记录集为空则显示区域”服务器行为，只有当rsIP记录集为空时才显示投票区域
再添加一条提示文本“你已经投过票了”并为其添加“如果记录集不为空则显示区域”服务器行为（也可以直接跳转到投票结果页）

再修改vote.jsp在更新投票数的代码段之后添加以下代码段（如果不保存阶段变量，则在此页面中需要再次获取访问者IP地址）：

//阶段变量ip写入voteip表的ip字段
PreparedStatement preInsert = connVote.prepareStatement("INSERT INTO voteip (ip) VALUES (?)");
preInsert.setObject(1, session.getAttribute("ip"));
preInsert.executeUpdate();

（注意：更新数据库中多个表的操作最好是作为一个事务来处理，如何修改以上代码实现事务处理请参看教学08的事务处理部分）

3 后台维护模块

3-1 系统维护首页manage.jsp

功能：显示各投票项及“删除”超链接，显示添加投票项表单

添加标题“维护投票项”，插入2行3列表格宽400像素，第1行输入文本：序号，投票项，维护
添加记录集rsItems，获取voteinfo表内容
第2行第3列输入文本“删除”，选定“删除”文本添加服务器行为: 转到详细页面delete.jsp，传递参数id
第2列插入rsItems.item
第1列插入JSP表达式: <%= Repeat1__index + 1 %>
选定item行添加服务器行为: 重复区域

添加标题“添加投票项”，插入表单，表单中加入文本域item和提交按钮
添加“插入记录”服务器行为
在页顶添加代码段以支持提交中文: <% request.setCharacterEncoding("utf-8"); %>

3-2 删除投票项处理页delete.jsp

功能：获取URL参数投票项id，删除vote表相应投票项记录

创建delete.jsp添加以下代码段即可：

<%@ include file="../Connections/connVote.jsp" %>
<%
//根据统一设置创建数据库连接
Class.forName(MM_connVote_DRIVER);
Connection connVote = DriverManager.getConnection(MM_connVote_STRING,MM_connVote_USERNAME,MM_connVote_PASSWORD);
//根据表单提交的ID删除voteinfo表中相应投票项
PreparedStatement preDelete = connVote.prepareStatement("DELETE FROM voteinfo WHERE id = ?");
preDelete.setObject(1, request.getParameter("id"));
preDelete.executeUpdate();
connVote.close();
//删除后跳转至后台维护页
response.sendRedirect("manage.jsp");
%> 

（或）添加服务器行为: 已准备（插入、更新、删除）
DELETE FROM voteinfo WHERE id=voteId
添加参数voteId，运行值为request.getParameter("id")
插入jsp:forward跳转到manage.jsp

3-3 管理员登录login.jsp

功能：显示管理员登录表单

添加标题“输入登录信息”，插入表单，添加3行2列表格宽350像素，添加文本域name、文本域password（类型属性为密码）和登录按钮
添加“登录用户”服务器行为，连接admin表验证账号和密码，登录成功跳转到manage.jsp，登录失败跳转到login.jsp

为manage.jsp页添加“限制对页的访问”服务器行为，如果访问被拒绝跳转到login.jsp
再次点击“后台维护”链接时就会转到登录页面

现在这个投票系统已经初步完成，大家还可以考虑如何进一步完善，例如：

如果要实现设置多个投票主题，可以增加投票主题表，投票信息表和投票IP表也需要加上投票主题ID字段。即可添加新的投票主题开始新一轮投票。
如果要实现多选投票：可以使用复选框提交表单信息，request对象接收参数后可将其作为数组处理
如果要增加各投票项的对应图片，可以参照前述上传图片到数据库的方法。