React Music WebApp乾蓬，在聽(tīng)音樂(lè)的時(shí)候忽然想聽(tīng)騰格爾的鋼鐵之翼（隱形的翅膀），在網(wǎng)易云上卻找不到慎恒，就很氣任内。于是想到了做一個(gè)，音樂(lè)搜索的功能巧号，把所有想聽(tīng)的歌族奢，能夠一次性在酷狗姥闭、網(wǎng)易云丹鸿、QQ、蝦米等平臺(tái)上找找完棚品。本項(xiàng)目非常適合新手練習(xí)熟悉react全家桶靠欢，歡迎start哦廊敌。
地址(歡迎start哦~)
在線地址:http://music.wuhann.cn/#/home
后端github地址:https://github.com/Mohannnnn/react-music-koa2
前端github地址:https://github.com/Mohannnnn/react-music
技術(shù)棧
React + React-router + Redux + React-redux + ES6/7 + webpack4 + Ant Design + Ant Motion + Fetch/Axios + Scss
目錄結(jié)構(gòu)
│ .babelrc #babel的規(guī)則以及插件
│ .editorconfig #IDE/編輯器相關(guān)的配置
│ .eslintignore #Eslint忽視的目錄
│ .eslintrc.js #Eslint的規(guī)則和插件
│ .gitignore #Git忽視的目錄
│ .postcssrc.js #postcss的插件
│ package-lock.json
│ package.json #項(xiàng)目相關(guān)的包
│ README.md
│ yarn.lock
│
├─build #webpack相關(guān)的配置
│ utils.js #webpack配置中的通用方法
│ webpack.base.conf.js #webpack的基礎(chǔ)配置
│ webpack.dev.conf.js #webpack的開(kāi)發(fā)環(huán)境配置
│ webpack.prod.conf.js #webpack的生產(chǎn)環(huán)境配置
│
└─src #主目錄，業(yè)務(wù)代碼
│ app.css
│ App.js
│ favicon.ico
│ index.ejs
│ index.js
│
│-api #接口api等配置
│-compontents #組件
│-store #Redux管理目錄
│-utils #工具函數(shù)位置
│-router #路由
└─assets #靜態(tài)目錄门怪，存放靜態(tài)資源
V1.0實(shí)現(xiàn)的功能
- 1.推薦歌單頁(yè)
- 2.推薦歌單詳情頁(yè)
- 3.熱門(mén)歌曲頁(yè)
- 4.播放頁(yè)
- 5.搜索（QQ音樂(lè)骡澈、網(wǎng)易云、酷狗）
- 6.音樂(lè)全局播放
- 7.歌詞同步(在播放頁(yè)掷空，點(diǎn)擊轉(zhuǎn)動(dòng)的圖片)
- 8.切換上一首肋殴、下一首
V2.0實(shí)現(xiàn)的功能
- 1.添加到歌單、從歌單刪除坦弟、刪除全部
- 2.歌詞動(dòng)畫(huà)护锤、以及每個(gè)路由下的頁(yè)面出場(chǎng)動(dòng)畫(huà)
- 3.隨機(jī)播放、順序播放
- 4.音量控制（未做,感覺(jué)意義不大,手機(jī)能自己調(diào)）
- 5.其他(待定功能酿傍，想到在做)
安裝依賴(lài)
yarn install / npm install
啟動(dòng)項(xiàng)目
yarn dev/npm run dev
打包項(xiàng)目
yarn build/npm run build
demo
推薦歌單
熱門(mén)歌曲
搜索
歌單詳情
播放頁(yè)
gif預(yù)覽播放
