Vue3前端开发Axios实战：网易云音乐随机歌曲

        最近学了网络请求库Axios相关知识，使用Vue3框架完成了一个小小的实战——网易云音乐随机歌曲，对相关知识进一步巩固。

        下面将记录以下完成该实战的步骤和一些心得：

        1.网易云音乐接口api

        从“https://api.uomg.com/api/rand.music”接口可以获取音乐的信息，如音乐名称、歌手、图像等。

        请求示例：https://api.uomg.com/api/rand.music?sort=热歌榜&format=json

        返回示例：        

{
 "code": 1,
 "data": {
  "name": "隔壁泰山",
  "url": "http:\/\/music.163.com\/song\/media\/outer\/url?id=862101001.mp3",
  "picurl": "http:\/\/p1.music.126.net\/pbT0ag5PXJwYzFJ7YklMCA==\/109951163386629013.jpg"
 }
}

2.安装Axios和创建vue3项目——vue3-axios-music

        首先要下载axios，使用npm包管理工具进行安装:

npm install axios --save

        使用npm和vite进行搭建该项目，步骤如下：

//1.
npm create vite@latest vue3-axios-music

//2.
cd vue3-axios-music

//3.接着会让你选择使用的框架，这里使用vue+JavaScript

//4.--save表示项目运行时依赖
npm add axios@你下载的版本号 --save

//5.启动项目
npm install
npm run dev

        可以在package.json文件中看到，已经把axios依赖导入到项目中：

3.编写代码获取接口音乐资源

        在VSCode中打开创建好的项目vue3-axios-music,清空App.vue中的代码，保留基础结构：

<script setup>

</script>

<template>
 
</template>

<style scoped>

</style>

        接着在src目录下创建axios文件夹，创建request.js文件，将Axios封装成模块并导出：

import axios from "axios";

const request = axios.create({
    tomeout: 2000
})

export default request

       如果那个组件需要使用axios模块，可以使用import在组件中进行导入

       在component文件夹中创建组件——music.vue，用来获取接口资源，并使用模板进行渲染：

       在网络请求响应返回的结果中，我们需要的信息都存储在返回信息的data对象中，使用响应式变量进行接收歌曲的相关信息。为方便，这里使用的是请求方式的别名axios.get(url[,config])进行网络请求，在配置中，通过params对象传递参数，明确返回对象为json格式。

        在randomMusic（）函数中执行axios.get().then().catch()进行请求，并将返回的数据提取出来赋值给定义好的响应式变量。randomMusic（）绑定到一个按钮上，每点击一次按钮，进行一次网络请求，歌曲将更换一次。

        在onMounted（）中进行同样的网络请求、数据获取，目的是在项目挂载之后自动进行网络请求，模板将获取到的数据进行渲染出来。（也可以直接在onMounted（）中直接调用randomMusic()方法）。

<script setup>
import { onMounted, ref } from 'vue'
import request from '../axios/request.js'//在组件中导入模块

const music_name = ref('')      //获取音乐名称
const music_artistname = ref('')    //获取歌手名字
const music_url = ref('')       //获取音乐的url
const music_pictureUrl = ref('')   //获取音乐的背景



//编写函数，通过axios进行网络请求，获取音乐相关资源
const randomMusic = () => {
  request
    .get('https://api.uomg.com/api/rand.music', {
      params: {
        format: 'json'   // 明确要求返回 JSON 格式
      }
    })
    .then((res) => {
      console.log(res)

      if (res.status == 200) {
        music_name.value = res.data.data.name
        music_artistname.value = res.data.data.artistsname
        music_url.value = res.data.data.url
        music_pictureUrl.value = res.data.data.picurl
      }


    })
    .catch((error) => {
      console.log(error)
    })

}

//获取初始的音乐信息，使用onMounted（）
onMounted(() => {
  request
    .get('https://api.uomg.com/api/rand.music', {
      params: {
        format: 'json'   // 明确要求返回 JSON 格式
      }
    })
    .then((res) => {
      console.log(res)
      if (res.status == 200) {
        music_name.value = res.data.data.name
        music_artistname.value = res.data.data.artistsname
        music_url.value = res.data.data.url
        music_pictureUrl.value = res.data.data.picurl
      }


    })
    .catch((error) => {
      console.log(error)
    })
})

</script>


<template>
  <div class="container">
    <h1>网易云音乐随机歌曲</h1>
    <div>
      <button @click="randomMusic">换一首</button>
    </div>
    <hr />
    <div class="music-info">
      <div>音乐名称：{{ music_name }}</div>
      <div>作者：{{ music_artistname }}</div>
      <div>音乐 URL：{{ music_url }}</div>
    </div>
    <div>
      背景图片：
      <img :src="music_pictureUrl" alt="Music Picture" />
    </div>
    <audio :src="music_url" controls>
      Your browser does not support the audio element.
    </audio>
  </div>
</template>

        4.运行结果

5.补充

（1）Axios请求方式的别名：

axios.request(config)        //请求数据
axios.get(url[,config])        //获取数据
axios.post(url[,data [,config]])        //提交数据
axios.delete(url[,config])        //删除数据
axios.head(url[,config])        //获取报文首部
axios.put(url[,data [,config]])        //更新数据
axios.patch(url[,data [,config]])        //局部更新数据

（2）响应式类型在哪里需要使用.value获取值

（3）在测试这个项目时，有时候在访问网易云音乐API的时候会报错，连接不上，可能和当时访问的人太多有关？测试时是晚上，一直到11点多才能正常连接上，但也时不时会出现问题。到第二天白天在测试时，就没有出现过这些问题了。而且只能播放部分歌曲，还有部分歌曲能获取相关信息，当无法进行播放，可能是vip歌曲。

参考资料：

https://www.aeink.com/330.html

《Vue.js 3.x 前端开发技术与实战》——储久良  清华大学出版社