Подробный вид изображения

Часть 1 | Часть 2 | Часть 3 | Часть 4:

Ранее мы создали более надежную домашнюю страницу, которая показывает самые последние загрузки Flickr, а также позволяет пользователям просматривать несколько ключевых слов «место». На главной странице и странице результатов поиска у нас есть карточки, которые отображают изображения, а также несколько фрагментов информации, таких как название, владелец и т. д. В этом посте мы создадим подробное представление изображения, которое показывает увеличенную версию этого изображение, а также немного больше метаданных о нем.

Шаг 1. Новый вид и маршрут

Когда пользователь нажимает на карточку, он должен быть перенаправлен на страницу сведений. Мы будем знать, какое изображение показывать, потому что эта информация будет передаваться через URL-адрес маршрута в качестве реквизита, аналогично тому, как мы передаем tag в представление SearchResults.

Начните с создания файла с именем ImageDetail.vue внутри views и добавления следующего содержимого:

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

Для просмотра этого компонента нам нужен маршрут. Обновите router.js, чтобы включить новый объект маршрута, указав путь маршрута (включая динамический :id), имя, компонент и свойства:

Не забудьте импортировать компонент ImageDetail.vue

Наконец, обновите ImageCard.vue, включив в него элемент router-link, обертывающий содержимое li и указывающий на ImageDetail.vue. Необязательно: добавьте стили для image-card__link (строки 23–26 ниже).

Шаг 2. Получение и отображение информации об изображении

В конечном итоге мы хотим отобразить само изображение, а также некоторые связанные с ним метаданные. К сожалению, эти две части, фотография и метаданные, взяты из двух разных мест. Сначала сосредоточимся на получении метаданных с помощью метода getInfo.

getInfo требует два аргумента: api_key и photo_id. В предыдущем посте мы создали вспомогательный файл flickr.js для обработки большинства вызовов нашего API, и именно в него мы уже передаем файл api_key. Удобно, что на нашей странице уже есть photo_id в качестве реквизита, поэтому все, что нам нужно сделать, это импортировать flickr.js и использовать нашу вспомогательную функцию flickr в качестве метода, указав, что мы вызываем photos.getInfo и передав this.id в качестве значения для photo_id. После того, как обещание будет выполнено, мы просто запишем ответ в консоль, чтобы увидеть, какие данные мы получим обратно.

...,
methods: {
  fetchImageInfo() {
    flickr('photos.getInfo', { photo_id: this.id }).then(
      response => {
        console.log(response)
      }
    )
  },
},
...

Теперь нам нужно где-то вызвать fetchImageInfo, чтобы мы могли увидеть данные. Так же, как мы сделали для SearchResults.vue, давайте сделаем это в хуке жизненного цикла created:

После сохранения файла и обновления браузера вы должны увидеть в консоли следующее:

Вся нужная нам информация хранится в response.data.photo, поэтому давайте сохраним ее в новом свойстве данных с именем imageInfo вместо того, чтобы выводить ее в консоль:

Не забудьте создать функцию data() и свойство imageInfo, инициализировав их значением null.

Как только мы настроим imageInfo и получим данные изображения, мы можем создать вычисляемые свойства для каждой части метаданных, каждый раз индексируя imageInfo, чтобы получить то, что мы хотим. Следующие пути - это то место, где мы находим каждую соответствующую часть:

  • название: this.imageInfo.title._content
  • имя владельца: this.imageInfo.owner.username
  • описание: this.imageInfo.description._content
  • теги: this.imageInfo.tags.tag (возвращает полный массив тегов)

Чтобы избежать ошибок в наших вычисляемых свойствах, нам сначала нужно проверить, содержит ли this.imageInfo нужные нам данные. Если это так, мы вернем нужную информацию, используя указанные выше пути (иногда с учетом отсутствующих данных). Если данные не готовы, мы вернем пустые строки или массивы:

Далее обновите разделы template и style. Вот полный файл на данный момент:

Шаг 3: Получить и отобразить изображение

Теперь давайте покажем само изображение через метод getSizes, который требует тех же аргументов, что и getInfo: api_key и photo_id. Весь процесс получения URL-адреса изображения и отображения изображения будет работать так же, как шаги, которые мы предприняли для imageInfo:

  1. Вызовите getSizes в новом методе fetchImageSizes, который регистрирует ответ на консоль после разрешения промиса. Затем вызовите этот метод в хуке created, чтобы увидеть его:

2. Сохраните нужные данные в свойстве данных. В этом случае нам нужен URL-адрес изображения. Как оказалось, есть несколько URL-адресов на выбор, по одному для каждого размера изображения (как видно из массива size выше). Таким образом, мы произвольно выберем значение source одного размера изображения (URL) для сохранения в свойстве с именем imageUrl:

Обратите внимание на строки 30 и 31 выше, которые обрабатывают произвольный выбор размера изображения «Большой» с помощью метода filter. filter возвращает массив, который в данном случае содержит только один элемент. Мы получаем доступ к этому элементу, индексируя массив с помощью [0]. Элемент сам по себе является объектом с атрибутом source, в котором хранится нужный нам URL, так что это ключ, который мы используем для его получения.

3. Отобразите изображение в шаблоне (строка 3 в полном файле ниже):

Шаг 4: Быстрый рефакторинг (необязательно)

Хотя мы делаем только два разных вызова API в этом компоненте, это все же хорошая возможность упростить наш код и сделать его более читабельным для нас самих в будущем. Таким образом, если мы добавим какие-либо другие вызовы позже, мы сможем добавить их к тому же методу «зонтика», который инициирует все наши выборки данных.

Создайте этот «зонтичный» метод с именем fetchData и вызовите fetchImageInfo и fetchImageSizes. Затем замените содержимое created() новым методом fetchData:

Шаг 5. Улучшите навигацию

Мы создали потрясающую страницу с подробной информацией об изображении, но в настоящее время нет другого способа вернуться на домашнюю страницу, кроме кнопки «назад» в браузере. Попробуйте обновить NavBar.vue, добавив в левый верхний угол логотип, ссылающийся на представление Home. Вот подход, который я использовал, дополненный стилями внизу:

Это все для этого поста! Спасибо за чтение. В следующей части мы рассмотрим другие части Flickr API. Увидимся позже! 👋