Vue 从入门到精通：利用网易云 API 开发音乐播放器全局搜索功能

小伙伴们好今天就来聊聊怎么用Vue和网易云API搞一个音乐播放器的全盘搜歌功能~这可不单单是个技术分享还超级有趣~听听歌，日子也可以过的美滋滋。所以我们要学会好好利用这些工具，让自己的生活更加丰富多彩~

技术准备

咱们要做的事，得先陆续搞定以下几步！首要任务是安装好Node.js和npm，这是搭建Vue项目的基础，少不了它俩。其次，学学怎么用Vue.js，包括怎么创建Vue项目、写出基本组件等等。还有就是，网易云API可得弄明白，这样咱们才能靠它来获取音乐数据。

创建Vue项目

搞定！准备好了吗？那我们马上来搞个Vue项目！先找找你最爱的命令行工具，挑个舒服的桌面文件夹，然后敲敲下面这些句子，项目就开始运作了。别忘了，建设完了去找一下项目文件夹，咱们还有好多活儿要干~

$ vue create music-player

安装依赖

搞定了趁早把需要的工具安装到项目文件夹里面去呗！千万别省这个环节，这些玩意儿是保证咱的项目能跑起来的关键没了它们，项目就没法干下去。

$ cd music-player

编写代码

搞定安装后，开始动手编码首先，给自己搞个components文件夹，用来装我们的Vue组件；然后，整出个SearchBar.vue，这个是管搜索栏的；紧接着，再来个SongList.vue，搞定歌曲列表的事情；最后，在App.vue里面把这些东西组装起来，就有了完整的界面！

$ npm install axios vue-axios bootstrap-vue

运行项目

搞定程序后，咱们先跑机器干活儿！顺序是这样滴：1.用命令调试；2.浏览器访问http://localhost:8080/这个网站。你看，一个可以搜索歌曲的页面出来是不是特别成功？

扩展功能

  

    
    搜索
  


export default {
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    search() {
      this.$emit('search', this.keyword)
    }
  }
}


// 样式可以根据自己的需求进行调整
input {
  padding: 0.5rem;
  width: 20rem;
  border-radius: 0.5rem;
}
button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: #000;
  color: #fff;
}

现在我们这个项目就只带有搜索歌曲的功能，不过，你完全可以照着自己喜欢的方式来改进一下！比如，可以添加一个播放功能，这样大家在搜索歌曲的同时还能听到声音；或者添加一个歌词展示，方便唱歌时观看。这两个小改进都能够使你的项目变得更加实用有趣，吸引更多用户！

总结

  

    

      

        
{{ song.name }}
        
{{ song.artists[0].name }}
        
      
    
  


export default {
  props: {
    songs: {
      type: Array,
      required: true
    }
  }
}


ul {
  list-style-type: none;
}
li {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  margin-right: 1rem;
}

读完这个文章，用Vue框架和网易云API就变得亲切了很多！学习的路还很长，让我们一起加油！希望小伙伴们持之以恒，不断提升技能水平，让科技之路越走越宽广哈~

来聊聊！你说现在如果想做出一款不错的音乐播放器，到底还差啥？快来评论区说说你的想法，记得点赞分享喔！

  

    
    
  


import SearchBar from './components/SearchBar.vue'
import SongList from './components/SongList.vue'
export default {
  components: {
    SearchBar,
    SongList
  },
  data() {
    return {
      songs: []
    }
  },
  methods: {
    handleSearch(keyword) {
      axios.get('网易云API的搜索接口URL', {
        params: {
          keyword: keyword
        }
      })
      .then(response => {
        this.songs = response.data.result.songs
      })
      .catch(error => {
        console.error(error)
      })
    }
  }
}


.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
}