vue3学习-网易云音乐移动端（第二集）

vue3学习-网易云音乐移动端----第二集

1. 网易云API安装（2021.10.13）

• 找到自己项目的文件夹，在项目文件夹下

git clone git@github.com:Binaryify/NeteaseCloudMusicApi.git

• 如果出现“Please make sure you have the correct access rights and the repository exists”，说明github验证过期，需要重新验证。

• 首先去 【C:/用户】搜索 .ssh文件夹，删除里面的所有文件

• 然后在桌面上git面板 输入

ssh-keygen -t rsa -C '你的github邮箱地址'

• 执行后，一直回车就行，里面有填写密码的，按照指示填就行，不知道就一直回车。这时候.ssh文件下会出现两个文件

• 用记事本打开id_rsa.pub文件，复制内容

• 登录github 在右上键头像里面选择Settings(设置)，找到'SSH AND GPG keys'，点击'new SSK key'，把复制的东西粘贴到key里面，点击‘ADD SSH key’

• 重新项目文件夹下打开git面板，重新git clone git@github.com:Binaryify/NeteaseCloudMusicApi.git

• 这时候就clone完成了，在自己项目下和网易云api文件下分别都git一下，执行，npm install

• 启动网易云音乐api -> 在网易云api文件下git执行'node app.js' -> 浏览器打开'http://localhost:3000/playlist/detail?id=3178936813' -> 返回数据 -> 成功

注： NeteaseCloudMusicApi文件夹必须在自己的项目文件夹下
,
,
,
,

2. 网易云API使用（2021.10.13）

• 首先确保项目中安装了axios, 官网是同时安装了两个，还有一个是vue-axios，vue自己封装的，可以直接this.$http.get().then(res=>{})使用

npm install --save axios vue-axios

// main.js
// 注意这里引入的顺序不能乱
import axios from 'axios'
import VueAxios from 'vue-axios'
app.use(VueAxios, axios)

• 新建文件夹common -> http.api.js 存放api接口，这里我没有做接口返回统一处理，请自行解决

//http.api.js
import axios from "axios";
const HOST = "http://localhost:3000";

export default {
  getBanner: (params) => {
    return axios.get(HOST + "/banner" + objectToString(params));
  },
  getHome: (params) => {
    return axios.get(HOST + "/homepage/block/page" + objectToString(params));
  },
  // ....
};

// 根据传递的object参数 变成字符串参数拼接
function objectToString(obj) {
  if (!obj) {
    return "";
  }
  let str = "?";
  for (let key in obj) {
    str += `${key}=${obj[key]}&`;
  }
  str = str.substring(0, str.length - 1);
  return str;
}

• 这里我不喜欢每次都在页面引入使用，所以就直接添加全局实例

// main.js
import api from "@/common/api.http.js";
app.config.globalProperties.$api = api; // 添加全局api实例

// xxx.vue 使用
methods:{
  getBanner(){
    this.$api.getBanner({type: 1}).then(res=>{
       console.log(res.data)
    })
  },
}

3. 未完待续...

• 以上就是怎么去使用网易云的api了

• 剩下的就是处理页面跟逻辑了

• 目前这个做的比较粗糙，很多地方都可以更深的研究，优化...

• 有问题请指正...谢谢...