一个简单的axios向服务器请求数据的案例

最新推荐文章于 2024-07-23 16:20:57 发布

是千喜啊

最新推荐文章于 2024-07-23 16:20:57 发布

阅读量1.8k

点赞数

文章标签： vue.js 交互前端

本文链接：https://blog.csdn.net/m0_57723586/article/details/123636594

版权

在搜索框输入关键词，拿到下边展示出来的数据

Search组件中需要拿关键字发请求需要得到请求地址，请求方式，才会拿到数据

1.下载并引入axios

npm i axios

2.引入axios

import axios from "axios";

3.获取关键词（用户输入一个关键词再点击搜索）

3.1.先找到Search中的input框利用v-model设定一个关键字 keyWord

在data中去定义这个关键字

data() {
    return {
      keyWord: [],
    };
  },

3.2.然后给按钮绑定点击事件 searchUsers，当点击按钮才会触发事件

<input
        type="text"
        placeholder="enter the name you search"
        v-model="keyWord"
      />&nbsp;<button @click="searchUsers">Search</button>

3.定义这个事件searchUsers

然后引入axios发送请求

methods: {
    searchUsers() {
      //用axios发送请求
      axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
        (response) => {
          console.log("请求成功"); //把请求的数据响应回来
          //触发$bus绑定的事件,然后把响应的数据返回，此时search已经把数据传给了list
          this.$bus.$emit("getUsers", response.data.items);
        },
        (error) => {
          console.log("请求失败", error.message);
        }
      );
    },
  },

用.then方法得到两个数据（成功的和失败的）

4.目前获取到的数据再Search组件中，但是需要在List组件中展示出来，所以涉及到组件间通信

因为是兄弟关系，所以可使用全局事件总线进行传值

4.1在main.js中安装全局事件总线

//创建实例对象
new Vue({
  //将App组件放到的容器中 
  render: h => h(App),
  beforeCreate() {
    //开启全局事件总线
    Vue.prototype.$bus = this
  }
}).$mount('#app')

4.2 Search组件提供数据 List组件接收数据

接收数据（List组件）的地方写一个monted钩子用$bus去绑定一个事件

mounted() {
    //接收请求的数据，但是数据在search那，因此需要全局事件总线使用$bus
    this.$bus.$on("getUsers", (users) => {
      //返回一个回调函数
      console.log("我是list,我收到了search的数据", users);
      //把从search那拿到的数据存到自己身上
      this.users = users;
    });
  },

提供数据（Search组件）的地方触发这个事件，并把请求的数据响应过来

//触发$bus绑定的事件,然后把响应的数据返回，此时search已经把数据传给了list
          this.$bus.$emit("getUsers", response.data.items);

4.3 此时Search组件已经把数据传给了List组件

然后List把收到的数据存在自己身上(关键)

//把从search那拿到的数据存到自己身上
      this.users = users;

5.最后在List组件里通过遍历把数据呈现出来

<div class="card" v-for="user in users" :key="user.login">
      <a :href="user.html_url" target="_blank">
        <img :src="user.avatar_url" style="width: 100px" />
      </a>
      <!-- 通过遍历把数据呈现出来 -->
      <p class="card-text">{{ user.login }}</p>

6.代码展示

App组件:

<template>
  <div class="container">
    <Search />
    <List />
  </div>
</template>

<script>
import Search from "./components/Search.vue";
import List from "./components/List";
export default {
  components: { Search, List },
  name: "App",
};
</script>

<style >
</style>

Scarch组件:

<template>

  <section class="jumbotron">

    <h3 class="jumbotron-heading">Search Github Users</h3>

    <div>

      <input

        type="text"

        placeholder="enter the name you search"

        v-model="keyWord"

      />&nbsp;<button @click="searchUsers">Search</button>

    </div>

  </section>

</template>



<script>

import axios from "axios";

export default {

  name: "Search",

  data() {

    return {

      keyWord: [],

    };

  },

  methods: {

    searchUsers() {

      //用axios发送请求

      axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(

        (response) => {

          console.log("请求成功"); //把请求的数据响应回来

          //触发$bus绑定的事件,然后把响应的数据返回，此时search已经把数据传给了list

          this.$bus.$emit("getUsers", response.data.items);

        },

        (error) => {

          console.log("请求失败", error.message);

        }

      );

    },

  },

};

</script>



<style>

</style>

List组件:

<template>
  <div class="row">
    <div class="card" v-for="user in users" :key="user.login">
      <a :href="user.html_url" target="_blank">
        <img :src="user.avatar_url" style="width: 100px" />
      </a>
      <!-- 通过遍历把数据呈现出来 -->
      <p class="card-text">{{ user.login }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "List",
  data() {
    return {
      users: [],
    };
  },
  mounted() {
    //接收请求的数据，但是数据在search那，因此需要全局事件总线使用$bus
    this.$bus.$on("getUsers", (users) => {
      //返回一个回调函数
      console.log("我是list,我收到了search的数据", users);
      //把从search那拿到的数据存到自己身上
      this.users = users;
    });
  },
};
</script>

<style scoped>
.album {
  min-height: 50rem; /* Can be removed; just added for demo purposes */
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #f7f7f7;
}

.card {
  float: left;
  width: 33.333%;
  padding: 0.75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: 0.75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}
</style>