Vue神兵利器：AJAX斩获GitHub用户

前端

2023-06-22 05:43:42

揭秘Vue中AJAX的魔力：打造GitHub用户搜索利器

一、纵横AJAX，掌握GitHub用户搜索秘籍

作为一名技艺高超的程序员，AJAX一定是你的必备技能。今天，我们将深入探讨如何在Vue框架中运用AJAX，为你揭开GitHub用户搜索的神秘面纱。

二、代理配置：架起Vue与服务器的桥梁

第一步，我们需要为Vue脚手架配置代理，让其与代理服务器和谐相处。共有两种便捷的方法：

方法一：官方推荐

在Vue.config.js文件中添加一行代码，即可轻松搞定：

Vue.config.productionTip = false

方法二：高级玩法

如果你追求更高阶的配置，可以在package.json文件中加入以下语句：

"proxy": "http://localhost:8080"

三、Vue实战：见证GitHub用户搜索的魅力

接下来，我们进入实战环节，利用AJAX的强大助力，实现GitHub用户搜索功能。

1、构建骨架：构筑项目的基石

App.vue ：担任项目主组件，负责页面的整体布局。

<template>
  <div id="app">
    <Search />
    <List />
  </div>
</template>

<script>
import Search from './Search.vue'
import List from './List.vue'

export default {
  components: { Search, List }
}
</script>

Search.vue ：搜索框组件，负责接收用户输入的搜索词。

<template>
  <input type="text" v-model="searchQuery">
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  }
}
</script>

List.vue ：列表组件，负责展示搜索结果。

<template>
  <ul>
    <li v-for="user in users" :key="user.id">{{ user.login }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      users: []
    }
  },
  methods: {
    searchUsers() {
      const url = `https://api.github.com/search/users?q=${this.searchQuery}`
      fetch(url)
        .then(res => res.json())
        .then(data => {
          this.users = data.items
        })
    }
  }
}
</script>

bootstrap.css ：引入第三方样式，美化页面外观。

2、展示搜索结果：让成果跃然屏幕

main.js ：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

List.vue ：

<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      <img :src="user.avatar_url" alt="{{ user.login }}">
      <span>{{ user.login }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      users: []
    }
  },
  methods: {
    searchUsers() {
      const url = `https://api.github.com/search/users?q=${this.searchQuery}`
      fetch(url)
        .then(res => res.json())
        .then(data => {
          this.users = data.items
        })
    }
  }
}
</script>

Search.vue ：

<template>
  <input type="text" v-model="searchQuery" @keyup.enter="searchUsers">
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    searchUsers() {
      this.$emit('search', this.searchQuery)
    }
  }
}
</script>