用 Vue.js 构建购物车 | 电子商务开发

介绍

在这个项目中，你将学习如何使用 Vue.js 2.x 构建购物车功能。购物车是电子商务网站的一项基本功能，它允许用户在购买之前管理他们所选的商品。

👀 预览

购物车功能演示

🎯 任务

在这个项目中，你将学习：

如何修改 addToCart 方法以将商品添加到购物车
如何改进 removeGoods 方法以从购物车中移除商品
如何测试整个购物车功能

🏆 成果

完成这个项目后，你将能够：

在 Vue.js 应用程序中管理购物车的状态
处理购物车中商品的添加和移除
根据购物车中的变化更新用户界面

设置项目结构

在这一步中，你将设置项目文件和结构。请按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

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

其中：

css/index.css 是样式文件。
images 是图像文件夹。
js/goods.js 是数据文件。
js/vue.js 是 Vue 2.x 文件。
index.html 是页面布局和逻辑。

点击 WebIDE 右下角的“Go Live”按钮来运行项目。

接下来，在 VM 顶部打开“Web 8080”并手动刷新以查看页面。

当前出现的问题如下：

在“产品列表”中点击“添加到购物车”按钮 N 次后，该产品将在购物车列表中出现 N 次，初始数量为 1。
在购物车中点击产品旁边的加号（“+”）按钮时，该产品将在购物车列表中重复出现，初始数量为 1。
在购物车中点击产品旁边的减号（“-”）按钮时，该产品不会从购物车中移除。

修改 addToCart 方法

在这一步中，你将学习如何修改 addToCart 方法，以便将商品添加到购物车中。

打开 index.html 文件。
在 Vue 实例中找到 addToCart 方法。
修改 addToCart 方法以满足以下要求：
- 如果商品不在购物车中，将该商品添加到购物车末尾并将数量初始化为 1。
- 如果商品已存在于购物车中，只需将数量增加 1。

修改后的 addToCart 方法应如下所示：

addToCart(goods) {
  // TODO: 修改当前函数以实现购物车添加商品的要求

  let exit = 0;
  this.cartList.forEach(item => {
    if (goods.id == item.id) {
      item.num++
      exit = 1
    }
  });
  if (!exit) {
    goods.num = 1;
    this.cartList.push(goods);
    this.cartList = JSON.parse(JSON.stringify(this.cartList));
  }
},

保存 index.html 文件。

改进移除商品方法

在这一步中，你将学习如何改进 removeGoods 方法，以便从购物车中移除商品。

打开 index.html 文件。
在 Vue 实例中找到 removeGoods 方法。
改进 removeGoods 方法以满足以下要求：
- 当点击购物车中商品旁边的减号（“-”）按钮时，将数量减 1。
- 如果结果数量为 0，则从购物车中移除该商品。

removeGoods 方法应如下所示：

removeGoods(goods) {
  // TODO
  this.cartList.forEach((item, index, arr) => {
    if (goods.id == item.id) {
      item.num--
    }
    if (item.num == 0) {
      arr.splice(index, 1)
    }
  });
}

保存 index.html 文件。

测试购物车功能

在浏览器中刷新页面。
验证“添加到购物车”按钮是否正常工作：
- 如果商品不在购物车中，应添加该商品且数量为 1。
- 如果商品已存在于购物车中，数量应增加 1。
验证购物车中的“+”和“-”按钮是否正常工作：
- 点击“+”按钮应使商品数量增加 1。
- 点击“-”按钮应使商品数量减少 1。
- 如果数量变为 0，该商品应从购物车中移除。

最终实现效果如下：

图片描述

恭喜！你已成功完成购物车项目。

总结

恭喜！你已完成此项目。你可以在 LabEx 中练习更多实验以提升你的技能。

使用 Vue.js 构建购物车

介绍