Vue+网易云API，打造你的个性歌单

你喜欢唱歌么？找好听的歌是不是有点累？要有个好用的音乐推荐系统才行。别急，看下我这篇文章，教你用Vue框架和网易云API做个能展示个人品味的歌单，以后听歌会更简单快乐！

准备工作

别着急要先准备齐全再开工！谁说不是，先安插上Node.js和Vue.js这两大神器，用它们来写JavaScript代码和布局网页简直得心应手。然后，赶紧在网易云音乐创建个账户，拿到API密钥后就能轻松地抢歌记得编码时细心点儿，特别建议用 VS Code这款利器！

项目搭建

vue create music-match

cd music-match

搞定前戏后我们快出发！用命令行敲敲打打，三下五除二就能建立个全新的Vue项目。然后立刻跳转到那个储存文件夹去。搞定之后安装上必要的支持模块，这样项目就能顺畅地跑起来最后，我们只需要键入相应指令打开项目，输入给定网址，你的项目页面就在眼前~

npm install axios

引入网易云API

想要让网易云音乐和我们的程序互动，简直太容易了！首先，创建一个叫做“api”的文件夹，里面放上那个叫”netease.js”的小玩意儿。然后，用AXIOS发送个HTTP请求就行，这样就能连接到网易云API了。千万别忘了设置专门的apiBaseUrl，找歌非常方便，呵呵~最后，只要用Promise把找到的信息带回来就ok了！

编写组件

import axios from 'axios';
const apiBaseUrl = 'https://api.music.com';
export const searchSong = async (keyword) => {
  try {
 const response = await axios.get(`${apiBaseUrl}/search`, {
   params: {
     keyword: keyword,
   },
 });
 return response.data;
  } catch (error) {
 throw new Error('Failed to fetch song data');
  }
};

记住，你的Vue项目里，用组件建网页可是超级厉害滴功能！首先，你得在 src文件夹里搞个新的文件夹叫 components。然后搞定Search.vue文件！里面要有个叫 Search 的 Vue 组件，弄好关键词搜索 song，还有从 API那里搞来的songs数据。点下 search，就能自动帮你启动搜索 song 函数了，搜出来的歌都跑到 songs数组里！不过别忘，输入框和搜索按钮要跟 keyword和 search方法配合默契，这样网上听歌才够方便

引入组件

赶紧去看看App.vue文件，加个Search组件，还要记得注册一下哟。搞定后就把这个小盒子拖到网页上，以后搜歌就方便啦～找歌就是这么轻松，还能让我们的音乐推荐更好玩儿！

  

 
 搜索
 

   
{{ song.name }}
 
  


import { searchSong } from '../api/netease';
export default {
  data() {
 return {
   keyword: '',
   songs: [],
 };
  },
  methods: {
 async search() {
   try {
     const response = await searchSong(this.keyword);
     this.songs = response.songs;
   } catch (error) {
     console.error(error);
   }
 },
  },
};

系统测试

搞定文档，轻点两下方向键关掉软件。重新启动APP，就能看到要找的那首歌了这个超方便实用的方法是我们特意给大家准备的小秘密喔~

用Vue加网易云API做出的配乐操作好厉害！还是免费的，感觉还有点神秘感。个性音乐服务都没问题，我来告诉你怎么做，建个项目，连上API，编译个小插件，试试能不能用就行了，很简单的？希望这个分享能让你学会怎么用Vue和API编程技巧

  

 
  


import Search from './components/Search.vue';
export default {
  components: {
 Search,
  },
};

。