效果

实现

百度音乐搜索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

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

Vue实现仿音乐播放器12-实现歌手页面效果
效果实现百度音乐API歌手说明例:method=baidu.ting.artist.getInfo&tinguid=877578 参数: tinguid = 877578 //歌手tin ...
Vue实现仿音乐播放器项目总述以及阶段目录
Github地址 https://github.com/badaoliumang/vuemusicplayer Vue实现仿音乐播放器各阶段代码 https://download.csdn.net/d ...
Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换
前言前面在首页已经完成今日推荐以及访问百度API获取数据,现在继续来完善home主页. 效果新歌速递 swiper实现轮播图实现实现新歌速递在components下新建新歌速递组件News_ ...
Vue实现仿音乐播放器3-将项目托管到git以及github
Github新建项目 1.登录github,点击右上角新建仓库 2.输入仓库名以及描述等,点击Create resposity 3.新建仓库完成后,右边有个clone or download,复制SS ...
vue 判断同一数组内的值是否一直_前端代码+后端API，值得一学的Vue高仿音乐播放器实战项目
项目名称:vue-fds_music 项目作者:符道胜开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...
后端实体类接收数组_前端代码+后端API，值得一学的Vue高仿音乐播放器实战项目...
项目名称:vue-fds_music 项目作者:符道胜开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...
前端代码+后端API，值得一学的Vue高仿音乐播放器实战项目
项目名称:vue-fds_music 项目作者:符道胜开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...
Vue实现仿音乐播放器11-实现访问百度音乐API实现播放音乐功能
场景从今日推荐页面点击某首歌曲会将这首歌曲的songid通过路由传递到播放界面, 播放界面调用百度音乐接口实现数据的获取以及音乐的播放. 效果实现配置路由首先在pages目录下新建musicp ...
Vue实现仿音乐播放器4-Vue-router实现音乐导航菜单切换
效果实现 Vue Router 官方文档 https://router.vuejs.org/zh/guide/ 用 Vue.js + Vue Router 创建单页应用,是非常简单的.使用 Vue. ...

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

效果

实现

百度音乐搜索API说明

搜索页面search.vue

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

最新文章

热门文章