Как создать веб-приложение с Vue, Vuetify и Axios

Следите за тем, как мы создаем приложение базы данных фильмов с помощью Vue, Axios, Vuetify и API Open Movie Database.

Вступление

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

СОДЕРЖАНИЕ

Почему Аксиос?
Почему Vuetify?
Кратко об API фильмов
Вызов и тестирование API и Test.
Создать приложение
Требования и структура Приложения
Добавить Vuetify в проект
Добавить в проект vue-router
Добавить аксиомы в проект
Удалите компонент, созданный в настоящий момент.
Создать компонент LatestMovies
Реализовать компонент Movie
Показать рейтинги
Добавить компонент "Поиск фильма"
Проблема с поисковым фильмом и способы ее устранения
Добавьте предупреждающее сообщение, если в API нет данных поиска
Создание центрального файла для аксиом / рефакторинга
Завершение и исходный код

1. Почему именно Axios?

В приложении Vue.js мы можем отображать данные из внешнего API. Это можно сделать с помощью vue-resource и axios. Axios - это популярная 3-я часть библиотеки. Вот официальная ссылка для использования Axios с Vue.js.

Здесь важно отметить, что в официальных документах нет подробностей об установке axios в приложение Vue.js. Мы рассмотрим это в Разделе 9: Добавление аксиом в проект.

2. Почему Vuetify?

Vuetify - это фреймворк материального дизайна, построенный на основе Vue.js. Он имеет приятные компоненты пользовательского интерфейса и может быть легко доступен для использования на Vue.js.

3. Краткое описание API фильмов.

Http://www.omdbapi.com/

Omdbapi - это открытый и бесплатный API базы данных фильмов, который также предоставит сведения о фильмах и изображениях. Главный недостаток заключается в том, что большинство изображений не очень четкие, но это поможет. Также есть поддержка API.

Чтобы использовать этот API, прежде всего, необходимо зарегистрироваться, и они предоставят вам ключ API, отправленный вам по почте. Это можно использовать для каждого результата запроса.

Требуется передающий ключ, а также специальная строка. s означает поиск, при передаче s = ”Indiana” API извлечет все данные, содержащие Indiana. Кроме того, i означает, что будет возвращен фильм с идентификатором imbd, поэтому возвращается только один, поскольку он уникален. Здесь для демонстрации мы используем «s» и «i».

4. Вызов и тестирование API и Test

Чтобы проверить, что мы получим при вызове omdbapi, нужно провести тестирование с помощью инструмента почтальона или любого механизма тестирования API. Вот я для этого использую почтальона.

Как вы видите на изображении, необходимо передать apikey = XXXX и s = "название фильма".

Таким образом, URL-адрес становится

Http://www.omdbapi.com/?s=movie-name&apikey=XXXX&page=1&type=movie&Content-Type=application/json

Отлично, у нас все хорошо, теперь мы можем приступить к созданию приложения и также поработать над аксиомами.

5. Создайте приложение.

Создать приложение Vue js можно с помощью простой команды

vue create movie-app

movie-app - это название нашего приложения.

6. Требования и структура Приложения.

В структуре приложения 3 компонента.

Компонент LatestMovie.
Компонент Movie.
Компонент SearchMovie.

Компонент LatestMovie будет иметь текущую домашнюю страницу, и я покажу фильмы, связанные с моим любимым фильмом «Индиана».

При нажатии на каждый фильм будет отображаться подробная информация о каждом отдельном фильме, что можно сделать с помощью компонента «Фильм».

Предоставляется возможность поиска и отображения тех фильмов, которые могут обрабатываться компонентом SearchMovie.

7. Добавьте Vuetify в проект.

Как уже говорилось, мы используем Vuetify для дизайна приложения. Для этого нужно подготовить какой-то фундамент. на терминале введите

vue add vuetify

После установки наш интерфейс будет выглядеть так:

Отлично, они также предоставляют панель навигации. Потом продолжим.

8. Добавьте в проект vue-router.

Объясню, зачем нам нужен vue-router, он без проблем выполнит функции маршрутизации и переключение компонентов. Установка vue-router осуществляется

npm install vue-router

Теперь необходимо связать маршрутизатор с приложением и создать файл маршрутов.

Создайте файл роутера
Добавить контент в файл роутера
Свяжите роутер с приложением

1. Создайте файл маршрутизатора.

Я следую шаблону, по которому создаю папку с именем router в пути src, и в ней будет создан файл index.js файл

2. Добавьте содержимое в файл маршрутизатора

До сих пор мы создали файл router / index.js, теперь необходимо импортировать экземпляр Vue и vue-router в этот файл, необходимо экспортировать файл маршрутизатора по умолчанию.

Каждый путь маршрутизатора будет состоять из трех компонентов: путь, имя, компонент.

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
  routes: [
    {
    }
  ]
})

