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

Дата публикации: 2018-05-18

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

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

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

Зависимости

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

Node

Node Package Manager(npm)

Создание front end

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

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

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

vue --version

1	vue --version

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

npm install --global vue-cli

1	npm install --global vue-cli

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

mkdir preview-app
vue init webpack frontend

1 2	mkdir preview-app vue init webpack frontend

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

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

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

cd frontend
npm install axios

1 2	cd frontend npm install axios

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

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

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

touch Listing.vue

1	touch Listing.vue

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

    <script>
    import axios from 'axios'
    //...

import axios from 'axios'

//...

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

    //...
    export default {
      name: 'Listing',
      data () {
        return {
          products : []
        }
      },
      mounted : function(){
        axios.get('//localhost:3128/products').
        then( result => {
          console.log( result );
          this.products = result.data;
        })
      }
    }
    </script>

//...

export default {

data () {

return {

products : []

}

mounted : function(){

axios.get('//localhost:3128/products').

then( result => {

console.log( result );

this.products = result.data;

})

}

</script>

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

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

    <template>
      <div class="listing container">
        <div class="title" style="margin-bottom:40px;">
          <h1>Products on Sale</h1>
        </div>
        <div class="row">
          <div class="col-sm-2">
            <h2>#</h2>
          </div>
          <div class="col-sm-8">
            <h2>PRODUCT NAME</h2>
          </div>
          <div class="col-sm-2">
            <h2>GO TO</h2>
          </div>
        </div>

        <template v-for="product in products">
          <div class="row" style="margin-bottom:20px;">
            <div class="col-sm-2" >
              <p>{{ product.id }}</p>
            </div>
            <div class="col-sm-8">
              <p>{{ product.name }}</p>
            </div>
            <div class="col-sm-2">
              <router-link :to="{path: '/product/'+product.id }">View Product</router-link>
            </div>
          </div>
        </template>
      </div>
    </template>

<h1>Products on Sale</h1>

</div>

</div>

<h2>PRODUCT NAME</h2>

</div>

</div>

<p>{{ product.id }}</p>

</div>

<p>{{ product.name }}</p>

</div>

<router-link :to="{path: '/product/'+product.id }">View Product</router-link>

</div>

</template>

</div>

</template>

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

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

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

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

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

touch Preview.vue

1	touch Preview.vue

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

    <script>
    import axios from 'axios'
    //...

import axios from 'axios'

//...

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

    //...
    export default {
      name: 'Preview',
      data () {
        return {
          media :[],
          product_name : "",
          product_desc : "",
          product_price : ""
        }
      },
      mounted : function(){
        // now we get all the related infomation for the particular product id
        axios.get(`//localhost:3128/getProductInfo/${this.$route.params.id}`)
        .then( res => {
          this.media = res.data.media;
          this.product_name = res.data.product_name;
          this.product_desc = res.data.product_desc;
          this.product_price = res.data.product_price;

        })
      },
      methods : {
        initializePlayer : function(){
          console.log('here')
          var cld = cloudinary.Cloudinary.new({ cloud_name: "og-tech", secure: true});
          var demoplayer = cld.videoPlayer('video-player');
        }
      }
    </script>

//...

export default {

data () {

return {

media :[],

product_name : "",

product_desc : "",

product_price : ""

}

mounted : function(){

// now we get all the related infomation for the particular product id

axios.get(`//localhost:3128/getProductInfo/${this.$route.params.id}`)

.then( res => {

this.media = res.data.media;

this.product_name = res.data.product_name;

this.product_desc = res.data.product_desc;

this.product_price = res.data.product_price;

})

methods : {

initializePlayer : function(){

console.log('here')

var cld = cloudinary.Cloudinary.new({ cloud_name: "og-tech", secure: true});

var demoplayer = cld.videoPlayer('video-player');

}

</script>

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

    <template>
      <div class="preview">
        <div class="row">
          <div class="col-sm-6">
            <!--  this part will contain the product info -->
            <h1> {{ product_name }} </h1>
            <div>
              <p> {{ product_desc }} </p>
              <p> Price : ${{ product_price }} </p>
            </div>
          </div>
          <div class="col-sm-6">
            <!--  this part will contain the images -->
            <div id="demo" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ul class="carousel-indicators">
                <template v-for="single_media in media">
                  <template v-if="single_media.id == 0">
                    <li data-target="#demo" v-bind:data-slide-to="single_media.id" class="active"></li>
                  </template>
                  <template v-else>
                    <li data-target="#demo" v-bind:data-slide-to="single_media.id"></li>
                  </template>
                </template>
                <!-- <li data-target="#demo" data-slide-to="0" class="active"></li>
                <li data-target="#demo" data-slide-to="2"></li> -->
              </ul>
              <!-- The slideshow -->
              <div class="carousel-inner">
                <template v-for="single_media in media">
                  <template v-if="single_media.id == 0">
                    <div class="carousel-item active">
                      <template v-if="single_media.type == 'image'">
                        <img class="img-responsive single-image" v-bind:src="single_media.url"/>
                      </template>
                      <template v-else>
                       <video
                        id="video-player"
                        controls
                        class="single-image cld-video-player cld-video-player-skin-dark"
                        v-bind:data-cld-source="single_media.url"
                        >
                        </video> 
                      </template>
                    </div>
                  </template>
                  <template v-else>
                    <div class="carousel-item">
                      <template v-if="single_media.type == 'image'">
                        <img class="img-responsive single-image" v-bind:src="single_media.url"/>
                      </template>
                      <template v-else>
                        <video
                        id="video-player"
                        controls
                        class="single-image cld-video-player cld-video-player-skin-dark"
                        v-bind:data-cld-source="single_media.url"
                        >
                        </video>
                      </template>
                    </div>
                  </template>
                </template>
              </div>
              <!-- Left and right controls -->
              <a class="carobbusel-control-prev" href="#demo" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
              </a>
              <a class="carousel-control-next" href="#demo" data-slide="next"  v-on:click="initializePlayer()">
                <span class="carousel-control-next-icon"></span>
              </a>
            </div>  
          </div>
        </div>

      </div>
    </template>

<h1> {{ product_name }} </h1>

<div>

<p> {{ product_desc }} </p>

<p> Price : ${{ product_price }} </p>

</div>

</template>

</template>

<!-- <li data-target="#demo" data-slide-to="0" class="active"></li>

</ul>

</template>

<video

id="video-player"

controls

class="single-image cld-video-player cld-video-player-skin-dark"

v-bind:data-cld-source="single_media.url"

</video>

</template>

</div>

</template>

</template>

<video

id="video-player"

controls

class="single-image cld-video-player cld-video-player-skin-dark"

v-bind:data-cld-source="single_media.url"

</video>

</template>

</div>

</template>

</div>

</a>

</a>

</div>

</template>

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

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

  //..
    <template v-if="single_media.type == 'image'">
      <img class="img-responsive single-image" v-bind:src="single_media.url"/>
    </template>
    <template v-else>
     <video
      id="video-player"
      controls
      class="single-image cld-video-player cld-video-player-skin-dark"
      v-bind:data-cld-source="single_media.url"
      >
      </video> 
    </template>
    //..

//..

</template>

<video

id="video-player"

controls

class="single-image cld-video-player cld-video-player-skin-dark"

v-bind:data-cld-source="single_media.url"

</video>

</template>

//..

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

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

    <style scoped>
      h1, h2 {
        font-weight: normal;
      }
      ul {
        list-style-type: none;
        padding: 0;
      }
      li {
        display: inline-block;
        margin: 0 10px;
      }
      a {
        color: #42b983;
      }
      .carousel-inner{
        height : 500px;
      }
      .carousel-item{
        height : 100%;
      }
      .single-image{
        width : 100%;
        height: 100%;
        object-fit : fill;
      }
      #demo{
        margin-left: 30px;
        margin-right: 30px;
      }
    </style>

h1, h2 {

font-weight: normal;

}

ul {

list-style-type: none;

padding: 0;

}

li {

display: inline-block;

margin: 0 10px;

}

a {

color: #42b983;

}

.carousel-inner{

height : 500px;

}

.carousel-item{

height : 100%;

}

.single-image{

width : 100%;

height: 100%;

object-fit : fill;

}

#demo{

margin-left: 30px;

margin-right: 30px;

}

</style>

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

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

    // frontent/src/router/index.js

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import Listing from '@/components/Listing'
    import Preview from '@/components/Preview'

    Vue.use(Router)

    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Listing',
          component: Listing
        },
        {
          path: '/product/:id',
          name: 'Product',
          component: Preview
        }
      ]
    })

// frontent/src/router/index.js

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

import Listing from '@/components/Listing'

import Preview from '@/components/Preview'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

component: Listing

{

path: '/product/:id',

component: Preview

}

]

})

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

