Quickly get started with Vue: How to get the music album list through NetEase Cloud API

Get started with Vue quickly: How to get the music album list through NetEase Cloud API

Introduction:
Vue, as a popular JavaScript framework, has been widely used in front-end development, and its ease of use And flexibility allows developers to quickly build various interactive web applications. This article will introduce how to use the Vue framework to obtain the music album list through the NetEase Cloud API in order to develop a simple music player application.

Step 1: Create a Vue project
First, execute the following command in the command line to create a new Vue project:

vue create music-player

Then, install axios and jsonp in the project root directory Module, used to initiate HTTP requests:

cd music-player
npm install axios jsonp --save

Step 2: Obtain NetEase Cloud API authorization
Before using NetEase Cloud API, we need to obtain authorization first. Visit the NetEase Cloud Developer Platform (https://neteasecloudmusicapi.vercel.app/), click the "Use Now" button in the upper right corner, then click the "Mobile Login" button in the new pop-up window, and use your mobile phone number and verification code. Log in.

After successful login, click "Generate token" on the left menu, and then copy the generated token value. This token will be used for authorization of subsequent API requests.

Step 3: Create Vue component
Create a file named AlbumList.vue in the src directory to display the music album list. In this file, we will introduce the axios and jsonp modules, and define an albums array to save album data. The specific code is as follows:

<template>
  <div>
    <ul>
      <li v-for="album in albums" :key="album.id">{{ album.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
import jsonp from 'jsonp';

export default {
  data() {
    return {
      albums: [],
    };
  },
  mounted() {
    this.getAlbums();
  },
  methods: {
    getAlbums() {
      const url = 'https://neteasecloudmusicapi.vercel.app/album/newest';

      axios.get(url).then((response) => {
        this.albums = response.data.albums;
      });
    },
  },
};
</script>

<style>
</style>

Step 4: Introduce the AlbumList component into App.vue
Open the App.vue file, and add an component in the