シンプルで使いやすい Vue チュートリアル: NetEase Cloud API を使用して音楽 Web サイトを構築する方法

シンプルで使いやすい Vue チュートリアル: NetEase Cloud API を使用して音楽 Web サイトを構築する方法

はじめに:
Vue.js は、軽量で効率的かつ柔軟なフロントエンド フレームワークです。強力な対話性とユーザーフレンドリーなエクスペリエンスを備えた Web アプリケーションの構築に役立ちます。このチュートリアルでは、Vue.js と NetEase Cloud API を使用して簡単な音楽 Web サイトを構築する方法を紹介します。このプロジェクトを通じて、データ対話に Vue.js と API を使用する方法を学び、Vue.js に関する基本的な知識を習得します。

1. 準備:
   まず、新しい Vue プロジェクトを作成する必要があります。 Vue CLI をまだインストールしていない場合は、次のコマンドを使用してインストールできます:

npm install -g @vue/cli

インストールが完了したら、次のコマンドを使用して新しい Vue プロジェクトを作成します:

vue create music-website

プロジェクト ディレクトリを入力し、開発サーバーを起動します:

cd music-website
npm run serve

2. NetEase Cloud API を追加します:
   NetEase Cloud Music Open Platform (https://music.163.com/guides/) を開きます。開発者アカウントを申請し、新しいアプリケーションを作成します。アプリケーションのアプリ キーとアプリ シークレットを取得したら、NetEase クラウド API の追加を開始できます。

プロジェクトのルート ディレクトリに .env ファイルを作成し、次の内容を追加します:

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

次に、プロジェクトのルート ディレクトリで次のコマンドを実行して、axios をインストールします。 library:

npm install axios

src ディレクトリに utils フォルダーを作成し、その中に api.js ファイルを作成します。 api.js ファイルでは、NetEase Cloud API と対話するコードを作成できます。以下は簡単な例です:

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. 音楽ページを作成します:
   src ディレクトリに views フォルダーを作成し、その中に Music.vue ファイルを作成します。 Music.vue ファイルには、音楽ページのコードを記述できます。以下は簡単な例です:

<template>
  <div>
    <h1 id="音乐网站">音乐网站</h1>
    <div>
      <h2 id="热门排行榜">热门排行榜</h2>
      <ul>
        <li v-for="song in topList" :key="song.id">{{ song.name }}</li>
      </ul>
    </div>
    <div>
      <h2 id="搜索歌曲">搜索歌曲</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. ルーティングとホームページを構成します:
   src ディレクトリにルーター フォルダーを作成し、その中にindex.js ファイルを作成します。 Index.js ファイルでは、ルーティングを構成できます。以下は簡単な例です:

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

src ディレクトリの main.js ファイルで、ルーティングを導入し、Vue インスタンスを構成する必要があります。以下は簡単な例です:

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. プロジェクトの実行:
   これで、プロジェクトを実行して効果を確認できます。次のコマンドを使用してプロジェクトを実行します。

npm run serve

次に、ブラウザで http://localhost:8080 を開くと、作成した音楽 Web サイトが表示されます。

結論:
このシンプルで使いやすい Vue チュートリアルを通じて、Vue.js と NetEase Cloud API を使用して音楽 Web サイトを構築する方法を学びました。このプロジェクトを通じて、私たちは Vue の基本的な使用法といくつかの一般的な Vue テクニックを学びました。このチュートリアルが、Vue を使い始めて、フロントエンド開発への興味を刺激するのに役立つことを願っています。

以上がシンプルで使いやすい Vue チュートリアル: NetEase Cloud API を使用して音楽 Web サイトを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。