从Web API提取数据并添加具有计算属性的动态过滤器

Photo by Agence Olloweb on Unsplash (with added Vue.js logo)

Vue.js是一个潜力巨大的框架。它很容易学习，快速且轻巧。我以如何构建第一个Vue.js应用程序开始有关Vue.js的旅程。现在，我将继续与本文有关如何创建即时搜索输入框以过滤来自Lorem Picsum Web API的数据的文章。

您将在我的存储库中找到最终结果。

简要

Vue.js库：我们的Javascript框架
Axios库：基于Promise的HTTP客户端，我们将使用它来调用Lorem Picsum Web API
Public Lorem Picsum API网址：https://picsum.photos/v2/list?page=2&limit=10
组成我们的应用程序的index.html文件：file app.js，style.css

第一步

首先，让我们检查一下Lorem Picsum Web API的输出是：

[
    {
        "id": "10",
        "author": "Paul Jarvis",
        "width": 2500,
        "height": 1667,
        "url": "https://unsplash.com/photos/6J--NXulQCs",
        "download_url": "https://picsum.photos/id/10/2500/1667"
    },
    {
        "id": "100",
        "author": "Tina Rataj",
        "width": 2500,
        "height": 1656,
        "url": "https://unsplash.com/photos/pwaaqfoMibI",
        "download_url": "https://picsum.photos/id/100/2500/1656"
    }
]

Web API返回一个JSON数组，该数组代表具有URL，作者和ID的图像列表。这些属性将定义我们的应用程序模型。

然后，开发简单的应用程序框架，包括标题，输入文本框，图像列表和作者名称。首先，它看起来像这样：

该网页的正文非常简单：

<header>
  <h1>Photo finder</h1>
</header>

<div id="app-instasearch">

  <div class="input-container">
    <input type="text" placeholder="Type a name" />
  </div>

  <ul>

    <li class="photo">
      <img src="" />
      <span class="author">Some names</span>
    </li>

  </ul>

</div>

<script src="app.js"></script>

通过CSS的非常简单的工作，图像列表的样式为：

.photo {
    list-style: none;
    display: grid;
    grid-template-columns: 200px auto;
    margin-top: 20px;
    align-items: center;
    background-color: #e9edf0;
    padding: 30px 50px;
    border-radius: 5px;
    border: 1px solid #e3e3e3;
}

.author {
    font-size: 25px;
    margin-left: 20px;
    color: #75818e;
}

.photo img {
    border-radius: 5px;
    width: 200px;
}

以及输入框的样式：

.input-container {
    border-radius: 5px;
    background: #677482;
    padding: 10px;
}

.input-container input {
    border: none;
    background: transparent;
    color: white;
    padding: 6px 15px;
    font-size: 18px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #a6b0ba;
  opacity: 1; /* Firefox */
}

Vue.js集成

现在是时候为我们的小应用程序增加动态性了：

导入Vue.js： <script src=”[https://unpkg.com/vue/dist/vue.js](https://unpkg.com/vue/dist/vue.js)"> </script>
导入Axios： <script src=”[https://unpkg.com/axios/dist/axios.min.js](https://unpkg.com/axios/dist/axios.min.js)"></script>

定义一个新的Vue应用程序：

var instasearchApp = new Vue({
    
    el: '#app-instasearch',
    
    data: { 
        authorNameSearchString: "",
        photoFeed: null
    }
  
 }

如您所见，我们将应用程序绑定到element #app-instasearch，并定义了两个属性：

authorNameSearchString：它将包含绑定到我们输入框的搜索字符串
photoFeed：下载后将包含图像数组

在前面阅读的JSON中，我们了解了代表模型的属性。因此，下一步是将所有Vue绑定添加到我们的HTML文件中。

输入框绑定到我们的authorNameSearchString：

<div class="input-container">
  <input type="text" placeholder="Type a name" v-model="authorNameSearchString" />
</div>

主列表绑定：


<li class="photo" v-for="photo in filteredPhotoFeed" v-bind:key="photo.id">
  <img v-bind:src="photo.download_url" />
  <span class="author">{{ photo.author }}</span>
</li>

v-for=”photo in filteredPhotoFeed”：使Vue能够为数组中的li每个元素重复一个filteredPhotoFeed
v-bind:key=”photo.id”：重要的是选择一个键来唯一地表示图像，以便能够对列表进行动画处理
v-bind:src=”photo.download_url”：没有这个，我们将看不到图像
{{ photo.author }}：在每张照片附近打印作者姓名

Mounted功能

在Vue.js中，您可以添加已安装的函数，这些函数只是在Vue实例加载并绑定到接口之后将被调用的钩子。在这种情况下，我们需要从Web API获取数据，这是正确的位置。

mounted() {
  axios
    .get('https://picsum.photos/v2/list?page=2&limit=10')
    .then(response => {
      this.photoFeed = response.data;
    })
    .catch(error => console.log(error))
}

在此示例中，我们Axios用于进行HTTP调用并管理其回调。特别是，我们将对JSON应用程序photoFeed数组使用响应数据，并将最终错误写入输出控制台。

Computed属性

Computed属性是缓存的Vue应用程序属性，它们仅在响应依赖项更改时重新计算。请注意，如果某个依赖项超出了实例的范围（即非反应性），则不会更新计算出的属性。

在这种情况下，我们将使用它们来应用即时搜索过滤器。

computed: {

  filteredPhotoFeed: function () {

    var photos = this.photoFeed;
    var authorNameSearchString = this.authorNameSearchString;

    if(!authorNameSearchString){
      return photos;
    }

    searchString = authorNameSearchString.trim().toLowerCase();

    photos = photos.filter(function(item){
      if(item.author.toLowerCase().indexOf(authorNameSearchString) !== -1){
        return item;
      }
    })

    return photos;
  }
}

首先，我们通过不考虑空字符串或空字符串来检查是否没有输入。然后，我们需要返回由搜索字符串过滤的照片数组。为此，我们使用filter方法和indexOf函数作为谓词，仅选择搜索字符串中包含作者的照片。

每次输入字符串更改时，都会重新计算此属性并更新接口。

这是最终结果的一个小样，并在列表中添加了一些动画，使其更加精美。您可以在此处找到整个代码。