간단하고 사용하기 쉬운 Vue 튜토리얼: NetEase Cloud API를 사용하여 음악 웹사이트를 구축하는 방법

간단하고 사용하기 쉬운 Vue 튜토리얼: NetEase Cloud API를 사용하여 음악 웹 사이트를 구축하는 방법

소개:
Vue.js는 고도로 대화형이며 사용자 친화적인 환경을 구축하는 데 도움이 되는 가볍고 효율적이며 유연한 프런트 엔드 프레임워크입니다. 친숙한 웹 애플리케이션. 이 튜토리얼에서는 Vue.js 및 NetEase Cloud API를 사용하여 간단한 음악 웹사이트를 구축하는 방법을 소개합니다. 이 프로젝트를 통해 데이터 상호 작용을 위해 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 Cloud API 추가를 시작할 수 있습니다.

프로젝트의 루트 디렉터리에 .env 파일을 생성하고 다음 콘텐츠를 추가합니다.

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

그런 다음 프로젝트의 루트 디렉터리에서 다음 명령을 실행하여 axios 라이브러리를 설치합니다.

npm install axios

utils 폴더를 생성합니다. src 디렉터리에 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을 열면 우리가 만든 음악 웹 사이트를 볼 수 있습니다.

결론:
이 간단하고 사용하기 쉬운 Vue 튜토리얼을 통해 우리는 Vue.js 및 NetEase Cloud API를 사용하여 음악 웹 사이트를 구축하는 방법을 배웠습니다. 이 프로젝트를 통해 우리는 Vue의 기본 사용법과 몇 가지 일반적인 Vue 기술을 배웠습니다. 이 튜토리얼이 Vue를 시작하고 프런트 엔드 개발에 대한 관심을 불러일으키는 데 도움이 되기를 바랍니다.

위 내용은 간단하고 사용하기 쉬운 Vue 튜토리얼: NetEase Cloud API를 사용하여 음악 웹사이트를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!