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

linjisong 发布于2月前
0 条问题

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

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

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

实现了登录功能

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

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

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

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

项目结构

PS:

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

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

  • 1. 侧边栏模块

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

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

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

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

代码规范

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

在VSCode里配置 ESLint + Airbnb + Vue

技术方案

项目已知问题

  1. 点击收藏歌曲按钮后,会有一定的延迟(0.5s~5s)收藏才会成功。
  2. 频繁点击收藏按钮会导致收藏/取消收藏功能不生效。

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

  1. 打开侧边栏的按钮有时会失效(侧边栏使用了vue-slideout插件 =====>甩锅:)
  2. 由于一系列复杂的问题,通过搜索界面进入歌曲控制页面的话,没有封面图片,只有懒加载的默认图片

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

查看原文: 高仿网易云音乐 Vue前端项目

  • organicostrich
  • smallbird
  • greenbird
  • purplepanda
  • redostrich
  • beautifulbear
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。