现在的音乐软件，大家基本都是跟着热度选歌。那对于我们这种“外行人”来说，怎么样才能找到自己喜欢的歌？这就需要有能懂咱们喜好的智能播放器来帮忙了！下面我要给大家介绍下，怎么使用Vue.js以及网易云API来做个个人化的音乐推荐系统，让你随时都能发现新天籁！

一、准备工作

做活前得有点准备。首先搞定Vue.js和网易云API获取音乐数据，再装个好用的编程工具比如Visual Studio Code。有了这几样神器，就能轻松做出炫酷的网页！

二、创建Vue项目

告诉你怎么搞定一个Vue项目，就跟在命令行输些指令那样简单，跟着提示做就成，立马就能搞定项目初始化。有了Vue CLI这助手，干起活儿来得心应手，分分钟就把项目给建起来了！

$ vue create music-recommendation

三、安装依赖

快来看看咱们的项目文件夹里都有些啥宝贝儿，准备好我们需要用的链接和工具，比如Vue.js和它的帮手们。这样就能确保我们的项目跑得飞快！还能用电商API开发！

$ npm install axios

四、获取网易云API密钥

想用好网易云API？先搞定API密钥！动手注册一下应用，然后细心点找找密钥。有了它，在网易云音乐里就可以随便浪啦～

五、编写代码

要想让项目好玩儿，咱们就得写一些和网易云API有关的代码文件。简单装饰一下它们，就能随心所欲调用API获取音乐数据首先，别忘了到services文件夹里弄出个music.js文件，然后用axios这种工具完成请求并添加相应的逻辑；最后，到components文件夹搞定个Recommendation.vue文件，来显示歌曲推荐结果哈。

import axios from 'axios';
// 设置默认请求地址
axios.defaults.baseURL = 'https://api.music.163.com';
// 设置默认请求头
axios.defaults.headers = {
  'Content-Type': 'application/x-www-form-urlencoded',
};
// 导出axios实例
export default axios;

六、使用组件

要快点加个新歌推荐到App.vue里头去，再把它放到模板里让大家都能看到，还能跟这些歌儿玩儿上。当然，别忘了来点儿简单的css，看着美观点！

七、启动项目

  

    
音乐推荐
    

      

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


import music from '@/services/music';
export default {
  data() {
    return {
      songs: [],
    };
  },
  mounted() {
    this.getRecommendation();
  },
  methods: {
    async getRecommendation() {
      try {
        const response = await music.get('/v1/recommend/songs');
        this.songs = response.data.songs;
      } catch (error) {
        console.error(error);
      }
    },
  },
};

最后几个步骤：敲下cmd运行咱们的项目，接下来到浏览器输入对应的URL就能看到推荐的歌单！搞定！来，大伙儿赶紧享受我给你们准备的私人音乐推荐~

完工！这套无敌牛逼好用的个性化音乐推荐系统终于完成！不论你喜好哪种类型音乐，都能一网打尽，让你乐翻天！但小心，除了强大功能之外，也不能忽视一些小环节，比如乱序处理、提速升级啥的，都要咱们多多留意才是。

  

    
  


import Recommendation from '@/components/Recommendation';
export default {
  name: 'App',
  components: {
    Recommendation,
  },
};

来，跟我一起用Vue.js和网易云API搭建你专属的个性化音乐推荐系统！搞开发时别忘了加些小功能如搜歌、推荐歌单啥的，让音乐体验更炫酷！希望大家都能发掘出新点子，让我们一起打造出超棒的音乐互动体验！

#app {
  text-align: center;
}
h1 {
  margin-top: 50px;
}
ul {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}
li {
  margin-bottom: 10px;
}

。