Home > Article > Web Front-end > 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.
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
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; }
<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 } ] })
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')
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!