Vue?github用戶搜索案例分享
更新時(shí)間：2022年04月15日 10:59:39 作者：Errol_King
這篇文章主要介紹了Vue?github用戶搜索案例分享，文章基于Vue的相關(guān)資料展開(kāi)對(duì)主題的詳細(xì)介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
完成樣式
1、public 下新建 css 文件夾
public 下新建 css 文件夾，放入下載好的 bootstrap.css，并在 index.html 中引入
2、新建 Search.vue
<template>
? <section class="jumbotron">
? ? <h3 class="jumbotron-heading">Search Github Users</h3>
? ? <div>
? ? ? <input type="text" placeholder="enter the name you search"/> <button>Search</button>
? ? </div>
? </section>
</template>
<script>
export default {
? name: "Search"
}
</script>3、新建 List.vue
<template>
? <div class="row">
? ? <div class="card">
? ? ? <a href="" target=" rel="external nofollow" _blank">
? ? ? ? <img src="https://cn.vuejs.org/images/logo.svg" style="width: 100%"/>
? ? ? </a>
? ? </div>
? </div>
</template>
<script>
export default {
? name: "List"
}
</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>4、App.vue 中引入并注冊(cè)組件
<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>請(qǐng)求數(shù)據(jù)
1、Search 中請(qǐng)求數(shù)據(jù)
我們使用接口：https://api.github.com/search/users?q=xxx
請(qǐng)求上邊的接口，傳入關(guān)鍵字，用 axios 請(qǐng)求，返回?cái)?shù)據(jù)如下：
我們關(guān)注以下數(shù)據(jù)即可
2、傳遞數(shù)據(jù)
我們?cè)谧咏M件 Search.vue 中寫(xiě)網(wǎng)絡(luò)請(qǐng)求得到數(shù)據(jù)，需要在子組件 List 中展示，組件之間傳遞數(shù)據(jù)，這就用到了我們之前學(xué)的全局事件總線，確保 main.js 中安裝了全局事件總線
List 中需要數(shù)據(jù)，我們就需要綁定事件，當(dāng) Search 得到數(shù)據(jù)觸發(fā)事件后，List 回調(diào)就拿到了數(shù)據(jù)，然后循環(huán)遍歷即可，
<template>
? <div class="row">
? ? <div class="card" v-for="user in users" :key="user.login">
? ? ? <a :href="user.html_url" rel="external nofollow" rel="external nofollow" target="_blank">
? ? ? ? <img :src="user.avatar_url" style="width: 100%"/>
? ? ? </a>
? ? ? <p class="card-text">{{user.login}}</p>
? ? </div>
? </div>
</template>
<script>
export default {
? name: "List",
? data(){
? ? return{
? ? ? users:[]
? ? }
? },
? mounted() {
? ? this.$bus.$on("getUsers",(users)=>{
? ? ? console.log("我是List組件，收到數(shù)據(jù)："+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>
Search.vue 中網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)后，觸發(fā)事件
<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"/>
? ? ? <button @click="searchUsers">Search</button>
? ? </div>
? </section>
</template>
<script>
import axios from 'axios'
export default {
? name: "Search",
? data(){
? ? return{
? ? ? keyword:''
? ? }
? },
? methods:{
? ? searchUsers(){
? ? ? axios.get(`https://api.github.com/search/users?q=${this.keyword}`).then(
? ? ? ? ? response =>{
? ? ? ? ? ? console.log("請(qǐng)求成功了",response.data.items);
? ? ? ? ? ? this.$bus.$emit("getUsers",response.data.items)
? ? ? ? ? },
? ? ? ? ? error=>{
? ? ? ? ? ? console.log("請(qǐng)求失敗了",error.message);
? ? ? ? ? }
? ? ? )
? ? }
? }
}
</script>運(yùn)行程序，搜索 test ，結(jié)果如下：
完善
- 1、當(dāng)一進(jìn)頁(yè)面需要展示歡迎語(yǔ)
- 2、搜索過(guò)程中展示loading
- 3、搜索結(jié)束展示用戶列表
- 4、搜索返回錯(cuò)誤展示錯(cuò)誤信息
在 List 中增加變量表示這些狀態(tài)
<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" rel="external nofollow" rel="external nofollow" target="_blank">
? ? ? ? <img :src="user.avatar_url" style="width: 100%"/>
? ? ? </a>
? ? ? <p class="card-text">{{ user.login }}</p>
? ? </div>
? ? <!--展示歡迎詞-->
? ? <h1 v-show="info.isFirst">歡迎使用</h1>
? ? <!--展示loading-->
? ? <h1 v-show="info.isLoading">加載中...</h1>
? ? <!--展示錯(cuò)誤信息-->
? ? <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組件，收到數(shù)據(jù)：" + dataObj);
? ? ? //因?yàn)镾earch中isFirst第二次沒(méi)有傳，this.info = dataObj 這樣寫(xiě)會(huì)丟失isFirst
? ? ? //ES6語(yǔ)法，這樣寫(xiě)dataObj更新this.info中數(shù)據(jù)，dataObj沒(méi)有的以this.info中為準(zhǔn)
? ? ? 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>Search.vue 中改變這些狀態(tài)
<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"/>
? ? ? <button @click="searchUsers">Search</button>
? ? </div>
? </section>
</template>
<script>
import axios from 'axios'
export default {
? name: "Search",
? data(){
? ? return{
? ? ? keyword:''
? ? }
? },
? methods:{
? ? searchUsers(){
? ? ? //請(qǐng)求前更新 List 數(shù)據(jù)
? ? ? 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("請(qǐng)求成功了",response.data.items);
? ? ? ? ? ? //請(qǐng)求成功后更新 List 數(shù)據(jù)
? ? ? ? ? ? this.$bus.$emit("updateListData",{isLoading:false,errMsg:'',users:response.data.items})
? ? ? ? ? },
? ? ? ? ? error=>{
? ? ? ? ? ? console.log("請(qǐng)求失敗了",error.message);
? ? ? ? ? ? //請(qǐng)求失敗更新 List 數(shù)據(jù)
? ? ? ? ? ? this.$bus.$emit("updateListData",{isLoading:false,errMsg:error.message,users:[]})
? ? ? ? ? }
? ? ? )
? ? }
? }
}
</script>運(yùn)行程序：
使用 vue-resource
- 1、執(zhí)行npm i vue-resource安裝
- 2、main.js 引入并使用
...... //引入vue-resource import vueResource from 'vue-resource' ...... //使用vue-resource插件 Vue.use(vueResource) ......
我們可以不引入 axios，axios.get 改為 this.$http.get 即可
這里只是了解使用 vue-resource，還是推薦使用 axios
到此這篇關(guān)于Vue github用戶搜索案例分享的文章就介紹到這了,更多相關(guān)Vue github用戶搜索內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- vue實(shí)現(xiàn)GitHub的第三方授權(quán)方法示例
- vue項(xiàng)目打包后上傳至GitHub并實(shí)現(xiàn)github-pages的預(yù)覽
- vue項(xiàng)目打包上傳github并制作預(yù)覽鏈接（pages）
- vue cli 3.x 項(xiàng)目部署到 github pages的方法
- vue項(xiàng)目上傳Github預(yù)覽的實(shí)現(xiàn)示例
- 詳解使用mpvue開(kāi)發(fā)github小程序總結(jié)
- vue項(xiàng)目實(shí)現(xiàn)github在線預(yù)覽功能
- Vue?github用戶搜索案例分享
相關(guān)文章
vue使用swiper的時(shí)候第二輪事件不會(huì)觸發(fā)問(wèn)題
這篇文章主要介紹了vue使用swiper的時(shí)候第二輪事件不會(huì)觸發(fā)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
跨域是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本,它是由瀏覽器的同源策略造成的,是瀏覽器對(duì)JavaScript實(shí)施的安全限制,下面這篇文章主要給大家介紹了關(guān)于Vite代理如何解決跨域問(wèn)題的相關(guān)資料,需要的朋友可以參考下2023-03-03
Vue3?$emit用法指南(含選項(xiàng)API、組合API及?setup?語(yǔ)法糖)
這篇文章主要介紹了Vue3?$emit用法指南,使用?emit，我們可以觸發(fā)事件并將數(shù)據(jù)傳遞到組件的層次結(jié)構(gòu)中，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了如何使用RoughViz可視化Vue.js中的草繪圖表，幫助大家更好的理解和使用roughViz，感興趣的朋友可以了解下2021-01-01
vue3中vite.config.js相關(guān)常用配置超詳細(xì)講解
在Vue3項(xiàng)目中vite.config.js文件是Vite構(gòu)建工具的配置文件,它用于定義項(xiàng)目的構(gòu)建和開(kāi)發(fā)選項(xiàng),這篇文章主要介紹了vue3中vite.config.js相關(guān)常用配置的相關(guān)資料,需要的朋友可以參考下2025-04-04
本文主要介紹了淺談Vue灰度發(fā)布新功能的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue如何添加數(shù)組頁(yè)面及時(shí)顯示，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue打包后訪問(wèn)靜態(tài)資源路徑問(wèn)題
在本篇文章里小編給各位整理的是關(guān)于Vue打包后訪問(wèn)靜態(tài)資源路徑問(wèn)題相關(guān)知識(shí)點(diǎn)，需要的朋友們學(xué)習(xí)下。2019-11-11
Vue結(jié)合原生js實(shí)現(xiàn)自定義組件自動(dòng)生成示例
這篇文章主要介紹了Vue結(jié)合原生js實(shí)現(xiàn)自定義組件自動(dòng)生成示例,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
關(guān)于vue設(shè)置環(huán)境變量全流程
這篇文章主要介紹了關(guān)于vue設(shè)置環(huán)境變量全流程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03