Создание back end

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

cd preview-app 
npm install cors express body-parser dotenv request connect-multiparty cloudinary

1 2	cd preview-app npm install cors express body-parser dotenv request connect-multiparty cloudinary

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

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

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

touch server.js

1	touch server.js

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

    require('dotenv').config()
    const cors       = require('cors')
    const express    = require('express')
    const bodyParser = require('body-parser')
    const multipart  = require('connect-multiparty')
    const request    = require('request')
    const cloudinary = require('cloudinary')

    //...

require('dotenv').config()

const cors = require('cors')

const express = require('express')

const bodyParser = require('body-parser')

const multipart = require('connect-multiparty')

const request = require('request')

const cloudinary = require('cloudinary')

//...

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

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

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

    //...

    const app = express()

    //...

//...

const app = express()

//...

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

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

    //...

    app.use(cors())
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));
    const multipartMiddleware = multipart();

    //...

//...

app.use(cors())

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: false }));

const multipartMiddleware = multipart();

//...

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

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

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

    //...

    cloudinary.config({
        cloud_name: 'CLOUDINARY_CLOUD_NAME', 
        api_key: 'CLOUDINARY_API_KEY', 
        api_secret: 'CLOUDINARY_API_SECRET'
    });

    //...

//...

cloudinary.config({

cloud_name: 'CLOUDINARY_CLOUD_NAME',

api_key: 'CLOUDINARY_API_KEY',

api_secret: 'CLOUDINARY_API_SECRET'

});

