zl程序教程

您现在的位置是:首页 >  IT要闻

当前栏目

学习笔记——书城项目第五阶段之购物车数量的修改、精度问题的处理

2023-03-31 10:40:15 时间

2023-01-06

一、修改购物车数量

(1)找到文本框的位置,“cart.html”中的第60行,在文本框上添加一个事件,添加一个“change”事件。

 <input class="count-num" type="text" v-model="cartItem.count" @change="changeCount" :name="cartItem.book.bookId"/>

(2)在Vue中的“methods”添加一个函数

changeCount:function(){
    //需要将当前购物项的图书id取到,还需要将用户修改后的数量取到
    var id=event.target.name;
    var newCount=event.target.value;
    axios({
        method:"post",
        url:"cart",
        params:{
            flag:changeCount,
            id:id,
            newCount:newCount
        }
    })
},   

(3)在“Cart.java”中创建一个方法

    /**
     * 对购物项的数量进行修改的操作
     * @param id
     */
    public void changeCount(Integer id,Integer newCount){
        CartItem item = map.get(id);
        item.setCount(newCount);
    }

(4)在“CartServlet.java”中创建一个“changeCount”方法

 protected void changeCount(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获得请求参数
        String id = request.getParameter("id");
        String newCount = request.getParameter("newCount");
        //2.获得购物车对象
        HttpSession session = request.getSession();
        Cart cart = (Cart)session.getAttribute("cart");
        //3.调用cart对象中的方法,对购物项的数量进行修改操作
        cart.changeCount(Integer.parseInt(id),Integer.parseInt(newCount));
        //4.后台的数据已经刷新完毕,前台的数据还未刷新,通过调用showCart把前台的数据刷新
        showCart(request,response);
    }

(5)完善“Cart.html”中Vue中“methods”中的函数

changeCount:function () {
        //需要将当前购物项的图书id取到,还需要将用户修改后的数量取到
        var id=event.target.name;
        var newCount=event.target.value;//做一个正则验证:必须是大于0的整数
        //alert(id+"   "+newCount);
        axios({
          method:"post",
          url:"cart",
          params:{
            flag:"changeCount",
            id:id,
            newCount:newCount
          }
        }).then(response=>{
          if(response.data.flag){
          //alert(response.data.resultData[0]);
          //需要将后台传过来的数据,展示在网页上(vue的方式)
          this.cartItems=response.data.resultData[0];
          this.totalCount=response.data.resultData[1];
          this.totalAmount=response.data.resultData[2];
        }
      })
      }
    },

(6)结果:刷新服务器,在弹出的页面中,将一些图书添加到购物车中。点击“购物车”图标,之后修改购物项中的数量,在失去焦点后,该购物项的金额、商品数量、总金额会发生变化,此时代码OK。此时未设置正则验证,可能会出现非法字符的情况。

二、精度问题的处理

点击购物车图标后,当改变某些图书的数量后,主要修改购物项金额的精度和总金额的精度。

1、购物项的金额

(1)在“CartItem.java”中修改“amount”的计算,分别在“setCount”、“CartItem”、“setBook”中进行修改

 public void setBook(Book book) {
        this.book = book;
        //设置图书的时候,计算金额
        BigDecimal price=new BigDecimal(this.book.getPrice()+"");//使用字符串的构造器
        BigDecimal count = new BigDecimal(this.count+"");
        this.amount=price.multiply(count).doubleValue();
    }
public void setCount(Integer count) {
        this.count = count;
        //设置数量,将amount算出来
        BigDecimal price=new BigDecimal(this.book.getPrice()+"");//使用字符串的构造器
        BigDecimal count1 = new BigDecimal(this.count+"");
        this.amount=price.multiply(count1).doubleValue();
    }
public CartItem(Book book, Integer count) {
        this.book = book;
        this.count = count;
        //有参构造器,计算amount
        BigDecimal price=new BigDecimal(this.book.getPrice()+"");//使用字符串的构造器
        BigDecimal count1 = new BigDecimal(this.count+"");
        this.amount=price.multiply(count1).doubleValue();
    }

2、购物车的总金额

在“Cart.java"中修改“计算中金额”

 1    /**
 2      * 功能:计算总金额
 3      * @return
 4      */
 5     public Double getTotalAmount(){
 6         Collection<CartItem> values = map.values();//得到的是CartItem对象的集合
 7         BigDecimal total = new BigDecimal("0");
 8         for (CartItem value : values) {
 9             BigDecimal amount = new BigDecimal(value.getAmount()+"");
10             //将amount累加到total上
11             total=total.add(amount);
12         }
13         this.totalAmount=total.doubleValue();
14         return totalAmount;
15     }

注意:在“getTotalAmount()”函数的第9行中一定是要使用BigDecimal的字符串构造器后面要加上 +“”。如果忘记加这个,刷新服务器后,将购物车中的购物项数量增加,总金额的精度仍然保持不到小数点后两位。加上之后,精度就会保持在小数点后两位。