Создание приложения, отображающего данные из API New York Times.

Quasar - это альтернативная библиотека виджетов для приложений Vue.js. Его легко включить в приложение Vue.js, и результат также будет привлекательным для пользователей.

В этой части мы создадим приложение, которое отображает данные из New York Times API. Вы можете зарегистрироваться для получения ключа API на https://developer.nytimes.com/. После этого мы можем приступить к созданию приложения.

Создание приложения

Чтобы начать сборку приложения, мы должны установить Vue CLI. Мы делаем это, запустив:

npm install -g @vue/cli

Для запуска Vue CLI требуется Node.js 8.9 или новее. Мне не удалось заставить Vue CLI работать с версией Node.js. для Windows. У Ubuntu не было проблем с запуском Vue CLI для меня. Создайте папку проекта и ее файлы, запустив:

vue create quasar-nyt-app

В мастере вместо использования параметров по умолчанию мы выбираем «Выбрать функции вручную». Затем мы выбираем Babel, Router и Vuex из списка опций, нажимая пробел на каждой. Если они зеленые, это означает, что они выбраны.

Теперь нам нужно установить несколько библиотек. Нам нужно установить HTTP-клиент, библиотеку для форматирования дат, одну для генерации строки запроса GET из объектов, а другую для проверки формы. Нам также необходимо установить саму библиотеку Vue Material. Мы делаем это, запустив:

npm i axios moment querystring vee-validate

axios - наш HTTP-клиент, moment - для управления датами, querystring - для генерации строки запроса из объектов, а vee-validate - дополнительный пакет для Vue.js для выполнения проверки.

Затем мы запускаем vue add quasar, чтобы добавить шаблонный код Quasar для нашего приложения. После выполнения этой команды мы должны получить новый оператор Vue.use для библиотеки Quasar и макет по умолчанию, который мы настроим.

В quasar.js, который должен быть сгенерирован при запуске vue add quasar, мы помещаем:

Это должно импортировать все виджеты, которые мы включим в наше приложение.

В другом файле, который необходимо сгенерировать, Default.vue, мы имеем:

Теперь, когда у нас установлены все библиотеки, мы можем приступить к созданию нашего приложения. Сначала мы создаем некоторые компоненты. В папке views создаем Home.vue и Search.vue. Это файлы кода для наших страниц. Затем создайте папку mixins и создайте файл с именем nytMixin.js. Миксины - это фрагменты кода, которые можно включать непосредственно в наши компоненты Vue.js и использовать, как если бы они были непосредственно в компоненте.

Теперь нам нужно добавить несколько фильтров. Фильтры - это код Vue.js, который отображает одно на другое. Создаем папку filters и добавляем capitalize.js и formatDate.js. Затем в папке components создайте файл с именем SearchResults.vue. Папка components содержит компоненты Vue.js, которые не являются страницами.

Чтобы упростить и упорядочить передачу данных между компонентами, мы используем Vuex для управления состоянием. Поскольку мы выбрали Vuex при запуске vue create, у нас должен быть store.js в папке нашего проекта. Если нет, создайте его. В store.js мы помещаем:

В объекте state хранится состояние. Объект mutations - это то место, где мы можем управлять своим состоянием. Когда мы вызываем this.$store.commit(“setSearchResults”, searchResults) в нашем коде, учитывая, что searchResults определено, тогда state.searchResults будет установлено в searchResults. Затем мы можем получить результат с помощью this.$store.state.searchResults.

Нам нужно добавить шаблонный код в наше приложение. Сначала добавляем наш фильтр. В capitalize.js положить:

Это позволяет нам использовать заглавные буквы в названиях разделов New York Times, перечисленных на https://developer.nytimes.com/docs/top-stories-product/1/routes/%7Bsection%7D.json/get.

В formatDate.js мы помещаем:

Это форматирует наши даты в удобочитаемый формат.

В main.js мы помещаем:

