간단하고 사용하기 쉬운 Vue 튜토리얼: NetEase Cloud API를 사용하여 음악 웹 사이트를 구축하는 방법
소개:
Vue.js는 고도로 대화형이며 사용자 친화적인 환경을 구축하는 데 도움이 되는 가볍고 효율적이며 유연한 프런트 엔드 프레임워크입니다. 친숙한 웹 애플리케이션. 이 튜토리얼에서는 Vue.js 및 NetEase Cloud API를 사용하여 간단한 음악 웹사이트를 구축하는 방법을 소개합니다. 이 프로젝트를 통해 데이터 상호 작용을 위해 Vue.js 및 API를 사용하는 방법을 배우고 Vue.js에 대한 기본 지식을 얻습니다.
npm install -g @vue/cli
설치가 완료된 후 다음 명령을 사용하여 새 Vue 프로젝트를 생성합니다.
vue create music-website
프로젝트 디렉터리를 입력하고 개발 서버를 시작합니다. :
cd music-website npm run serve
프로젝트의 루트 디렉터리에 .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; }
<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>
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')
npm run serve
그런 다음 브라우저에서 http://localhost:8080을 열면 우리가 만든 음악 웹 사이트를 볼 수 있습니다.
결론:
이 간단하고 사용하기 쉬운 Vue 튜토리얼을 통해 우리는 Vue.js 및 NetEase Cloud API를 사용하여 음악 웹 사이트를 구축하는 방법을 배웠습니다. 이 프로젝트를 통해 우리는 Vue의 기본 사용법과 몇 가지 일반적인 Vue 기술을 배웠습니다. 이 튜토리얼이 Vue를 시작하고 프런트 엔드 개발에 대한 관심을 불러일으키는 데 도움이 되기를 바랍니다.
위 내용은 간단하고 사용하기 쉬운 Vue 튜토리얼: NetEase Cloud API를 사용하여 음악 웹사이트를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!