vue-resource

基于GitHub搜索案例

App组件

<template>

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


</template>

<script>
    // 法一：assts/css/bootstrap 如此引入，bootstrap中有未被使用的资源，会报错，
    // import './assets/css/bootstrap.css'
    // 法二：在public文件夹中引入静态资源，在index.html中引入
    import Search from './components/Search'
    import List from './components/List'
    export default {
        name:'App',
        components:{Search,List}
    }
</script>

<style>
    
</style>

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

<script>
    import axios from 'axios'
    export default {
        name:'Search',
        data() {
            return {
                keyWord:''
            }
        },
        methods: {
            searchUsers(){
                // 请求前更新List数据
                this.$bus.$emit('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[]})
                axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                    response =>{
                        console.log('请求成功');
                        // 请求成功后更新List数据
                        this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
                    },  
                    error =>{
                        console.log('请求失败',error.message);
                        // 请求失败后更新List数据
                        this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
                    }
                )
            }
        },
    }
</script>

<style>
    
</style>

List组件

<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:[]
                }
            }
        },
        mounted() {
            this.$bus.$on('updateListData',(dataObj)=>{
                // console.log('我是List组件，收到数据',users);
                /* this.isFirst = isFirst
                this.isLoading = isLoading
                this.errMsg = errMsg
                this.users = users */
                // console.log(dataObj);
                // this.info = dataObj
                this.info = {...this.info,...dataObj}
                console.log(this);
            })
        },
    }
</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>

上方Search组件 用axios  

下方利用vue-resource

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

<script>
    export default {
        name:'Search',
        data() {
            return {
                keyWord:''
            }
        },
        methods: {
            searchUsers(){
                // 请求前更新List数据
                this.$bus.$emit('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[]})
                this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                    response =>{
                        console.log('请求成功');
                        // 请求成功后更新List数据
                        this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
                    },  
                    error =>{
                        console.log('请求失败',error.message);
                        // 请求失败后更新List数据
                        this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
                    }
                )
            }
        },
    }
</script>

<style>
    
</style>