Чаще всего при создании приложения JavaScript вам потребуется получать данные из удаленного источника или использовать API. Есть много интересных вещей, которые можно сделать с данными из ряда общедоступных API.
С Vue.js вы можете буквально создать приложение на основе одного из этих сервисов и начать предоставлять контент пользователям за считанные минуты.
Я покажу, как создать простое новостное приложение, которое будет показывать самые популярные новости дня и позволит пользователям фильтровать их по интересующей их категории, получая данные из API New York Times. Вы можете найти полный код для этого руководства здесь, а живую демонстрацию готового приложения здесь.
Вот как будет выглядеть финальное приложение:
Чтобы следовать этому руководству, вам потребуются Node.js и (необязательно) Yarn, установленные на вашем компьютере. Чтобы установить Node, вы можете либо перейти на официальную страницу загрузки и загрузить двоичные файлы Node для своей системы, либо вместо этого использовать диспетчер версий.
После установки Node, чтобы загрузить Yarn, запустите:
npm i -g yarn
Вам также потребуются базовые знания Vue.js. Здесь вы можете найти отличное руководство по началу работы.
Получить ключ API
Чтобы использовать API NYTimes, вам необходимо получить ключ API. Поэтому, если у вас его еще нет, перейдите на их страницу регистрации и зарегистрируйтесь, чтобы получить ключ API для Top Stories API.
Мы будем использовать конечную точку API Top Stories для извлечения данных. Обратите внимание, что этот API предоставляет несколько разделов, таких как «дом», «путешествия», «искусство» и «наука». Нам нужно создать фильтр, который позволит пользователям выбирать раздел и загружать в него истории.
Не стесняйтесь использовать свой любимый клиент REST (например, Hoppscotch или Insomnia) для тестирования вызовов API.
клиент отдыха от бессонницы
Структура проекта
Давайте быстро развернем проект Vue 3, используя Vite, сервер разработки, который работает быстрее, чем Vue CLI:
yarn create @vitejs/app
# Install package dependencies
cd
yarn install
# Confirm app can run
yarn dev
Откройте localhost:3000в своем браузере. У вас должно получиться следующее представление:
создать
Затем давайте установим фреймворк TailwindCSS, чтобы обеспечить некоторые базовые стили. Вам нужно будет остановить сервер, чтобы выполнить это действие:
yarn add -D tailwindcss@latest postcss@latest
npx tailwindcss init -p
Нам понадобятся некоторые дополнительные пакетные утилиты, которые помогут нам отформатировать даты и зафиксировать количество строк для abstractполя:
yarn add @tailwindcss/
@tailwindcss/
module.exports = {
purge: [». /index.html», «. /src/**/*. {vue, js, ts, jsx, tsx}»],
darkMode: false, // or 'media’ or 'class’
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [require («@tailwindcss/
}
Затем создайте index.cssфайл в srcпапке и добавьте этот код:
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
@apply antialiased
}
#app {
@apply
}
Помимо импорта необходимых классов CSS Tailwind, мы включили несколько настроек CSS, которые помогут нам определить тему по умолчанию для нашего приложения. Мы также внедрили систему гибкого макета, чтобы помочь нам создать липкие верхний и нижний колонтитулы для нашего приложения.
Нам нужно импортировать index.cssв src/main.js:
import { createApp } from «vue»
import App from «. /App.vue»
import «. /index.css»
createApp (App).mount («#app»)
Давайте теперь продолжим и определим макет нашего приложения.
Layout.vue
Header.vue
Footer.vue
Скопируйте следующий код для каждого файла:
источник/компоненты/Footer.vue:
<footer class="px-4 py-8 text-sm font-bold text-center text-green-100 bg-green-900"> Copyright © 2021 SitePoint
источник/компоненты/Header.vue:
Vue News | NYTimes Edition
источник/компоненты/Layout.vue:
Наконец, обновите src/App.vue:
Main content goes here
Выполнить yarn dev. Браузер должен обновиться автоматически.
Когда макет приложения завершен, мы можем приступить к построению основной логики нашего новостного приложения.
Создание компонентов новостного приложения
Структура нашего приложения будет состоять из трех компонентов новостей и одного контейнера src/App.vue. Контейнер будет отвечать за получение данных поста и заполнение компонентов.
Давайте теперь начнем создавать наши компоненты новостей. В src/componentsпапке создайте следующие файлы:
NewsCard.vue
NewsList.vue
NewsFilter.vue
Просто чтобы визуализировать, как все эти компоненты объединяются, импортируйте их src/App.vueи расположите следующим образом:
News Section: {{ section }}
Разберем приведенный выше код:
Тег header— это место, где мы отображаем текущее значение состояния section.
Компонент NewsFilterбудет содержать раскрывающийся список, чтобы пользователи могли выбрать другой раздел. Там будет кнопка, которую им нужно будет нажать, чтобы выполнить выборку. Мы привязали компонент к состоянию section, чтобы разрешить синхронизацию состояния.
Компонент NewsListбудет отображать сообщения с использованием NewsCardкомпонента в адаптивной сетке.
Давайте теперь начнем работать с каждым отдельным компонентом новостей. Компонент NewsCard.vueбудет представлять данные для одного поста. Требуется одна опора post:
<a class="text-xl font-bold text-center text-green-800 hover:text-green-600 hover:underline" : href="post.url" target="_blank" rel="noreferrer" > {{ post.title }} <img class="w-full mt-2 rounded" : src="post.thumbnail" : alt="post.caption" height="140" width="210" /> {{ post.abstract }} {{ post.byline }} {{ formatDate (post.published_date) }}
Он NewsList.vueбудет проходить через массив сообщений и заполнять NewsCardsадаптивную сетку:
<div class="grid grid-cols-1 gap-6 mt-4 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 justify-items-center" >
Далее у нас есть NewsFilterкомпонент, который позволит пользователям загружать посты из разных разделов.
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соответственно:
News Section: {{ section }}
Здесь мы создали функцию с именем fetchNews, которая содержит логику для выполнения логики выборки. Эта функция будет вызываться из двух мест:
Событие mounted () жизненного цикла
Компонент NewsFilter_
Давайте разберем функцию, чтобы убедиться, что мы понимаем, что происходит:
Мы используем асинхронный синтаксис, так как он чище, чем обычный Promiseсинтаксис обратного вызова.
Поскольку мы собираемся выполнить сетевой вызов, многое может пойти не так. Мы поместили код функции в try...catchблок. В противном случае пользователи столкнутся с неописательной ошибкой Promise, если таковая произойдет.
Используя литералы шаблонов ES6, мы можем создать строку URL, которая автоматически обновляется всякий раз, когда пользователь изменяет новости sectionчерез NewsFilterкомпонент. Обратите внимание, что ключ API также включен в строку URL.
После извлечения результатов с помощью axios.get () функции нам нужно проанализировать результаты и отформатировать их так, чтобы они были совместимы с нашим пользовательским интерфейсом, в частности с NewsCardкомпонентом. Мы делаем это, используя функцию JavaScript Array.mapдля создания нового массива с нашими отформатированными данными.
Извлечение данных изображения немного сложно. В некоторых сообщениях отсутствует multimediaполе, а даже если оно есть, нет гарантии, что нужный нам медиаформат присутствует. В таком случае мы возвращаем
В блоке ошибок мы проверяем наличие определенных свойств ошибок, чтобы определить, какого рода ошибка произошла. Вы можете использовать эту информацию для создания полезного сообщения об ошибке.
Теперь взгляните на раздел шаблона и обратите внимание, что мы включили новый реквизит с именем fetch, который ссылается на fetchNewsфункцию. Нам нужно обновить src/components/NewsFilter.vue, чтобы принять эту поддержку. Ниже я выделил только те участки кода, которые следует изменить:
... <button class="px-6 py-2 text-white bg-green-700 rounded hover:bg-green-900" @click="fetch" > Retrieve ...
Вам, вероятно, потребуется перезапустить сервер разработки, чтобы правильно загрузить библиотеку axios и ключ API. После того, как вы это сделаете, вы должны увидеть актуальные посты. Ниже показано текущее состояние приложения.
аксиоматическая выборка
Вы должны иметь возможность переключаться и загружать разные разделы новостей.
Последние штрихи и демонстрации
Я решил добавить несколько незначительных (необязательных) штрихов, чтобы сделать приложение немного лучше, например, добавить загрузочное изображение.
Вы можете увидеть демо в StackBlitz ниже (ограниченная функциональность):
Кроме того, вы можете посмотреть живую версию здесь.
Вывод
В этом руководстве мы узнали, как запустить проект Vue.js с нуля, как получать данные из API с помощью axios и как обрабатывать ответы и манипулировать данными с помощью компонентов и вычисляемых свойств.
Теперь у нас есть функциональное приложение Vue.js 3.0, построенное на базе службы API. Есть множество улучшений, которые можно сделать, подключив некоторые другие API. Например, мы могли бы:
Автоматически ставить в очередь публикации в социальных сетях из категории с помощью Buffer API.
Отмечайте посты для прочтения позже, используя Pocket API
...и так далее.
Весь код этого проекта также размещен на GitHub, так что вы можете клонировать, запускать и вносить любые улучшения по своему усмотрению.