Создание приложения для превью товара в стиле Amazon с помощью Vue.js

Создание приложения для превью товара в стиле Amazon с помощью Vue.js

От автора: если вы хоть раз пользовались интернет-магазинами типа eBay или Amazon, вы должны были использовать функцию превью. Она показывает вам изображения или видео о товаре, чтобы вы знали, что ожидать перед покупкой. В этой статье мы узнаем, как создать одностраничное приложение для превью типа Amazon с помощью Vue.js.

Создание приложения для превью товара в стиле Amazon с помощью Vue.js

Мы создадим не точную копию сайта Amazon, но на нашем сайте будет превью характеристик товара.

Зависимости

Чтобы создать приложение будем использовать Node сервер для back end и Vue.js для front end. Прежде чем перейти к делу, необходимо установить на свою машину следующее:

Node

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Node Package Manager(npm)

Создание front end

Для front end будем использовать Vue.js. Это прогрессивный JS фреймворк – быстрый и легкий в использовании.

Установка Vue.js

Необходимо установить Vue.js на свои машину. Подтвердить установку можно с помощью команды:

Если в ответ вернется номер версии, Vue.js установлен. Если нет, рекомендую установить Vue CLI с помощью команды:

Для создания frontend сервера запустите:

Будет создан проект-пример Vue, который мы уже будем настраивать.

Установка модулей Node

Для отправки get запросов из одного из компонентов Vue.js будем использовать axios. Установите его с помощью следующей команды в папке frontend:

Создание компонента Listing

Создание приложения для превью товара в стиле Amazon с помощью Vue.js

Компонент Listing показывает все товары в магазине и добавляет ссылку на просмотр товара. Чтобы создать компонент Listing, запустите следующую команду:

В Listing.vue сначала необходимо импортировать модуль axios:

Теперь с помощью этого модуля получаем список товаров:

В коде выше можно заметить, что после того, как мы смонтировали компонент, мы посылаем запрос на back end сервер и получаем доступные товары, записывая их в product data компонента.

Шаблон для компонента:

В шаблоне сверху мы делаем list товаров в виде блоков div и добавляем кнопку, которая ведет вас на саму страницу одного товара.

Создание компонента Preview

Создание приложения для превью товара в стиле Amazon с помощью Vue.js

Создание приложения для превью товара в стиле Amazon с помощью Vue.js

Компонент Preview показывает данные и изображения выбранного товара с предыдущей страницы. После создания компонента мы посылаем get запрос на back end сервер и получаем все данные для определенного id, после чего показываем медиа в форме carousel на правой части экрана.

Создайте Preview.vue с помощью команды:

В файле Vue.js сперва необходимо импортировать модуль axios:

Теперь можно создать компонент:

После post запроса модель обновляется данными, которые вернулись в виде JSON ответа с back end. Шаблон представления:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

В шаблоне выше мы хотим показать медиа для определенного товара. Взгляните на то, когда мы создаем компонент – мы посылаем запрос на back end и далее посылаем ответ в компонент Vue.

Нам нужно знать, какое медиа отображается, изображение или видео. Проверим это в шаблоне:

Если медиа имеет type of image, мы показываем изображение в карусели. Но если type видео, мы показываем видео с помощью Cloudinary VIdeo Player. Чтобы инициализировать видео плеер, добавим v-on:click событие на кнопку >. После клика по кнопке инициализируется плеер с видео.

PS: видео плеер Cloudinary проигрывает видео по тегам и плейлистам. Подробнее читайте здесь. У представления превью есть свои стили:

Связывание компонентов

Для перехода от одного компонента к другому в Vue есть так называемый vue-router. Откройте файл frontend/src/router/index.js и отредактируйте его следующим образом:

Код сверху задает доступные роуты приложения. Ранее в компонентах мы использовали <router-link> для перехода с компонента Listing в компонент Preview. Этот файл обрабатывает то, что вы получаете. При создании роутеров можно указать намного больше опций.

Создание back end

Чтобы создать back end, необходимо сменить папку на корневую и установить модули Node:

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

Создание файла server.js

Теперь необходимо создать файл, который будет хранить инструкции для работы нашего сервера в папке video-suggestion,

Это будет файл запуска, на который вы будете ссылаться во время работы сервера в файле server.js. Вам необходимо импортировать модули node.

После импорта node модулей их можно сводобно использовать по всему скрипту.

Создание экспресс приложения

Создадим объект экспресс приложения, добавив в server.js строку:

Загрузка промежуточного кода

Загружаем промежуточной код в server.js, добавив следующий код:

Здесь мы указали, что приложение будет использовать cors. Мы также указали приложению парсить запросы в JSON формат.

Настройка клиента Cloudinary

Необходимо настроить клиент cloudinary с помощью CLOUD_NAME, API_KEY и API_SECRET.

Мы успешно настроили клиент Cloudinary.

Создание роутов приложения

Наш back end сервер крайне прост. Это экспресс веб-сервер с двумя главными роутами:

/products – перечисляет все товары, доступные для продажи.

/getProductInfo – возвращает данные для выбранного товара.

В коде сверху роуты возвращают ответы в JSON формате для дальнейшего использования на front end. Возможно, вы заметили, что много (все) данных, возвращенных пользователю, статичны. В реальном приложении вы будете возвращать пользователю динамичные данные.

Роут /productInfo принимает id товара. С его помощью вы будете определять, какие данные хранить, вместо того, чтобы просто возвращать статичные json данные. Другими словами, вы можете сделать дальнейший запрос в базу данных или облачное хранилище для получения информации и возврата данных в формате, используемом сверху.

Настройка порта приложения

Задаем порт, который будет слушать наше приложение:

Создание приложения для превью товара в стиле Amazon с помощью Vue.js

Заключение

В этой статье мы узнали, как использовать изображения и видео Cloudinary с Vue.js для создания приложения превью типа Amazon для товаров.

Автор: Chris Nwamba

Источник: https://scotch.io/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Фреймворк VUE JS

VUE JS - полное руководство для современной веб-разработки

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree