Vue基础18之github案例、vue-resource

github案例

静态页面

第三方样式引入（以bootstrap举例）

1. public中创建文件夹css,将样式放入
   

2. 在index.html中使用link引入

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

App.vue

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

<script>
import Search from "@/components/Search";
import List from "@/components/List";
export default {
  name: "App",
  components: {Search, List},
  methods:{

  }
}
</script>

<style lang="less">

</style>

Search.vue

<template>
  <div class="jumbotron bg">
    <h1>Search Github Users</h1>
    <p><input type="text" placeholder="输入你想要搜索的用户名">
      <a class="btn btn-default btn-lg" href="#" role="button">Search</a>
    </p>
  </div>
</template>

<script>
    export default {
        name: "Search"
    }
</script>

<style scoped lang="less">
.bg{
  height: 250px;
  margin: 0 20px;
  padding-left: 50px;
  padding-top: 50px;
  .title{
    font-size: 20px;
  }
  input{
    margin-right: 10px;
  }
}
</style>

List.vue

<template>
<div class="bg">
  <div class="predict" v-show="isShow">welcome to use</div>
  <div class="pro-list">
    <div class="pro-item" v-for="item in content">
      <img src="@/assets/logo.png" alt="">
      <div class="text">122555</div>
    </div>
  </div>
</div>
</template>

<script>
    export default {
        name: "List",
      data(){
          return{
            isShow:false,
            content:["","","","","","","","","",""]
          }
      }
    }
</script>

<style scoped lang="less">
.bg{
  margin: 0 20px;
  font-size: 24px;
  .pro-list{
    display: flex;
    flex-wrap: wrap;
    .pro-item{
      margin: 50px  120px;
      .text{
        text-align: center;
      }
    }
  }

}
</style>

列表展示

接口地址

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

用到的响应值：

1. avatar_url：头像链接
2. html_url：用户详情页
3. login：用户名

使用全局事件总线进行兄弟间组件通信

Search.vue

<template>
  <div class="jumbotron bg">
    <h1>Search Github Users</h1>
    <p>
      <input type="text" placeholder="输入你想要搜索的用户名" v-model="keywords">
      <a class="btn btn-default btn-lg" href="#" role="button" @click="searchUsers">Search</a>
    </p>
  </div>
</template>

<script>
import axios from "axios";
    export default {
        name: "Search",
      data(){
          return{
            keywords:"",
          }
      },
      methods:{
        searchUsers(){
          if(this.keywords.trim()=="") return alert("用户输入的内容不得为空")
          axios.get(`https://api.github.com/search/users?q=`+this.keywords).then(
              response=>{
                // console.log(response.data.items)
                console.log("请求成功了~")
                this.$bus.$emit('getUsersList',response.data.items)
              },
              error=>{
                console.log(error.msg)
              }
          )

        }
      }
    }
</script>

<style scoped lang="less">
.bg{
  height: 250px;
  margin: 0 20px;
  padding-left: 50px;
  padding-top: 50px;
  .title{
    font-size: 20px;
  }
  input{
    margin-right: 10px;
  }
}
</style>

List.vue

<template>
<div class="bg">
  <div class="predict" v-show="!users.length">welcome to use</div>
  <div class="pro-list">
    <div class="pro-item" v-for="user in users" :key="user.login">
      <a :href="user.html_url" class="aitem">
        <img :src="user.avatar_url" alt="">
      </a>
      <div class="text">{{ user.login }}</div>
    </div>
  </div>
</div>
</template>

<script>
    export default {
      name: "List",
      data(){
          return{
            isShow:false,
            users:[],
          }
      },
      mounted() {
        this.$bus.$on('getUsersList',(users)=>{
          this.users=users
        })
      }
    }
</script>

<style scoped lang="less">
.bg{
  margin: 0 20px;
  font-size: 24px;
  .pro-list{
    display: flex;
    flex-wrap: wrap;
    .pro-item{
      margin: 50px  120px;
      .aitem{
        display: inline-block;
        width: 200px;
        height: 200px;
      }
      img{
        width: 200px;
        height: 200px;
      }
      .text{
        text-align: center;
      }
    }
  }

}
</style>

完善案例

List.vue

<template>
<div class="bg">
  <h1 class="predict" v-show="info.isFirst">欢迎使用！</h1>
  <h1 v-show="info.isLoading">加载中...</h1>
  <h1 v-show="info.emsg">错误信息：{{info.emsg}}</h1>
  <div class="pro-list">
    <div class="pro-item" v-for="user in info.users" :key="user.login">
      <a :href="user.html_url" class="aitem">
        <img :src="user.avatar_url" alt="">
      </a>
      <div class="text">{{ user.login }}</div>
    </div>
  </div>
</div>
</template>

