rayonchen / react-music-webapp

一个综合练习项目,前端技术栈:react全家桶+antd,antd-mobile。后端node.js。数据库mongodb

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React音乐webApp(react技术栈+node.js+mongodb)

技术:React16,Redux,React-Router,Node.js,MongoDB,WebPack,Express

现在的数据都是是自己mock的,开发后台的时候会对接真实数据,由于收藏歌单,新建歌单,收藏单曲等功能需要后台配合,所以现在都是纯前端展示,不具备功能

播放器内核模块

  • 上一曲,下一曲,播放,暂停
  • 播放列表的展开收缩
  • 列表内歌曲的删除
  • 页面内歌曲添加到播放列表
  • 播放详情页的展开与收缩
  • 播放模式选择(顺序播放,随机播放,单曲循环)
  • 封面图片旋转
  • 当前播放歌曲高亮显示

曲库模块

  • redux内请求数据
  • banner,每日推荐,曲库好歌
  • banner与每日推荐可点击进入二级页页面,二级页面基于歌曲列表组件构建,展示歌曲列表,实现列表内歌曲点击播放与添加进播放器播放列表
  • 曲库好歌为直接的列表展示,功能同上
  • 列表歌曲进场动效展示
  • 收藏歌曲(待开发)

我的模块

  • 我的资料(待开发)
  • 收藏的单曲
  • 结合业务场景,单独开发一个可编辑的歌曲列表,实现歌曲的移除,点击播放开始顺序播放
  • 新建歌单(待开发)
  • 基于歌单列表组件,构建收藏的歌单二级页面、创建的歌单列表,实现歌单的单个删除功能

发现

  • 搜索歌曲(功能待完善)
  • 排行榜
  • 风格模块

登录(待开发)

About

一个综合练习项目,前端技术栈:react全家桶+antd,antd-mobile。后端node.js。数据库mongodb


Languages

Language:JavaScript 85.9%Language:CSS 12.8%Language:HTML 1.3%