当前位置：移动技术网 > IT编程>开发语言>Java > java网上图书商城（4）购物车模块1

java网上图书商城（4）购物车模块1

2019年07月22日 | 移动技术网IT编程 | 我要评论

本文实例为大家分享了购物车模块的具体代码，供大家参考，具体内容如下

使用的不是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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

[SAP] abap——调用报表的运行结果

在一些情况下我们需要调用报表运行，获取运行的结果，用Submit来实现。例：接口根据iv_bukrs、iv_li... [阅读全文]
day05【JDBC入门】

今日内容JDBC基本概念快速入门对JDBC中各个接口和类详解1 JDBC1.1 概念Java DataBase ... [阅读全文]
Mybatis PersistenceException异常：Error building SqlSession The error may exist in SQL Mapper Configur

初学mybatis出现了这个异常：org.apache.ibatis.exceptions.Persistenc... [阅读全文]
mybatis多表外键查询

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYP... [阅读全文]
Java实现MongoDB的简单操作

package test;import java.util.*;import org.bson.Document... [阅读全文]
一头扎进Mybatis_学习笔记

第一讲问候MyBatis他大爷一.简介MyBatis是持久层的ORM框架，文中用到的版本是MyBatis3.二... [阅读全文]
SpringMybatis 分页读取数据库数据

1.ORACLE SQL select * from table where xxx order by xxxx... [阅读全文]
Python操作 MySQL数据库的步骤

别的不说，直接上代码MySQL 建表建表的时候，遇到一些坑，没有解决，如修改 MySQL 的默认引擎，defau... [阅读全文]
工程中类设计技巧

应用这些技巧可以使得设计出来的类更具有OOP的专业水准。1.一定要保证数据私有绝对不要破坏封装性。有时候，需要编... [阅读全文]
MyBatis——动态SQL语句——if标签和where标签复合使用

功能需求根据性别和名字查询用户官方文档MyBatis——动态 SQLSQL语句SELECT id, userna... [阅读全文]

网友评论


验证码：

java网上图书商城（4）购物车模块1

2019年07月22日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论