今天我们就来聊聊怎么用Vue.js和网易云API搞出一个炫酷的音乐推荐神器。别担心，跟着教程一步步走，咱们从搭项目开始学起，了解音乐数据后再上手推荐曲目。这样，你也可以体验一下当技术大佬的感觉了！
创建Vue项目
首先，咱们得弄清楚项目大概怎么个构造。用VueCLI搭个基本框架挺容易的，直接在命令行敲’vuecreatemusic-recommendation’然后选几个选项设置，把必备的都添进去就行了。就像家里装修，先搞好墙壁和地面呗。
搞定了依赖，到项目目录，运行npmrunserve，再在浏览器输http://localhost:8080/，看到Vue的首页就OK了！这儿可是我们的新家，快动手装修！
vue create music-recommendation
注册网易云开发者账号
想要音乐数据？那就得赶紧申请一个网易云的开发者账号！在它们的开放平台注册个账号，然后就能拿到密钥。其实和我们超市办会员卡是一样滴，有卡才能消费。
恭喜你拿到AppKey，这就相当于是你在网易云音乐的万能钥匙哟~赶紧存到项目的.env文件中，又保险又便捷喔！
调用网易云API获取音乐数据
拿到appkey，我们就可以从网易云api获取歌曲数据。先去src文件夹创建个utils文件夹，然后放个netease.js文件进去。在这个文件中，用axios发送HTTP请求，就能从网易云那里获取歌单和推荐歌曲。
其实查看歌单详细信息的话，直接打开那个叫‘getPlaylistDetail’的小工具就行了。要是不知道该听啥歌？那就试试‘getRecommendSongs’呗，跟你的购物清单似的贴心！
VUE_APP_NETEASE_API_KEY=your_api_key
在Vue组件中展示音乐数据
搞定！咱们已经搞到了音乐数据，现在要让大家看看。建个叫Components的文件夹，再弄个叫MusicRecommendation.vue的文件呗。在这个文件里面，用v-for命令展示一下歌单就好。
家里换个新家具，整间屋子都变得舒适多了。来我们这儿听歌，一眼就能看到哥们儿我给你推荐的好听歌曲！
import axios from 'axios'
const netease = axios.create({
baseURL: 'https://netease-api.com/v1',
headers: {
'Content-Type': 'application/json'
}
})
export function getPlaylistDetail(playlistId) {
return netease.get(`/playlist/detail?id=${playlistId}`)
.then(response => response.data)
}
export function getRecommendSongs(limit) {
return netease.get(`/recommand/songs?limit=${limit}`)
.then(response => response.data.songs)
}
配置Vue路由
首先，你要把家里的路由器设置好，这样我们的音乐推荐页就能被大家看到！首先，到src目录下新建一个router文件夹和一个index.js文件。在这个文件里头就可以用VueRouter搞定这些事儿，然后再添加一些路由规则，把主路径’/’和MusicRecommendation组件连接起来就行。
这就跟安个新家的门锁似的，要保证对的人才进得了你家的客厅。
将VueRouter实例添加到Vue实例
最后这一下儿了，赶紧把路由塞进Vue框架里哈~要找到src文件夹里的main.js文件，然后在开头部分添加路由实例就行。这样一搞，谁要是点击主页，就能直接看到我们的音乐推送页面！
这个过程有点像给新家通上电，确保所有的家电都能正常工作。
import { getRecommendSongs } from '@/utils/netease' export default { data() { return { songs: [], loading: true } }, mounted() { getRecommendSongs(10) .then(songs => { this.songs = songs this.loading = false }) .catch(error => { console.error(error) this.loading = false }) } }智能音乐推荐引擎
加载中...
- {{ song.name }} - {{ song.artist }}
测试与优化
项目刚启动，得看看会不会出bug。先打开网页，输入`http://localhost:8080/`，看看推荐歌曲能不能正常显示。如果发现问题，就赶紧调试下代码，让它更完美些！
装好新房子了，像检查房间布置得怎么样，哪里不完美就要微调一下。
部署上线
import Vue from 'vue'
import VueRouter from 'vue-router'
import MusicRecommendation from '@/components/MusicRecommendation.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'MusicRecommendation',
component: MusicRecommendation
}
]
const router = new VueRouter({
routes
})
export default router
搞定测试后，就可以让项目上线了！用个好用的平台，像Vercel或者Netlify这样的，直接把项目扔到网上。现在全世界都能用到你的智能音乐推荐神器！
这就好比是来个大扫除，弄得家里干净整洁，邀请朋友过来，让大家都体验一下你那高大上的生活！
好，说白了，我就是想教你们怎么用Vue跟网易云API搭出一个超厉害的音乐推荐系统。从建立项目，到拿到数据，再到最终的展现和上线，每步我都会细细讲解，保证让你看得懂，学得会。别忘了，遇到不懂的问题或有什么好想法，尽管提出来，我们一起探讨学习！
import router from '@/router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
评论0