前端学习之vue实战[github搜索]

Vue实战：搜索github用户1.vue脚手架的两种配置代理服务器2.github搜索代码2.1 index.html:2.2App.vue2.3ListUsers.vue2.4searchGit.vue2.5 Bootstrap v3.3.53.效果展示4.总结4.1vue项目的两个Ajax库：1.vue脚手架的两种配置代理服务器[github搜索]是vue脚手架配置代理服务器的应用，先来复习

makabakae

270人浏览 · 2022-03-13 19:30:39

makabakae · 2022-03-13 19:30:39 发布

Vue实战：搜索github用户

1.vue脚手架的两种配置代理服务器
2.github搜索代码
3.效果展示
4.总结
- 4.1vue项目的两个Ajax库：

1.vue脚手架的两种配置代理服务器

[github搜索]是vue脚手架配置代理服务器的应用，先来复习vue脚手架的两种配置代理服务器的方法：

方法一：在vue.config.js中添加如下配置：

devServer:{
    proxy:"http://localhost:5000"
}

优点：配置简单，请求资源时直接发给前端即可。
缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）。

方法二：

devServer: {
    proxy: {
      	'/api1': { // 匹配所有以 '/api1'开头的请求路径
        	target: 'http://localhost:5000',// 代理目标的基础路径
        	changeOrigin: true,
        	pathRewrite: {'^/api1': ''}
      	},
      	'/api2': { // 匹配所有以 '/api2'开头的请求路径
        	target: 'http://localhost:5001',// 代理目标的基础路径
        	changeOrigin: true,
        	pathRewrite: {'^/api2': ''}
      	}
    }
}

// changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
// changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080

优点：可以配置多个代理，且可以灵活的控制请求是否走代理.。
缺点：配置略微繁琐，请求资源时必须加前缀。

2.github搜索代码

2.1 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="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 引入bootstrap样式 -->
    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
    <!-- 配置网页标题 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2.2App.vue

<template>
	<div class="container">
		<searchGit/>
		<ListUsers/>
	</div>
</template>

<script>
	import searchGit from './components/searchGit'
	import ListUsers from './components/ListUsers'
	export default {

		name:'App',
		components:{searchGit,ListUsers},

	}
</script>

2.3ListUsers.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)=>{
				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>

2.4searchGit.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="getUsers">Search</button>
      </div>
    </section>
</template>

<script>
    import axios from 'axios'
    export default {

        name:'searchGit',
        data() {
            return {
                keyWord:''
            }
        },
        methods: {
            getUsers(){
                //请求前更新List的数据
				this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})
				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>

<!-- Add "scoped" attribute to limit CSS to this component only -->

2.5 Bootstrap v3.3.5

(http://getbootstrap.com)

3.效果展示

在这里插入图片描述

4.总结

4.1vue项目的两个Ajax库：

axios：通用的Ajax请求库，官方推荐，效率高.
vue-resource：vue插件库，vue 1.x使用广泛，官方已不维护.

开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

开放原子大赛——CIKM 2024赛果揭晓，10强争霸，角逐第33届国际信息与知识管理大会

国际信息与知识管理大会（Conference on Information and Knowledge Management，CIKM）自1992年起举办，是计算机科学领域的顶级学术会议。第33届国际信息与知识管理大会将于2024年10月21日至25日在美国博伊西隆重举行。依托该会议，开放原子开源基金会携手百度飞桨、阿尔特汽车，联合举办了一场重量级赛事——“CIKM 2024：AI辅助的先进空气