Корзина покупок на Vue.js с возможностью перетаскивания элементов

Введение

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

👀 Предварительный просмотр

🎯 Задачи

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

• настраивать проект и знакомиться с предоставленными файлами и структурой;
• реализовывать функциональность перетаскивания элементов для онлайн-корзины покупок, позволяющую пользователям добавлять продукты в корзину;
• отображать информацию о корзине покупок, включая количество продуктов, детали продуктов и общую стоимость;
• тестировать онлайн-корзину покупок и убедиться, что функциональность работает как ожидается.

🏆 Достижения

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

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

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

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

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

├── images
│   ├── book.jpeg
│   ├── box.jpeg
│   ├── paper.jpeg
│   ├── trolley.jpeg
│   └── tv.jpg
├── index.css
├── index.html
├── js
│   ├── http-vue-loader.js
│   └── vue.min.js
└── trolley.vue

В них:

• папка images содержит изображения продуктов, необходимые для страницы;
• index.css - файл со стилями;
• index.html - главная страница;
• js/vue.min.js и js/http-vue-loader.js - файлы, связанные с библиотекой Vue;
• trolley.vue - файл компонента, который необходимо заполнить.

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

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

Реализация функциональности перетаскивания элементов

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

1. Откройте файл trolley.vue.
2. В функции data() вы можете увидеть массив goods, который содержит информацию о продуктах. Эти данные будут использоваться для отображения продуктов в разделе "Список товаров".
3. Добавьте следующий код в раздел methods:

methods: {
  dragstart(e, good) {
    e.dataTransfer.setData("name", good.name);
    e.dataTransfer.setData("price", good.price);
  },
  dragover(e) {
    e.preventDefault();
  },
  drop(e) {
    const { bought } = this;
    const name = e.dataTransfer.getData("name");
    const price = e.dataTransfer.getData("price");
    bought.push({ name, price: Number(price) });
  }
}

Пояснение:

• Метод dragstart вызывается, когда пользователь начинает перетаскивать продукт. Он задает имя и цену продукта в объекте dataTransfer, который можно получить позже в методе drop.
• Метод dragover вызывается, когда перетаскиваемый элемент находится над корзиной покупок. Он предотвращает стандартное поведение браузера, что необходимо для работы события drop.
• Метод drop вызывается, когда пользователь отпускает перетаскиваемый элемент в корзину покупок. Он извлекает имя и цену продукта из объекта dataTransfer и добавляет продукт в массив bought.

4. В разделе computed добавьте следующий код:

computed: {
  totalPrice() {
    const { bought } = this;
    var sum = 0;
    for (key in bought) {
      sum += bought[key].price;
    }
    return sum;
  },
  goodsDetail() {
    const { bought } = this;
    const names = [];
    const goods = [];
    for (key in bought) {
      names.push(bought[key].name);
    }
    function getRepeatNum() {
      return names.reduce(function (prev, next) {
        prev[next] = prev[next] + 1 || 1;
        return prev;
      }, {});
    }
    for (key in getRepeatNum()) {
      goods.push(`${key}*${getRepeatNum()[key]}`);
    }
    return goods.join(" ");
  }
},

Пояснение:

• Вычисляемое свойство totalPrice вычисляет общую стоимость продуктов в корзине покупок.
• Вычисляемое свойство goodsDetail генерирует детали продуктов в корзине покупок, отображая имя продукта и количество.

Привязка событий перетаскивания элементов к HTML

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

1. В разделе template файла trolley.vue найдите элемент <div class="good-list">.
2. В элементе <div class="good-list"> измените код на следующий:

<div class="good-list">
  <div
    v-for="good in goods"
    :key="good.name"
    class="good"
    draggable="true"
    @dragstart="dragstart($event, good)"
  >
    <img :src="good.cover" draggable="false" />
    <span>{{ good.name }}</span>
    <span>$ {{ good.price }}</span>
  </div>
</div>

3. Найдите элемент <div class="trolley" id="trolley">.
4. Измените элемент <div class="trolley" id="trolley"> на следующий код:

<div id="trolley" class="trolley" @dragover="dragover" @drop="drop">
  <span id="bought" class="bought" v-if="bought.length!== 0"
    >{{ bought.length }}</span
  >
  <img src="./images/trolley.jpeg" />
</div>

Тестирование онлайн-магазинской корзины

1. Сохраните файл trolley.vue.
2. Обновите страницу, чтобы увидеть исходное состояние онлайн-корзины покупок.
3. Попробуйте перетащить изображения продуктов в корзину покупок.
4. Наблюдайте за изменениями в корзине покупок, включая количество продуктов, детали продуктов и общую стоимость.
5. Убедитесь, что функциональность работает как ожидается.

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

Поздравляем! Вы успешно реализовали онлайн-корзину покупок с использованием предоставленного базового проекта и функциональности перетаскивания элементов.

Резюме

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