vue--day63--github搜索案例
1.main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
beforeCreate(){
Vue.prototype.$bus=this
}
}).$mount('#app')
2. App.vue
<template>
<div id="app">
<div class="container">
<Search></Search>
<List></List>
</div>
</div>
</template>
<script>
import Search from './components/Search.vue';
import List from './components/List.vue';
export default {
name: 'App',
components:{
Search,
List
}
}
</script>
<style>
.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. 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"
/> <button @click="searchUsers">Search</button>
</div>
</section>
</template>
<!-- https://api.github.com/search/users?q=xxx -->
<script>
import axios from 'axios'
export default {
name: 'Search',
data(){
return{
keyWord:''
}
},
methods:{
searchUsers(){
// 请求开始前初始化数据
this.$bus.$emit('updateUsers', {
// 进行请求了，取消欢迎词
isFirst: false,
// 请求开始，进入加载状态
isLoading: true,
// 无报错信息
errorMsg: '',
// 请求开始前，用户数据为空
users: []
})
axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
response => {
console.log('请求成功')
// 触发全局事件总线事件 传递数据
// this.$bus.$emit('updateUsers', response.data.items)
// 请求成功传递数据
this.$bus.$emit('updateUsers', {
// 原先是否第一次加载页面状态已经修改不用再次传递修改
// 请求结束
isLoading: false,
// 无报错信息
errorMsg: '',
// 用户数据
users: response.data.items
})
},
error => {
console.log('请求失败', error)
// 请求失败传递数据
this.$bus.$emit('updateUsers', {
// 原先是否第一次加载页面状态已经修改不用再次传递修改
// 请求结束
isLoading: false,
// 报错信息
errorMsg: error,
// 请求失败用户数据为空
users: []
})
}
)
}
}
}
</script>
<style scoped>
</style>
4. List.vue
<template>
<div class="row">
<div class="card" v-show="info.users" v-for="user in info.users" :key="user.id">
<a :href="user.html_url" target="_blank">
<img
:src="user.avatar_url"
style="width: 100px"
/>
</a>
<p class="card-text">{{ user.login }}</p>
</div>
<h1 v-show="info.isFirst">welcome to user</h1>
<h1 v-show="info.isLoading">loading...</h1>
<!-- 错误信息 -->
<h1 v-show="info.errorMsg">{{info.errorMsg}}</h1>
<!-- <div class="card">
<a href="https://github.com/xxxxxx" target="_blank">
<img
src="../assets/logo.png"
style="width: 100px"
/>
</a>
<p class="card-text">xxxxxx</p>
</div>
<div class="card">
<a href="https://github.com/xxxxxx" target="_blank">
<img
src="../assets/logo.png"
style="width: 100px"
/>
</a>
<p class="card-text">xxxxxx</p>
</div>
<div class="card">
<a href="https://github.com/xxxxxx" target="_blank">
<img
src="../assets/logo.png"
style="width: 100px"
/>
</a>
<p class="card-text">xxxxxx</p>
</div>
<div class="card">
<a href="https://github.com/xxxxxx" target="_blank">
<img
src="../assets/logo.png"
style="width: 100px"
/>
</a>
<p class="card-text">xxxxxx</p>
</div> -->
</div>
</template>
<script>
export default {
name: 'List',
data(){
return{
info:{
// 是否第一次加载页面
isFirst: true,
// 是否加载数据
isLoading: false,
// 错误信息
errorMsg: '',
// 用户信息
users: []
}
}
},
mounted(){
this.$bus.$on('updateUsers',(dataObj)=>{
//console.log('List组件收到了数据',users)
// this.users = users
// dataObj中有的属性会覆盖this.info中相同的属性
// 没有则this.info保持原值
this.info = {...this.info, ...dataObj}
})
}
}
</script>
<style scoped>
</style>
6. 静态页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<link rel="stylesheet" href="./bootstrap.css" />
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div id="app">
<div class="container">
<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>
<div class="row">
<div class="card">
<a href="https://github.com/xxxxxx" target="_blank">
<img
src="https://cn.vuejs.org/images/logo.svg"
style="width: 100px"
/>
</a>
<p class="card-text">xxxxxx</p>
</div>
<div class="card">
<a href="https://github.com/xxxxxx" target="_blank">
<img
src="https://cn.vuejs.org/images/logo.svg"
style="width: 100px"
/>
</a>
<p class="card-text">xxxxxx</p>
</div>
<div class="card">
<a href="https://github.com/xxxxxx" target="_blank">
<img
src="https://cn.vuejs.org/images/logo.svg"
style="width: 100px"
/>
</a>
<p class="card-text">xxxxxx</p>
</div>
<div class="card">
<a href="https://github.com/xxxxxx" target="_blank">
<img
src="https://cn.vuejs.org/images/logo.svg"
style="width: 100px"
/>
</a>
<p class="card-text">xxxxxx</p>
</div>
<div class="card">
<a href="https://github.com/xxxxxx" target="_blank">
<img
src="https://cn.vuejs.org/images/logo.svg"
style="width: 100px"
/>
</a>
<p class="card-text">xxxxxx</p>
</div>
</div>
</div>
</div>
</body>
</html>
7. bootstrap.css
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· AI Agent开发，如何调用三方的API Function，是通过提示词来发起调用的吗