Simple and easy-to-use Vue tutorial: How to use NetEase Cloud API to build a music website

Simple and easy-to-use Vue tutorial: How to use NetEase Cloud API to build a music website

Introduction:
Vue.js is a lightweight, efficient and flexible front-end framework that can help us build A web application with strong interactivity and user-friendly experience. This tutorial will introduce how to use Vue.js and NetEase Cloud API to build a simple music website. Through this project, you will learn how to use Vue.js and API for data interaction, and gain some basic knowledge about Vue.js.

1. Preparation:
   First, we need to create a new Vue project. If you have not installed Vue CLI, you can install it with the following command:

npm install -g @vue/cli

After the installation is complete, use the following command to create a new Vue project:

vue create music-website

Enter the project directory and Start the development server:

cd music-website
npm run serve

2. Add NetEase Cloud API:
   Open NetEase Cloud Music Open Platform (https://music.163.com/guides/), apply for a developer account and create A new application. After obtaining the App Key and App Secret of the application, we can start adding the NetEase Cloud API.

Create an .env file in the root directory of the project and add the following content:

VUE_APP_APP_KEY=您的App Key
VUE_APP_APP_SECRET=您的App Secret

Then run the following command in the root directory of the project to install the axios library:

npm install axios

Create a utils folder in the src directory and create an api.js file in it. In the api.js file, we can write code that interacts with the NetEase Cloud API. The following is a simple example:

import axios from 'axios';

const appKey = process.env.VUE_APP_APP_KEY;
const appSecret = process.env.VUE_APP_APP_SECRET;

// 获取音乐排行榜
export const getTopList = async () => {
  const response = await axios.get(`https://api.music.163.com/toplist/detail?appKey=${appKey}&appSecret=${appSecret}`);
  return response.data;
}

// 获取歌曲详情
export const getSongDetail = async (songId) => {
  const response = await axios.get(`https://api.music.163.com/song/detail?songId=${songId}&appKey=${appKey}&appSecret=${appSecret}`);
  return response.data;
}

// 搜索歌曲
export const searchSong = async (keyword) => {
  const response = await axios.get(`https://api.music.163.com/search?keyword=${keyword}&appKey=${appKey}&appSecret=${appSecret}`);
  return response.data;
}

3. Create a music page:
   Create a views folder in the src directory and create a Music.vue file in it. In the Music.vue file, we can write the code for the music page. The following is a simple example:

<template>
  <div>
    <h1>音乐网站</h1>
    <div>
      <h2>热门排行榜</h2>
      <ul>
        <li v-for="song in topList" :key="song.id">{{ song.name }}</li>
      </ul>
    </div>
    <div>
      <h2>搜索歌曲</h2>
      <input v-model="keyword" placeholder="请输入关键字">
      <button @click="searchSong">搜索</button>
      <ul>
        <li v-for="song in searchResult" :key="song.id">{{ song.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getTopList, searchSong } from '../utils/api';

export default {
  name: 'Music',
  data() {
    return {
      topList: [],
      keyword: '',
      searchResult: []
    }
  },
  methods: {
    async fetchTopList() {
      this.topList = await getTopList();
    },
    async searchSong() {
      this.searchResult = await searchSong(this.keyword);
    }
  },
  mounted() {
    this.fetchTopList();
  }
}
</script>

<style>
/* 样式 */
</style>

4. Configure routing and homepage:
   Create a router folder in the src directory and create an index.js file in it. In the index.js file, we can configure routing. The following is a simple example:

import Vue from 'vue'
import Router from 'vue-router'
import Music from '../views/Music.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Music',
      component: Music
    }
  ]
})

In the main.js file in the src directory, we need to introduce routing and configure the Vue instance. The following is a simple example:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

5. Run the project:
   Now, we can run the project and see the effect. Run the project through the following command:

npm run serve

Then open http://localhost:8080 in the browser, and you can see the music website we created.

Conclusion:
Through this simple and easy-to-use Vue tutorial, we learned how to use Vue.js and NetEase Cloud API to build a music website. Through this project, we learned the basic usage of Vue and some common Vue techniques. I hope this tutorial can help you get started with Vue and spark your interest in front-end development.

The above is the detailed content of Simple and easy-to-use Vue tutorial: How to use NetEase Cloud API to build a music website. For more information, please follow other related articles on the PHP Chinese website!