<script>
    export default {
      name: "List",
      data(){
          return{
            isShow:false,
            users:[],
            info:{
              isFirst:true,
              isLoading:false,
              emsg:"",
              users:[]
            }
          }
      },
      mounted() {
        this.$bus.$on('updateListData',(dataObj)=>{
          this.info={...this.info,...dataObj}
        })
      }
    }
</script>

<style scoped lang="less">
.bg{
  margin: 0 20px;
  font-size: 24px;
  .pro-list{
    display: flex;
    flex-wrap: wrap;
    .pro-item{
      margin: 50px  120px;
      .aitem{
        display: inline-block;
        width: 200px;
        height: 200px;
      }
      img{
        width: 200px;
        height: 200px;
      }
      .text{
        text-align: center;
      }
    }
  }

}
</style>

Search.vue

<template>
  <div class="jumbotron bg">
    <h1>Search Github Users</h1>
    <p>
      <input type="text" placeholder="输入你想要搜索的用户名" v-model="keywords">
      <a class="btn btn-default btn-lg" href="#" role="button" @click="searchUsers">Search</a>
    </p>
  </div>
</template>

<script>
import axios from "axios";
    export default {
        name: "Search",
      data(){
          return{
            keywords:"",
          }
      },
      methods:{
        searchUsers(){
          if(this.keywords.trim()=="") return alert("用户输入的内容不得为空")
          else{
            this.$bus.$emit("updateListData",{isFirst:false,isLoading:true,emsg:"",users:[]})
            axios.get(`https://api.github.com/search/users?q=${this.keywords}`).then(
                response=>{
                  // console.log(response.data.items)
                  console.log("请求成功了~")
                  this.$bus.$emit('updateListData',{isLoading:false,emsg:"",users:response.data.items})
                },
                error=>{
                  console.log(error.msg)
                  this.$bus.$emit("updateListData",{isLoading:false,emsg:error.message,users:[]})
                }
            )
          }


        }
      }
    }
</script>

<style scoped lang="less">
.bg{
  height: 250px;
  margin: 0 20px;
  padding-left: 50px;
  padding-top: 50px;
  .title{
    font-size: 20px;
  }
  input{
    margin-right: 10px;
  }
}
</style>

补充知识点：{…this.info,…this.dataObj}

{…this.info,…this.dataObj}：通过字面量的形式合并一下对象
以this.dataObj为主，依次替换this.info中的属性的值，但是this.dataObj中没有的数据，还是沿用this.info中的

效果呈现

vue-resource

发送Ajax的5种方式：
1.xhr
2.jQuery
3.axios
4.fetch
5.vue-resource(插件库）对xhr的封装

vue插件库，vue1.x使用广泛，官方已不再维护

安装

npm i vue-resource

引用

main.js

import Vue from 'vue'

import App from './App'
//引入vue-resource插件
import vueresource from 'vue-resource'

Vue.config.productionTip = false
//使用vue-resource插件
Vue.use(vueresource)

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

使用

与axios一致，只需要将axios替换成this.$http就行

this.$http.get(`https://api.github.com/search/users?q=${this.keywords}`).then(
                response=>{
                  // console.log(response.data.items)
                  console.log("请求成功了~")
                  this.$bus.$emit('updateListData',{isLoading:false,emsg:"",users:response.data.items})
                },
                error=>{
                  console.log(error.msg)
                  this.$bus.$emit("updateListData",{isLoading:false,emsg:error.message,users:[]})
                }
            )

Search.vue

<template>
  <div class="jumbotron bg">
    <h1>Search Github Users</h1>
    <p>
      <input type="text" placeholder="输入你想要搜索的用户名" v-model="keywords">
      <a class="btn btn-default btn-lg" href="#" role="button" @click="searchUsers">Search</a>
    </p>
  </div>
</template>

<script>
import axios from "axios";
    export default {
        name: "Search",
      data(){
          return{
            keywords:"",
          }
      },
      methods:{
        searchUsers(){
          if(this.keywords&&this.keywords.trim()=="") return alert("用户输入的内容不得为空")
          else{
            this.$bus.$emit("updateListData",{isFirst:false,isLoading:true,emsg:"",users:[]})
            this.$http.get(`https://api.github.com/search/users?q=${this.keywords}`).then(
                response=>{
                  // console.log(response.data.items)
                  console.log("请求成功了~")
                  this.$bus.$emit('updateListData',{isLoading:false,emsg:"",users:response.data.items})
                },
                error=>{
                  console.log(error.msg)
                  this.$bus.$emit("updateListData",{isLoading:false,emsg:error.message,users:[]})
                }
            )
          }


        }
      }
    }
</script>

<style scoped lang="less">
.bg{
  height: 250px;
  margin: 0 20px;
  padding-left: 50px;
  padding-top: 50px;
  .title{
    font-size: 20px;
  }
  input{
    margin-right: 10px;
  }
}
</style>