Vue 进阶教程：利用网易云 API 实现音乐歌单自动推荐

一、准备工作

学vue前要先准备齐全哟。首先要知道阿，安装vue CLI，这是官方推荐用来搭建vue项目的小帮手那怎么看有没有装好？只需这么简单一招就能知究竟啦：

bash
vue --version

有显示版本号当然很好，表示之前的准备工作做得差不多了~要是没看见也别急，直接按照这个步骤就能下到Vue CLI啦：

npm install -g @vue/cli

二、创建Vue项目

搞定，接下来可以开始创建Vue项目，就输入”music-recommendation”这几个字直接动手！

你听说过新的Vue调用方式没？赶紧用 “vue create music-recommendation”，一下子就弄好了！

安装新软件时，建议大家直接选默认的插件和工具！这样发布就容易多了。

# 检查Vue是否成功安装
vue --version

三、安装依赖

搞定了！现在我们来搞定项目中要用到的依赖。那个超火的HTTP客户端axios以后会用来拉取音乐数据。怎么装？很简单，跟着我做哈~

cd music-recommendation

npm install axios

这样，我们的项目就拥有了从外部API获取数据的能力。

四、创建组件

Vue牛就牛在能用组件搞定制开发，咱们现在就在这么干！先新建一个名为 “Recommendation” 的组件，直接扔到 src/components 文件夹就对了。接下来，粘贴下面这行代码进去：

# 创建项目
vue create music-recommendation

“`vue

<h1>音乐推荐</h1>

<h2>{{ song.name }}</h2>

{{ song.artist }}

import axios from ‘axios’;

# 进入项目文件夹
cd music-recommendation
# 安装axios
npm install axios --save

export default {

data() {

return {

songs: []

};

},

created() {

this.fetchSongs();

  

    
音乐推荐
    

      

        {{ song.name }}
      
    
  


import axios from 'axios';
export default {
  data() {
    return {
      songs: []
    };
  },
  mounted() {
    this.fetchSongs();
  },
  methods: {
    fetchSongs() {
      axios.get('https://api.music.163.com/recommend/songs')
        .then(response => {
          this.songs = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};

methods: {

async fetchSongs() {

咱们用axios上https://api.example.com/songs那拉了个歌单。

this.songs = response.data;

}

}

}

  

    
    
  


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

这小段程序做出来一个超好用的工具！它能直接在你的屏幕上展示，让大家都看到你从网易云API抢到的那些最棒的音乐数据~

五、使用组件

接下来，我们要在App.vue文件里添加个推荐组件直接找 src/App.vue 这个文件，稍微改动一下以下步骤就行啦：

咱们就用那个推荐组件呗，就在’recommendations/Recommendation’这个目录底下找找看好了。

components: {

Recommendation

这样一来，我们的推荐功能就顺利地融入了主要软件里。

npm run serve

六、运行项目

搞定编码后，现在赶紧动一下鼠标运行项目！记得用那个命令哈：

npm run serve

你直接在浏览器上输网址，就是http://localhost:8080/。看看看，现在你能看到咱们通过网易云API做出来的那个音乐推荐页面了~

七、实现自动推荐功能

我们要做的第一步是，给代码加点料，这样它就会帮你搜罗新鲜出炉的歌曲了。要怎么添加？只需在Recommendation组件的Methods部分加个定时器就行。记得设置好这个小闹钟的时间间隔，然后启动fetchSongs这个功能，代码就可以自动更新最新的歌曲数据咯~瞅准这个路径去改吧：

// …其他代码…

mounted() {

每隔一分钟它就能帮你找歌！（用的是setInterval()方法哈）

beforeDestroy() {

消掉这计时器！ 关了它。

// ...
methods: {
  fetchSongs() {
    axios.get('https://api.music.163.com/recommend/songs')
      .then(response => {
        this.songs = response.data;
      })
      .catch(error => {
        console.error(error);
      })
      .finally(() => {
        setTimeout(this.fetchSongs, 30000); // 每30秒调用一次fetchSongs方法
      });
  }
}
// ...

这样，我们的应用就会每分钟自动更新一次推荐的音乐列表。

来上节课，咱们动手做个音乐推荐小程序，用Vue框架和网易云API。学习时全程运用Vue组件化开发，也会用到网络抓取音乐信息的axios。最重要的是我们教完你如何自动化推荐以后，你肯定会觉得花这点儿时间学东西真值得！

总结与提问

看完这篇文章后，你不仅学会了怎么用Vue和网易云API做出音乐荐歌，还感叹Vue组件化编程的强大。那如果是你自己来设计这款推荐系统的话，会怎么样优化？赶紧写下你的想法，在评论区分享出来，别忘了顺便点个赞和转发，让更多人也看到这么棒的东西！