【蓝桥杯web】2022年第十三届web大学组省赛：购物车(真题解析)

本文链接：https://blog.youkuaiyun.com/weixin_52368011/article/details/129807224

文章介绍了如何使用Vue2.x解决购物车功能中的问题，包括修改addToCart方法以避免重复添加商品和完善removeGoods方法实现商品数量递减及移除功能。通过检查购物车列表中是否存在相同ID的商品来决定是增加数量还是添加新商品，以及在减少数量至0时移除商品。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

题目介绍：

网上购物已经成为现代人生活中不可或缺的一部分，那么人们最常用到的购物车功能又是如何实现的呢？

本题需要在已提供的基础项目中，使用 Vue 2.x 的知识，解决购物车商品管理过程中遇到的问题。

准备：

开始答题前，需要先打开本题的项目文件夹，目录结构如下：

├── base.gif
├── css
│   └── index.css
├── effect.gif
├── images
│   ├── 1.png
│   └── 2.png
├── index.html
└── js
    ├── goods.js
    └── vue.js

当前出现的问题是：

在“商品列表”中点击 N 次“加入购物车”按钮，会在购物车列表中出现 N 个该商品，且初始数量为 1。
在“购物车”中点击商品数据后的加号（“+”）按钮，会在购物车列表中重复出现该商品，且初始数量为 1。
在“购物车”中点击商品数据后的减号（“-”）按钮，并未将商品从购物车中移出。

目标：

请在 index.html 文件中补全代码，最终实现购物车商品管理的功能。

注意：请勿修改 js/goods.js 文件中提供的数据！

具体需求如下：

（1）修改 addToCart 方法，实现将商品加入到购物车的功能。即：

点击“加入购物车”按钮后，如果购物车中不存在该商品，则将该商品添加到购物车末尾，并初始化数量为 1；
如果购物车中已存在该商品，则只在原数量上 +1 即可。

（2）完善 removeGoods 方法，实现移出购物车商品功能。即：

点击购物车商品后对应的减号（“-”）按钮，将其数量在原数量上 -1；
如果减后数量为 0，则将该商品从购物车中移除。

解题思路：

用for循环找出点击增加的物品和购物车列表里是否具有相同的对象，从而进行判断，如若相同则商品数量+1，不同则新增一个对象。

添加一个商品：

addToCart(goods){
                // TODO：修改当前函数，实现购物车加入商品需求
                var flag=false;
                for(let i of this.cartList)
                  {
                    if(i.id==goods.id)
                    {
                      i.num++;
                      flag=true;
                    }
                  }
                  if(!flag)
                  {
                    goods.num = 1;
                    this.cartList.push(goods);
                  }
                this.cartList = JSON.parse(JSON.stringify(this.cartList));
            },

解题思路：

这里也是用for循环找出点击删除的物品和购物车列表里是否具有相同的对象，当存在不同时则添加到新的购物车列表中，从而获得删除这个对象后的新购物车数组。

删除一个商品：

removeGoods(goods){
                // TODO：补全代码实现需求
                goods.num--;
                var newcartList=[];
                if(goods.num==0)
                {
                  for(let i of this.cartList)
                  {
                    if(i.id!=goods.id)
                    {
                      newcartList.push(i)
                    }
                  }
                  this.cartList=newcartList
                  this.cartList = JSON.parse(JSON.stringify(this.cartList));
                }
            }

成功完成！！

如有不合理的地方，欢迎各位大牛提出指正！

笔芯ღ( ´･ᴗ･` )