效果

實現

百度音樂搜索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-实现搜索页面以及功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。