从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文件：fileapp.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函数作为谓词，仅选择搜索字符串中包含作者的照片。
每次输入字符串更改时，都会重新计算此属性并更新接口。
这是最终结果的一个小样，并在列表中添加了一些动画，使其更加精美。您可以在此处找到整个代码。
翻译自：https://medium.com/better-programming/instant-search-with-vue-js-and-axios-5b78a3a59f01
