Java网上图书商城4–购物肢体模特块1

 Java 1

  1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3 <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
  4 
  5  
  6 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  7 <html>
  8   <head>
  9     <title>cartlist.jsp</title>
 10     
 11     <meta http-equiv="pragma" content="no-cache">
 12     <meta http-equiv="cache-control" content="no-cache">
 13     <meta http-equiv="expires" content="0">    
 14     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 15     <meta http-equiv="description" content="This is my page">
 16     <!--
 17     <link rel="stylesheet" type="text/css" href="styles.css">
 18     -->
 19     <script src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
 20     <script src="<c:url value='/js/round.js'/>"></script>
 21     
 22     <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/cart/list.css'/>">
 23 <script type="text/javascript">
 24 $(function() {
 25     showTotal();//计算总计
 26     
 27     /*
 28     给全选添加click事件
 29     */
 30     $("#selectAll").click(function() {
 31         /*
 32         1. 获取全选的状态
 33         */
 34         var bool = $("#selectAll").attr("checked");
 35         /*
 36         2. 让所有条目的复选框与全选的状态同步
 37         */
 38         setItemCheckBox(bool);
 39         /*
 40         3. 让结算按钮与全选同步
 41         */
 42         setJieSuan(bool);
 43         /*
 44         4. 重新计算总计
 45         */
 46         showTotal();
 47     });
 48     
 49     /*
 50     给所有条目的复选框添加click事件
 51     */
 52     $(":checkbox[name=checkboxBtn]").click(function() {
 53         var all = $(":checkbox[name=checkboxBtn]").length;//所有条目的个数
 54         var select = $(":checkbox[name=checkboxBtn][checked=true]").length;//获取所有被选择条目的个数
 55 
 56         if(all == select) {//全都选中了
 57             $("#selectAll").attr("checked", true);//勾选全选复选框
 58             setJieSuan(true);//让结算按钮有效
 59         } else if(select == 0) {//谁都没有选中
 60             $("#selectAll").attr("checked", false);//取消全选
 61             setJieSuan(false);//让结算失效
 62         } else {
 63             $("#selectAll").attr("checked", false);//取消全选
 64             setJieSuan(true);//让结算有效                
 65         }
 66         showTotal();//重新计算总计
 67     });
 68     
 69     /*
 70     给减号添加click事件
 71     */
 72     $(".jian").click(function() {
 73         // 获取cartItemId
 74         var id = $(this).attr("id").substring(0, 32);
 75         // 获取输入框中的数量
 76         var quantity = $("#" + id + "Quantity").val();
 77         // 判断当前数量是否为1,如果为1,那就不是修改数量了,而是要删除了。
 78         if(quantity == 1) {
 79             if(confirm("您是否真要删除该条目?")) {
 80                 location = "/goods/CartItemServlet?method=batchDelete&cartItemIds=" + id;
 81             }
 82         } else {
 83             sendUpdateQuantity(id, quantity-1);
 84         }
 85     });
 86     
 87     // 给加号添加click事件
 88     $(".jia").click(function() {
 89         // 获取cartItemId
 90         var id = $(this).attr("id").substring(0, 32);
 91         // 获取输入框中的数量
 92         var quantity = $("#" + id + "Quantity").val();
 93         sendUpdateQuantity(id, Number(quantity)+1);
 94     });
 95 });
 96 
 97 // 请求服务器,修改数量。
 98 function sendUpdateQuantity(id, quantity) {
 99     $.ajax({
100         async:false,
101         cache:false,
102         url:"/goods/CartItemServlet",
103         data:{method:"updateQuantity",cartItemId:id,quantity:quantity},
104         type:"POST",
105         dataType:"json",
106         success:function(result) {
107             //1. 修改数量
108             $("#" + id + "Quantity").val(result.quantity);
109             //2. 修改小计
110             $("#" + id + "Subtotal").text(result.subtotal);
111             //3. 重新计算总计
112             showTotal();
113         }
114     });
115 }
116 
117 /*
118  * 计算总计
119  */
120 function showTotal() {
121     var total = 0;
122     /*
123     1. 获取所有的被勾选的条目复选框!循环遍历之
124     */
125     $(":checkbox[name=checkboxBtn][checked=true]").each(function() {
126         //2. 获取复选框的值,即其他元素的前缀
127         var id = $(this).val();
128         //3. 再通过前缀找到小计元素,获取其文本
129         var text = $("#" + id + "Subtotal").text();
130         //4. 累加计算
131         total += Number(text);
132     });
133     // 5. 把总计显示在总计元素上
134     $("#total").text(round(total, 2));//round()函数的作用是把total保留2位
135 }
136 
137 /*
138  * 统一设置所有条目的复选按钮
139  */
140 function setItemCheckBox(bool) {
141     $(":checkbox[name=checkboxBtn]").attr("checked", bool);
142 }
143 
144 /*
145  * 设置结算按钮样式
146  */
147 function setJieSuan(bool) {
148     if(bool) {
149         $("#jiesuan").removeClass("kill").addClass("jiesuan");
150         $("#jiesuan").unbind("click");//撤消当前元素止所有click事件
151     } else {
152         $("#jiesuan").removeClass("jiesuan").addClass("kill");
153         $("#jiesuan").click(function() {return false;});
154     }
155     
156 }
157 
158 /*
159  * 批量删除
160  */
161 function batchDelete() {
162     // 1. 获取所有被选中条目的复选框
163     // 2. 创建一数组,把所有被选中的复选框的值添加到数组中
164     // 3. 指定location为CartItemServlet,参数method=batchDelete,参数cartItemIds=数组的toString()
165     var cartItemIdArray = new Array();
166     $(":checkbox[name=checkboxBtn][checked=true]").each(function() {
167         cartItemIdArray.push($(this).val());//把复选框的值添加到数组中
168     });
169     location = "/goods/CartItemServlet?method=batchDelete&cartItemIds=" + cartItemIdArray;
170 }
171 
172 /*
173  * 结算
174  */
175 function jiesuan() {
176     // 1. 获取所有被选择的条目的id,放到数组中
177     var cartItemIdArray = new Array();
178     $(":checkbox[name=checkboxBtn][checked=true]").each(function() {
179         cartItemIdArray.push($(this).val());//把复选框的值添加到数组中
180     });    
181     // 2. 把数组的值toString(),然后赋给表单的cartItemIds这个hidden
182     $("#cartItemIds").val(cartItemIdArray.toString());
183     // 把总计的值,也保存到表单中
184     $("#hiddenTotal").val($("#total").text());
185     // 3. 提交这个表单
186     $("#jieSuanForm").submit();
187 }
188 </script>
189   </head>
190   <body>
191 
192 <c:choose>
193     <c:when test="${empty cartItemList }">
194     <table width="95%" align="center" cellpadding="0" cellspacing="0">
195         <tr>
196             <td align="right">
197                 <img align="top" src="<c:url value='icon_empty.png'/>"/>
198             </td>
199             <td>
200                 您的购物车中暂时没有商品
201             </td>
202         </tr>
203     </table>  
204     </c:when>
205     <c:otherwise>
206 <table width="95%" align="center" cellpadding="0" cellspacing="0">
207     <tr align="center" bgcolor="#efeae5">
208         <td align="left" width="50px">
209             <input type="checkbox" id="selectAll" checked="checked"/><label for="selectAll">全选</label>
210         </td>
211         <td colspan="2">商品名称</td>
212         <td>单价</td>
213         <td>数量</td>
214         <td>小计</td>
215         <td>操作</td>
216     </tr>
217 
218 
219 
220 <c:forEach items="${cartItemList }" var="cartItem">
221     <tr align="center">
222         <td align="left">
223             <input value="${cartItem.cartItemId }" type="checkbox" name="checkboxBtn" checked="checked"/>
224         </td>
225         <td align="left" width="70px">
226             <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>
227         </td>
228         <td align="left" width="400px">
229             <a href="<c:url value='/jsps/book/desc.jsp'/>">${cartItem.book.bname }</a>
230         </td>
231         <td>&yen;${cartItem.book.currPrice }</td>
232         <td>
233             <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>
234         </td>
235         <td width="100px">
236             &yen;${cartItem.subtotal }
237         </td>
238         <td>
239             <a href="<c:url value='/CartItemServlet?method=batchDelete&cartItemIds=${cartItem.cartItemId }'/>">删除</a>
240         </td>
241     </tr>
242 </c:forEach>
243 
244 
245 
246 
247 
248 
249 
250 
251 
252 
253 
254 
255 
256 
257 
258 
259 
260 
261     
262     <tr>
263         <td colspan="4" class="tdBatchDelete">
264             <a href="javascript:batchDelete();">批量删除</a>
265         </td>
266         <td colspan="3" align="right" class="tdTotal">
267             总计:&yen;
268         </td>
269     </tr>
270     <tr>
271         <td colspan="7" align="right">
272             <a href="javascript:jiesuan();" id="jiesuan" class="jiesuan"></a>
273         </td>
274     </tr>
275 </table>
276     <form id="jieSuanForm" action="<c:url value='/CartItemServlet'/>" method="post">
277         <input type="hidden" name="cartItemIds" id="cartItemIds"/>
278         <input type="hidden" name="total" id="hiddenTotal"/>
279         <input type="hidden" name="method" value="loadCartItems"/>
280     </form>
281 
282     </c:otherwise>
283 </c:choose>
284   </body>
285 </html>

