Панель поиска в приложении Vue flickr не дает ожидаемых результатов - PullRequest
Новая
       20

Панель поиска в приложении Vue flickr не дает ожидаемых результатов

0 голосов
/ 08 декабря 2018

Я использую Vue для создания приложения Flickr и хочу добавить панель поиска, чтобы пользователи могли искать фотографии, содержащие теги по своему поисковому запросу.

То, что я сделал до сих пор, дает некоторые результаты,но я заметил, что фотографии не всегда включают мой поисковый термин в качестве тегов, например, если я ищу «кошки», возвращаемые элементы могут иметь теги «кошка», но не «кошки», а иногда даже нет тегов, которые даженемного похоже.

Нет ошибок консоли, поэтому я не уверен, где найти ошибку. 

<template>
  <b-container>
    <b-row>
      <b-col md="12">
        <b-input-group size="lg" prepend="Search" class="flickr-search">
          <b-form-input v-model="search"></b-form-input>
        </b-input-group>
      </b-col>
    </b-row>
    <b-row>
      <b-card-group columns>
        <b-col v-for="photo in Photos" class="item" md="12">
          <b-card :title="photo.title"
                  :img-src="photo.media.m"
                  img-alt="Image"
                  img-top
                  img-fluid
                  tag="article"
                  style="max-width: 20rem;"
                  class="mb-2">
            <span class="item-date">31 May 2017</span>
            <hr/>
            <p>By <a :href="'https://www.flickr.com/photos/' + photo.author_id" :title="formatAuthor(photo.author)" target="_blank">{{ formatAuthor(photo.author) }}</a></p>
            <ul class="tags">
              <li v-for="tag in splitTags(photo.tags)" class="item-tag">
                <a :href="'https://www.flickr.com/photos/tags/' + tag" target="_blank" class="item-taglink">{{ tag }}</a>
              </li>
            </ul>
          </b-card>
        </b-col>
      </b-card-group>
    </b-row>
  </b-container>
</template>

<script>
    import jsonp from "jsonp";

export default {
    name: 'PhotoFeed',
    data: function () {
        return {
            Photos: [],
            apiURL: "https://api.flickr.com/services/feeds/photos_public.gne?format=json",
            search: ''
        }
    },
    mounted(){
        this.getFlickrFeed();
    },
    methods: {
        getFlickrFeed(){
            let jsonp = require('jsonp');
            let self = this;

            jsonp(this.apiURL, {name: 'jsonFlickrFeed'}, (err, data) => {
                if (err) {
                    console.log(err.message);
                }
                else {
                    self.Photos = data.items;
                }
            })
        },
        formatAuthor(authorString){
            if (authorString) return authorString.split("\"")[1];
            return "Author";
        },
        splitTags(tagsString) {
            if (tagsString) return tagsString.split(" ");
        }
  },
    watch: {
        search(newVal, oldVal) {
            let self = this;
            let apiURL = "https://api.flickr.com/services/feeds/photos_public.gne?tags=" + self.search + "&format=json";
            let jsonp = require('jsonp');

            jsonp(apiURL, {name: 'jsonFlickrFeed'}, (err, data) => {
                if (err) {
                    console.log(err.message);
                }
                else {
                    self.Photos = data.items;
                }
            })
        }
    }
}
</script>

1 Ответ

0 голосов
/ 08 декабря 2018

Ошибка не выдается, если API мерцания не возвращает никаких результатов.

В пользовательском интерфейсе вы можете сообщить пользователям, что они могут предоставить список ключевых слов через запятую, например cats, cat

Вы также можете проверить, не видите ли какие-либо результаты, и отобразить сообщение, если ничего не найдено, это всего лишь один простой пример реализации:

Соответствующий HTML 

  <b-card-group columns v-if="Photos.length">
    <b-col v-for="photo in Photos" class="item" md="12">
      <b-card :title="photo.title"
              :img-src="photo.media.m"
              img-alt="Image"
              img-top
              img-fluid
              tag="article"
              style="max-width: 20rem;"
              class="mb-2">
        <span class="item-date">31 May 2017</span>
        <hr/>
        <p>By <a :href="'https://www.flickr.com/photos/' + photo.author_id" :title="formatAuthor(photo.author)" target="_blank">{{ formatAuthor(photo.author) }}</a></p>
        <ul class="tags">
          <li v-for="tag in splitTags(photo.tags)" class="item-tag">
            <a :href="'https://www.flickr.com/photos/tags/' + tag" target="_blank" class="item-taglink">{{ tag }}</a>
          </li>
        </ul>
      </b-card>
    </b-col>
  </b-card-group>

  <b-col md="12" v-else-if="!Photos.length && errorMessage">
    <p>{{errorMessage}}</p>
  </b-col>

Соответствующий JS 

data: function () {
    return {
        Photos: [],
        apiURL: "https://api.flickr.com/services/feeds/photos_public.gne?format=json",
        search: '',
        errorMessage: null
    }
}

В обоих getFlickerFeed & watch: search: 

if (err) {
  self.errorMessage = err.message;
}
else {
  self.Photos = data.items;
  if (self.Photos.length) {
    self.errorMessage = null;
  } else {
    self.errorMessage = 'No results found for: ' + self.search
  }
}
...