Подробный вид изображения
Часть 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
:
- Вызовите
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. Увидимся позже! 👋