Java 2Java 3

于加号添加click事件

1:数据表

 

自我的购物车章中每个条目需要出示图书的图形 书名 单价
,那注明要差不多表查询

servlet

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.添加购物车章—-增

动用的免是session,也未是cookie,而是表

 

深受减号添加click事件

总结总结

> 查询勾选的章

Java 4Java 5

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);
}

> 我之购物车,即按用户查询条目

 

 

 1 function round(num,dec){ 
 2     var strNum = num + '';/*把要转换的小数转换成字符串*/
 3     var index = strNum.indexOf("."); /*获取小数点的位置*/
 4     if(index < 0) {
 5         return num;/*如果没有小数点,那么无需四舍五入,返回这个整数*/
 6     }
 7     var n = strNum.length - index -1;/*获取当前浮点数,小数点后的位数*/
 8     if(dec < n){ 
 9         /*把小数点向后移动要保留的位数,把需要保留的小数部分变成整数部分,只留下不需要保留的部分为小数*/ 
10         var e = Math.pow(10, dec);
11         num = num * e;
12         /*进行四舍五入,只保留整数部分*/
13         num = Math.round(num);
14         /*再把原来小数部分还原为小数*/
15         return num / e;
16     } else { 
17         return num;/*如果当前小数点后的位数等于或小于要保留的位数,那么无需处理,直接返回*/
18     } 
19 } 
// 5. 把总计显示在总计元素上
$("#total").text(round(total, 2));//round()函数的作用是把total保留2位 
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);
}

