React-music 全家桶项目

  • Z时代
  • 2024-01-10
  • 分类：综合

react

 React-Music 全家桶项目

一、简介

该项目是基于React全家桶开发的一个音乐播放器，技术栈采用：Webpack + React + React-redux + React-router + Node + Sass + Es6 + Localstorage + Css3，基本音乐API使用http-proxy酷狗音乐的，在此感谢酷狗音乐！项目涉及的知识点非常广泛，基于react全家桶技术都有使用，独立开发，精品之作，具有很好的参考价值！

1、项目依赖基本核心版本：

react: "^15.6.1",
react-dom: "^15.6.1",
react-router: "^4.2.0",
react-router-dom: "^4.2.2"
react-redux: "^5.0.6",
redux: "^3.7.2",
webpack: "^3.5.5",
webpack-dev-server: "^2.7.1"

2、该音乐播放器基本功能：

展示最新的推荐歌单、歌单、排行榜、歌手；
音乐的播放、暂停、上一首、下一首、删除当前播放列表功能；
基本搜索功能；
喜欢音乐加入收藏列表；
模拟登录功能（随便输入用户名，密码即可）；

3、项目Github地址： react-music 

4、项目基本预览，直接移步 github 吧!

二、项目结构

├── src（主目录）　　　　　　　　　　　　　　 
│ ├── actions（Redux action）　　　　　　　　　　 
│ │ ├── xxx.js
│ │ └── ...
│ ├── components（木偶组件目录）　　　　　　　　 
│ │ ├── Artist
│ │ │ ├── xxx.js
│ │ │ └── ...
│ │ ├── Common
│ │ │ ├── xxx.js
│ │ │ └── ...
│ │ ├── Home
│ │ │ ├── xxx.js
│ │ │ └── ...
│ │ ├── New
│ │ │ ├── xxx.js
│ │ │ └── ...
│ │ ├── Play
│ │ │ ├── xxx.js
│ │ │ └── ...
│ │ ├── Rank
│ │ │ ├── xxx.js
│ │ │ └── ...
│ │ ├── Search
│ │ │ ├── xxx.js
│ │ │ └── ... 
│ │ └── User
│ │ ├── xxx.js
│ │ └── ...
│ ├── constants（Constant常量） 
│ │ └── index.js
│ ├── reducers（Redux reducer） 
│ │ ├── index.js
│ │ └── ...
│ ├── containers（智能组件目录） 
│ │ ├── Artist
│ │ │ ├── xxx.js
│ │ │ └── ...
│ │ ├── Home
│ │ │ ├── xxx.js
│ │ │ └── ...
│ │ ├── New
│ │ │ ├── xxx.js
│ │ │ └── ...
│ │ ├── Play
│ │ │ ├── xxx.js
│ │ │ └── ...
│ │ ├── Rank
│ │ │ ├── xxx.js
│ │ │ └── ...
│ │ ├── Search
│ │ │ ├── xxx.js
│ │ │ └── ... 
│ │ └── User
│ │ ├── xxx.js
│ │ └── ...
│ ├── routes（路由） 
│ │ └── index.js
│ ├── static（静态目录） 
│ │ ├── css
│ │ │ ├── xxx.scss
│ │ │ └── ... 
│ │ └── images
│ │ └── ...
│ ├── store（Redux store） 
│ │ └── configureStore.js
│ ├── util（工具目录） 
│ │ ├── xxx.js
│ │ └── ...
├── templates（模板） 
│ └── index.html 
├── dist（打包目录） 
│ ├── css 
│ │ └── xxx.css
│ ├── js 
│ │ ├── xxx.js
│ │ └── ...
│ ├── favicon.ico
│ └── index.html
├── node_modules 
│ └── ... 
├── README.md
├── app.js（Express启动配置） 
├── server.js（主服务配置）　　　　　　　　　 
├── webpack.config.js（基本配置） 
├── webpack.prod.config.js（生产环境配置） 
├── yarn.lock 
└── package.json

screenshot与images.md为截图说明文件，是为了方便查看，与本项目无关！

三、如何执行

1、将项目克隆到本地，cd 到 react-music

git clone git@github.com:chenjun1127/react-music.git
cd react-music

2、安装依赖

npm install or yarn install

3、执行

npm start or yarn start
// npm run build(打包)

4、打开浏览器浏览 http://localhost:3000/

四、项目总结

整体项目实现了一个基本播放器应有的功能，但个别功能还有待完善，比如收藏列表本地持续化存储、登录注册未做真正限制等。觉得项目不错的，可以给个Star，谢谢！

Tips：在npm install or yarn install 的时候，请确保网络良好，如个别依赖安装不了，请设置淘宝镜像为安装源；

如有问题：请联系QQ：402074940

以上是 React-music 全家桶项目 的全部内容， 来源链接： utcz.com/z/381789.html

回到顶部