【Vue】 第十五部分 GitHub用户查询案例

【Vue】 第十五部分 GitHub用户查询案例

---

---

15.GitHub用户查询案例

需要源码的点击这里

15.1 案例展示

15.2 组件拆分示例图片

15.3 代码

main.js

import Vue from "vue"
import App from "./App.vue"

Vue.config.productionTip = false   //阻止vue在生成时自动产生提示
new Vue({
    el: '#app',
    data: {
        
    },
    render: h => h(App),
    beforeCreate(){
        Vue.prototype.$bus = this  //绑定事件总线
    }
})

App.vue

<template>
  <div class="container">
   <search/>
    <list/>
  </div>
</template>

<script>
import search from "./components/search.vue"
import list from "./components/list.vue"
export default {
    components:{search,list}
}
</script>

<style>

</style>

search.vue

<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="obtainData">Search</button>
      </div>
    </section>
</template>

<script>
import axios from "axios"
export default {
    data(){
      return{
        keyword:""
      }
    },
    methods:{
      // 点击事件
      obtainData(){
        // 初始化列表
        this.$bus.$emit("getinfo",{},{isFirst:false,isLoading:true,isError:''})

        // 向接口发送请求获取数据
        axios.get(`https://api.github.com/search/users?q=${this.keyword}`).then(
          response =>{
            console.log("请求成功！");
              this.$bus.$emit("getinfo",response.data.items,{isFirst:false,isLoading:false,isError:''})
          },
          error => {
            console.log("请求失败！",error.message)
          }
        )

      }
    }
}
</script>

<style>

</style>

list.vue

<template>
      <div class="row">
        <div class="card" v-for="user in userinfo" :key="user.id">
            <a :href="user.html_url" target="_blank">
            <img :src="user.avatar_url" style='width: 100px'/>
            </a>
            <p class="card-text">{{user.login}}</p>
        </div>
        <h1 v-show="status.isFirst">Welcome to use!!!</h1>
        <h1 v-show="status.isLoading">Loading...</h1>
    </div>
</template>

<script>
export default {
  data(){
    return{
      userinfo:[],
      status:{
        isFirst:true,
        isLoading:false,
        isError:false
      }
    }
  },
  mounted(){
    this.$bus.$on("getinfo",(userinfo,status)=>{  
      this.userinfo = userinfo  
      this.status = status
    })
  }
}
</script>

<style>
.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: .75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

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

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

---

总结

以上就是今天要讲的内容，大家可以拿去练手，希望对大家有所帮助！