Vue进阶教程：如何利用网易云API实现歌曲排行榜功能-Vue.js-PHP中文网

Vue进阶教程：如何利用网易云API实现歌曲排行榜功能

WBOY

发布： 2023-07-17 12:02:19

原创

1730人浏览过

vue进阶教程：如何利用网易云api实现歌曲排行榜功能

引言：
Vue.js是一款流行的JavaScript框架，它可以帮助我们轻松构建交互性的前端应用程序。在本篇文章中，我们将学习如何利用Vue.js和网易云API实现歌曲排行榜功能。通过这个实例，我们将进一步了解Vue.js的使用以及如何与外部API进行交互。

准备工作：
在开始之前，我们需要准备如下工作：
确保你已经安装了最新版本的Vue CLI
在网易云官方网站中注册一个开发者账号，以获取API密钥
创建新的Vue项目：
首先，我们需要创建一个新的Vue项目。在终端中运行以下命令来创建一个新的Vue项目：
```
vue create song-ranking
```
登录后复制
然后，选择默认配置，等待Vue CLI自动生成项目模板。
添加所需的依赖：
进入项目文件夹，运行以下命令来添加所需的依赖：

立即学习“前端免费学习笔记（深入）”；
```
cd song-ranking
npm install axios
```
登录后复制
上述命令将安装axios库，这是一个用于发送HTTP请求的常用库。
获取API密钥：
登录网易云开发者网站，创建一个新的应用程序。在你的应用程序中，你将获得一个API密钥。复制这个密钥，我们将在后续代码中使用。

创建组件：
在src文件夹中创建一个新的文件夹components，并在其中创建一个名为SongRanking.vue的文件。打开该文件，并输入以下内容：

<template>
  <div>
 <h3>歌曲排行榜</h3>
 <ul>
   <li v-for="song in songs" :key="song.id">
     {{ song.name }} - {{ song.artist }}
   </li>
 </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
 return {
   songs: []
 };
  },
  mounted() {
 this.getSongRanking();
  },
  methods: {
 async getSongRanking() {
   try {
     const response = await axios.get(
       'https://api.apiopen.top/musicBroadcasting'
     );

     this.songs = response.data.result[0].songList;
   } catch (error) {
     console.error(error);
   }
 }
  }
}
</script>

<style scoped>
h3 {
  font-size: 20px;
  color: #333;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
  font-size: 14px;
  color: #666;
}
</style>

登录后复制

使用组件：
现在，我们来使用刚才创建的组件。在src文件夹中的App.vue文件中，删除默认的模板，并添加以下内容：

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

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

export default {
  name: 'App',
  components: {
 SongRanking
  }
}
</script>

<style>
#app {
  font-family: Avenir, sans-serif;
}
</style>

登录后复制