博客

Vue实现的github搜索小案例

  • Post author:
  • Post category:vue


效果

前置知识

  • vue基础
  • axios
  • es6基础语法

代码

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <!-- 引入第三方样式 -->
    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css" />
    <!-- 配置网页标题 -->
    <title></title>
  </head>
  <body>
    <!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js

//引入vue
import Vue from "vue";
//引入App
import App from "./App.vue";
//关闭Vue的生产提示
Vue.config.productionTip = false;

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

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>

<style>

</style>

List.vue

<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" target="_blank">
				<img :src="user.avatar_url" style='width: 100px'/>
			</a>
			<p class="card-text">{{user.login}}</p>
		</div>
		<!-- 展示欢迎词 -->
		<h1 v-show="info.isFirst">欢迎使用！</h1>
		<!-- 展示加载中 -->
		<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)=>{
				//es6语法 将这两个对象合并成一个对象
				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

<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"/>&nbsp;
			<button @click="searchUsers">Search</button>
		</div>
	</section>
</template>

<script>
	import axios from 'axios'
export default {
	name:'Search',
	data(){
		return{
			keyWord:''
		}
	},
	methods:{
		searchUsers(){
			//请求更新List的数据
			//这里利用vue全局事件总线 注册
			this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})
			//github给我们提供了一个接口https://api.github.com/search/users?q=???
			//这里利用es6模板字符串
			axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
				response=>{
					console.log('请求成功了');
					//请求成功后更新List的数据
					this.$bus.$emit("updateListData",{isLoading:false,errMsg:'',users:response.data.items})
				},
				error=>{
					//请求后更新List的数据
					this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
				}
			)
		}
	}
}
</script>

<style>

</style>


版权声明：本文为nxcniuxiangchen原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。