Vue实现仿音乐播放器14-实现搜索页面以及功能

效果

实现

百度音乐搜索API说明

例：method=baidu.ting.search.catalogSug&query=海阔天空

参数：query = ” //搜索关键字

搜索页面search.vue

<template lang="html">
  <div class="search">
    <div class="search-title">
      <input type="text" name="" placeholder="输入搜索内容" v-model="searchContent">
      <button type="button" @click="searchHandler" name="button">搜索</button>
    </div>
    <ul class="list searchlist">
     <router-link :key="index" tag="li" :to="{name:'MusicPlay',params:{songid:item.songid}}" class="song" v-for="(item,index) in songlist">
       <div class="left">
         <div class="info  single-line ">
             <div>
                 <span>{{ item.songname }}</span>
             </div>
             <span class="txt">{{ item.artistname }}</span>
         </div>
       </div>
     </router-link>
   </ul>
  </div>
</template>

<script>
export default {
  name:"search",
  data(){
    return{
      searchContent:"",
      songlist:[]
    }
  },
  methods:{
    searchHandler(){
      const searchURL = this.HOST +"/v1/restserver/ting?method=baidu.ting.search.catalogSug&query="+this.searchContent;
        this.$axios.get(searchURL)
        .then(res => {
          if(res.data.error_code == 22001){
            alert('搜索数据不存在');
            return ;
          }
          console.log(res.data)
          this.songlist = res.data.song
        })
        .catch(error => {
          console.log(error);
        })
    }
  }
}
</script>

<style scoped>

.search-title{
  padding: 20px;
  overflow: hidden;
  clear: both;
}

input{
width: 80%;
height: 30px;
line-height: 30px;
background: #fff;
border: 1px solid #f1f2f3;
padding-left: 10px;
float: left;
display: inline-block;
}

button{
float: left;
width: 15%;
height: 30px;
}

.list {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  word-break: break-all;
  border-bottom: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
}

.list li.song {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  min-height: 55px;
  text-align: left;
}

li{
display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 50px;
  border-bottom: 1px solid #F2F2F2;
  padding-left: 10px;
}

.list .item.song .left, .list li.song .left {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list .item .info, .list li .info {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list li .info>span {
  font-weight: 400;
  display: block;
  font-size: 12px;
  color: #999;
}

</style>

注：

1.通过Input获取输入的搜索内容content,与searchContent绑定。

2.搜索按钮绑定点击事件单击方法searchHandler，在方法中请求搜索API返回数据，我们可以输出以下返回的数据：

可以看到我们要显示的数据：

songname:歌曲名字

artistname:歌手名字

songid:传递到MusicPlay实现音乐播放。

此部分代码对应分阶段代码中阶段十一

分阶段代码下载位置：

https://download.csdn.net/download/badao_liumang_qizhi/10846557