2022/05/31 Github案例

2022-05-31 01:32:00 阅读：160 来源： 互联网

标签：axios Github false users bus 31 vue 2022 MySearch

Github案例

利用github的接口 https://api.github.com/search/users?q=xxxxxx来实现获取github的用户信息，同时展示用户信息。

静态页面

静态页面分为Search和List两个部分，先将静态页面构建出来。

MySearch.vue

<template>
<div>
    <section class="jumbotron">
        <h3 class="jumbotron-heading">Search Github Users</h3>
        <div>
            <input type="text" placeholder="enter the name you search"/>&nbsp;
            <button>Search</button>
        </div>
    </section>
</div>
</template>
f
<script>
import axios from 'axios'
export default {
    name:"MySearch"
}
</script>

<style>
</style>

MyList.vue

<template>
    <div class="row">
      <div v-show="info.users.length" class="card">
        <a :href="xxxxxx" target="_blank">
          <img :src="xxxxxx" style='width: 100px'/>
        </a>
        <p class="card-text">xxxxxx</p>
      </div>
    </div>
</template>

<script>
export default {
    name:"MyList"
}
</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: .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>

App.vue

<template>
<div class="container">
  <MySearch/>
  <MyList/>
</div>
</template>

<script>
import MyList from "./components/MyList.vue";
import MySearch from "./components/MySearch.vue";
export default {
  name: 'App',
  components: { MySearch,MyList },
}
</script>

<style>
</style>

tip: 这里的静态页面样式使用到了bootstrap.css，本地映入的时候不要放在src/assets中，因为放在src目录中VUE脚手架回去检查所有的依赖，就没没有用到相关依赖也会报错，因此需要放在public目录下，然后在index.html使用

全局事件总线

全局事件总线注册

main.js

import Vue from 'vue'
import App from '../20.github案例/App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus = this
  }
}).$mount('#app')

绑定事件

MyList.vue
```
mounted() {
    this.$bus.$on('updateListData', (dataObj)=>{
    this.info = {...this.info,...dataObj}
    })
}
```
这里的{...this.info,...dataObj}表示将info和dataObj对象融合，如果其中有相同的对象，那么以后一个对象dataObj为主

搜索事件，给MySearch的搜索案件绑定事件，利用axios来实现数据的获取(这里的github接口以及做了跨域处理了，所以能够正常访问到)

MySearch.vue

    methods:{
        searchUsers() {
            this.$bus.$emit('updateListData', {isFirst:false, errMag:'', isLoading:true, users:[]})
            axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                response => {
                    console.log('请求成功了')
                    this.$bus.$emit('updateListData', {isFirst:false, errMsg:'', isLoading:false, users:response.data.items})
                },
                error => {
                    console.log(error)
                    this.$bus.$emit('updateListData', {isFirst:false, errMsg:error, isLoading:false, users:[]})
                }
            )
        }
    }

整体代码

MyList.vue

<template>
    <div class="row">
      <div v-show="info.users.length" class="card" v-for="user in info.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>
      <h1 v-show="info.isFirst">欢迎使用！</h1>
      <h1 v-show="info.isLoading">加载中......</h1>
      <h1 v-show="info.errMsg">{{info.errMsg}}</h1>
    </div>
</template>

<script>
export default {
    name:"MyList",
    data() {
      return {
        info:{
          isFirst:true,
          isLoading:false,
          errMsg:'',
          users:[]
        }
      }
    },
    mounted() {
      this.$bus.$on('updateListData', (dataObj)=>{
          this.info = {...this.info,...dataObj}
      })
    }
}
</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: .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>

MySearch.vue

<template>
<div>
    <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>
</div>
</template>
f
<script>
import axios from 'axios'
export default {
    name:"MySearch",
    data() {
        return {
            keyWord:''
        }
    },
    methods:{
        searchUsers() {
            this.$bus.$emit('updateListData', {isFirst:false, errMag:'', isLoading:true, users:[]})
            axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                response => {
                    console.log('请求成功了')
                    this.$bus.$emit('updateListData', {errMsg:'', isLoading:false, users:response.data.items})
                },
                error => {
                    console.log(error)
                    this.$bus.$emit('updateListData', {errMsg:error, isLoading:false, users:[]})
                }
            )
        }
    }
}
</script>

<style>

</style>

App.vue

<template>
<div class="container">
  <MySearch/>
  <MyList/>
</div>
</template>

<script>
import MyList from "./components/MyList.vue";
import MySearch from "./components/MySearch.vue";
export default {
  name: 'App',
  components: { MySearch,MyList },
}
</script>

<style>
</style>

结果展示

常用的Ajax库

Vue中常见的两个Ajax库

axios：通用的Ajax请求，官方推荐，效率很高
~~vue-resources：vue的插件库，vue1.x使用比较多，但是已经停止使用(不建议使用)~~

axios在刚才的github案例中已经介绍过了，现在介绍一下vue-resource的使用

下载vue-resource库npm install vue-source

全局引入vue-resource组件