web蓝桥杯真题--4、购物车

介绍

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

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

准备

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

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

其中：

• base.gif 是初始效果图。
• effect.gif 是最终实现的效果图。
• js/goods.js 是数据文件。
• js/vue.js 是 Vue 2.x 文件。
• css/index.css 是样式文件。
• images 是图片文件夹。
• index.html 是页面布局及逻辑。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/9791/08.zip && unzip 08.zip && rm 08.zip

在浏览器中预览 index.html 页面，具体显示【见项目文件夹中的 base.gif 】，请使用浏览器或者 VS Code 查看 gif 图。

当前出现的问题是：

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

目标

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

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

具体需求如下：

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

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

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

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

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

规定

• 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
• 请勿修改项目中提供的 id、class、函数名等名称，以免造成无法判题通过。
• 请勿修改 js/goods.js 文件中提供的数据。

判分标准

• 本题完全实现题目目标得满分，否则得 0 分。

实现思路

先实现添加函数，首先判断这个cartList里面有没有这个商品，如果有的话就++，没有的话就添加到cartList里面

判断在不在的思路是使用findIndex函数，查找他们的index，第一次点击添加到购物车时，此时在cartLIst里面根本找不到，所以返回的是-1，然后再添加数量的时候，此时就可以找到index了。也就是这个东西在cartList里面的序号，从0开始表示

            addToCart(goods){
                // TODO：修改当前函数，实现购物车加入商品需求
                const index = this.cartList.findIndex(item=>item.id===goods.id);
                console.log(index)
                if(index!= -1){
                  this.cartList[index].num++;
                } else {
                  goods.num = 1;
                this.cartList.push(goods);
                this.cartList = JSON.parse(JSON.stringify(this.cartList));
                }
            },

当移除的时候就比较简单，当good.num === 0时，将该商品就从cartList里面pop出去

            removeGoods(goods){
                // TODO：补全代码实现需求
                goods.num -- ;
                if(goods.num === 0) {
                  this.cartList.pop(goods);
                }
            }

完整的index.html代码

    
        
    
        
        
        
        
        
    
    
        

            
            
商品列表