《进阶篇第7章》学习vue中的ajax之后，练习vue案例-github用户搜索案例

头像头饰
刘大猫
     黑龙江
    阅读 11 分钟

    在这里插入图片描述
    @[toc]

    概述：该案例是学习完第6章：vue中的ajax之后，进行的练习和总结，相关知识点详情内容，请查看我的上一篇同一专栏文章。

    7.1github接口地址

    https://api.github.com/search/users?q=xxx
    这是github维护的一个简单测试接口，其中xxx输入什么内容，github接口就会返回相关的数据。

    7.2案例代码

    <font color='red'>注意点1：</font>

    问题：这次如何划分组件？

    在这里插入图片描述
    <font color='red'>答案：</font>这次只划分2个组件，上方的search.vue，下方的List.vue

    <font color='red'>注意点2：</font>axios的get请求url拼接参数有2种方式

    方式1：字符串+拼接
    axios.get(`https://api.github.com/search/users?q=` + this.keyWord).then()
    方式2：采用ES6语法，地址字符串采用单引号’’，同时使用${}
    axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then()

    <font color='red'>注意点3：</font>优化页面效果，初始化显示展示欢迎词，点击按钮调接口时显示加载中...，如果调用报错显示错误信息提示，因此定义4个属性来控制：isFirst、isLoading、errMsg、users，
    初始化时：isFirst:true, isLoading:false, errMsg:'', users:[]
    请求前更新List的数据：isFirst:false, isLoading:true, errMsg:'', users:[]
    请求成功后更新List的数据：isLoading:false, errMsg:'', users:response.data.items
    请求失败后更新List的数据：isLoading:false, errMsg:error.message, users:[]
    <font color='red'>请求失败后 users必须制空，不然页面还是会显示上次成功请求的数据</font>

    <font color='red'>注意点4：</font>
    全局事件总线传多个参数方式有以下几种
    <font color='red'>方式1：</font>如下直接传多个参数，缺点1：不优雅不直观，不写注释压根不知道传过去的true、false、’’、[]啥意思；缺点2：接收方必须按照索引顺序才能获取参数。

    this.$bus.$emit('updateListData', true, false, '', [])

    <font color='red'>方式2：</font>传过去的参数封装成json对象方式，
    <font color='red'>传递方</font>

    this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})

    <font color='red'>接收方，方式1通过this.属性挨个赋值</font>，缺点：我有100个属性赋值100行？不现实

    data() {
    return {
        info:{
            isFirst:true,
            isLoading:false,
            errMsg:'',
            users:[]
        }
    }
},
mounted() {
    this.$bus.$on('updateListData',(dataObj)=>{
             this.info.isFirst = dataObj.isFirst;
             this.info.isLoading = dataObj.isLoading;
             this.info.errMsg = dataObj.errMsg;
             this.info.users = dataObj.users;
    })
},

    <font color='red'>接收方，方式2通过整个对象赋值</font>，缺点：会丢属性值，data函数有4个属性，而我传递的dataObj只有3个属性，那么最后控制台会整个替换从而丢一个属性

    data() {
    return {
        info:{
            isFirst:true,
            isLoading:false,
            errMsg:'',
            users:[]
        }
    }
},
mounted() {
    this.$bus.$on('updateListData',(dataObj)=>{
              this.info= dataObj;          
    })
},

    <font color='red'>接收方，方式3通过ES6语法实现局部更新，语法：{...原数据,...接收数据}</font>，dataObj没有的属性用data() 原有的，dataObj包含的属性采用dataObj传递过来的值，另一个好处传递方不按属性顺序传值也能接收。
    <font color='red'>传递方</font>，比如data()中isFirst为第一个属性，而我传递时放在了{}的最后也有效

    this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})

    <font color='red'>接收方</font>

    data() {
    return {
        info:{
            isFirst:true,
            isLoading:false,
            errMsg:'',
            users:[]
        }
    }
},
mounted() {
    this.$bus.$on('updateListData',(dataObj)=>{
             this.info = {...this.info,...dataObj}       
    })
},

    <font color='red'>注意点5：</font>

    问题：注意点3中接收方，方式2通过整个对象赋值方式，我可以把dataObj直接复制给this._data中吗？

    <font color='red'>答案</font>：不能，如果赋值给this._data就破坏数据结构了，因为直接赋值方式不会让vue动态代理给_data中设置get和set方法。

    完整代码

    项目结构

    在这里插入图片描述

    main.js
    //引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    },
})
    App.vue
    <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.vue
    <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',{isLoading:true,errMsg:'',users:[],isFirst:false})
        //axios的get请求url拼接参数方式1：字符串+拼接
                axios.get(`https://api.github.com/search/users?q=` + this.keyWord).then(
                //axios的get请求url拼接参数方式2：采用ES6语法，地址字符串采用单引号’’，同时使用${}
        // 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 => {
                        //请求失败后更新List的数据
                        this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
                    }
                )
            }
        },
    }
