首页 > 其他分享 >学习笔记——书城项目第五阶段之购物项加号、购物项减号

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

时间:2023-01-05 20:00:09浏览次数:49  
标签:resultData 购物 cart response 减号 data id 书城

2023-01-05

一、设置购物项加号

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

<span class="count" @click="addCount">+</span>

(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”

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

(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行中,设置一个点击事件

<span class="count" @click="subtractCount">-</span>

(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 。

 

标签:resultData,购物,cart,response,减号,data,id,书城
From: https://www.cnblogs.com/isDaHua/p/17028525.html

相关文章

  • 学习笔记——CommonResult工具、书城项目第五阶段(清空购物车、删除购物项、对数量的修
    2023-01-05一、CommonResult工具1、CommonResult工具的目的是:为了方便团队开发。一般是在使用异步的时候使用。2、CommonResult工具的使用:(1)前端发送异步请求到serv......
  • 「洛谷 P1658」购物
    原题链接你就要去购物了,现在你手上有N种不同面值的硬币,每种硬币有无限多个。为了方便购物,你希望带尽量少的硬币,但要能组合出1到X之间的任意值。输出最少需要携带的......
  • jQuery 加入购物车 弹窗
    功能介绍:1.点击按钮,出现弹窗,和蒙版2.购物车数量显示1件商品3.点击右上角关闭按钮,关闭弹窗,蒙版消失4.点击继续购物按钮,弹窗消失,蒙版消失5.点击去购物车按钮,跳转页面6.点击蒙......
  • python入门 之购物车程序
    #1.启动程序后,让用户输入工资,然后打印商品列表#2.允许用户根据商品编号购买商品#3.用户选择商品后,检查余额是否足够,够就直接扣款,不够就提醒#4.可随时退出,退出时,打印已......
  • 社区团购APP小程序,未来本地购物发展的新风口
    社区团购吸引了众多商家入驻,其中大部分商家选择依靠小程序开拓市场,也有部分商家想开发APP。社区团购APP其实和开发小程序的步骤差不多,那么开发一个社区团购APP需要具备哪些......
  • 得利捷发布全新自助购物伴侣 JOYA TOUCH 22
    自动数据采集和工厂自动化市场的全球领导者Datalogic得利捷欣然宣布推出新的JoyaTouch22自助购物设备。JoyaTouch22被誉为当今繁忙的购物者和零售商唯一需要的购物......
  • 淘宝双12购物数据分析
    一、选题的背景随着社会的发展,数据化时代,线上购物比例增幅巨大,各种的线上购物节,6.18、双十一、双十二等等。因此分析双十二活动日时段各行为数量的走势和对比,以及活动......
  • java网上花店源码花店商城网上花店商城购物商场项目花店系统鲜花商城
    Java基于ssm开发网上花店系统单商家系统,主要有商品分类,列表,详情,购物车,订单等功能。演示视频:https://www.bilibili.com/video/BV1bT4y1N7vw/?share_source=copy_web&vd_so......
  • 基于Java springboot+mybatis+mysql+jsp网上书城管理系统
    @目录一、系统介绍二、功能展示1.主页(客户)2.登陆(客户)3.我的购物车(客户)4.我的订单(客户)5.我的图书(商家)6.新书上架(商家)7.订单管理(商家)7.统计分析(管理员)8.用户管理(用户管理......
  • 用Python来写个小型购物车程序
    0x1前言Python语言能做很多东西的,像数据分析啊、自动化、开发、爬虫(真的很棒哟,初学者玩很有成就感的啊哈哈)等等还有挺多。0x2用Python编写的一个小型购物车程序impor......