使用Vue cli3搭建一个用Fetch Api的组件

系列参考 ，英文原文参考

我的git代码: https://github.com/chentianwei411/Typeahead

---

目标：

建立一个输入关键字得到相关列表的组件，用Vuejs2和Fetch API

思路：

把一个json数据，fetch到本地。然后用户模糊搜索title, 得到相关的结果列表。

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum"
  },
...

工具：

使用JSONPlaceholder上的json数据（一个Fake Online REST API用于测试和Prototyping Serving）

使用VueJs2建立一个简单的组件。

不会使用任何库，如Axios ,jQuery, 而使用原生的Fetch API.

使用VueCLI3来搭建手脚架项目。

步骤：

1.安装Vue （参考之前的博客）

yarn global add @vue/cli
vue --version   　　　　　　　　# 查看是否安装好！
vue create type.vue　　　　　　# 新建一个项目，插件选择后，cd type.vue进入。
yarn serve　　　　　　　　　　　 # 执行这条命令，打开热重载模式的网页，具体说明参考之前的博客。

2. 创建组件Typeahead。

在Aup.vue的<template>加上：

      <Typeahead
        source="https://jsonplaceholder.typicode.com/posts"
        placeholder="What Tv Serie you are looking for..."
        filter-key="title"
        :start-at="2"
      />

设置4个prop特性:

• source接收源数据。
• placeholder设置输入框的默认内容
• filter-key设置搜索的关键字属于source data中的哪部分。
• v-bind:start-at，这个是动态的绑定，用户在input内输入字符的个数最少是多少个才能展开搜索

⚠️：v-bind:start-at="2"告诉Vue,动态赋予一个表达式。虽然2是整数，但其实它是一个表达式。

另外，也可以增加非prop特性：

一个非prop特性是给组件添加一个特性，但在组件的props定义中没有这个特性。

非prop特性会添加到这个组件的根元素上。

3. props接受父组件传入的数据。

数据来源的类型是array对象。

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum"
  },
...

因此，prop至少有3个：

       props: {
            source: {
                type: [String, Array],
                required: true
            },
            filterKey: {
                type: String,
                required: true
            },
            startAt: {
                type: Number,
                default: 3
            },
　　　　　　 placeholder: {
　　　　　　　　　type: String,
　　　　　　　　  default: "",
　　　　　　 }

4. 然后建立model/state, 即VueJS的data。

此时我们将有2个特性, 给data对象。

<script>
    export default {
        data() {
            return {
                items: [],
                query: ''
            }
        }
    }
</script>

items数组用来保存从source prop传入的数据。

query是一个空string。它会和input标签绑定。使用v-mode指令。这样它会被实时的更新，无需刷新网页。

5. 在定义完model后，创建一个fetchItems方法来让items数组接收来自source prop的数据。

这个方法放入methods对象中。

<script>
    export default {
        methods: {
            fetchItems() {
                if ( typeof this.source === 'string' ) {
                    fetch(this.source)
                        .then(stream => stream.json())
                        .then(data => this.items = data)
                        .catch(error => console.error(error))
                } else {
                    this.items = this.source
                }
            }
        }
    }
</script>

这里有一个判断：

因为定义的source prop的type可能是string，也可能是array对象。

如果是string, 则使用Fetch API并把response的数据储存到items数组中。

如果用户手动传入的是array对象，则直接赋值给items.

fetch方法接收URL返回以promise对象。

第一个then把数据转化为json格式。

第二个then，则是涉及到实际的data,从服务器来的数据被分配给组件实例中的itmes数组。

还有catch方法，用于处理任何的错误。

6. 建立好fetchItems方法后，使用mounted 钩子函数，这样当组件挂载时，fetchItems被激发。

7. 现在设置Vue component的template部分。

增加一个input标签，query特性绑定v-model。

当在input中输入一个关键字时，会查找items中每个item对象中的body。并列出搜索到的item。

一个假设，输入框要求用户输入想要查询的文章的部分title,即能显示查询的相关记录。

所以之前用filterKey prop来储存item对象中的property。

8. 使用computed 特性。这是reactive响应式的。

定义一个filtered函数：

• 1. 当字符输入大于startAt prop，则继续，否则退出filtered函数。
• 2.对items的每个item进行验证，使用Array.protptype.filter()方法，这会生成一个新的array,内含符合filter内函数判断为true的item.

  • •     computed: {
            filtered() {
              if (this.query.length > this.startAt) {
                return this.items.filter(item => {
                  　　　//
                })
              }
            }
          }

• 3. filter()内的函数：这里有一个假设，用户搜索的是item中的某个key的值：这里用filterKey来存储这个key。因此使用item.hasOwnProperty(this.filterKey)作为if的条件。
  • 如果if false则console.error(`...${...}...`)。输出到控制台某个提示❌信息。
• 4. 最后，我们会检查这个item的filterKey的值，看它是否和用户输入的query互相匹配。
  • 这里有2个方法：
  • 1. 使用javascript中的正则表达式构建器进行匹配。
  • 2. 或者使用indexOf()方法。string.indexOf("xxx")会返回“xxx”所处的位置，一个整数它必大于-1。所以可以使用 string.indexOf("xxx") > -1的方式进行条件判断。
• 另外，取消大小写的判断，用toLowerCase()来转为小写字符。

9. 现在filtered函数会返回符合用户输入条件的items对象集合（数组）。

让我们把这些数据，显示在网页上，修改template模版。添加：

<ul>
    <li v-for="item in filtered"  v-bind:key="item.id">
        //...
    </li>
</ul>

为了能够使用过渡动画效果，可以用css自己写，但是有现成的工具，就无需自己再造轮子了（一个梗