</script>
    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:[]
                }
            }
        },
        mounted() {
            this.$bus.$on('updateListData',(dataObj)=>{
        //接收方，方式1通过this.属性挨个赋值,缺点：我有100个属性赋值100行？
        // this.info.isFirst = dataObj.isFirst;
        // this.info.isLoading = dataObj.isLoading;
        // this.info.errMsg = dataObj.errMsg;
        // this.info.users = dataObj.users;

        //接收方，方式2通过整个对象赋值,缺点：会丢属性值
        // this.info = dataObj;

        //接收方，方式3采用ES6语法，局部更新
                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>
    结果展示：

    在这里插入图片描述

    7.3把github用户搜索案例使用axios方式改为使用vue-resource方式

    改变地方

    main.js
    //引入插件
import vueResource from 'vue-resource'
//使用插件
Vue.use(vueResource)
    Search.vue
    旧代码:
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()

    完整代码

    main.js
    //引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//引入插件
import vueResource from 'vue-resource'
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    },
})
    App.vue
    <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.vue
    <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',{isLoading:true,errMsg:'',users:[],isFirst:false})
        this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
        //axios的get请求url拼接参数方式1：字符串+拼接
                //axios.get(`https://api.github.com/search/users?q=` + this.keyWord).then(
                //axios的get请求url拼接参数方式2：采用ES6语法，地址字符串采用单引号’’，同时使用${}
        // 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 => {
                        //请求失败后更新List的数据
                        this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
                    }
                )
            }
        },
    }
</script>
    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:[]
                }
            }
        },
        mounted() {
            this.$bus.$on('updateListData',(dataObj)=>{
        //接收方，方式1通过this.属性挨个赋值,缺点：我有100个属性赋值100行？
        // this.info.isFirst = dataObj.isFirst;
        // this.info.isLoading = dataObj.isLoading;
        // this.info.errMsg = dataObj.errMsg;
        // this.info.users = dataObj.users;

        //接收方，方式2通过整个对象赋值,缺点：会丢属性值
        // this.info = dataObj;

        //接收方，方式3采用ES6语法，局部更新
                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>
    前端vue.jsvuexvue2
    刘大猫
    6 声望1 粉丝

    如果有天突然发现路的尽头还是路的话，希望你还没错过太多沿路的风景和眼前珍惜的人。

    « 上一篇
    《进阶篇第8章：vuex》包括理解vuex、安装vuex、搭建vuex环境、四个map方法的使用、模块化+名命空间
    下一篇 »
    《进阶篇第6章：vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource

    引用和评论

    推荐阅读
    头像
    《docker高级篇（大厂进阶）：2.DockerFile解析》包括：是什么、DockerFile构建过程解析

    刘大猫

    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.6k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    Javascript(turfjs)等值线图绘制

    舍瓦温赞 15阅读 22.5k评论 18

    0 条评论
    得票最新