Разработка сайтов в Иловайске, ДНР. Получение данных из стороннего API с помощью Vue.js и Axios

 
 

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

С Vue.js вы можете буквально создать приложение на основе одного из этих сервисов и начать предоставлять контент пользователям за считанные минуты.

Я покажу, как создать простое новостное приложение, которое будет показывать самые популярные новости дня и позволит пользователям фильтровать их по интересующей их категории, получая данные из API New York Times. Вы можете найти полный код для этого руководства здесь, а живую демонстрацию готового приложения здесь.

Вот как будет выглядеть финальное приложение:

vue-новости-final-приложение

Чтобы следовать этому руководству, вам потребуются Node.js и (необязательно) Yarn, установленные на вашем компьютере. Чтобы установить Node, вы можете либо перейти на официальную страницу загрузки и загрузить двоичные файлы Node для своей системы, либо вместо этого использовать диспетчер версий.

После установки Node, чтобы загрузить Yarn, запустите:

npm i -g yarn

Вам также потребуются базовые знания Vue.js. Здесь вы можете найти отличное руководство по началу работы.

Получить ключ API

Чтобы использовать API NYTimes, вам необходимо получить ключ API. Поэтому, если у вас его еще нет, перейдите на их страницу регистрации и зарегистрируйтесь, чтобы получить ключ API для Top Stories API.

01-nyt-register-api-ключ

Мы будем использовать конечную точку API Top Stories для извлечения данных. Обратите внимание, что этот API предоставляет несколько разделов, таких как «дом», «путешествия», «искусство» и «наука». Нам нужно создать фильтр, который позволит пользователям выбирать раздел и загружать в него истории.

Не стесняйтесь использовать свой любимый клиент REST (например, Hoppscotch или Insomnia) для тестирования вызовов API.

клиент отдыха от бессонницы

Структура проекта

Давайте быстро развернем проект Vue 3, используя Vite, сервер разработки, который работает быстрее, чем Vue CLI:

yarn create @vitejs/app vue-news-app —template vue

# Install package dependencies

cd vue-news-app

yarn install

# Confirm app can run

yarn dev

Откройте localhost:3000в своем браузере. У вас должно получиться следующее представление:

создать vue-приложение

Затем давайте установим фреймворк TailwindCSS, чтобы обеспечить некоторые базовые стили. Вам нужно будет остановить сервер, чтобы выполнить это действие:

yarn add -D tailwindcss@latest postcss@latest

npx tailwindcss init -p

Нам понадобятся некоторые дополнительные пакетные утилиты, которые помогут нам отформатировать даты и зафиксировать количество строк для abstractполя:

yarn add @tailwindcss/line-clampdate-fns

@tailwindcss/line-clampэто плагин, который необходимо включить в tailwind.config.js. Ниже приведена полная конфигурация:

module.exports = {

purge: [». /index.html», «. /src/**/*. {vue, js, ts, jsx, tsx}»],

darkMode: false, // or 'media’ or 'class’

theme: {

extend: {},

},

variants: {

extend: {},

},

plugins: [require («@tailwindcss/line-clamp») ],

}

Затем создайте index.cssфайл в srcпапке и добавьте этот код:

@tailwind base;

@tailwind components;

@tailwind utilities;

body {

@apply antialiased text-green-900bg-green-50;

font-family: «Gill Sans», «Gill Sans MT», Calibri, «Trebuchet MS», sans-serif;

}

#app {

@apply flex-colmin-h-screenoverflow-x-hidden;

}

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

Нам нужно импортировать index.cssв src/main.js:

import { createApp } from «vue»

import App from «. /App.vue»

import «. /index.css»

