1.显示商品类别对应类别的商品estore.jsp
这里引用了一个自定义标签库,在之前的post中已有介绍,因此不再说明。首先是商品目录页面
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="wxshop" uri="/WEB-INF/jsp/eshop-taglib.tld"%>
<%@ page session="true"%>
<c:if test="${empty cats }">
<c:set var="cats" value="${wxshop:getCats() }" scope="application"></c:set>
</c:if>
<!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=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<table width="600">
<tr>
<td colspan="2" class="mainHead">Wrox JSTL Web Store</td>
</tr>
<tr>
<td width="20%">
<c:forEach var="curCat" items="${cats}">
<c:url value="/ch6/estore.jsp" var="localURL">
<c:param name="catid" value="${curCat.id}" />
</c:url>
<a href="${localURL}" class="category">${curCat.name}</a>
</c:forEach></td>
<td width="*">
<h1></h1>
<table border="1" width="100%">
<tr>
<th align="left">Item</th>
<th align="left">Price</th>
<th align="left">Order</th>
</tr>
<c:set var="selectedCat" value="${param.catid}" />
<c:if test="${empty selectedCat}">
<c:set var="selectedCat" value="1" />
</c:if>
<c:forEach var="curItem" items="${wxshop:getItems(selectedCat)}">
<tr>
<td>${curItem.name}</td>
<td align="right">
<fmt:formatNumber
value="${curItem.price / 100}" type="currency" /></td>
<td><c:url value="/ch6/shopcart.jsp" var="localURL">
<c:param name="action" value="buy" />
<c:param name="sku" value="${curItem.sku}" />
</c:url> <a href="${localURL}"><b>BUY</b>
</a></td>
</tr>
</c:forEach>
</table></td>
</tr>
</table>
</body>
</html>
几点说明:
<%@ page session="true"%>
<c:if test="${empty cats }">
<c:set var="cats" value="${wxshop:getCats() }" scope="application"></c:set>
</c:if>
1)JSP中开启session比servlet中要简单的非常多,只要用page指令说明session为true即可。
2)获取商品的类别列表,这里用jstl的核心标签库<c:set>将获取的类别列表放到变量cats中,scope表示变量的作为范围为application(implicate object )。
3)EL表达式 ${empty cats}表示,若cats变量为空的话,执行<c:if>中的语句。
表格的第一列内容为:
<td width="20%">
<c:forEach var="curCat" items="${cats}">
<c:url value="/ch6/estore.jsp" var="localURL">
<c:param name="catid" value="${curCat.id}" />
</c:url>
<a href="${localURL}" class="category">${curCat.name}</a>
</c:forEach>
</td>
这段语句用于遍历cats变量的内容,实际显示内容为<a>标签内的内容。1)<c:url>用于构造url地址
2)<c:param>用于设置变量,获取每个类别的id,并将其放到变量catid中,这么做的好处是,下面可以通过param来引用catid
<c:set var="selectedCat" value="${param.catid}" />
<c:if test="${empty selectedCat}">
<c:set var="selectedCat" value="1" />
</c:if>
<c:forEach var="curItem" items="${wxshop:getItems(selectedCat)}">
<tr>
<td>${curItem.name}</td>
<td align="right">
<fmt:formatNumber
value="${curItem.price / 100}" type="currency" /></td>
<td><c:url value="/ch6/shopcart.jsp" var="localURL">
<c:param name="action" value="buy" />
<c:param name="sku" value="${curItem.sku}" />
</c:url> <a href="${localURL}"><b>BUY</b>
</a></td>
</tr>
</c:forEach>
第一行的<c:set>语句用于获取一个选中项的catid,以用于标记该项是否被选中
通过下面的<c:forEach>标签来遍历该选中项的栏目商品。
每个商品后面会有一个buy链接,供用户选择是否购买该商品,该链接指向了shopcart.jsp即购物车页面
<c:url>的作用范围内定义了两个变量,分别是action和sku,该变量可以在<c:url>所指定的页面中使用
2.购物车页面
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="wxshop" uri="/WEB-INF/jsp/eshop-taglib.tld" %>
<%@ page session="ture" %>
<c:set var="ch9" value="/ch9" />
<c:set var="SHOP_PAGE" value="/estore.jsp" />
<c:set var="CART_PAGE" value="/shopcart.jsp" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>A SHOP CART</title>
</head>
<body>
<c:if test="${!(empty param.sku) }" >
<c:set var="prod" value="${wxshop:getItem(param.sku) }"></c:set>
</c:if>
<jsp:useBean id="lineitems" class="java.util.ArrayList" scope="session"></jsp:useBean>
<c:choose>
<c:when test="${param.action == 'clear' }">
${wxshop:clearList(lineitems) }
</c:when>
<c:when test="${param.action=='inc'||param.action=='buy' }">
<c:set var='found' value="false" />
<c:forEach var="curItem" items="${lineitems }">
<c:if test="${(curItem.sku)==(prod.sku) }" >
<jsp:setProperty name="curItem" property = "quantity" value="${curItem.quantity + 1 }" />
<c:set var="found" value="true" />
</c:if>
</c:forEach>
<c:if test="${!found }">
<c:remove var="tempitem" />
<jsp:useBean id="tempitem" class="test.begjsp.ch3.LineItem" >
<jsp:setProperty name="tempitem" property="quantity" value="1" />
<jsp:setProperty name="tempitem" property="sku" value="${prod.sku }" />
<jsp:setProperty name="tempitem" property="desc" value="${prod.name }" />
<jsp:setProperty name="tempitem" property="price" value="${prod.price }" />
</jsp:useBean>
${wxshop:addList(lineitems, tempitem) }
</c:if>
</c:when>
</c:choose>
<c:set var="total" value="0" />
</body>
</html>
该页面用于显示用户购买的商品列表,值得关注的是,用户可能多次往返购物车页面和商品页面,因此,session保证了用户返回时购物车的内容不会清空。
首先获得是该商品的库存量,以保证用户是否能够购买该商品。用如下语句获得商品的库存量。
<c:if test="${!(empty param.sku) }" >
<c:set var="prod" value="${wxshop:getItem(param.sku) }"></c:set>
</c:if>
其实从session中获得用户已经选择了的商品列表。这里使用<jsp:usebean>完成。若不存在,则其创建了一个javabean对象,类型为ArrayList。若存在,就使用已有的这个。
<jsp:useBean id="lineitems" class="java.util.ArrayList" scope="session"></jsp:useBean>
剩余的代码用于判断用户的动作,从而执行相应的动作。
值得注意的是下面这句代码
<c:set var='found' value="false" />
这段代码用于控制购物车是否已存在该商品,若存在,则进行加减操作。
若不存在,则添加新的对应该商品的记录。添加新商品使用<jsp:usebean>完成,该bean对象绑定了一个具体的java bean类。
<jsp:useBean id="tempitem" class="test.begjsp.ch3.LineItem">
<jsp:setProperty name="tempitem" property="quantity" value="1" />
<jsp:setProperty name="tempitem" property="sku"
value="${prod.sku }" />
<jsp:setProperty name="tempitem" property="desc"
value="${prod.name }" />
<jsp:setProperty name="tempitem" property="price"
value="${prod.price }" />
</jsp:useBean>
${wxshop:addList(lineitems, tempitem) }
视图代码如下:
<table width="640">
<tr>
<td class="mainHead">Wrox JSTL Web Store</td>
</tr>
<tr>
<td>
<h1></h1>
<table border="1" width="640">
<tr>
<th colspan="5" class="shopCart">Your Shopping Cart</th>
</tr>
<tr>
<th align="left">Quantity</th>
<th align="left">Item</th>
<th align="right">Price</th>
<th align="right">Extended</th>
<th align="left">Add</th>
</tr>
<c:forEach var="curItem" items="${lineitems}">
<c:set var="extended" value="${curItem.quantity * curItem.price}" />
<c:set var="total" value="${total + extended}" />
<tr>
<td>${curItem.quantity}</td>
<td>${curItem.desc}</td>
<td align="right"><fmt:formatNumber
value="${curItem.price / 100}" type="currency" /></td>
<td align="right"><fmt:formatNumber
value="${extended / 100}" type="currency" /></td>
<td><c:url value="${EXAMPLE}${CART_PAGE}" var="localURL">
<c:param name="action" value="inc" />
<c:param name="sku" value="${curItem.sku}" />
</c:url> <a href="${localURL}"><b>Add 1</b>
</a></td>
</tr>
</c:forEach>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="3" align="right"><b>Total:</b>
</td>
<td align="right" class="grandTotal"><fmt:formatNumber
value="${total / 100}" type="currency" /></td>
<td> </td>
</tr>
<tr>
<td colspan="5"><c:url value="${EXAMPLE}${CART_PAGE}"
var="localURL">
<c:param name="action" value="clear" />
</c:url> <a href="${localURL}">Clear the cart</a></td>
</tr>
<tr>
<td colspan="5"><c:url value="${EXAMPLE}${SHOP_PAGE}"
var="localURL" /> <a href="${localURL}">Return to Shopping</a></td>
</tr>
</table></td>
</tr>
</table>