Обратите внимание, что в приведенном выше файле мы должны зарегистрировать библиотеки, которые мы используем, с Vue.js, вызвав для них Vue.use, чтобы их можно было использовать в наших шаблонах приложений. Мы вызываем Vue.filter для наших функций фильтрации, чтобы мы могли использовать их в наших шаблонах, добавляя канал и имя фильтра справа от нашей переменной.

В router.js мы помещаем:

Это позволяет нам переходить на страницы, когда мы вводим перечисленные URL-адреса. mode: ‘history’ означает, что у нас не будет знака решетки между базовым URL и нашими маршрутами. Мы также устанавливаем макет на DefaultLayout, который мы определили в DefaultLayout.js. Если мы развернем наше приложение, нам нужно настроить наш веб-сервер так, чтобы все запросы перенаправлялись на index.html, чтобы у нас не было ошибок при перезагрузке приложения.

Например, в Apache мы делаем:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

а в Nginx мы ставим:

location / {
  try_files $uri $uri/ /index.html;
}

См. Документацию к вашему веб-серверу, чтобы узнать, как сделать то же самое на вашем веб-сервере.

Теперь пишем код для наших компонентов. В SearchResults.vue мы помещаем:

Здесь мы получаем результаты поиска из магазина Vuex и отображаем их. Мы возвращаем this.$store.state.searchResults в функции в computed property нашего приложения, чтобы результаты поиска обновлялись автоматически при обновлении searchResults состояния магазина.

q-card - карточный виджет для отображения данных в поле. v-for предназначен для зацикливания записей массива и отображения всего. q-list - виджет списка для аккуратного отображения элементов списка на странице. {{s.pub_date | formatDate}} - это то место, где применяется наш formatDate фильтр.

Далее пишем наш миксин. Мы добавим код для наших HTTP-вызовов в наш миксин. В nytMixin.js мы помещаем:

Мы возвращаем обещания для наших HTTP-запросов на получение статей в каждой функции. В функции searchArticles мы массируем объект, который передаем в строку запроса, которую мы передаем в наш запрос. Убедитесь, что вы поместили свой ключ API в константу apiKey и удалили все, что не определено, с помощью:

Object.keys(params).forEach(key => {
  if (!params[key]) {
     delete params[key];
  }
})

Далее в Home.vue мы помещаем:

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

<q-btn color="primary" label="Sections">
  <q-menu>
    <q-list>
      <q-item
        clickable
        v-close-popup
        v-for="s in sections"
        :key="s"
        @click="selectSection(s)"
      >
        <q-item-section>{{s | capitalize}}</q-item-section>
      </q-item>
     </q-list>
   </q-menu>
</q-btn>

Обратите внимание, что мы используем ключевые слова async и await в нашем коде обещаний вместо использования then. Он намного короче, а функции между then и await и async эквивалентны. Однако он не поддерживается в Internet Explorer. В блоке beforeMount мы запускаем this.getNewsArticles, чтобы получать статьи по мере загрузки страницы.

Затем в Search.vue мы помещаем:

Здесь мы включаем форму для поиска статей. У нас также есть два средства выбора даты, чтобы пометить пользователей, как установить даты начала и окончания. Мы ограничиваем даты только сегодняшним днем ​​и ранее, чтобы поисковый запрос имел смысл. Мы также вложили наш компонент SearchResults в компонент страницы Search, включив:

components: {
  SearchResults
}

между тегом script и <SearchResults /> в шаблоне.

Обратите внимание, что у нас есть свойство :rules в поле ввода. Это позволяет нам выполнять проверку формы, добавляя для этого дополнительные пакеты. Это остановит вас от автоматической отправки, если критерии проверки формы не выполнены ни в одном поле. Вы можете добавить любую функцию, которая вам нравится, или вы можете использовать встроенные правила проверки на https://github.com/quasarframework/quasar/blob/dev/ui/src/utils/patterns.js

Наконец, мы добавляем нашу верхнюю панель и меню, помещая в App.vue следующее:

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

Полученные результаты

После того, как весь код написан, мы имеем следующее:

Следуйте за мной в Twitter: https://twitter.com/AuMayeung

Подпишитесь на мою рассылку сейчас по адресу http://jauyeung.net/subscribe/