jsp


5.购物腿模块页面javascript—-查 

受拥有条条框框的复选框添加click事件

round.js

Java 6Java 7

jsp

被全选添加click事件

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);
    }
} 
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;
}

CartItemServlet

// 请求服务器,修改数量。
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();
        }
    });
}

3.通过用户查询购物车章

 

> 删除条目

6.批量勾效率—-删

 

 1 public class CartItem {
 2     private String cartItemId;// 主键
 3     private int quantity;// 数量
 4     private Book book;// 条目对应的图书
 5     private User user;// 所属用户
 6     
 7     // 添加小计方法
 8     public double getSubtotal() {
 9         /*
10          * 使用BigDecimal不会有误差
11          * 要求必须使用String类型构造器
12          */
13         BigDecimal b1 = new BigDecimal(book.getCurrPrice() + "");
14         BigDecimal b2 = new BigDecimal(quantity + "");
15         BigDecimal b3 = b1.multiply(b2);
16         return b3.doubleValue();
17     }
18 
19     public String getCartItemId() {
20         return cartItemId;
21     }
22 
23     public void setCartItemId(String cartItemId) {
24         this.cartItemId = cartItemId;
25     }
26 
27     public int getQuantity() {
28         return quantity;
29     }
30 
31     public void setQuantity(int quantity) {
32         this.quantity = quantity;
33     }
34 
35     public Book getBook() {
36         return book;
37     }
38 
39     public void setBook(Book book) {
40         this.book = book;
41     }
42 
43     public User getUser() {
44         return user;
45     }
46 
47     public void setUser(User user) {
48         this.user = user;
49     }
50 } 
// 添加小计方法
public double getSubtotal() {
    /*
     * 使用BigDecimal不会有误差
     * 要求必须使用String类型构造器
     */
    BigDecimal b1 = new BigDecimal(book.getCurrPrice() + "");
    BigDecimal b2 = new BigDecimal(quantity + "");
    BigDecimal b3 = b1.multiply(b2);
    return b3.doubleValue();
}

jsp

> 批量删除条目

Java 8

 

CartItemDao

去一个

批量删减

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;
}

7.修改数量—-改  

insert  into `t_cartitem`(`cartItemId`,`quantity`,`bid`,`uid`,`orderBy`) values ('B8939FC55131469CAB11E3924D40185B',1,'CE01F15D435A4C51B0AD8202A318DCA7','xxx',11);

CartItemService

稍加技巧:Java中四放任五符合 BigDecimal不会师爆发误差

> 添加购物条目

<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>
if(quantity == 1) {
    if(confirm("您是否真要删除该条目?")) {
        location = "/goods/CartItemServlet?method=batchDelete&cartItemIds=" + id;
    }
} else {

2.CartItem

 

CartItem

些微技巧:js中四丢弃五副round.js

list.jsp

  

> 修改购物条目标数目

相关文章