React-music 全家桶项目,精品之作!


声明:本文转载自https://my.oschina.net/Jonechen/blog/1557028,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。

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、项目动图预览:

由于这里不能上传大于1MB的图片,所以直接移步Github看源码和动图吧!

二、项目结构

├── src               			项目主文件目录 │   ├── actions           		Redux actions │   │   ├── 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 reducers │   │   ├── 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

本文发表于2017年10月27日 12:34
(c)注:本文转载自https://my.oschina.net/Jonechen/blog/1557028,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 2388 讨论 0 喜欢 0

抢先体验

扫码体验
趣味小程序
文字表情生成器

闪念胶囊

你要过得好哇,这样我才能恨你啊,你要是过得不好,我都不知道该恨你还是拥抱你啊。

直抵黄龙府,与诸君痛饮尔。

那时陪伴我的人啊,你们如今在何方。

不出意外的话,我们再也不会见了,祝你前程似锦。

这世界真好,吃野东西也要留出这条命来看看

快捷链接
网站地图
提交友链
Copyright © 2016 - 2021 Cion.
All Rights Reserved.
京ICP备2021004668号-1