Vue?github用戶搜索案例分享
更新時間：2022年04月15日 10:59:39 作者：Errol_King
這篇文章主要介紹了Vue?github用戶搜索案例分享，文章基于Vue的相關(guān)資料展開對主題的詳細(xì)介紹，具有一定的參考價值，需要的小伙伴可以參考一下
完成樣式
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 中引入并注冊組件
<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>請求數(shù)據(jù)
1、Search 中請求數(shù)據(jù)
我們使用接口：https://api.github.com/search/users?q=xxx
請求上邊的接口，傳入關(guān)鍵字，用 axios 請求，返回數(shù)據(jù)如下：
我們關(guān)注以下數(shù)據(jù)即可
2、傳遞數(shù)據(jù)
我們在子組件 Search.vue 中寫網(wǎng)絡(luò)請求得到數(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ò)請求數(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("請求成功了",response.data.items);
? ? ? ? ? ? this.$bus.$emit("getUsers",response.data.items)
? ? ? ? ? },
? ? ? ? ? error=>{
? ? ? ? ? ? console.log("請求失敗了",error.message);
? ? ? ? ? }
? ? ? )
? ? }
? }
}
</script>運(yùn)行程序，搜索 test ，結(jié)果如下：
完善
- 1、當(dāng)一進(jìn)頁面需要展示歡迎語
- 2、搜索過程中展示loading
- 3、搜索結(jié)束展示用戶列表
- 4、搜索返回錯誤展示錯誤信息
在 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>
? ? <!--展示錯誤信息-->
? ? <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第二次沒有傳，this.info = dataObj 這樣寫會丟失isFirst
? ? ? //ES6語法，這樣寫dataObj更新this.info中數(shù)據(jù)，dataObj沒有的以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(){
? ? ? //請求前更新 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("請求成功了",response.data.items);
? ? ? ? ? ? //請求成功后更新 List 數(shù)據(jù)
? ? ? ? ? ? this.$bus.$emit("updateListData",{isLoading:false,errMsg:'',users:response.data.items})
? ? ? ? ? },
? ? ? ? ? error=>{
? ? ? ? ? ? console.log("請求失敗了",error.message);
? ? ? ? ? ? //請求失敗更新 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)容請搜索腳本之家以前的文章或繼續(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開發(fā)github小程序總結(jié)
- vue項(xiàng)目實(shí)現(xiàn)github在線預(yù)覽功能
- Vue?github用戶搜索案例分享
相關(guān)文章
vue2.0開發(fā)實(shí)踐總結(jié)之疑難篇
這篇文章主要為大家總結(jié)了vue2.0開發(fā)實(shí)踐的疑難,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要給大家介紹了關(guān)于Vue 2中ref屬性的使用方法及注意事項(xiàng)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-06-06
echarts實(shí)現(xiàn)獲取datazoom的起始值(包括x軸和y軸)
這篇文章主要介紹了echarts實(shí)現(xiàn)獲取datazoom的起始值(包括x軸和y軸)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
部屬vue項(xiàng)目,訪問路徑設(shè)置非根,顯示白屏的解決方案
這篇文章主要介紹了部屬vue項(xiàng)目,訪問路徑設(shè)置非根,顯示白屏的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue中ElementUI結(jié)合transform使用時彈框定位不準(zhǔn)確問題解析
在近期開發(fā)中,需要將1920*1080放到更大像素大屏上演示,所以需要使用到transform來對頁面進(jìn)行縮放,但是此時發(fā)現(xiàn)彈框定位出錯問題,無法準(zhǔn)備定位到實(shí)際位置,本文給大家分享Vue中ElementUI結(jié)合transform使用時彈框定位不準(zhǔn)確解決方法,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了推薦VSCode 上特別好用的 Vue 插件之vetur，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue3中element-plus全局使用Icon圖標(biāo)的過程詳解
我們在用vue開發(fā)網(wǎng)站的時候,往往圖標(biāo)是起著很重要的作,這篇文章主要給大家介紹了關(guān)于Vue3中element-plus全局使用Icon圖標(biāo)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
vite+vue3搭建的工程實(shí)現(xiàn)批量導(dǎo)入store的module
這篇文章主要介紹了vite+vue3搭建的工程實(shí)現(xiàn)批量導(dǎo)入store的module方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue ssr+koa2構(gòu)建服務(wù)端渲染的示例代碼
這篇文章主要介紹了vue ssr+koa2構(gòu)建服務(wù)端渲染的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了vue 動態(tài)表單開發(fā)方法,結(jié)合具體案例形式詳細(xì)分析了vue.js動態(tài)表單相關(guān)原理、開發(fā)步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-12-12