2024年06月07日 建站教程
如何利用Vue和网易云API开发一款个性化音乐app插件,下面web建站小编给大家简单介绍一下具体实现方法!
1、安装脚手架
vue create music-app
2、引入网易云API封装api.js
import axios from 'axios'; const apiClient = axios.create({ baseURL: 'https://api.netease.com', headers: { 'Content-Type': 'application/json', }, }); export default apiClient;
3、实现音乐推荐功能
<template> <div> <h1>音乐推荐</h1> <ul> <li v-for="song in songs" :key="song.id"> {{ song.name }} - {{ song.artist }} </li> </ul> </div> </template> <script> import apiClient from './api'; export default { data() { return { songs: [], }; }, mounted() { this.getRecommendations(); }, methods: { async getRecommendations() { try { const response = await apiClient.get('/recommendations'); this.songs = response.data; } catch (error) { console.error(error); } }, }, }; </script>
本文链接:http://so.lmcjl.com/news/6099/