55GitHub案例_搜索用户并过渡显示

GitHub案例_搜索用户并过渡显示

用户接口地址

• https://api.github.com/search/users?q=xXxe

实现搜索用户并过渡显示

main.js

import Vue from 'vue';
import App from './App';

Vue.config.productionTip = false;

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

App

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

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

Search

<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="getGithubUsers">Search</button>
        </div>
    </section>
</template>
<script>
    import axios from 'axios';
    export default{
        name:'Search',
        data(){
            return{
                keyword:'',
            }
        },
        methods:{
            getGithubUsers(){
                if (!this.keyword.trim()) {
                    alert('搜索不能为空！');
                    return
                }
                let URL = `https://api.github.com/search/users?q=${this.keyword}`;
                let infoObj = {
                    'isFirst': true,
                    'isLoading': false,
                    'errMsg':'',
                    'users': [],
                }
                
                // 请求前改变为loading...
                infoObj.isFirst = false;
                infoObj.isLoading = true;
                this.$bus.$emit('getUsers',infoObj);
                
                axios.get(URL).then(
                    response => {
                        infoObj.isLoading = false;
                        infoObj.users = response.data.items;
                        this.$bus.$emit('getUsers',infoObj)
                    },
                    error => {
                        infoObj.users = [];
                        infoObj.errMsg=error.message;
                        this.$bus.$emit('getUsers',infoObj)
                    }
                )
            },
        },
    }
</script>

List

<template>
    <div class="row">
        <div v-show="info.users" class="card" v-for="user in info.users" :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>
        <div v-show="info.isFirst">Welcome!</div>
        <div v-show="info.isLoading">loading...</div>
        <div v-show="info.errMsg">{{info.errMsg}}</div>
    </div>
</template>

<script>
    export default {
        name:'List',
        data(){
            return {
                info:{
                    isFirst: true,
                    isLoading: false,
                    errMsg:'',
                    users: [],
                },
            }
        },
        mounted(){
            this.$bus.$on('getUsers',(infoObj) => this.info = infoObj)
        }
    }
</script>
    
<style>
    .album {
        min-height: 50rem; 
        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>