如何搜索 API

Question

我是 Vue.js 的初学者，想做一个使用 API 的项目。这个项目最初是由 TraversyMedia 使用 React 完成的，但它看起来非常简单，可以转换为 Vuejs。我的问题是我不确定如何在 API 中搜索特定演员。搜索栏检测到输入，但我在查询 API 时遇到问题。*

<template lang="">
    <div>
        <!-- Breaking Bad -->
        <Header></Header>
        <Search v-on:wordChange="onWordChange"></Search>
        <ActorList v-bind:characters="actorInfo"></ActorList>
        <!-- characters is the name of the property we want to show up in the child component -->
        <!-- {{ actorInfo.length }} -->
        <Actor></Actor>
    </div>
</template>
<script>
    import Header from "./components/Header";
    import Search from "./components/Search";
    import ActorList from "./components/ActorList";
    import Actor from "./components/Actor";
    import axios from "axios";

    export default {
        name: "App",
        data: function() {
            return { actorInfo: [] };
        },
        components: {
            Header,
            Search,
            ActorList,
            Actor
        },
        mounted() {
            axios
                .get("https://www.breakingbadapi.com/api/characters?name", {})
                .then((response) => {
                    this.actorInfo = response.data;
                    // this.datas = response.data;
                    // console.log(response.data);
                })
                .catch(function(error) {
                    console.log(error);
                });
            //This is how to get all data from the api endpoint with axios
        },
        methods: {
            onWordChange: function(searchTerm) {
                console.log(searchTerm);
            }
        }
    };
</script>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: "Montserrat";
        font-size: 15px;
        color: white;
        background: rgb(0, 0, 0);
        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 1) 0%,
            rgba(2, 44, 23, 1) 33%,
            rgba(2, 44, 23, 1) 66%,
            rgba(0, 0, 0, 1) 100%
        );
    }
</style>

Answer 1

您在mounted 中输入的axios 请求仅在组件安装到DOM 时才会被触发。这只会发生一次，这就是为什么在您键入时什么都没有发生。

我有两个建议：

选项 1：在页面加载时查询 API 一次，并在客户端本地搜索所有记录。

这种方法的好处是您不必在每次击键时都查询 API，因此搜索速度非常快，而且您可以控制记录与查询的匹配方式。这种方法的缺点是，如果 API 中提供了新数据，您需要刷新页面才能查看和查询它。 从我看到的情况来看，这看起来就像您正在尝试做的事情。

如果是这样，您可以使用计算属性来显示查询的过滤结果，同时使用 this.actorInfo 包含可搜索记录的整个列表：

<template>
  <div>
    ...
    <Search v-on:wordChange="onWordChange"></Search>
    <ActorList v-bind:characters="filteredResults"></ActorList>
    ...
  </div>
</template>

<script>
  ...

  export default {
    ...
    data () {
      return {
        actorInfo: []
      }
    },
    mounted () {
      axios.get('https://www.breakingbadapi.com/api/characters?name')
        .then(response => {
          this.actorInfo = response.data
        })
    },
    computed: {
      filteredResults () {
        return this.actorInfo.filter(actor => {
          // Replace this return statement with your own custom "search" matching algorithm if you want
          return actor.toLowerCase().startsWith(this.searchTerm.toLowerCase())
        })
      }
    },
    methods: {
      onWordChange (searchTerm) {
        this.searchTerm = searchTerm
      }
    }
    ...
  }
</script>

---

选项 2：在每次击键时查询 API。

这种方法的好处是可以立即看到 API 提供的新信息。缺点是您在每次击键之间会有一些（可能）明显的延迟，并且您可能会面临速率受限的风险（服务器可能会暂时阻止您的请求，因为您发送的请求太多），并且您无法真正控制 如何记录与您的查询匹配。

为此，您可以创建另一个名为 search 的方法，该方法接受搜索词，然后执行 HTTP 请求。要在页面加载时显示所有记录，您可以在 mounted 中执行没有指定值的搜索，这应该会返回所有内容（仅针对此特定 API，其他 API 的行为可能会有所不同，因此请注意未来）。之后，每次击键都会发送一个带有搜索输入值的 HTTP 请求，它应该为您返回过滤后的结果。

<template>
  <div>
    ...
    <Search v-on:wordChange="onWordChange"></Search>
    <ActorList v-bind:characters="actorInfo"></ActorList>
    ...
  </div>
</template>

<script>
  ...

  export default {
    ...
    mounted () {
      this.search('') // I confirmed that this will load all records on page load
    },
    methods: {
      onWordChange (searchTerm) {
        this.search(searchTerm)
      },
      search (searchTerm) {
        axios.get('https://www.breakingbadapi.com/api/characters?name=${searchTerm}')
          .then(response => {
            this.actorInfo = response.data
          })
      }
    }
    ...
  }
</script>