Skip to content

Latest commit

 

History

History
61 lines (46 loc) · 2.59 KB

README.md

File metadata and controls

61 lines (46 loc) · 2.59 KB
Raw

React 技术栈 网易云音乐 PC 项目实战

项目简介

技术栈

基于 react + redux + react-router + styled-components + axios + ant design + react-redux + redux-thunk immutable + redux-immutable + react-transition-group 等开发一款 PC 端「网易云音乐 PC」 Web 项目，UI 界面参考了 PC 版的网易云音乐、flex 布局。

界面和功能展示

输入图片说明 输入图片说明 输入图片说明 输入图片说明 输入图片说明 输入图片说明 输入图片说明 输入图片说明 输入图片说明 输入图片说明

技术栈

前端

  • React：用于构建用户界面的 MVVM 框架
  • styled-components：解决组件内容编写样式会影响全局样式导致冲突
  • axios: 发送网络请求，请求拦截和响应拦截
  • react-router：为单页面应用提供的路由系统
  • react-router-config：集中式路径映射表管理
  • redux：React 集中状态管理，在多个组件共享某些状态时非常方便
  • react-redux：帮助我们链及redux、react的辅助工具
  • immutable：对reudx中保存的state使用immutable进行管理
  • redux-immutable: 对根目录的reducer中state进行管理
  • redux-thunk: 在redux中进行异步请求

后端

  • Node.js：利用 Express 搭建的本地测试服务器
  • axios：用来请求后端 API 音乐数据
  • NeteaseCloudMusicApi：网易云音乐 NodeJS 版 API，提供音乐数据

构建项目

  • 克隆代码到本地之后，需要再克隆网易云音乐 NodeJS 版 API，
  • 服务器启动默认端口为 3000, 若不想使用 3000 端口 , 可使用以下命令 : Mac/Linux
  • $ PORT=4000 node app.js
  • windows 下使用 git-bash 或者 cmder 等终端执行以下命令 :
  • $ set PORT=4000 && node app.js
  • 如果需要在服务器上搭建的话就需要将 API 放到自己的服务器上面。(可选)
# yarn dependencies
yarn install | npm install

# serve with hot reload at localhost:3000
yarn start  | npm start

# build for production with minification
yarn build  |  npm build