提前准备

vue3
网易云接口API 一个大佬写的 原理是模拟登录去网易云音乐发起请求。网址源码地址
网易云音乐官网

elementPlus

歌曲详情

分析接口

这个接口是歌曲详情、如果只有一首歌只需要传一个id。那我们只需要将轮播图片对应歌曲的id传给我们个这歌曲播放详情页面。

获得id

添加router

我们使用这种动态路由匹配的方式来传这个id、不使用 ?id = 123 这种传参的方式。

     {
        path:'song/:id',
        name:'Song',
        component: () => import('@/client/Song/Song.vue')
    }
复制代码

跳转

跳转时将id拼接到最后

歌曲页面获得id

新建一个 Song.vue。

这里用到了 useRouter 这个Hook。然后通过 router.currentRoute.value.params 可以得到 :id 路由中我们传的id值。

<template>
  songs
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router"
import { ref } from "vue"
const router = useRouter()
// 这里因为 ref的处理 所以会多一层value,这里解构了两次
const {value:{id}} = ref(router.currentRoute.value.params)
console.log(router)
</script>
<style>
</style>
复制代码

我们看一下这个router对象，他的原型上有go、push、back、以及我们要用的 currentRoute

我们再看一下currentRoute，它上面的 value.param 正是匹配出的我们想要的id。

根据id请求接口

在我们的api文件下(封装后的接口文件)的song.ts中，写一下axios对后端接口的调用。

import request from "@/utils/request";

export const songDetail = (param:any)=>{
  return request({
        method:'POST',
        // 这里会和我们request.ts中的baseUrl进行拼接。这个 / 写不写都可以。 因为他有一个多退少补机制
        url:'/api/song/detail',
        data:param
    })
}
复制代码

然后在song页面中调用这里我声明了两个响应式变量:songList、picUrl用于存放整个歌曲详情数据和歌曲详情对应的封面图片。

<script lang="ts" setup>
import { ref } from "vue"
import { useRouter } from "vue-router"
import { songDetail } from '@/api/song'
const router = useRouter()
// 歌曲id
const {value:{id}} = ref(router.currentRoute.value.params)
// 图片
let picUrl = ref('')
// 歌曲列表
const songList = ref();
const getSongDetail = async()=>{
    const {data:res} = await songDetail({ids:id})
    console.log(res.songs[0].al)
    songList.value = res?.songs[0]
    res? picUrl.value = res?.songs[0].al.picUrl:''
}
getSongDetail()
</script>
复制代码

将图片模糊作为背景

先看一下效果。这里展示了两次图片，其中一个进行了高斯模糊

这里，让最外层的container位置为相对定位，并且不让他滚动。
然后，作为背景图片的外层div :coverImg，让其位置在container的位置绝对定位。对其进行了放大和模糊处理
main_container 与coverImg同级，我要它是可以滚动的。同样也是绝对位置，让其背景色为透明。给他一个 max-height，并让其可以滚动。

<template>
<div class="container">
  <!-- 作为背景图片 -->
  <div class="coverImg">
   <el-image :src="picUrl" style="height:100%"></el-image>
  </div>
  <div class="main_container">
    <div class="song_info">
        <el-image :src="picUrl" ></el-image>
    </div>
  </div>
</div>
</template>
复制代码


<style scoped lang="scss">
.container{
    width:100%;
    background:#ffffff;
    height:100%;
    overflow: hidden;
    position: relative;
}
 .coverImg{
        position:absolute;
        filter: blur(120px);
        transform: scale(1.3);
        z-index:9;
}
.main_container{
    position:absolute;
    // top:0;
    overflow: scroll;
    width:100%;
    max-height:800px;
    background: transparent;
    z-index:10;
   
    .song_info{
        width:30%;
        height:10000px;
        overflow: auto;
    }
}

</style>
复制代码

【我在做毕设】音乐歌曲播放[1]