如何使用Vue和网易云API开发一款个性化的歌单推荐系统

vue create song-recommendation-system

cd song-recommendation-systemnpm install axios vue-router

import axios from 'axios';const api = axios.create({  baseURL: 'https://api.apiopen.top',});export const getRecommendations = () => {  return api.get('/recommendSongs');};export const getSongDetail = (id) => {  return api.get(`/song/detail?id=${id}`);};export const getPlaylistDetail = (id) => {  return api.get(`/playlist/detail?id=${id}`);};

<template>  <div>    <h2>个性化推荐</h2>    <ul>      <li v-for="(song, index) in songs" :key="index">        <p>{{ song.name }}</p>        <p>{{ song.artist }}</p>      </li>    </ul>  </div></template><script>import { getRecommendations } from '../api';export default {  data() {    return {      songs: [],    };  },  mounted() {    this.fetchRecommendations();  },  methods: {    fetchRecommendations() {      getRecommendations()        .then((response) => {          this.songs = response.data.result || [];        })        .catch((error) => {          console.error(error);        });    },  },};</script>

import Vue from 'vue';import VueRouter from 'vue-router';import Recommendations from './components/Recommendations';Vue.use(VueRouter);const router = new VueRouter({  mode: 'history',  routes: [    { path: '/', component: Recommendations },  ],});export default router;

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');

<template>  <div id="app">    <header>      <router-link to="/">首页</router-link>    </header>    <main>      <router-view></router-view>    </main>    <footer></footer>  </div></template>

npm run serve