react技术栈仿App版网易云音乐
发布于 6 年前 作者 Kim09AI 3736 次浏览 最后一次编辑是 5 年前 来自 分享

react-music

本来没打算写网易云音乐的,好像都已经被大家写烂了,不过没办法,暂时想不到其他的可写,加上网易云音乐又有API,还可以基于restful API做一层graphql的处理再提供给前端调用,然后才决定用react写了这个仿app版网易云音乐

技术栈

  • react
  • react-router
  • redux
  • react-redux
  • react-motion
  • better-scroll
  • ES6/7
  • stylus
  • koa
  • graphql

实现的功能

  • 发现页
  • 我的
  • 电台页
  • 侧边栏
  • 歌单内页
  • 电台内页
  • 搜索页及结果页
  • 上一首
  • 下一首
  • 播放模式切换
  • 歌曲删除
  • 歌词
  • 左右滑切歌

运行

git clone git@github.com:Binaryify/NeteaseCloudMusicApi.git

这是网易云API,因为最新的banner数据已经改了,可以git reset --hard d155a1fc0177e525cb650d239b8a98a8549a85e1回退到这次提交

cross-env PORT=8080 npm start

首先启动api服务器,需要用8080端口启动

git clone git@github.com:Kim09AI/react-music.git

# dev模式
# 先启动graphql服务器
$ cd server && npm run dev
# 再回到根目录
$ npm start

# production模式
# 首次build前先执行(因为使用了dll)
$ npm run build:dll
$ npm run build
# 本地以production模式启动服务器
cd server && npm start

预览

线上地址 github地址 移动端预览 此处输入图片的描述

此处输入图片的描述

此处输入图片的描述

此处输入图片的描述

react使用的一些总结

主要还是在react-redux的使用了,数据应该保存在state还是全局的store,主要还是看数据需不需要共享,或者是需不需要缓存,不然存在store反而会使问题变得更麻烦

最后

感谢Binaryify提供的NeteaseCloudMusicApi 欢迎starfork,有问题或有发现bug页欢迎提issues,写的不好的地方也请大佬指点

6 回复

登录功能无法用?

@chapgaga 没做登陆

node V8.5.0 运行 $ cd server && npm run dev报错 Image 1527747157.png

@GreatAuk 先安装依赖,分别在根目录及server目录npm i

回到顶部