Получение недавних фотографий и поиск по месту
Раньше мы реорганизовали наше приложение, сделав его более гибким и СУХИМ. В этой статье мы добавим 3 новых компонента на главную страницу, которая в настоящее время очень пуста:
- Многоразовый
HeroSection
компонент RecentPhotos
компонент для отображения последних загруженных изображений с Flickr.PlacePhotos
компонент, который позволяет пользователям просматривать фотографии из небольшого списка мест.
Шаг 1: компонент HeroSection
Начнем с компонента HeroSection.vue
. Создайте файл с этим именем в каталоге components
и добавьте следующее:
- Шаблон состоит из одного
section
элемента, к которому будет примененbackgroundImage
. Внутри у него будутtitle
иsubtitle
. Эти три элемента будутStrings
, которые компонент получит какprops
(строки 12–14), чтобы теоретически мы могли снова использовать этот компонент на другой странице с другими изображениями / заголовками / субтитрами. backgroundImage
будет установлен через встроенный атрибут:style
(строка 2). Обычные фоновые изображения CSS создаются с помощью этого синтаксиса:
background-image: url('relative-or-external-path.jpg');
- Но поскольку мы делаем это в шаблоне, мы должны использовать верблюжий регистр для имени стиля CSS (
backgroundImage
, а неbackground-image
), и мы используем метод под названиемheroImagePath()
для построения нужного нам пути.heroImagePath()
(строка 18) возвращает объединенный относительный путь к файлу, который мы будем хранить в каталогеassets
нашего проекта. Поскольку мы используем Webpack для компиляции файлов нашего проекта, мы должны использовать методrequire()
, чтобы помочь Webpack найти нужное изображение. - В конце добавьте адаптивные стили CSS.
Теперь посетите такой веб-сайт, как Unsplash или Pixabay, чтобы загрузить бесплатную фотографию по вашему выбору в качестве фонового изображения. Сохраните его в assets
как homepage-hero.jpg
(или любое другое расширение файла).
Затем перейдите к Home.vue
и обновите его следующим образом:
Мы импортируем компонент HeroSection
(строка 13) и регистрируем его (строки 17–19). Затем мы добавляем его в шаблон, передавая необходимые реквизиты (строки 3–6).
Шаг 2: Компонент RecentPhotos
Затем давайте создадим раздел на главной странице, чтобы показать три последних фотографии, которые были загружены на Flickr. Мы будем использовать метод flickr.photos.getRecent
, который требует нашего api_key
и принимает множество дополнительных аргументов, аналогичных методу flickr.photos.search
, например extras
, per_page
и page
. Он идеально сочетается с нашим вспомогательным методом flickr.js, который мы создали в Части 2. И мы будем использовать наш ImageCard
компонент для отображения получаемых изображений.
Создайте файл с именем RecentPhotos.vue
внутри components
:
- Шаблон состоит из заголовка раздела и
ul
изImageCard
компонентов (импортированных и зарегистрированных в строках 17 и 21 соответственно). Циклv-for
выполняет итерацию по вычисляемому свойству с именемmostRecentPhotos
(строки 31–33). mostRecentPhotos
возвращает первые три изображения в массиве с именемrecentPhotos
, хранящемся вdata()
.recentPhotos
инициализируется пустым массивом, который заполняется изображениями во время хука жизненного циклаcreated()
.- В
created()
мы вызываем методfetchRecentPhotos()
, который использует нашflickr()
вспомогательный метод (импортированный в строке 15) для вызова API. flickr()
получает два аргумента: метод, который мы хотим вызвать (photos.getRecent
), и необходимые ему дополнительные параметры (extras
,page
иper_page
). Если запрос метода успешно разрешен, мы обновляемrecentPhotos
в предложенииthen()
. Если возникает ошибка, мы записываем ее в консоль в предложенииcatch()
.
Это будет наш стандартный подход / поток практически для всех других вызовов API в этом проекте.
Затем добавьте компонент в Home.vue
, импортировав (строка 15) и зарегистрировав его (строка 21), а затем добавив тег шаблона (строка 8).
Отказ от ответственности: если вы не понимаете, почему у
ImageCards
не всегда есть супер недавняя дата, это потому, что отображается дата, когда фотография была сделана, а не когда она была загружена, которая может быть не той же даты.
Шаг 3. Компонент PlacePhotos
Еще один популярный способ поиска фотографий - по названию города / места. Давайте создадим интерактивный компонент, который позволит пользователям просматривать фотографии из ограниченного списка «популярных» мест. Мы сами решим, что это за места.
Создайте файл с именем PlacePhotos.vue
внутри components
. Представьте, что шаблон состоит из трех основных частей: там будет заголовок и список кнопок с названиями мест (строки с 3 по 16 ниже). Каждая кнопка затем обновляет вторую часть, список из 3 фотографий для выбранного места (строки 18–31; второй ul
- это список загрузки / скелета, который появляется во время загрузки изображений). В-третьих, внизу будет ссылка, по которой пользователь может щелкнуть, чтобы просмотреть больше фотографий этого места на странице SearchResults
(строки 33–39).
Разбивая это на более мелкие части и начиная с первой части, список мест ul
(строки 4–16):
- Цикл
li
черезpopularPlaces
, массив вdata()
, состоящий из пространственных объектов. Каждый объект имеет свойстваname
иplace_id
.place_id
происходит от методаflickr.places.find
. Не стесняйтесь заменять эти имена и идентификаторы мест другими на ваш выбор! - Когда пользователь нажимает кнопку размещения, вызывается метод
updateSelectedPlaceIndex(index)
(строка 10).updateSelectedPlaceIndex
принимает один аргумент, индекс объекта размещения вpopularPlaces
, и обновляет свойство данныхselectedPlaceIndex
для сохранения этого нового значения. Как мы увидим через минуту, это одна из причин обновления фотографий.
Теперь давайте посмотрим на вторую часть, image-card-grid
ul
в строках 18–24:
- Он состоит из списка
ImageCard
, изображения для которых берутся изpopularPlacePhotos
(строки 96–98), вычисляемого свойства, которое возвращает первые три изображения изplacePhotos
. placePhotos
похож наrecentPhotos
из предыдущего компонента. Он начинается как пустой массив, а затем заполняется данными изображения во время ловушки жизненного циклаcreated()
(строки 51–53), на этот раз с помощью методаfetchPlacePhotos()
.fetchPlacePhotos()
(строки 101–115) делает то же самое, что иfetchRecentPhotos()
, только с другим методом API,photos.search
и набором параметров.- Строка 104 - важное отличие. Мы ищем по
place_id
, а не поtag
в этот раз. Мы знаем, какойplace_id
передать, индексируя вpopularPlaces
, используя текущее значениеselectedPlaceIndex
, а затем передавая в этом местеplace_id
. Но вместо того, чтобы писать:
place_id: this.popularPlaces[this.selectedPlaceIndex].place_id
мы перемещаем первую часть в ее собственное вычисляемое свойство с именем selectedPlace
(строки 93–95), что позволяет нам написать:
place_id: this.selectedPlace.place_id
Намного более читабельным.
Наконец, давайте посмотрим на третью часть шаблона (строки 33–39):
- Он состоит из выровненного по центру тега
<p>
, который охватывает элементrouter-link
(также известный как тег<a>
). - Строка 35 указывает
name
маршрута,searchResults
, и передает вместоname
значение для нашего параметра поискаtag
.
Теперь осталось только импортировать (строка 17) и зарегистрировать (строка 24) PlacePhotos.vue
в Home.vue
и добавить его в шаблон (строка 9):
Вот и все! Три новых компонента и еще два места, где мы вызываем Flickr API. Затем мы добавим ImageDetail
просмотров в наше приложение, чтобы мы могли нажимать на эти карточки и видеть более подробную информацию о каждой фотографии. Спасибо за чтение и до встречи! ✌️