Vue 进阶教程：利用网易云 API 实现歌曲收藏夹功能，附详细步骤与环境准备

了解吗？在这个数字化音乐时代，管理你独特的歌单真的超级重要！跟着我，拿Vue.js和网易云API动手，一起来做个超好用又炫酷的歌单。别担心，我会像教你骑自行车那样，一步一步地教你的。

环境准备：装备你的开发工具箱

先检查你家电脑有没有装上Vue.js和axios。就像建楼房要有地基，axios就是给你搬砖用的助手。没这俩工具，咱们就动不了工了。上网搜搜看教程，挺容易学的。

获取网易云API权限：开启音乐世界的大门

首先去网易云音乐官方网站注册个账户！其实就是填些资料，然后传个头像之类的，通过验证以后，会拿到两种神秘的数字，也就是appKey和appSecret，这两兄弟就好比是音乐王国的门票，只要拿着他们，你就可以随意用网易云的API！

创建Vue项目：搭建你的音乐城堡

vue create music-app

搞定通行证，赶紧搭建你的项目！敲击几下命令行，一个崭新的Vue项目就诞生。这就像有了块空地，你的音乐城大计可以着手进行。进入项目文件夹，开启开发服务器，准备工作就绪，就等你来大展身手！

编写代码：让音乐城堡活起来

cd music-app
npm run serve

来啦来！我们要用Vue搞个Music.vue组件，好比音乐城堡里的小小展厅，能炫酷地展示你的音乐收藏。这个组件能用axios发HTTP请求，然后用网易云API抓取歌单，增删歌曲或直接听歌。别忘了把自己的授权码放上去，不然API可不搭理你哟。

使用Music组件：让你的音乐城堡对外开放

搞定！把组件丢进App.vue就行。就像搭完房子再串成城堡那样。给App.vue装上Music组件，你的音乐城堡就亮相了，可以向大家展示你的音乐宝贝！

  

    

      

        {{ music.name }}
        播放
        删除
      
    
    
    添加
  


import axios from 'axios';
export default {
  data() {
    return {
      musics: [],
      input: ''
    };
  },
  methods: {
    fetchMusics() {
      axios.get('https://api.music.163.com/v1/song/playlist', {
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      })
      .then(response => {
        this.musics = response.data;
      })
      .catch(error => {
        console.log(error);
      });
    },
    add() {
      axios.post('https://api.music.163.com/v1/song', {
        name: this.input
      }, {
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      })
      .then(response => {
        this.input = '';
        this.fetchMusics();
      })
      .catch(error => {
        console.log(error);
      });
    },
    remove(id) {
      axios.delete('https://api.music.163.com/v1/song/' + id, {
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      })
      .then(response => {
        this.fetchMusics();
      })
      .catch(error => {
        console.log(error);
      });
    },
    play(id) {
      axios.put('https://api.music.163.com/v1/song/' + id, {
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      })
      .then(response => {
        console.log('正在播放歌曲：' + id);
      })
      .catch(error => {
        console.log(error);
      });
    }
  },
  mounted() {
    this.fetchMusics();
  }
};

运行项目：开启你的音乐之旅

搞定了没？快尝鲜！在浏览器里打localhost:8080，看看你的歌单多酷！想加就加，想删就删，随便听听点个赞，尽情享受愉快时刻～

拓展功能：让你的音乐城堡更加丰富多彩

咱们这个音乐盒已经很好了，不过还能再完善下。比如说，添加个搜歌功能，大家找歌不是也更省心？再来个推荐系统，根据你的喜好帮你发现新鲜歌曲，岂不是更有意思？

总结与展望：音乐无界，创意无限

  

    
  


import Music from './components/Music.vue';
export default {
  name: 'App',
  components: {
    Music
  }
};

这套课让我们学会用Vue.js跟网易云API做出歌单，体验到了从无到有的过程。就像在空地上盖房子那样，慢慢搭建。我真心希望这教程也能给你们带来灵感，在学习或开发时敢于想象！

猜猜看咱们咋给你音乐盒里搞点新花样？赶紧到评论区吹水咯。别忘点赞、转发给咱俩捧个场

npm run serve