Tutoriel Vue simple et facile à utiliser : Comment utiliser l'API NetEase Cloud pour créer un site Web de musique

Tutoriel Vue simple et facile à utiliser : Comment créer un site Web de musique à l'aide de l'API NetEase Cloud

Introduction :
Vue.js est un framework frontal léger, efficace et flexible qui peut nous aider à créer des fonctionnalités hautement interactives et utilisateur- application Web conviviale. Ce didacticiel expliquera comment utiliser Vue.js et l'API NetEase Cloud pour créer un site Web de musique simple. Grâce à ce projet, vous apprendrez à utiliser Vue.js et l'API pour l'interaction des données et acquerrez des connaissances de base sur Vue.js.

1. Préparation :
   Tout d'abord, nous devons créer un nouveau projet Vue. Si vous n'avez pas installé Vue CLI, vous pouvez l'installer avec la commande suivante :

npm install -g @vue/cli

Une fois l'installation terminée, utilisez la commande suivante pour créer un nouveau projet Vue :

vue create music-website

Allez dans le répertoire du projet et démarrez le développement serveur :

cd music-website
npm run serve

2. Ajouter l'API NetEase Cloud :
   Ouvrez la plateforme ouverte NetEase Cloud Music (https://music.163.com/guides/), demandez un compte de développeur et créez une nouvelle application. Après avoir obtenu l'App Key et l'App Secret de l'application, nous pouvons commencer à ajouter l'API NetEase Cloud.

Créez un fichier .env dans le répertoire racine du projet et ajoutez le contenu suivant :

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

Exécutez ensuite la commande suivante dans le répertoire racine du projet pour installer la bibliothèque axios :

npm install axios

Créez un dossier utils dans le répertoire src, et créez-y un fichier api.js. Dans le fichier api.js, nous pouvons écrire du code qui interagit avec l'API NetEase Cloud. Voici un exemple simple :

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. Créez une page de musique :
   Créez un dossier vues dans le répertoire src et créez-y un fichier Music.vue. Dans le fichier Music.vue, nous pouvons écrire le code de la page musicale. Voici un exemple simple :

<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. Configurer le routage et la page d'accueil :
   Créez un dossier de routeur sous le répertoire src et créez-y un fichier index.js. Dans le fichier index.js, nous pouvons configurer le routage. Voici un exemple simple :

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
    }
  ]
})

Dans le fichier main.js du répertoire src, nous devons introduire le routage et configurer l'instance Vue. Voici un exemple simple :

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. Exécuter le projet :
   Maintenant, nous pouvons exécuter le projet et voir les effets. Exécutez le projet via la commande suivante :

npm run serve

Ensuite, ouvrez http://localhost:8080 dans le navigateur et vous pourrez voir le site Web de musique que nous avons créé.

Conclusion : 
Grâce à ce didacticiel Vue simple et facile à utiliser, nous avons appris à utiliser Vue.js et l'API NetEase Cloud pour créer un site Web de musique. Grâce à ce projet, nous avons appris l'utilisation de base de Vue et quelques techniques Vue courantes. J'espère que ce tutoriel pourra vous aider à démarrer avec Vue et susciter votre intérêt pour le développement front-end.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!