Vue--- Vue（Pubsub + Ajax） 数据交互

案例知识点

1. 兄弟组件儿的通信     使用了Pubsub    订阅与发布
2. ajax数据请求    获取前   获取中   获取后   获取为空    获取异常
3. 获取成功后显示数据给到  原先定义号的 jsonData     users

   vue Search案例 消息订阅pubsub与ajax

    pubsub消息订阅组件，便于兄弟组件间调用

   npm install --save pubsub-js

    

    

    

   App.vue

   <template>
       <div id="app">
     <div class="container">
           <Search/>
              <users-main/>
     </div>
   </div>
   </template>
   
   <script>
       import Search from './components/Search.vue'
       import Main from './components/Main.vue'
       export default{
           components:{
               Search,
               // 内部定义的关键词名称 不可以使用 所以赋值一个名字
               UsersMain:Main
   
           }
       };
   </script>
   
   <style type="stylus">
           
   </style>

   Main.vue

   // 由于请求状态在Main中，ajax写在main中以便同步更新4个状态。 写在search中不便更新状态。

   <template>
   <div>
       <!-- 搜索我有四种状态 -->
           <!-- 1.搜索之前 -->
        <h2 v-if="firstView">输入用户名搜索</h2> 
            <!-- 2.搜索中.... -->
        <h2 v-if="loading">GitData...</h2>
            <!-- 4.没有搜索到 -->
        <h2 v-if="overNull">该关键字没有搜索到Data...</h2>
            <!-- 3.搜索失败error -->
        <h2 v-if="errorMsg">{{errorMsg}}</h2>
        <div v-else class="row" v-for="(user,index) in users" :key="index" :index="index">
             <div class="card">
               <a :href="user.url" target="_blank">
                 <img :src="user.avatar_url" style='width: 100px'/>
               </a>
               <p class="card-text">{{user.name}}</p>
             </div>
       </div>
   </div>
   </template>
   
   <script type="text/ecmascript-6">
   import PubSub from 'pubsub-js'
   import axios from 'axios'
       export default{
           data(){
               return {
                   firstView: true,
                   loading:false,
                   overNull:false,
                   errorMsg: '',
                   users:null
                   // [
                   //     {url:'',avatar_url:'',name:''},
                   // ]
   
               }
           },
           mounted(){
               // 是否在此发ajax消息  是点击search后
               // 订阅搜索的消息
               PubSub.subscribe('search',(msg,searchName)=>{
                   const url = `https://api.github.com/search/users?q=${searchName}`
                   // 更新失败(请求中)
                   this.firstView = false
                   this.loading = true
                   this.overNull = false
                   alert('请求中')
                   // 发送ajax请求
                   axios.get(url).then(response=> {
                       // 获取数据 data
                       const result = response.data
                       // data中的items 里面有图片的路径  名称  
                       const users = result.items.map(item=>({
                           url:item.html_url,
                           avatar_url:item.avatar_url,
                           name: item.login
                       }))
                       if(users.length !== 0){
                           console.log(users)
                       }
                       
                       // 成功更新状态(成功)
                       this.loading = false
                       this.users = users
   
                       if(users.length == 0){
                           this.overNull = true
                       }
                       // 失败更新状态(失败)
                   }).catch(error=>{
                       this.loading = false
                       this.errorMsg = '请求失败'
                   })
                       
                   
               })
           }
   
       };
   </script>
   
   <style type="stylus" rel="stylesheet/stylus">
   
   .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.vue

   <template>
       <div>
           <section class="jumbotron">
                 <h3 class="jumbotron-heading">Search Github Users</h3>
                 <div>
                   <input type="text" placeholder="enter the name you search" v-model="searchName"/>
                   <button @click="search">Search</button>
                 </div>
           </section>
       </div>
   </template>
   
   <script type="text/ecmascript-6">
   import PubSub from 'pubsub-js'
       export default{
           data(){
               return {
                   searchName:''
               }
           },
           methods:{
               search(){
                   const searchName = this.searchName.trim()
                   if(searchName){
                       // 发布搜索的消息
                       PubSub.publish('search',searchName)
                   }
               }
           }
   
       };
   </script>
   
   <style type="stylus" rel="stylesheet/stylus">
   
   </style>