• 2022/05/31 Github案例

    Github案例

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

    静态页面

    image-20220527213658404

    静态页面分为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=' 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;
   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=' 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;
   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组件

      main.js

      import Vue from 'vue'
import App from './App.vue'
import vueResource from 'vue-resource'

Vue.config.productionTip = false

Vue.use(vueResource)

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

    • MySearch.vue

      请求的地方从axios.get改成this.$http.get

    // axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
    this.$http.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:[]})
    }
)

  • 相关阅读:
    anaconda的一些命令
    ffmpeg播放RTSP的一点优化
    CUDA JPEG编码
    获取CPU和内存的使用率
    《OpenCL编程指南》之 与Direct3D互操作
    OpenGL全景视频
    win32调用系统颜色对话框
    [转]RGB数据保存为BMP图片
    NVML查询显卡信息
    ffmpeg nvenc编码
  • 原文地址：https://www.cnblogs.com/jiangblog/p/16328976.html
Copyright © 2020-2023  润新知