当前位置: article > 正文

vue实现github搜索功能_类似github的搜索界面

作者：Cpp五条 | 2024-05-28 08:21:15

踩

类似github的搜索界面

1.页面设计简介

通过github的一个网址，输入任何内容都可以搜索到相应的内容，并以列表的形式展示给用户。

根据页面形式，代码主要分为两部分，search组件和list组件。

2.所用知识点

2.1 axios配置代理

在vue终端中下载axios库 npm install axios 并引入。

2.2 全局事件总线

我们知道整体结构可以分为两大部分，search组件用于发送数据，list组件用于接收数据。

2.3 bootstrap样式库

这个样式库非常方便只要拿来用就行，但是可能会出现库里面有些字体或者什么没有进行安装的问题，这时候解决的办法就是将样式库放到public目录下面，在index.html中引入该库就可以解决问题了。

3.代码展示

public/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>
    </body>
</html>

src/main.js


import Vue from 'vue'
import App from './App.vue'
 
Vue.config.productionTip = false
 
new Vue({
    el: "#app",
    render: h => h(App),
    // 定义全局事件总线
    beforeCreate() {
        Vue.prototype.$bus = this
    }
 
})

src/App.vue


<template>
 
    <div class="container">
        <Search></Search>
        <List></List>
    </div>
 
</template>
<script>
import Search from './components/Search.vue';
import List from './components/List.vue';
export default {
    name: 'App',
    components: {
        Search,
        List
    }
 
}
</script>

src/components/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="getUsers">Search</button>
        </div>
    </section>
</template>
 
<script>
import axios from 'axios'
export default {
    name: 'Search',
    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>

src/components/List.vue


<template>
    <div class="row">
        <!-- 展示用户列表 -->
        <div class="card" v-show="info.users.length" 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>
            <h4 class="card-title">{{ user.login }}</h4>
        </div>
        <!-- 展示欢迎词 -->
        <h1 v-show="info.isFirst">欢迎使用！</h1>
        <!-- 展示加载中 -->
        <h1 v-show="info.isLoading">加载中...</h1>
        <!-- 展示错误信息 -->
        <h1 v-show="info.errMsg">{{ 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 }
        })
    },
    beforeDestroy() {
        this.$bus.$off('updateListData')
    }
}
</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.效果展示

输入test

点击每一个图片可以查看具体信息

5.总结

vue知识点较多，接下来还会进行深入的学习。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/636518