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

JavaScriptJavaScriptBeginner
Практиковаться сейчас

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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

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

Демонстрация функциональности корзины покупок

🎯 Задачи

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

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

🏆 Достижения

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") subgraph Lab Skills javascript/array_methods -.-> lab-445775{{"Создание корзины покупок с использованием Vue.js"}} javascript/obj_manip -.-> lab-445775{{"Создание корзины покупок с использованием Vue.js"}} javascript/dom_manip -.-> lab-445775{{"Создание корзины покупок с использованием Vue.js"}} javascript/event_handle -.-> lab-445775{{"Создание корзины покупок с использованием Vue.js"}} end

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

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

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

├── 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));
  }
},
  1. Сохраните файл 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)
    }
  });
}
  1. Сохраните файл index.html.

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

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

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

    • Если товар отсутствует в корзине покупок, он должен быть добавлен с количеством 1.
    • Если товар уже присутствует в корзине покупок, количество должно быть увеличено на 1.
  3. Проверьте, что кнопки "+" и "-" в корзине покупок работают правильно:

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

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

Описание изображения

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

✨ Проверить решение и практиковаться

Резюме

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