java网上图书商城（4）购物车模块1
程序员文章站
2024-03-11 20:32:07
本文实例为大家分享了购物车模块的具体代码，供大家参考，具体内容如下
使用的不是session,也不是cookie，而是表
> 添加购物条目
> 修改购...
本文实例为大家分享了购物车模块的具体代码，供大家参考，具体内容如下
使用的不是session,也不是cookie，而是表
> 添加购物条目
> 修改购物条目的数量
> 删除条目
> 批量删除条目
> 我的购物车，即按用户查询条目
> 查询勾选的条目
1.数据表
复制代码 代码如下:
insert into `t_cartitem`(`cartitemid`,`quantity`,`bid`,`uid`,`orderby`) values ('b8939fc55131469cab11e3924d40185b',1,'ce01f15d435a4c51b0ad8202a318dca7','xxx',11);
2.cartitem
public class cartitem {
private string cartitemid;// 主键
private int quantity;// 数量
private book book;// 条目对应的图书
private user user;// 所属用户
// 添加小计方法
public double getsubtotal() {
/*
* 使用bigdecimal不会有误差
* 要求必须使用string类型构造器
*/
bigdecimal b1 = new bigdecimal(book.getcurrprice() + "");
bigdecimal b2 = new bigdecimal(quantity + "");
bigdecimal b3 = b1.multiply(b2);
return b3.doublevalue();
}
public string getcartitemid() {
return cartitemid;
}
public void setcartitemid(string cartitemid) {
this.cartitemid = cartitemid;
}
public int getquantity() {
return quantity;
}
public void setquantity(int quantity) {
this.quantity = quantity;
}
public book getbook() {
return book;
}
public void setbook(book book) {
this.book = book;
}
public user getuser() {
return user;
}
public void setuser(user user) {
this.user = user;
}
}
小技巧：java中四舍五入 bigdecimal不会有误差
// 添加小计方法
public double getsubtotal() {
/*
* 使用bigdecimal不会有误差
* 要求必须使用string类型构造器
*/
bigdecimal b1 = new bigdecimal(book.getcurrprice() + "");
bigdecimal b2 = new bigdecimal(quantity + "");
bigdecimal b3 = b1.multiply(b2);
return b3.doublevalue();
}
3.通过用户查询购物车条目
我的购物车条目中每个条目需要显示图书的图片 书名 单价 ，这说明需要多表查询
public list<cartitem> findbyuser(string uid) throws sqlexception {
string sql = "select * from t_cartitem c, t_book b where c.bid=b.bid and uid=? order by c.orderby";
list<map<string,object>> maplist = qr.query(sql, new maplisthandler(), uid);
return tocartitemlist(maplist);
}
4.添加购物车条目----增
jsp
<div class="divform">
<form id="form1" action="<c:url value='/cartitemservlet'/>" method="post">
<input type="hidden" name="method" value="add"/>
<input type="hidden" name="bid" value="${book.bid }"/>
我要买：<input id="cnt" style="width: 40px;text-align: center;" type="text" name="quantity" value="1"/>件
</form>
<a id="btn" href="javascript:$('#form1').submit();"></a>
</div>
cartitemservlet
public string add(httpservletrequest req, httpservletresponse resp)
throws servletexception, ioexception {
/*
* 1. 封装表单数据到cartitem(bid, quantity)
*/
map map = req.getparametermap();
cartitem cartitem = commonutils.tobean(map, cartitem.class);
book book = commonutils.tobean(map, book.class);
user user = (user)req.getsession().getattribute("sessionuser");
cartitem.setbook(book);
cartitem.setuser(user);
cartitemservice.add(cartitem);
return mycart(req, resp);
}
cartitemservice
public void add(cartitem cartitem) {
try {
/*
* 1. 使用uid和bid去数据库中查询这个条目是否存在
*/
cartitem _cartitem = cartitemdao.findbyuidandbid(
cartitem.getuser().getuid(),
cartitem.getbook().getbid());
if(_cartitem == null) {//如果原来没有这个条目，那么添加条目
cartitem.setcartitemid(commonutils.uuid());
cartitemdao.addcartitem(cartitem);
} else {//如果原来有这个条目，修改数量
// 使用原有数量和新条目数量之各，来做为新的数量
int quantity = cartitem.getquantity() + _cartitem.getquantity();
// 修改这个老条目的数量
cartitemdao.updatequantity(_cartitem.getcartitemid(), quantity);
}
} catch(exception e) {
throw new runtimeexception(e);
}
}
cartitemdao
public void addcartitem(cartitem cartitem) throws sqlexception {
string sql = "insert into t_cartitem(cartitemid, quantity, bid, uid)" +
" values(?,?,?,?)";
object[] params = {cartitem.getcartitemid(), cartitem.getquantity(),
cartitem.getbook().getbid(), cartitem.getuser().getuid()};
qr.update(sql, params);
}
5.购物车模块页面javascript----查
计算总计
给全选添加click事件
给所有条目的复选框添加click事件
给减号添加click事件
给加号添加click事件
批量删除
list.jsp
<%@ page language="java" import="java.util.*" pageencoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<title>cartlist.jsp</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<script src="<c:url value='/js/round.js'/>"></script>
<link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/cart/list.css'/>">
<script type="text/javascript">
$(function() {
showtotal();//计算总计
/*
给全选添加click事件
*/
$("#selectall").click(function() {
/*
1. 获取全选的状态
*/
var bool = $("#selectall").attr("checked");
/*
2. 让所有条目的复选框与全选的状态同步
*/
setitemcheckbox(bool);
/*
3. 让结算按钮与全选同步
*/
setjiesuan(bool);
/*
4. 重新计算总计
*/
showtotal();
});
/*
给所有条目的复选框添加click事件
*/
$(":checkbox[name=checkboxbtn]").click(function() {
var all = $(":checkbox[name=checkboxbtn]").length;//所有条目的个数
var select = $(":checkbox[name=checkboxbtn][checked=true]").length;//获取所有被选择条目的个数
if(all == select) {//全都选中了
$("#selectall").attr("checked", true);//勾选全选复选框
setjiesuan(true);//让结算按钮有效
} else if(select == 0) {//谁都没有选中
$("#selectall").attr("checked", false);//取消全选
setjiesuan(false);//让结算失效
} else {
$("#selectall").attr("checked", false);//取消全选
setjiesuan(true);//让结算有效
}
showtotal();//重新计算总计
});
/*
给减号添加click事件
*/
$(".jian").click(function() {
// 获取cartitemid
var id = $(this).attr("id").substring(0, 32);
// 获取输入框中的数量
var quantity = $("#" + id + "quantity").val();
// 判断当前数量是否为1，如果为1,那就不是修改数量了，而是要删除了。
if(quantity == 1) {
if(confirm("您是否真要删除该条目？")) {
location = "/goods/cartitemservlet?method=batchdelete&cartitemids=" + id;
}
} else {
sendupdatequantity(id, quantity-1);
}
});
// 给加号添加click事件
$(".jia").click(function() {
// 获取cartitemid
var id = $(this).attr("id").substring(0, 32);
// 获取输入框中的数量
var quantity = $("#" + id + "quantity").val();
sendupdatequantity(id, number(quantity)+1);
});
});
// 请求服务器，修改数量。
function sendupdatequantity(id, quantity) {
$.ajax({
async:false,
cache:false,
url:"/goods/cartitemservlet",
data:{method:"updatequantity",cartitemid:id,quantity:quantity},
type:"post",
datatype:"json",
success:function(result) {
//1. 修改数量
$("#" + id + "quantity").val(result.quantity);
//2. 修改小计
$("#" + id + "subtotal").text(result.subtotal);
//3. 重新计算总计
showtotal();
}
});
}
/*
* 计算总计
*/
function showtotal() {
var total = 0;
/*
1. 获取所有的被勾选的条目复选框！循环遍历之
*/
$(":checkbox[name=checkboxbtn][checked=true]").each(function() {
//2. 获取复选框的值，即其他元素的前缀
var id = $(this).val();
//3. 再通过前缀找到小计元素，获取其文本
var text = $("#" + id + "subtotal").text();
//4. 累加计算
total += number(text);
});
// 5. 把总计显示在总计元素上
$("#total").text(round(total, 2));//round()函数的作用是把total保留2位
}
/*
* 统一设置所有条目的复选按钮
*/
function setitemcheckbox(bool) {
$(":checkbox[name=checkboxbtn]").attr("checked", bool);
}
/*
* 设置结算按钮样式
*/
function setjiesuan(bool) {
if(bool) {
$("#jiesuan").removeclass("kill").addclass("jiesuan");
$("#jiesuan").unbind("click");//撤消当前元素止所有click事件
} else {
$("#jiesuan").removeclass("jiesuan").addclass("kill");
$("#jiesuan").click(function() {return false;});
}
}
/*
* 批量删除
*/
function batchdelete() {
// 1. 获取所有被选中条目的复选框
// 2. 创建一数组，把所有被选中的复选框的值添加到数组中
// 3. 指定location为cartitemservlet，参数method=batchdelete，参数cartitemids=数组的tostring()
var cartitemidarray = new array();
$(":checkbox[name=checkboxbtn][checked=true]").each(function() {
cartitemidarray.push($(this).val());//把复选框的值添加到数组中
});
location = "/goods/cartitemservlet?method=batchdelete&cartitemids=" + cartitemidarray;
}
/*
* 结算
*/
function jiesuan() {
// 1. 获取所有被选择的条目的id，放到数组中
var cartitemidarray = new array();
$(":checkbox[name=checkboxbtn][checked=true]").each(function() {
cartitemidarray.push($(this).val());//把复选框的值添加到数组中
});
// 2. 把数组的值tostring()，然后赋给表单的cartitemids这个hidden
$("#cartitemids").val(cartitemidarray.tostring());
// 把总计的值，也保存到表单中
$("#hiddentotal").val($("#total").text());
// 3. 提交这个表单
$("#jiesuanform").submit();
}
</script>
</head>
<body>
<c:choose>
<c:when test="${empty cartitemlist }">
<table width="95%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="right">
<img align="top" src="<c:url value='/images/icon_empty.png'/>"/>
</td>
<td>
<span class="spanempty">您的购物车中暂时没有商品</span>
</td>
</tr>
</table>
</c:when>
<c:otherwise>
<table width="95%" align="center" cellpadding="0" cellspacing="0">
<tr align="center" bgcolor="#efeae5">
<td align="left" width="50px">
<input type="checkbox" id="selectall" checked="checked"/><label for="selectall">全选</label>
</td>
<td colspan="2">商品名称</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
<c:foreach items="${cartitemlist }" var="cartitem">
<tr align="center">
<td align="left">
<input value="${cartitem.cartitemid }" type="checkbox" name="checkboxbtn" checked="checked"/>
</td>
<td align="left" width="70px">
<a class="linkimage" href="<c:url value='/jsps/book/desc.jsp'/>"><img border="0" width="54" align="top" src="<c:url value='/${cartitem.book.image_b }'/>"/></a>
</td>
<td align="left" width="400px">
<a href="<c:url value='/jsps/book/desc.jsp'/>"><span>${cartitem.book.bname }</span></a>
</td>
<td><span>¥<span class="currprice">${cartitem.book.currprice }</span></span></td>
<td>
<a class="jian" id="${cartitem.cartitemid }jian"></a><input class="quantity" readonly="readonly" id="${cartitem.cartitemid }quantity" type="text" value="${cartitem.quantity }"/><a class="jia" id="${cartitem.cartitemid }jia"></a>
</td>
<td width="100px">
<span class="price_n">¥<span class="subtotal" id="${cartitem.cartitemid }subtotal">${cartitem.subtotal }</span></span>
</td>
<td>
<a href="<c:url value='/cartitemservlet?method=batchdelete&cartitemids=${cartitem.cartitemid }'/>">删除</a>
</td>
</tr>
</c:foreach>
<tr>
<td colspan="4" class="tdbatchdelete">
<a href="javascript:batchdelete();">批量删除</a>
</td>
<td colspan="3" align="right" class="tdtotal">
<span>总计：</span><span class="price_t">¥<span id="total"></span></span>
</td>
</tr>
<tr>
<td colspan="7" align="right">
<a href="javascript:jiesuan();" id="jiesuan" class="jiesuan"></a>
</td>
</tr>
</table>
<form id="jiesuanform" action="<c:url value='/cartitemservlet'/>" method="post">
<input type="hidden" name="cartitemids" id="cartitemids"/>
<input type="hidden" name="total" id="hiddentotal"/>
<input type="hidden" name="method" value="loadcartitems"/>
</form>
</c:otherwise>
</c:choose>
</body>
</html>
小技巧：js中四舍五入round.js
// 5. 把总计显示在总计元素上
$("#total").text(round(total, 2));//round()函数的作用是把total保留2位
6.批量删除功能----删
jsp
function batchdelete() {
// 1. 获取所有被选中条目的复选框
// 2. 创建一数组，把所有被选中的复选框的值添加到数组中
// 3. 指定location为cartitemservlet，参数method=batchdelete，参数cartitemids=数组的tostring()
var cartitemidarray = new array();
$(":checkbox[name=checkboxbtn][checked=true]").each(function() {
cartitemidarray.push($(this).val());//把复选框的值添加到数组中
});
location = "/goods/cartitemservlet?method=batchdelete&cartitemids=" + cartitemidarray;
}
删除一个
if(quantity == 1) {
if(confirm("您是否真要删除该条目？")) {
location = "/goods/cartitemservlet?method=batchdelete&cartitemids=" + id;
}
} else {
7.修改数量----改
jsp
// 请求服务器，修改数量。
function sendupdatequantity(id, quantity) {
$.ajax({
async:false,
cache:false,
url:"/goods/cartitemservlet",
data:{method:"updatequantity",cartitemid:id,quantity:quantity},
type:"post",
datatype:"json",
success:function(result) {
//1. 修改数量
$("#" + id + "quantity").val(result.quantity);
//2. 修改小计
$("#" + id + "subtotal").text(result.subtotal);
//3. 重新计算总计
showtotal();
}
});
}
servlet
public string updatequantity(httpservletrequest req, httpservletresponse resp)
throws servletexception, ioexception {
string cartitemid = req.getparameter("cartitemid");
int quantity = integer.parseint(req.getparameter("quantity"));
cartitem cartitem = cartitemservice.updatequantity(cartitemid, quantity);
// 给客户端返回一个json对象
stringbuilder sb = new stringbuilder("{");
sb.append("\"quantity\"").append(":").append(cartitem.getquantity());
sb.append(",");
sb.append("\"subtotal\"").append(":").append(cartitem.getsubtotal());
sb.append("}");
resp.getwriter().print(sb);
return null;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。