3. Свяжите роутер с приложением

Во-первых, необходимо импортировать маршрутизатор из пути и использовать его в экземпляре Vue. Все это делается в файле src / main.js

import router from ‘./router’

Текущий файл main.js будет выглядеть так:

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

9. Добавьте в проект аксиомы.

Axios - это наша точка контакта для вызова служб API в этом приложении. Теперь нам нужно установить axios в наш проект.

npm install axios --save

10. Удалите компонент, на котором в данный момент возведены строительные леса.

По умолчанию у нас есть компонент, мы удалим его и создадим необходимые нам компоненты.

HelloWorld.vue - это компонент по умолчанию, он будет удален из нашего приложения.

11. Создайте компонент LatestMovie.

Здесь нужно сделать несколько шагов

Создайте LatestMovie.vue.
Добавьте аксиомы в компонент LatestMovie.
Свяжите роутер с LatestMovie.
Добавьте индикатор выполнения для LatestMovie.
Создайте LatestMovie.vue.

Создайте файл с именем LatestMovie.vue в папке компонентов.

2. Добавьте аксиомы в компонент LatestMovie.

Здесь мы используем жизненный цикл mount () для этого, добавили код, чтобы получить результат от omdbapi с данными индийского фильма.

mounted () {
  axios
    .get('http://www.omdbapi.com/?s=mummy&apikey=XXXXX&page=1&type=movie&Content-Type=application/json')
    .then(response => {
      this.wholeResponse = response.data.Search
    })
    .catch(error => {
      console.log(error)
    })
}

3. Свяжите маршрутизатор с LatestMovie.

Теперь нам нужно связать LatestMovie с файлом маршрутизатора.

в src / router / index.js:

import LatestMovie from '@/components/LatestMovie'

добавляем ссылки на router / index.js:

export default new VueRouter({
  routes: [
   {
      path: '/',
      name: 'LatestMovie',
      component: LatestMovie
    }
  ]
})

4. Добавить индикатор выполнения для LatestMovie

Если для получения API потребуется время, нам потребуется отобразить индикатор выполнения. Этого можно добиться с помощью «‹ v-progress -icing » из vuetify.

Создано свойство данных, для которого изначально будет установлено значение true, а затем после ответа API будет установлено значение false.

Также о данных позаботится другое свойство данных под названием wholeResponse.

Таким образом, наш LatestMovie.vue становится следующим:

<template>
<v-container v-if="loading">
    <div class="text-xs-center">
      <v-progress-circular
        indeterminate
        :size="150"
        :width="8"
        color="green">
      </v-progress-circular>
    </div>
  </v-container>
<v-container v-else grid-list-xl>
    <v-layout wrap>
      <v-flex xs4
        v-for="(item, index) in wholeResponse"
        :key="index"
        mb-2>
        <v-card>
          <v-img
            :src="item.Poster"
            aspect-ratio="1"
          ></v-img>
<v-card-title primary-title>
            <div>
              <h2>{{item.Title}}</h2>
              <div>Year: {{item.Year}}</div>
              <div>Type: {{item.Type}}</div>
              <div>IMDB-id: {{item.imdbID}}</div>
            </div>
          </v-card-title>
<v-card-actions class="justify-center">
            <v-btn flat
              color="green"
              @click="singleMovie(item.imdbID)"
              >View</v-btn>
          </v-card-actions>
</v-card>
      </v-flex>
  </v-layout>
  </v-container>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      wholeResponse: [],
      loading: true
    }
  },
  mounted () {
  axios
    .get('http://www.omdbapi.com/?s=indiana&apikey=XXXX&page=1&type=movie&Content-Type=application/json')
    .then(response => {
      this.wholeResponse = response.data.Search
      this.loading = false
    })
    .catch(error => {
      console.log(error)
    })
  }
}
</script>
<style lang="stylus" scoped>
  .v-progress-circular
    margin: 1rem
</style>

Теперь добавьте представление маршрутизатора в App.vue, чтобы отобразить компонент:

<router-view></router-view>

12. Реализуйте компонент Movie

Теперь пришло время для отдельной части фильма. Этого можно добиться с помощью файла Movie.vue.

Добавьте файл Movie.vue
Добавьте роутер
Добавить режим
Вставьте стойки в роутер.
Передайте реквизит в последний компонент.
Работайте с данными props в компоненте фильма.

Добавьте файл Movie.vue

Добавьте файл в components / Movie.vue

Добавьте маршрутизатор

Зарегистрируйте Movie.vue в файле router / index.js.

import Movie from '@/components/Movie'

Добавить режим

В URL-адресе есть символ #, мы можем удалить те, которые используют

mode: 'history'

В файле router / index.js.

Вставьте опоры в маршрутизатор.

Создайте путь для компонента Movie.vue, используя приведенный ниже код в файле router / index.js.

