JSTL+EL构建购物车

现在的位置: 首页 > 综合 > 正文

JSTL+EL构建购物车

2014年08月19日 ⁄ 综合 ⁄ 共 6978字 ⁄ 字号小中大 ⁄ 评论关闭

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>

然后还要将其放到定义的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: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>

【上篇】Java多线程和同步的理解
【下篇】在JSP中使用EL获取Javabean的属性值

作者: xpyesok

该日志由 xpyesok 于10年前发表在综合分类下，最后更新于 2014年08月19日.
转载请注明: JSTL+EL构建购物车 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

JSTL+EL构建购物车

作者: xpyesok

书签

最新文章New

本站推荐

返回首页