效果

实现

百度音乐搜索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实现音乐播放。

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

分阶段代码下载位置：

/download/badao_liumang_qizhi/10846557

如果觉得《Vue实现仿音乐播放器14-实现搜索页面以及功能》对你有帮助，请点赞、收藏，并留下你的观点哦！