鸡鸡静听 1.0

目标：

解决目前鸡鸡静听存在的问题，加深对vue全家桶的理解

目前存在的问题：

1. 进入页面时，现有项目框架，某些板块图片第一时间不会出来
2. 网易云api调用问题，大部分歌曲不能正常播放

还未实现的功能：

1. 歌词的滚动
2. 进度条拖拽

网易云接口

部署到

链接

目前的使用

// 导入axios实例
import request from '../request/index'
// import request from './request';

// 歌曲搜索
export const SearchData = (params: any) => request.get(`search?limit=20&keywords=${params}`)

// 歌曲详情
export const GetSongDetail = (id: any) => request.get(`/song/detail?ids=${id}`)

// 歌曲地址
export const GetSongUrl = (id: any) => request.get(`/song/url?id=${id}`)
// export const GetSongUrl = (id: any) => request.get(`https://music.163.com/song/media/outer/url?id=${id}.mp3`)

//检查歌曲是否可用
export const CheckMusic = (id: any) => request.get(`/check/music?id=${id}`)

//新碟上新
export const NewMusic = () => request.get(`/top/album?offset=0&limit=5&year=2022&month=4`)

// 轮播图
export const Banner = () => request.get(`/banner?type=0`)

// 推荐歌单
export const Recommendplaylist = () => request.get(`/top/playlist`)

// 获取歌词
export const GetLyric = (id: any) => request.get(`/lyric?id=${id}`)

// 获取歌曲评论
export const GetMusicComment = (id: any) => request.get(`/comment/hot?type=0&id=${id}`)

// 获取歌单歌曲
export const playlist = (id: any) => request.get(`/ playlist/track/all?id=${id}`)

存在问题：部分歌曲无法播放

解决办法：

**将 https://music.163.com/song/media/outer/url?id=id.mp3 以 src 赋予 Audio 即可播放**

<audio controls>
  <source :src="` https://music.163.com/song/media/outer/url?id=${id}.mp3`">
</audio>

解决完某些音乐无法播放的问题后，出现了新的问题。

1. 新歌速递板块点进去后无法接受到id，并报错

2. 从音乐详情页面跳转至其他页面时，报错
   

第一次构建项目，逻辑太过于混乱，因备考搁置了一断时间，更加看不懂了。