vue实战 ---- 一个简单的音乐搜索网站（start）
vue实战 ---- 一个简单的音乐搜索网站（一）
vue实战 ---- 一个简单的音乐搜索网站（三）

1. searchHeader.vue代码

<template>
    <div class="search-header">
        <input type="text" id="search-text" placeholder="搜索歌曲、歌手" @input='Key' @keyup.enter="search()">
        <button type="submit" id="search-btn" @click='search()'>搜索</button>
    </div>
</template>

<script type="text/javascript">
    export default {
        name: 'searchHeader',
        data(){
            return {
                searchKey: '',
                slist: [],
            }
        },
        methods: {
            Key(e){
                this.searchKey = e.target.value;
                // console.info(this.searchKey) 
            },
            
            search(){
                // 网易云
                // this.axios.get('http://musicapi.leanapp.cn/search?keywords=' + this.searchKey).then((response) => {
                //  this.slist = response.data.result.songs;
                // });
                // 
                // 酷狗
                // this.axios.get(this.HOST + this.searchKey).then((response) => {
                //  this.slist = response.data.data.lists;
                //  console.info(response)
                // });
                // 又挂掉一个网易云api。。。
                // this.axios.get('https://api.mlwei.com/music/api/wy/?key=523077333&nu=50&id=' + this.searchKey + '&type=so').then((response) => {
                //  this.slist = response.data.Body;
                //  // console.info(response)
                //  this.$emit('getKey', this.slist);
                // });  
                this.axios.get('https://v1.itooi.cn/netease/search?keyword=' + this.searchKey + '&type=song&pageSize=30').then((response) => {
                    this.slist = response.data.data.songs;
                    console.info(response)
                    this.$emit('getKey', this.slist);
                });     
            },
        },
    }

</script>

<style type="text/css" scoped>
    .search-header {
        /*border: 1px solid red;*/
        width: 400px;
        height: 40px;
        margin: 100px auto;
        margin-bottom: 50px;
    }

    input, button {
        float: left;
        padding: 0;
        border: 0;
        outline: none;
        box-sizing: border-box;
    }

    input {
        width: 80%;
        height: 100%;
        font-size: 16px;
        border-radius: 10px 0px 0px 10px;
        padding-left: 20px;
        padding-right: 20px;
        /*border: 1px solid red;*/
        text-overflow: ellipsis;
    }

    button {
        width: 20%;
        height: 100%;
        font-size: 18px;
        border-radius: 0px 10px 10px 0px;
        background-color: #CCFF99;
        /*border: 1px solid red;*/
    }
</style>

2. 代码详解

这个组件里只有一个input标签输入框和button按钮

• @input='sendKey'
  这里输入框绑定了Key()方法，是为了获取输入的文本，即输入的歌手或歌曲名，后面的api请求需要这个参数。
• @keyup.enter="search()"
  让回车键绑定search方法，按下回车就发送api请求，可以看到我的代码中search方法里有很多注释，都是失效的api，真的倒霉，这些api我都是用了几十分钟就失效，感觉是故意针对我啊。截止2019年8月17日，上面这个api还是可以用的...如果失效就要重新再找，影响不大
• @click='search()'
  除了回车可以出发，点击搜索框的时候也可以出发，也绑定一下，请求api获得数据后还要使用$emit()方法提交给父亲组件music.vue