Извлечение данных из стороннего API с помощью Vue.js и Axios

Представление компонента списка новостей

Компоненты могут использоваться для поддержания модульности приложения и в основном расширять HTML. «Список новостей» может быть реорганизован для компонента, так что, например, если приложение расширяется и принимается решение использовать список новостей где-либо еще, это будет легко:

 <!-- ./index.html -->
<div class="row" v-for="posts in processedPosts">
  <div class="columns large-3 medium-6" v-for="post in posts">
    <div class="card">
    <div class="card-divider">
      {{ post.title }}
    </div>
    <a :href="post.url" target="_blank"><img :src="post.image_url"></a>
    <div class="card-section">
      <p>{{ post.abstract }}</p>
    </div>
  </div>
  </div>
</div>

В приведенном выше коде мы регистрируем глобальный компонент, используя синтаксис // ./app.js

Vue.component(‘news-list’, {
props: [‘results’],
template: `
<section>
<div class=»row» v-for=»posts in processedPosts»>
<div class=»columns large-3 medium-6″ v-for=»post in posts»>
<div class=»card»>
<div class=»card-divider»>
{{ post.title }}
</div>
<a :href=»post.url» target=»_blank»><img :src=»post.image_url»></a>
<div class=»card-section»>
<p>{{ post.abstract }}</p>
</div>
</div>
</div>
</div>
</section>
`,
computed: {
processedPosts() {
let posts = this.results;

// Add image_url attribute
posts.map(post => {
let imgObj = post.multimedia.find(media => media.format === «superJumbo»);
post.image_url = imgObj ? imgObj.url : «http://placehold.it/300×200?text=N/A»;
});

// Put Array into Chunks
let i, j, chunkedArray = [], chunk = 4;
for (i=0, j=0; i < posts.length; i += chunk, j++) {
chunkedArray[j] = posts.slice(i,i+chunk);
}
return chunkedArray;
}
}
});

const vm = new Vue({
el: ‘#app’,
data: {
results: []
},
mounted () {
this.getPosts(‘home’);
},
methods: {
getPosts(section) {
let url = buildUrl(section);
axios.get(url).then((response) => {
this.results = response.data.results;
}).catch( error => { console.log(error); });
}
}
});
Рекомендуется использовать дефис при определении имен тегов, чтобы они не конфликтовали с текущими или будущими стандартными тегами HTML.

Введенные нами дополнительные параметры объясняются следующим образом.

• Реквизиты : это массив данных, которые мы хотим передать компоненту из родительской области. Мы добавили Vue.component(tagName, options)
• Шаблон : здесь мы определяем разметку для списка новостей. Обратите внимание, что мы завернули наш список в results Это потому, что компонент должен иметь один корневой элемент, а не несколько (который был бы создан нашей итерацией <section>

Настройка нашей разметки для использования нашего компонента div.rownews-list

 results

Примечание. Компоненты также можно создавать как отдельные файловые компоненты (файлы <!-- ./index.html -->

<div class=«container« id=«app«>
<h3 class=«text-center«>VueNews</h3>
<news-list :results=«results«></news-list>
</div>
веб-пакет . Хотя это выходит за рамки этого учебного пособия, оно рекомендуется для более крупных или более сложных приложений.

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

Реализация фильтров категории

Чтобы сделать наше приложение богаче, мы можем теперь ввести фильтры категорий, чтобы пользователи могли показывать только определенные категории новостей.

Сначала мы зарегистрируем список разделов и раздел, который просматривается в нашем приложении:

 .vue

Далее мы можем добавить это в наш контейнер const SECTIONS = "home, arts, automobiles, books, business, fashion, food, health, insider, magazine, movies, national, nyregion, obituaries, opinion, politics, realestate, science, sports, sundayreview, technology, theater, tmagazine, travel, upshot, world"; // From NYTimes

const vm = new Vue({
el: ‘#app’,
data: {
results: [],
sections: SECTIONS.split(‘, ‘), // create an array of the sections
section: ‘home’, // set default section to ‘home’
},
mounted () {
this.getPosts(this.section);
},
// ….
});

 div#app

При нажатии кнопки «Получить» мы <!-- ./index.html -->
<section class="callout secondary">
<h5 class="text-center">Filter by Category</h5>
<form>
<div class="row">
<div class="large-6 columns">
<select v-model="section">
<option v-for="section in sections" :value="section">{{ section }}</option>
</select>
</div>
<div class="medium-6 columns">
<a @click="getPosts(section)" class="button expanded">Retrieve</a>
</div>
</div>
</form>
</section>
getPostsclick@click

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

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

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