//...

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

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

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

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

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

    //...
    app.get('/products', multipartMiddleware, function(req, res){
      return res.json([
        {id: '1', name: 'UltraLight Mechanical Keyboard'},
        {id: '121', name: 'IPhone X'},
        {id: '23', name: 'Tesla S'},
        {id: '42', name: 'Work Shoes'}
      ]);
    });

    app.get('/getProductInfo/:id', multipartMiddleware, function(req, res){
      console.log( req.params.id );
      return res.json({
        media:        [
          {
            id:       '0',
            type:     'image',
            url:      '//static.pexels.com/photos/265631/pexels-photo-265631.jpeg'
          },
          [...]
          {
            id:       '3',
            type:     'video',
            url:      
                '//res.cloudinary.com/og-tech/video/upload/s--ZWPqo282--/v1514966645/sea_turtle-short_z1pr4o.mp4'
          },
        ],
        product_name: 'Ultra Thin Mechanical Keyboard',
        product_desc: 'This keyboard gives you the clack to your click',
        product_price: '200'
      })
    });

    //...

//...

app.get('/products', multipartMiddleware, function(req, res){

return res.json([

{id: '1', name: 'UltraLight Mechanical Keyboard'},

{id: '121', name: 'IPhone X'},

{id: '23', name: 'Tesla S'},

{id: '42', name: 'Work Shoes'}

]);

});

app.get('/getProductInfo/:id', multipartMiddleware, function(req, res){

console.log( req.params.id );

return res.json({

media: [

{

id: '0',

type: 'image',

url: '//static.pexels.com/photos/265631/pexels-photo-265631.jpeg'

[...]

{

id: '3',

type: 'video',

url:

'//res.cloudinary.com/og-tech/video/upload/s--ZWPqo282--/v1514966645/sea_turtle-short_z1pr4o.mp4'

product_name: 'Ultra Thin Mechanical Keyboard',

product_desc: 'This keyboard gives you the clack to your click',

product_price: '200'

})

});

//...

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

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

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

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

    [...]

    let port = 3128 || process.env.PORT;

    app.listen(port, function () {
      console.log('App listening on port ' + port + '!');
    });

[...]

let port = 3128 || process.env.PORT;

app.listen(port, function () {

console.log('App listening on port ' + port + '!');

});

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

Заключение

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

Автор: Chris Nwamba

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

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

Метки: vuejs

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

Зависимости

Создание front end

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

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

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

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

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

Создание back end

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

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

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

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

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

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

Заключение

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

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

Материалы

Мы в соц. сетях

Связь

Информация