JSP

教学目的：掌握商店子系统的实现过程

本次实验在实验12完成进度的基础上进行，如实验12内容已删除，请在教学辅助系统中下载JSP项目包ROOT-12.rar及所用的数据库cloud.mdb，重建jsproot站点，发布到Tomcat服务器的根目录。

新增组件：商店子系统使用了实现购物车功能的JavaBean类tools.ShoppingCart，包含在Java项目包Tools中，将相应类文件ShoppingCart.class（连带包目录tools）放到发布目录的类文件夹WEB-INF\classes。

在JSP中使用购物车JavaBean的，首先引入JavaBean作为阶段级对象：

<jsp:useBean id="oCart" scope="session" class="tools.ShoppingCart" />

然后执行以下方法操作购物车：

oCart.setItem(商品ID, 数量) //指定商品，默认数量为1

oCart.setAct(操作) //指定操作，添加add/删除remove/更新update

oCart.processRequest() //执行针对指定商品的指定操作

购物车返回的内容为散列表映射集HashMap，可用迭代器Iterator读取（需要引入java.util包）

1 后台管理系统框架

1-1 建立后台管理系统框架

在线商店由管理员来负责经营，因此需要建立一个后台管理系统，简单起见目前只建立后台管理系统的框架并实现商店管理的添加商品功能。

首先注册一个会员账号admin，在会员表中将会员类型由默认的usr改为adm。

在站点发布目录下创建adm文件夹，在其中基于BlueRain模板的temp.htm创建管理首页main.jsp和管理登录页index.jsp。

在main.jsp中添加包括文件header.jsp和footer.jsp并在header.jsp中动态设置当前栏目：

<li class="<%= section.equals("adm_main")?"selected":"" %>"><a href="main.jsp">后台首页</a></li>
<li class="<%= section.equals("adm_shop")?"selected":"" %>"><a href="shop.jsp">商店管理</a></li>

管理首页main.jsp顶部添加设置对应的栏目变量值

<% String section = "adm_main"; %>

其他栏目页面只需修改此变量值即可。

1-2 管理登录页index.jsp

功能：登录后台管理系统，登录时应设置访问级别

index.jsp先删除页面导航栏，设置登录表单并添加“登录用户”服务器行为，这一次要加上选取访问级别字段type

添加实现MD5变换的JavaBean：

<jsp:useBean id="oMD5" scope="request" class="tools.MD5" />

修改自动生成的代码添加密码的MD5变换：

MM_statementUser.setObject(2, oMD5.getMD5ofStr(request.getParameter("password")));

登录失败后直接回到登录页面并显示提示文本：

<%= (request.getParameter("err") != null && request.getParameter("err").equals("1"))?"登录失败！":"" %>

（注意：实用的管理员登录功能应有更高的安全设置，例如增加图形化的随机验证码等）

1-3 管理首页main.jsp

功能：提供后台管理系统各栏目导航，限管理员登录

main.jsp添加“限制对页的访问”服务器行为，选取允许级别为adm

修改自动生成的代码，增加判断是否存在阶段变量MM_UserAuthorization（原代码存在BUG，如登录用户服务器行为未设置访问级别，则普通用户登录后也能访问受限页面）：

