react技术栈仿App版网易云音乐

最新推荐文章于 2022-02-22 17:25:51 发布

转载最新推荐文章于 2022-02-22 17:25:51 发布 · 603 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000015046508

文章标签：

#javascript #git #前端 #ViewUI

本文介绍了一个基于React实现的网易云音乐应用项目，利用React、Redux等技术栈实现了包括发现页、我的、电台页等功能，并详细介绍了项目的运行方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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