createApp (App).mount («#app»)

Давайте теперь продолжим и определим макет нашего приложения. Во-первых, удалите все существующие компоненты в src/components. Затем в той же папке создайте эти три файла:

Layout.vue

Header.vue

Footer.vue

Скопируйте следующий код для каждого файла:

источник/компоненты/Footer.vue:

источник/компоненты/Header.vue:

источник/компоненты/Layout.vue:

Наконец, обновите src/App.vue:

Выполнить yarn dev. Браузер должен обновиться автоматически.

vue-макет

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

Создание компонентов новостного приложения

Структура нашего приложения будет состоять из трех компонентов новостей и одного контейнера src/App.vue. Контейнер будет отвечать за получение данных поста и заполнение компонентов.

Во-первых, нам нужно спроектировать макет и найти эти компоненты. Следовательно, нам нужны некоторые фиктивные данные для начала. Создайте файл src/posts.jsonи заполните его следующими даннымибы посоветовал вам продублировать записи, чтобы лучше протестировать наши макеты дизайна компонентов, но я не буду делать этого здесь из-за нехватки места.

Давайте теперь начнем создавать наши компоненты новостей. В src/componentsпапке создайте следующие файлы:

NewsCard.vue

NewsList.vue

NewsFilter.vue

Просто чтобы визуализировать, как все эти компоненты объединяются, импортируйте их src/App.vueи расположите следующим образом:

Разберем приведенный выше код:

Тег header— это место, где мы отображаем текущее значение состояния section.

Компонент NewsFilterбудет содержать раскрывающийся список, чтобы пользователи могли выбрать другой раздел. Там будет кнопка, которую им нужно будет нажать, чтобы выполнить выборку. Мы привязали компонент к состоянию section, чтобы разрешить синхронизацию состояния.

Компонент NewsListбудет отображать сообщения с использованием NewsCardкомпонента в адаптивной сетке.

Давайте теперь начнем работать с каждым отдельным компонентом новостей. Компонент NewsCard.vueбудет представлять данные для одного поста. Требуется одна опора post:

Он NewsList.vueбудет проходить через массив сообщений и заполнять NewsCardsадаптивную сетку:

Далее у нас есть NewsFilterкомпонент, который позволит пользователям загружать посты из разных разделов. Во-первых, нам нужен файл контента для хранения всех разделов, поддерживаемых конечной точкой Top Stories API. Создайте файл src/components/sections.js:

const sections = [

«home»,

«arts»,

«automobiles»,

«books»,

«business»,

«fashion»,

«food»,

«health»,

«insider»,

«magazine»,

«movies»,

«nyregion»,

«obituaries»,

«opinion»,

«politics»,

«realestate»,

«science»,

«sports»,

«sundayreview»,

«technology»,

«theater»,

«magazine»,

«travel»,

«upshot»,

«us»,

«world»

Замените хэши вашим фактическим ключом API.

Поскольку мы используем Vite, нам необходимо соблюдать руководство Vite по загрузке переменных среды. Vue/CLI имеет свои собственные инструкции для того, чтобы сделать то же самое.

Давайте теперь реализуем логику, которая будет получать фактические сообщения из конечной точки NYTimes REST API. Просто обновите src/App.vueсоответственно:

Здесь мы создали функцию с именем fetchNews, которая содержит логику для выполнения логики выборки. Эта функция будет вызываться из двух мест:

Событие mounted () жизненного цикла

Компонент NewsFilter_

Давайте разберем функцию, чтобы убедиться, что мы понимаем, что происходит:

Мы используем асинхронный синтаксис, так как он чище, чем обычный Promiseсинтаксис обратного вызова.

Поскольку мы собираемся выполнить сетевой вызов, многое может пойти не так. Мы поместили код функции в try...catchблок. В противном случае пользователи столкнутся с неописательной ошибкой Promise, если таковая произойдет.

Используя литералы шаблонов ES6, мы можем создать строку URL, которая автоматически обновляется всякий раз, когда пользователь изменяет новости sectionчерез NewsFilterкомпонент. Обратите внимание, что ключ API также включен в строку URL.

После извлечения результатов с помощью axios.get () функции нам нужно проанализировать результаты и отформатировать их так, чтобы они были совместимы с нашим пользовательским интерфейсом, в частности с NewsCardкомпонентом. Мы делаем это, используя функцию JavaScript Array.mapдля создания нового массива с нашими отформатированными данными.

Извлечение данных изображения немного сложно. В некоторых сообщениях отсутствует multimediaполе, а даже если оно есть, нет гарантии, что нужный нам медиаформат присутствует. В таком случае мы возвращаем URL-адрес изображения по умолчанию — http: //placehold.it/210×140? text=N/A— и используем заголовок сообщения в качестве подписи.

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

Теперь взгляните на раздел шаблона и обратите внимание, что мы включили новый реквизит с именем fetch, который ссылается на fetchNewsфункцию. Нам нужно обновить src/components/NewsFilter.vue, чтобы принять эту поддержку. Ниже я выделил только те участки кода, которые следует изменить:

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

аксиоматическая выборка

Вы должны иметь возможность переключаться и загружать разные разделы новостей.

Последние штрихи и демонстрации

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

Вы можете увидеть демо в StackBlitz ниже (ограниченная функциональность):

Кроме того, вы можете посмотреть живую версию здесь.

Вывод

В этом руководстве мы узнали, как запустить проект Vue.js с нуля, как получать данные из API с помощью axios и как обрабатывать ответы и манипулировать данными с помощью компонентов и вычисляемых свойств.

Теперь у нас есть функциональное приложение Vue.js 3.0, построенное на базе службы API. Есть множество улучшений, которые можно сделать, подключив некоторые другие API. Например, мы могли бы:

Автоматически ставить в очередь публикации в социальных сетях из категории с помощью Buffer API.

Отмечайте посты для прочтения позже, используя Pocket API

...и так далее.

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

3D-печать5GABC-анализAndroidAppleAppStoreAsusCall-центрChatGPTCRMDellDNSDrupalExcelFacebookFMCGGoogleHuaweiInstagramiPhoneLinkedInLinuxMagentoMicrosoftNvidiaOpenCartPlayStationPOS материалPPC-специалистRuTubeSamsungSEO-услугиSMMSnapchatSonyStarlinkTikTokTwitterUbuntuUp-saleViasatVPNWhatsAppWindowsWordPressXiaomiYouTubeZoomАвдеевкаАктивные продажиАкцияАлександровск ЛНРАлмазнаяАлчевскАмвросиевкаАнализ конкурентовАнализ продажАнтимерчандайзингАнтрацитАртемовскАртемовск ЛНРАссортиментная политикаБелгородБелицкоеБелозерскоеБердянскБизнес-идеи (стартапы)БрендБрянкаБукингВахрушевоВендорВидеоВикипедияВирусная рекламаВирусный маркетингВладивостокВнутренние продажиВнутренний маркетингВолгоградВолновахаВоронежГорловкаГорнякГорскоеДебальцевоДебиторкаДебиторская задолженностьДезинтермедитацияДзержинскДивизионная система управленияДизайнДимитровДирект-маркетингДисконтДистрибьюторДистрибьюцияДобропольеДокучаевскДоменДружковкаЕкатеринбургЕнакиевоЖдановкаЗапорожьеЗимогорьеЗолотоеЗоринскЗугрэсИжевскИловайскИрминоКазаньКалининградКировскКировскоеКомсомольскоеКонстантиновкаКонтент-маркетингКонтент-планКопирайтингКраматорскКрасноармейскКрасногоровкаКраснодарКраснодонКраснопартизанскКрасный ЛиманКрасный ЛучКременнаяКураховоКурскЛисичанскЛуганскЛутугиноМакеевкаМариупольМаркетингМаркетинговая информацияМаркетинговые исследованияМаркетинговый каналМаркетинг услугМаркетологМарьинкаМедиаМелекиноМелитопольМенеджментМерчандайзерМерчандайзингМиусинскМолодогвардейскМоскваМоспиноНижний НовгородНиколаевНиколаевкаНишевой маркетингНовоазовскНовогродовкаНоводружескНовосибирскНумерическая дистрибьюцияОдессаОмскОтдел маркетингаПартизанский маркетингПервомайскПеревальскПетровскоеПлата за кликПоисковая оптимизацияПопаснаяПравило ПаретоПривольеПрогнозирование продажПродвижение сайтов в ДонецкеПроизводство видеоПромоПромоушнПрямой маркетингРабота для маркетологаРабота для студентаРазработка приложенийРаспродажаРегиональные продажиРекламаРеклама на асфальтеРемаркетингРетро-бонусРибейтРитейлРовенькиРодинскоеРостов-на-ДонуРубежноеСамараСанкт-ПетербургСаратовСватовоСвердловскСветлодарскСвятогорскСевастопольСеверодонецкСеверскСедовоСейлз промоушнСелидовоСимферопольСинергияСколковоСлавянскСнежноеСоздание сайтов в ДонецкеСоледарСоциальные сетиСочиСтаробельскСтаробешевоСтахановСтимулирование сбытаСуходольскСчастьеТелемаркетингТельмановоТираспольТорговый представительТорезТрейд маркетингТрейд промоушнТюменьУглегорскУгледарУкраинскХабаровскХарцызскХерсонХостингЦелевая аудиторияЦифровой маркетингЧасов ЯрЧелябинскШахтерскЮжно-СахалинскЮнокоммунаровскЯндексЯсиноватая