Создание корзины покупок с использованием Vue.js

Введение

В этом проекте вы научитесь создавать функциональность корзины покупок с использованием Vue.js 2.x. Корзина покупок - это важная функция в интернет-магазинах, которая позволяет пользователям управлять выбранными продуктами перед покупкой.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• Как изменить метод addToCart для добавления продуктов в корзину покупок
• Как улучшить метод removeGoods для удаления продуктов из корзины покупок
• Как протестировать общую функциональность корзины покупок

🏆 Достижения

После завершения этого проекта вы сможете:

• Управлять состоянием корзины покупок в приложении на Vue.js
• Обрабатывать добавление и удаление продуктов в корзине покупок
• Обновлять пользовательский интерфейс в соответствии с изменениями в корзине покупок

Skills Graph

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура каталогов следующая:

├── 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 - макет и логика страницы.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите его вручную, чтобы увидеть страницу.

Текущие проблемы изложены ниже:

• При нажатии кнопки "Добавить в корзину" в "Списке товаров" N раз товар появится N раз в списке корзины с начальным количеством 1.
• При нажатии кнопки плюс ("+") рядом с товаром в корзине товар будет повторяться в списке корзины с начальным количеством 1.
• При нажатии кнопки минус ("-") рядом с товаром в корзине товар не удаляется из корзины.

Изменение метода addToCart

В этом шаге вы научитесь изменять метод addToCart для добавления продуктов в корзину покупок.

1. Откройте файл index.html.

2. Найдите метод addToCart в экземпляре Vue.

3. Измените метод 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));
  }
},

4. Сохраните файл index.html.

Улучшение метода removeGoods

В этом шаге вы научитесь улучшать метод removeGoods для удаления продуктов из корзины покупок.

1. Откройте файл index.html.

2. Найдите метод removeGoods в экземпляре Vue.

3. Улучшите метод 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)
    }
  });
}

4. Сохраните файл index.html.

Тестирование функциональности корзины покупок

1. Обновите страницу в вашем браузере.

2. Проверьте, что кнопка "Добавить в корзину" работает правильно:

   • Если товар отсутствует в корзине покупок, он должен быть добавлен с количеством 1.
   • Если товар уже присутствует в корзине покупок, количество должно быть увеличено на 1.

3. Проверьте, что кнопки "+" и "-" в корзине покупок работают правильно:

   • Нажатие кнопки "+" должно увеличить количество товара на 1.
   • Нажатие кнопки "-" должно уменьшить количество товара на 1.
   • Если количество достигнет 0, товар должен быть удален из корзины покупок.

Финальный эффект реализации выглядит так:

Поздравляем! Вы успешно завершили проект по корзине покупок.

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.