GitHub案列——用户列表展示

落日映苍穹つ 2024-04-06 10:04 61阅读 0赞

**目录**

一、怎么引入第三方库中的样式？

二、代码

main.js

App.vue

Search.vue

List.vue

页面效果

--------------------

## 一、怎么引入第三方库中的样式？ ##

注意！！！一定要把第三方的css文件放入到public文件夹下，在index页面中引入

另外！！！App.vue文件中不用import！！！

![afabaf1ee0994232a8b23b645f03bb40.png][]

## 二、代码 ##

avatar\_url 是头像地址 html\_url是用户主业 login是登录名

![12f0fee33d294e8bb7c47f84f7221a03.png][]

### main.js ###

// 该文件是整个项目的入口文件
    
    // 引入vue，这个vue不能解析template配置项
    import Vue from 'vue'
    // 下面这个是引入完整版的vue。这个vue能解析template配置项
    // import Vue from 'vue/dis/vue'
    
    // 引入APP组件，它是所有组件的父组件
    import App from './App.vue'
    
    
    
    // 关闭vue的生产提示
    Vue.config.productionTip = false
    
    // 创建vue实例对象---vm
    new Vue({
      el:'#app',
      render: h => h(App),
    
      // 全局事件总线
      beforeCreate(){
        Vue.prototype.$bus = this
      }
    })

###  ###

### App.vue ###

<template>
    
      <div class="container">
    
        <Search></Search>
    
        <List></List>
    
      </div>
    
    </template>
    
    
    <script>
        
        import Search from './components/Search.vue';
        import List from './components/List.vue';
    
        export default{
            name: "App",
            components: { 
                Search, List 
            }
        }
    </script>

###  ###

### Search.vue ###

<template>
        <section class="jumbotron">
    
          <h3 class="jumbotron-heading">Search Github Users</h3>
          
          <div>
            <input type="text" v-model="keyWord" placeholder="enter the name you search"/> 
            <button @click="serachUsers">Search</button>
          </div>
    
        </section>
    
    </template>
    
    <script>
        import axios from 'axios'
    
        export default{
            name:'Search',
            data(){
                return{
                    keyWord:''
                }
            },
            methods:{
                serachUsers(){
                    this.$bus.$emit('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[]})
                 
                    // ${this.keyWord} 这是es6中的模板字符串，这样才能解析出我们的keyWord
                    axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                        response =>{
                            console.log("请求成功了",response.data.items)
                        //  请求成功了以后
                        // isFirst:false 在这个地方留着也行不留也行
                        this.$bus.$emit('updateListData',{isFirst:false,isLoading:false,errMsg:'',users:response.data.items})
                            
                        },
                        error    =>{
                            console.log("请求失败了",error.message)
                            // users:[]这个地方用户一定要清空，否则残留的就是上一次的用户
                            this.$bus.$emit('updateListData',{isFirst:false,isLoading:false,errMsg:error.message,users:[]})
                        }
                    )
                }
            }
        }
    </script>
    
    
    
    <style scoped>
       /* 用的都是bootstrap中自带的 */
    </style>

### List.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:'List',
            data(){
                return{
                    info:{
                    // 是否是初次展示  刚打开页面肯定是初次展示
                    isFirst:true,
                    // 是否正在加载    
                    isLoading:false,
                    // 错误信息
                    errMsg:'',
                    // 用户
                    users:[]
                    },
    
                }
            },
            // 全局事件总线 此处是接收数据   dataObj收到传过来的对象执行回调函数
            mounted(){
                this.$bus.$on('updateListData',(dataObj)=>{
                 console.log('我是List组件收到了数据',dataObj)
                //  但是这样的话可能会丢失数据，如果传过来两个数据，我们上面是四个数据，这样就丢失了连个数据
                //   this.info=dataObj
                // 通过字面量的形式合并一下对象
                this.info={...this.info,...dataObj}
                // 这个地方就是把info中的属性摊在这里  dataObj的属性也瘫在这里
                // 同名的属性以后面 dataObj为主，如果dataObj中不存在的，就以info为主
                })
            }
        }
    
    </script>
    
    
    
    <style  scoped>

###  ###

### 页面效果 ###

![38e508cfa27340c49e79b57340e07069.png][]

![acaf3fbd4c254ea68c32e26d5a5b7803.png][]

下面的这些用户都是可以点开的![b65ce7f386c24ba58464106d3abf1d42.png][]

[afabaf1ee0994232a8b23b645f03bb40.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/c721ecf4a75841898a9e4d51bd83c5e6.png
[12f0fee33d294e8bb7c47f84f7221a03.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/90eac54335f141ecacd36b49acae8699.png
[38e508cfa27340c49e79b57340e07069.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/104f3baa63f547ba8a32a8b2c823511f.png
[acaf3fbd4c254ea68c32e26d5a5b7803.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/459df989544a45c59992900bf80fbc19.png
[b65ce7f386c24ba58464106d3abf1d42.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/23806c5d36a34ef6ad7726ea48edf7a5.png