Получение недавних фотографий и поиск по месту

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

Раньше мы реорганизовали наше приложение, сделав его более гибким и СУХИМ. В этой статье мы добавим 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 просмотров в наше приложение, чтобы мы могли нажимать на эти карточки и видеть более подробную информацию о каждой фотографии. Спасибо за чтение и до встречи! ✌️