自己动手！用Vue和网易云API打造你的独特歌单

在这儿！想不想看看怎么用Vue和网易云API做自己的歌单呀？其实，网易云的歌单不太满意哈哈～那咱就自己来呗！

认识Vue

Vue学着挺顺手的，就像给咱们搞定前端页面的小伙伴。学这玩意儿跟学开车似的，练得多了自然就上道了！

熟悉网易云API

来，给大家说说如何使用”网易云”API！它不仅能帮你找到心仪的歌曲，而且操作起来也超级简单方便！掌握了这个接口后，随时随地管理自己的歌单就不再是个大难题！

vue create music-playlist

cd music-playlist
npm run serve

创建Vue项目

试着下载最新版的 Vue CLI（就是我们平常用的命令行的那个），跟着操作指南搞定你想要的新项目。别怕，其实超级简单，只需照着提示一步步走就行了！

  

    
我的音乐歌单
    

      
{{ song.name }}
    
  


export default {
  data() {
    return {
      songs: [], // 歌单数据
    };
  },
  mounted() {
    this.fetchPlaylist(); // 获取歌单数据
  },
  methods: {
    async fetchPlaylist() {
      // 发起GET请求获取歌单数据
      const response = await fetch('http://localhost:3000/playlist');
      const data = await response.json();
      this.songs = data;
    },
  },
};

构建歌单应用程序

开始干活了！首先得看看你的歌单里都有些啥歌儿呀？这事儿挺简单滴，就是把歌名和其他相关的内容列出来，排列整齐就成了！

添加歌曲功能

快来分享你们的歌单给大家听！这个网站真的超好弄，那里就一个输入框和个”加号”按键。把你们爱听的音乐扔进去，然后按个“加号”，它就会自己跑到后台去！然后确认歌曲的详细信息（就是直接用’v-model’say)-最后再轻轻一按，你们的新歌就添加成功了！快试试看吧

  
  

    
    添加
  
  


export default {
  // ...
  data() {
    return {
      newSong: '', // 用于存储输入框的值
    };
  },
  // ...
  methods: {
    // ...
    async addSong() {
      // 发起POST请求以添加歌曲
      await fetch('http://localhost:3000/playlist', {
        method: 'POST',
        body: JSON.stringify({ name: this.newSong }),
        headers: { 'Content-Type': 'application/json' },
      });
      this.fetchPlaylist(); // 刷新歌单
      this.newSong = ''; // 清空输入框
    },
  },
};

删除歌曲功能

放错歌怎么办？别担心每首都有个“Delete”键，点一下就能删了，后面的后台服务器会处理哒。

编辑歌曲功能

更改歌名超简单！只需点“编辑”，就能出现输入新歌名的框框。别忘了点“保存”，立马发起一个PUT请求，咱们的后端服务器就会自动更新啦～

  
  

    

      {{ song.name }}
      删除
    
  
  


export default {
  // ...
  methods: {
    // ...
    async deleteSong(songId) {
      // 发起DELETE请求以删除歌曲
      await fetch(`http://localhost:3000/playlist/${songId}`, {
        method: 'DELETE',
      });
      this.fetchPlaylist(); // 刷新歌单
    },
  },
};

进一步完善应用程序

这个APP不只是基础功能，我们还可以根据你想法再改进！比如说加个搜索功能或者搞下拖动改名和排序之类的。地方够大，所以脑子里的点子应该也是没完没了！

  
  

    

      
      编辑
    
  
  
  

    
编辑歌曲
    
    保存
  


export default {
  // ...
  data() {
    return {
      showEditModal: false, // 是否显示编辑对话框
      editSongId: '', // 正在编辑的歌曲的id
      editSongName: '', // 用于存储编辑后的歌名
    };
  },
  // ...
  methods: {
    // ...
    editSong(song) {
      this.showEditModal = true; // 显示编辑对话框
      this.editSongId = song.id; // 更新正在编辑的歌曲id
      this.editSongName = song.name; // 更新正在编辑的歌曲名
    },
    async saveChanges() {
      // 发起PUT请求以保存歌曲修改
      await fetch(`http://localhost:3000/playlist/${this.editSongId}`, {
        method: 'PUT',
        body: JSON.stringify({ name: this.editSongName }),
        headers: { 'Content-Type': 'application/json' },
      });
      this.fetchPlaylist(); // 刷新歌单
      this.showEditModal = false; // 隐藏编辑对话框
    },
  },
};