Vue.js+网易云API：教你打造私人小助手音乐播放器

小伙伴们，快来看看我是怎么做这个超棒的VUE.js+网易云API音乐播放器的！别以为它就只能播放歌而已，其实它还可以当私人小助手！只需要告诉它想听什么曲子，保证马上就能播出来！放宽心，下面我会详细地教给你们，保证看完后你们都能用得飞起

告诉你们，Vue.js这个JavaScript框架太棒了，跟拼图似的，网页就能轻松组合各种小块儿，以后改新或者加东西都方便得多。还有那个网易云API，真是个神器，里面有你们想要的音乐信息，包括歌名、专辑、歌手等等。更厉害的是它还能控制音乐播放，就算不懂音乐的人看了也会激动不已！

vue create music-player

别磨蹭，赶快动手！用Vue CLI来新建个项目~创建的时候想选啥就选啥~搞定后赶紧回terminal,输入几个简单指令就成。

具体点说就是啥东西都扔到public文件夹去，比如那些上传图片的琐事也别忘了。然后说到代码环境，就在src这儿摆起好了。好像咱们还得跟网易云API做些好玩儿的小实验，包装一下自己做的各种逻辑，感觉还真是挺有趣的

cd music-player
npm install axios vuex vuex-persist

哈喽，知道么？现在我们能用 axios 和网易云音乐的 API 来听歌~只需通过 getSongById 找歌曲 ID，再使用 searchSongs 就能搜到好听的歌，真的好方便

├── public
│   ├── index.html
│   └── ...
└── src
    ├── api
    │   └── index.js
    ├── components
    │   ├── Player.vue
    │   ├── Playlist.vue
    │   └── ...
    ├── store
    │   ├── index.js
    │   └── ...
    └── App.vue

看看那个components文件夹，里面都是咱们音乐播放器的硬货。有啥事儿？想知道你正在听哪首歌？没错，就是它!还藏着好多有趣的功能等你去发现！

import axios from 'axios';
const BASE_URL = 'https://api.music.com';
const api = axios.create({
  baseURL: BASE_URL
});
export const getSongById = async (id) => {
  try {
    const response = await api.get('/song', { params: { id } });
    return response.data;
  } catch (error) {
    console.error(error);
  }
};
export const searchSongs = async (keyword) => {
  try {
    const response = await api.get('/search', { params: { keyword } });
    return response.data;
  } catch (error) {
    console.error(error);
  }
};
// 更多API封装...

赶紧把那个叫做”index.js”的玩意儿搬到叫”store”的地去。这货是咱的小帮手，搞定App里那些零碎事，比如说你听到了啥歌，歌曲目录有哪些，还有那个讨厌的进度条也是它的活儿。

别忘了在App.vue文件里加个开机提醒~然后把Player跟Playlist使劲拽出来扔到模板上。搞定！现在大家都连上线！

  

    
    {{ isPlaying ? '暂停' : '播放' }}
    
    
    
    

      
{{ currentSong.name }}
      
{{ currentSong.artist }}
    
  


import { mapState, mapActions } from 'vuex';
export default {
  computed: {
    ...mapState(['currentSong', 'isPlaying'])
  },
  methods: {
    ...mapActions(['togglePlayback'])
  }
};

牛死咯！我们用了Vue.js和网易云API这俩大神器，直接搞出个音乐播放器来了！不仅会调用 API 来抓数据，还自己搞定了组件，状态管理这些复杂玩意儿也学得挺深奥了哟~

瞧，我们还能让它更加好玩！比如说加上点炫酷的效果，调整个儿音乐的节奏都是小菜一碟！只要想你所想，没有什么不可能的！

  

    

      
{{ song.name }}
      
{{ song.artist }}
    
  


import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['playlist'])
  }
};

快来学习如何用Vue.js搭桥第三方API！大胆动手，制作出独一无二的播放器~

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    currentSong: null,
    playlist: [],
    isPlaying: false
  },
  mutations: {
    setCurrentSong(state, song) {
      state.currentSong = song;
    },
    setPlaylist(state, playlist) {
      state.playlist = playlist;
    },
    togglePlayback(state) {
      state.isPlaying = !state.isPlaying;
    }
  },
  plugins: [createPersistedState()]
});