最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

学习笔记——书城项目第五阶段之购物项加号、购物项减号

来源：博客园

2023-01-05

一、设置购物项加号


(资料图片仅供参考)

（1）找到“+”号的位置，在“cart.html”中的第61行中，添加单击事件，通过“异步”操作来设置

+

（2）在Vue中新建一个函数

addCount:function(){    //发送异步请求，对当前购物项的数量进行加1的操作（将当前购物项的图书id传过去）    event.target.previousElementSibling.name;    axios({        method:"post",        url:"cart",        params:{            flag:"addCount",            id:id        }    })},

（3）在“cart.html”中的第60行代码添加“:name”

（4）在“CartServlet.java”中添加函数“addCount”

protected void addCount(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        //1.获得请求参数        String id = request.getParameter("id");        //2.获得购物车对象        HttpSession session = request.getSession();        Cart cart = (Cart)session.getAttribute("cart");        //3.调用cart对象中的方法，对购物项的数量进行加1操作    }

（5）在“Cart.java”中写一个“数量加1”的方法

/**     * 对购物项的数量进行加1的操作     * @param id     */    public void addCount(Integer id){        CartItem item = map.get(id);        item.setCount(item.getCount()+1);    }

（6）完善刚刚“CartServlet.java”中的添加函数“addCount”

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

（7）完善刚刚Vue中的函数

addCount:function(){    //发送异步请求，对当前购物项的数量进行加1的操作（将当前购物项的图书id传过去）    event.target.previousElementSibling.name;    axios({        method:"post",        url:"cart",        params:{            flag:"addCount",            id:id        }    }).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];        }},

（8）结果：刷新服务器后，在弹出的页面中，将一些图书添加到购物车中。点击“购物车”后，将某个书籍的数量加1，在“数量”中点击“+”号后，会发现“金额”、“商品数量”、“总金额”的值会发生变化，说明此时代码OK。

二、购物项减号

前面的步骤和上面的“购物项加号”类似，后面需要考虑“如果图书的数量是1时，再按减号时，是将这条购物项记录默认删除，还是弹出提示再删除”。

（1）找到减号的位置，在“cart.html”中的第59行中，设置一个点击事件

-

（2）在Vue中创建一个函数

subtractCount:function(){    //需要获得当前购物项的id     var id = event.target.nextElementSibling.name;    axios({    method:"post",    url:"cart",    params:{        flag:"subtractCount",        id:id    }    })}

（3）将请求发送到“CartServlet.java”中，在“CartServlet.java”中创建一个方法

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

（4）在“Cart.java”中创建一个方法，进行减1操作

/**     * 对购物项的数量进行减1的操作     * @param id     */    public void subtractCount(Integer id){        CartItem item = map.get(id);        item.setCount(item.getCount()-1);    }

（5）在“cart.html”中的“subtractCount”函数中判断当前购物项的数量是否为1，分为“不为1”和“为1”两种情况，使用异步操作

subtractCount:function () {        //需要获得当前购物项的id        //当目前购物项的数量为1的话，执行的删除操作，不为1才是减一操作        //1. 获得到文本框的value属性值        var count=event.target.nextElementSibling.value;        var id=event.target.nextElementSibling.name;        if(count==1){          //问一下，确定要删除吗？          if(confirm("确定要删除吗？")){            //执行删除操作(在发送一个请求删除)            axios({              method:"post",              url:"cart",              params:{                flag:"deleteCartItem",                id:id              }            }).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];            }          })          }        }else{//说明count不为1，肯定大于1          axios({            method:"post",            url:"cart",            params:{              flag:"subtractCount",              id:id            }          }).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）结果：将服务器刷新，添加几个图书到购物车中，点击“购物车”按钮，将一些图书的数量减掉，当图书的数量为1时，再点“-”时，会弹出提示“确认要删除吗？”当点击“确定”时，该购物项的记录会整体删除，此时表明代码ok 。

关键词： 请求参数 发生变化 异步操作