Vue从入门到精通：如何使用网易云API获取热门音乐列表-Vue.js-PHP中文网

Vue从入门到精通：如何使用网易云API获取热门音乐列表

WBOY

发布： 2023-07-17 09:33:09

原创

1386 人浏览过

Vue从入门到精通：如何使用网易云API获取热门音乐列表

引言：
Vue.js作为一款流行的JavaScript框架，广泛应用于前端开发中。结合Vue.js和网易云API，我们可以轻松地实现获取热门音乐列表的功能。本文将详细介绍如何利用Vue.js和网易云API，快速实现获取热门音乐列表的功能，并给出相应的代码示例。

准备工作
在开始之前，我们需要准备一些基本的工作环境和文件。
首先，确保你电脑上已经安装了Node.js。你可以在命令行中输入以下命令，检查是否安装成功：
```
node -v
```
登录后复制
其次，创建一个新的Vue项目。在命令行中输入以下命令，创建一个新的Vue项目：
```
vue create music-app
```
登录后复制
进入到项目目录中，安装axios，用于发送HTTP请求：
```
cd music-app
npm install axios --save
```
登录后复制
获取网易云音乐API的Token
在使用网易云API之前，我们需要获取一个有效的Token。打开浏览器，进入网易云开发者平台，注册一个新账户并登录。

登录成功后，点击"管理控制台"，找到"创建应用"选项。按照指示填写应用名称和描述，并点击"创建应用"。

创建成功后，你会得到一个App Key和App Secret，保存好这两个信息，我们将在后续使用。

获取热门音乐列表接口
在网易云开发者平台的"管理控制台"中，找到"API文档"，然后点击"音乐API"。在左侧导航栏选择"排行榜"，然后点击"云音乐热歌榜"。

在接口文档中，我们可以找到获取热门音乐列表的接口信息。记录下接口的URL和请求参数，我们将在后续使用。

创建Vue组件
在项目的src目录下创建一个新的文件夹components，并在components文件夹中创建一个新的文件MusicList.vue。

在MusicList.vue中，我们将实现获取热门音乐列表的功能。首先，我们导入axios模块，并定义组件的data和methods。

<template>
  <div>
    <h1>热门音乐列表</h1>
    <div v-for="music in musics" :key="music.id">
      {{ music.name }}
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      musics: []
    };
  },
  methods: {
    getMusicList() {
      const url = 'https://api.music.163.com/top/list';
      const params = {
        idx: 1,
        limit: 10,
        format: 'json'
      };

      axios.get(url, {params})
        .then(response => {
          this.musics = response.data.playlist.tracks;
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  created() {
    this.getMusicList();
  }
};
</script>

登录后复制

在App.vue中使用组件
打开App.vue文件，并引入我们刚刚创建的MusicList组件：

<template>
  <div id="app">
 <MusicList />
  </div>
</template>

<script>
import MusicList from './components/MusicList.vue';

export default {
  components: {
 MusicList
  }
};
</script>

登录后复制