if (session.getValue("MM_Username") != null && !session.getValue("MM_Username").equals("")
&& session.getValue("MM_UserAuthorization") != null && !session.getValue("MM_UserAuthorization").equals("")) {

2 后台商店管理模块

2-1 商店管理首页shop.jsp

功能：提供商店管理各功能页导航，限管理员登录

基于main.jsp创建shop.jsp（所有后台页面都基于main.jsp创建），使用包括指令添加左侧导航栏lefter_shop.jsp，设置链接：商店管理首页、新增商品

2-2 商店管理-新增商品页shop_additem.jsp

功能：使用表单提交商品信息并上传商品图片插入商品表

基于shop.jsp创建shop_additem.jsp，在head区段引入样式表文件uploadify.css和脚本文件jquery.min.js、jquery.uploadify.min.js，设置上传客户端插件： 

<script type="text/javascript">
$(document).ready(function(e) {
	$("#uploadify").uploadify({
		'swf' : '../uploadify.swf',
		'multi' : false,
		'uploader' : '../upload',
		'buttonText' : '上传图片',
		'fileTypeExts' : '*.jpg;*.png;*.gif',
		'flleSizeLimit' : '2000KB',
		'onUploadSuccess' : function(file, data, response) {
			$("#pic").attr("value", data);  // 商品图片文本域的值设为上传的图片文件名
			$("#photo").append("<img src='../upload?getthumb=" + data + "' />");
			$("#uploadify").hide();  // 隐藏上传按钮
			$("#uploadify-queue").hide();  // 隐藏上传进度条
		}
	});
});
</script>

在页面中添加表单并设置表单域：商品名称itemname，介绍detail，价格price，图片pic（只读文本域，上传图片后将值设置为上传的图片文件名）

选定表单添加“检查表单”行为和“插入记录”服务器行为即可

再添加名为uploadify的文件域和名为photo的层用于上传和显示图片缩略图（注意：Uploadify插件自带表单，所以应置于插入记录表单之外否则会导致冲突；也可以将插入记录表单的提交方式改为GET（即在地址栏中附加参数）；或是只使用Uploadify上传图片后执行预处理语句自动将商品信息写入数据库，具体实现参看相册系统）

3 前台商品浏览模块

3-1 商店首页shop.jsp

功能：显示商品列表，访问者可点击链接查看商品详情或将商品加入购物车

修改网站导航栏header.jsp添加商店栏目链接；基于lefter_home.jsp创建商店的左侧导航栏lefter_shop.jsp：浏览商品shop.jsp，查看购物车shop_cart.jsp，我的订单shop_order.jsp

基于user.jsp创建shop.jsp（商店首页允许所有访问者浏览，因此要删掉原有的“限制对页的访问”服务器行为和会员信息记录集），设置左侧导航栏。在右侧的detail_right层中显示商品信息（具体实现请参看相册页面），效果如下（注意可以在绑定面板中设置价格字段的显示格式为货币）：

加入购物车的链接目标是操作购物车页shop_dealcart.jsp，提交参数为商品ID号itemid、商品数量num（设为1）、操作类型act（设为add）

shop_dealcart.jsp?itemid=<%= rsItem.getString("itemid") %>&itemnum=1&act=add" 

3-2 商品详情页shop_detail.jsp

功能：显示指定商品的详情，提供加入购物车链接（可修改商品数量）

基于shop.jsp页创建shop_detail.jsp，设置记录集筛选指定的商品并显示。

商品详情页使用文本域设置要提交的商品数量，使用表单提交信息到操作购物车页shop_dealcart.jsp

4 购物车功能的实现 

4-1 操作购物车页shop_dealcart.jsp

功能：根据访问者提交的信息操作购物车（加入/删除/修改）

新建文件shop_delcart.jsp，此文件不显示任何内容，完成特定操作后跳转回商品浏览页或查看购物车页：

<jsp:useBean id="oCart" class="tools.ShoppingCart" scope="session"/>
<%
String id = "";
String num = "";
String act = "";
request.setCharacterEncoding("utf-8");
if (request.getParameter("itemid") != null) {
	id = request.getParameter("itemid");
	oCart.setItem(id);
}
if (request.getParameter("itemnum") != null) {
	num=request.getParameter("itemnum");
	oCart.setItem(id, num);
}
if (request.getParameter("act") != null) {
	act=request.getParameter("act");
}
oCart.setAct(act);
oCart.processRequest();
if (act.equals("add"))
	response.sendRedirect("shop.jsp");
else
	response.sendRedirect("shop_cart.jsp");
%> 

4-2 查看购物车页shop_cart.jsp 

功能：显示访问者的购物车信息，并可修改商品数量或移除商品

基于shop.jsp创建shop_cart.jsp，在页顶引入所需类包、实现购物车的JavaBean并根据统一设置创建数据库连接：

<%@ page import="java.util.*" %>
<%@ page import="java.text.*" %>
<jsp:useBean id="oCart" class="tools.ShoppingCart" scope="session"/>
<%
//根据统一设置创建数据库连接
Class.forName(MM_conn_DRIVER);
Connection conn = DriverManager.getConnection(MM_conn_STRING,MM_conn_USERNAME,MM_conn_PASSWORD);
%>

在页面中插入2行3行表格用于显示购物车中的商品名称、价格和数量，在表格之前添加代码段判断购物车是否为空，不为空时才允许显示购物车表格：

<%
HashMap map = oCart.getItems();
if (map.isEmpty()) {
	out.println("您还没有在购物车中放入任何商品！");
}
else {
DecimalFormat df=new DecimalFormat(".00");
Statement stmt = conn.createStatement();
ResultSet rsCart = null;
%>

在表格第二行之前添加代码段循环处理购物车中的商品，根据商品ID创建记录集获取商品信息：

<%
	for (Iterator iter = map.keySet().iterator(); iter.hasNext();) {
		Object key = iter.next();
		rsCart = stmt.executeQuery("SELECT * FROM item WHERE itemid=" + key);
		rsCart.next();
%>

在第二行的三个单元格中分别显示商品名称<%= rsCart.getString("itemname") %>，商品价格<%= df.format(Double.parseDouble(rsCart.getString("price"))) %>，和商品数量（并提供修改数量的功能）：

            <form action="shop_dealcart.jsp">
            	<input name="itemid" type="hidden" value="<%= key %>" />
                <input name="act" type="hidden" value="update" />
                <input name="itemnum" type="text" class="Input" id="itemnum" value="<%= map.get(key) %>" size="3" maxlength="2" />
                <input name="button" type="submit" class="Button" id="button" value="修改数量" />
            </form>

在第二行之后添加代码段结束循环语句并关闭数据对象

<%
	}
	rsCart.close();
	stmt.close();
	conn.close();
%>

在表格之后添加代码段结束判断语句

<%
}
%>

购物车的显示效果如下。要实现从购物车中移除商品只需向shop_dealcart.jsp提交参数为商品ID号itemid和操作类型act（设为remove），注意由于使用ODBC驱动不能两次读取同一字段，需要事先将itemid字段赋值给变量：

时间所限本实验略去了下单购买和订单管理等模块的实现部分，有兴趣的可以进一步完善功能。