笔记

单纯使用github.com获取用户信息，目前已经失效(数据为0)，效果:

099_github案例_列表展示 - 图1

根据网上资料，可能需要添加认证头（个人访问令牌）。

重要源码

public\index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">

    <!-- 真对IE浏览器的特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面。 实际上，加上这句话也解决不了实质问题 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <!-- 配置页签的图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

    <!-- 098 引入第三方样式 -->
     <link ref="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">

    <!-- 配置网页的标题 
    实际取的是 package.json 文件中的 name属性值。 
    这里是webpack插件完成的一个功能。
    -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>

  <body>
    <!-- 如果浏览器不支持js，那么就会提示下面的内容：-->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>

    <!-- 准备一个容器 ★★★-->
    <div id="app"></div>

    <!-- built files will be auto injected -->
  </body>
</html>

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),

    //099
    //第0步:安装 全局事件总线
    beforeCreate(){
        Vue.prototype.$bus = this
    }
})

App.vue

<template>
    <!-- 来源 04_静态页面\2_users_page\index.html -->
    <div class="container">

        <Search></Search>

        <List></List>
    </div>
</template>

<script>
    //1. 引入组件
    import Search from './components/Search.vue'
    import List from    './components/List.vue'

    //引入 axios
    //import axios from 'axios'

    //引入 样式
    //通过 import 引入，脚手架会做严格的检查。只要发现不存在资源，就会提示错误。
    //    例如： 
    //        提示错误: Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.svg'
    //该文件大概会用到 8种字体。 如果暂时用不到，不建议这种引入。
    //import './assets/css/bootstrap.css'
    //建议：将第三方样式放到 public\index.html引入， 同时将第三方样式放到 public

    export default {
        //2. 注册组件
          components: { Search, List },
        name:'App'
        }
    }
</script>


<style>

</style>

components\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:'SearchVue',

        data(){
            return {
                keyWord:''
            }
        },

        methods: {
            searchUsers(){
                //注意： 为了让 ${this.keyWord} 起作用, 必须使用反引号 `，不能使用 单引号。
                //      反引号 `（模板字符串）：支持通过 ${变量}插入动态值
                //      模板字符串。如果想把 this.keyWord 像模板一样解析，需要包裹 $(this.keyWord)
                //      地址里面带?参数，表示get请求的query参数。
                //      虽然该接口是免费的，但是不要请求太频繁，否则可能被认为你正在攻击github服务器而被屏蔽。
                let strUrl = `https://api.github.com/search/users?q=${this.keyWord}`
                console.log(strUrl)

                axios.get(strUrl).then( //两个回调:成功+失败
                    response => {
                        console.log('请求成功了', response.data.items)

                        //099
                        this.$bus.$emit('getUsers', response.data.items)
                    },
                    error => {
                        console.log('请求失败了', error.message)
                    }

                )

            }
        },
    }
</script>

<style>

</style>

components\List.vue

<template>
    <!-- list区 -->
    <div class="row">
        <!-- 同一个网站上不允许有相同用户名 -->
        <div class="card" v-for="user in 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>

    </div>  
</template>

<script>
    export default {
        name:'ListVue',

        //099
        data(){
            return{
                //本例用户数据来源: 
                //  github.com 提供的免费get请求接口 https://api.github.com/search/users?q=xxx
                users:[] //值为数组
            }
        },

        mounted(){
            //099
            //第1步:全局事件总线绑定
            this.$bus.$on('getUsers',(users)=>{
                console.log('我是List组件，收到数据:', users)

                this.users = users
            })
        },
    }
</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>

本例用户列表展示的3个信息，关系如下图所示：

099_github案例_列表展示 - 图2