高仿移动端网易云音乐 Vue前端项目

13,606 阅读5分钟

技术栈

Vue + Vue-Router + Vuex + Webpack + Axios

现在就克隆下来看看吧!

Github地址: github.com/cat-walk/mu…

项目部署地址: meiyun.info

如果你发现该项目有问题,建议先看看本文底部的项目已知问题,里面可能会有说明,如果没有,欢迎issue或留言,谢谢~

前端部分

  1. 安装依赖
npm install
  1. 起项目
npm run serve

后端部分

Github地址:github.com/Binaryify/N…

后端操作见文档。



界面和功能展示

首页展示banner、推荐歌单,点击可进入排行榜

歌曲播放界面支持播放进度同步、收藏或取消收藏当前歌曲

banner、排行榜左边的三个按钮点击没有效果( ´▽`) ,没时间写那些啦...



实现了登录功能

登录后展示头像和昵称,且可进入个人中心即“我的”页面,可查看收藏的音乐和最近播放过的音乐。



搜索模块:热门搜索、搜索历史、搜索建议



项目结构

PS:

  1. 打勾的为已完成的内容,现在本项目除个人信息修改以外,其他功能都已完成。

  2. 字体加粗的部分为一个组件,第二次使用同一组件(即组件复用)时不再加粗,以做标识。

  • 1. 侧边栏模块

    • 个人信息展示(头像、昵称)
      • 个人信息修改
    • 登录按钮
      • 登录模块
  • 2. 音乐推荐模块(主页)

    • 轮播图banner模块
    • 排行榜入口
      • 排行榜模块
        • 歌单详情模块
          • 播放控制模块:实现了收藏/取消收藏歌曲的功能,实现了添加到最近播放歌曲的功能
    • 推荐歌单模块
      • 歌单详情模块
        • 播放控制模块:实现了收藏/取消收藏歌曲的功能,实现了添加到最近播放歌曲的功能
  • 3. 个人中心模块

    • 最近播放歌曲入口
      • 最近播放歌曲展示模块
        • 播放控制模块:实现了收藏/取消收藏歌曲的功能,实现了添加到最近播放歌曲的功能
    • 我的收藏入口
      • 歌单详情模块
        • 播放控制模块:实现了收藏/取消收藏歌曲的功能,实现了添加到最近播放歌曲的功能
  • 4. 搜索模块

    • 搜索框模块
      • 搜索结果模块
        • 播放控制模块:实现了收藏/取消收藏歌曲的功能,实现了添加到最近播放歌曲的功能
    • 热门搜索模块
      • 搜索结果模块
        • 播放控制模块:实现了收藏/取消收藏歌曲的功能,实现了添加到最近播放歌曲的功能
    • 搜索历史模块(与热门搜索模块公用一个组件)
      • 搜索结果模块
        • 播放控制模块:实现了收藏/取消收藏歌曲的功能,实现了添加到最近播放歌曲的功能


代码规范

使用EsLint, lint规范采用airbnb 的js 代码规范

在VSCode里配置 ESLint + Airbnb + Vue



技术方案



项目已知问题

收藏歌曲功能

  1. 点击收藏歌曲按钮后,有时会有一定的延迟(0.5s~5s,视网络情况)收藏才会成功。

    该问题可能是后台对网易云的数据做了缓存导致的。(这个思考并没有动脑子,咳咳( ´▽`)

  2. 由于尚未做节流和防抖,过于密集地点击收藏按钮时,可能会导致收藏/取消收藏功能不生效。

播放歌曲页面

  1. 由于一系列复杂的问题,通过搜索界面进入歌曲控制页面的话,没有封面图片,只有懒加载的默认图片
  2. 播放音乐时,旋转的封面图片有时会出现闪动
  3. **如果你打开某一首歌无法播放,那可能这首歌是要付费才能播放的,换一首即可。**有时间会优化需要付费才能播放的提示。

侧边栏(Vue-Slideout插件实现,=====>甩锅:) )

  1. 在"我的”页面下(还有部分其他页面),呼出侧边栏的按钮无法点击

  2. 在一些不需要侧边栏功能的页面,尚未禁用呼出侧边栏功能

  3. 侧边栏暂时只能通过左滑操作来关闭,尚未实现点击空白处关闭侧边栏

ios端

  1. 由于iOS下规定audio标签不能自动播放,因此,iOS环境下,第一次播放音乐时,需要点击暂停后再点击播放按钮,如此即可。
  2. 点击底部音乐控制面板后,有时会重新开始播放

写这个项目的经验和收获将在整理后发到我的Github上,应该不会鸽



致谢

非常感谢后台提供者Binaryify,接口很稳定,文档很完善

非常感谢CaiJinyc,我从ta的项目里学到了不少

  1. github.com/CaiJinyc/vu…
  2. github.com/Binaryify/N…