JSTL+EL构建购物车

来源：互联网发布：淘宝做什么产品好编辑：程序博客网时间：2024/05/17 05:06

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:formatNumbervalue="${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:formatNumbervalue="${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>

然后还要将其放到定义的session对象lineitems中。这行代码是用session的关键。

${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:formatNumbervalue="${curItem.price / 100}" type="currency" /></td><td align="right"><fmt:formatNumbervalue="${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:formatNumbervalue="${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>

0 0