{
      path: '/movie/:id',
      name: 'Movie',
      props: true,
      component: Movie
    },

Мы указываем props: true, потому что мы передаем imdb_id компоненту Movie.vue, а затем это значение используется для вызова API для этого единственного фильма.

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

Теперь, щелкнув представление в LatestMovie, вызовет метод, который, в свою очередь, передаст imdb_id в качестве свойства Movie.vue.

<v-btn round
              color="green"
              @click="singleMovie(item.imdbID)"
              >View</v-btn>

а метод singleMovie -

methods: {
    singleMovie (id) {
      this.$router.push('/movie/' + id)
    }
  }

Работа с данными реквизита в компоненте фильма

Теперь данные передаются из LatestMovie. Это значение получено как свойство в компоненте Movie.vue. Это значение может использоваться this.id

Также добавлено свойство данных singleMovie для обработки ответа.

Код в Movie.vue становится следующим:

<template>
  <v-container>
    <v-layout row wrap>
      <v-flex xs12>
        <h2>welcome to single movie component</h2>
          <div>{{singleMovie}}</div>
      </v-flex>
    </v-layout>
  </v-container>
</template>
<script>
import axios from 'axios'
export default {
  props: ['id'],
  data () {
    return {
      singleMovie: ''
    }
  },
  mounted () {
    axios
      .get('http://www.omdbapi.com/?apikey=b76b385c&i=XXXXX&Content-Type=application/json')
      .then(response => {
        this.singleMovie = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>
<style>
</style>

13. Отображение оценок

Omdbapi предоставит нам текущие рейтинги фильма. Мы отобразим это значение в таблице,

Для этого будет отображаться модальное окно, которое будет вызываться при нажатии кнопки просмотра рейтинга.

<template>
<v-layout row wrap>
      <v-flex xs12>
        <div class="text-xs-center">
        <v-dialog
          v-model="dialog"
          width="500">
          <v-btn
            slot="activator"
            color="green"
            dark>
            View Ratings
          </v-btn>
          <v-card>
            <v-card-title
              class="headline grey lighten-2"
              primary-title
            >
              Ratings
            </v-card-title>
            <v-card-text>
              <table style="width:100%" border="1" >
                <tr>
                  <th>Source</th>
                  <th>Ratings</th>
                </tr>
                <tr v-for="(rating,index) in this.ratings" :key="index">
                  <td align="center">{{ratings[index].Source}}</td>
                  <td align="center">{{ratings[index].Value}}</td>
                </tr>
              </table>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn
                color="primary"
                flat
                @click="dialog = false"
              >
                OK
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </div>
      </v-flex>
    </v-layout>
  </template>

Мы повторяем значение данных, называемое рейтингами. Это свойство данных получено из ответа API, т.е. r esponse.data.Ratings.

14. Добавить компонент "Поиск фильма"

Для этого нам нужно создать следующее:

Создайте файл SearchMovie.vue
Создайте текстовое поле в App.vue.
При нажатии кнопки поиска данные из текстового поля будут переданы в файл SearchMovie.vue в качестве свойства.
В файле SearchMovie.vue мы получим значение и вызовем API для получения данных.

Совершить ссылку для этого

15. Проблема с поисковым фильмом и способы ее устранения.

Установленный на данный момент хук жизненного цикла вызывается только один раз, когда мы ищем один раз, он отображает данные, то есть при поиске с помощью Iron Man он показывает данные. но после поиска с «титаном» он показывает те же данные. Это можно исправить, используя свойство watch в свойствах данных с именем name (из App.vue) и обновив смонтированное свойство как метод. В результате система вызовет 2 раза, то есть когда первый загружается с помощью смонтированного хука жизненного цикла и снова поиск будет обрабатываться действием наблюдателя для значения props (name).

Ссылка фиксации для исправления

16. Добавьте предупреждающее сообщение, если в API нет данных поиска.

Предположим, когда мы вызываем API с недопустимым фильмом или фильмом, который недоступен в нашем omdbapi. В этом случае необходимо вывести сообщение.

Мы создаем свойство данных по умолчанию, которое имеет значение false, когда искомые данные ничего не возвращают, будет установлено значение true и будет отображаться сообщение.

Ссылка на фиксацию для изменения кода

17. Создание центрального файла для аксиом / рефакторинга

Тем не менее, наши коды вызова axios и API разбросаны по всему компоненту. Будет хорошо, если мы разместим все это в одном месте, как сервисы в angular.

Для этого

Создайте папку с именем services в src / и создайте файл MovieApi.js
Импортируйте аксиомы в main.js
Создайте URL-адрес по умолчанию в main.js
Экспорт файла MovieApi.js
Импортируйте MovieApi.js в компоненты.
Удалите код axios из компонентов и поместите в файл MovieApi.js.
Вызовите соответствующие методы из компонентов.