前言：在前端的学习过程中过，我已经做过了三个项目。第一个是模仿简书的写作平台，这个项目让我初尝React开发的甜头，了解了一些React生态的一些最佳实践。第二个是包括前中后端的个人博客系统，这个项目让我对与JavaScript这门语言有了新的认识，体会到了前后端统一语言的畅快和方便。给我最大的感受就是相比于本科接触的Java Spring，用node.js来开发后端是更加轻便，快捷。node的洋葱圈模型和中间件模式和Springboot 的面向切面有异曲同工之妙，当然了，目前我也只是理解到的一些皮毛，还需要通过工作中的大量实践才能进一步体会到两者的区别和联系。在前两个项目中，我都是用第三方组件库开发页面，或者封装些简单的组件。为了进一步体会组件的设计和开发，参考antd开源项目和一些教程，开发了一套自己的组件库eason-ui。到目前为止对前端开发也算是有了一个初步的认识，但是我对于移动端web应用的开发还不是很了解。所以参考神三元的开源项目，做了这个移动端web播放器。
简介：本项目是以 React 全家桶 (包含 Hooks) 以及 immutable 数据流为基础打造的一款高质量的移动端音乐类 WebApp
打开方式:请用Chrome浏览器（按f12设置手机模式），或用手机浏览器打开。
地址: https://quiet-mochi-00c19f.netlify.app/
前端部分:
react v16.8 全家桶 (react，react-router) : 用于构建用户界面的 MVVM 框架
redux: 著名 JavaScript 状态管理容器
redux-thunk: 处理异步逻辑的 redux 中间件
immutable: Facebook 历时三年开发出的进行持久性数据结构处理的库
react-lazyload: react 懒加载库 better-scroll: 提升移动端滑动体验的知名库
styled-components: 处理样式，体现 css in js 的前端工程化神器
axios: 用来请求后端 api 的数据。
后端部分:
采用 github 上开源的 NodeJS 版 api 接口 NeteaseCloudMusicApi，提供音乐数据。感谢 Binaryify 大佬开源接口！
说明：本项目参考网易云音乐安卓端 app 界面开发，基础轮子组件没有借助任何 UI 框架，算是对自己的一个挑战，在这个过程也学到了不少设计经验。
待实现功能：
- 登录
- 系统菜单
- 黑胶唱片播放动画
- 倍速播放 5 MV 6 待定...
为了提升自己对于组件设计的理解，项目中的13个基础组件和12个应用组件都是用styled-components自己封装的。完成了七大模块，写了6000多行代码。在大大小小的组件封装中将React中的所有Hooks基本都应用了一遍，根据Fiber架构和immutable的思想对应用进行了各种优化，包括缓存节点、减少diff、异步渲染、懒加载、缓存回调函数、虚拟列表、防抖和节流、合理使用state和ref。对于前端动画的实现也有了更深的理解，一些动画分别用JS和CSS方式各实现了一遍。项目目前还没有进行多端适配，在不同平台或者屏幕不同的设备下会有一些bug，后面还会进一步完善争取适配多端。
1.将项目clone下来
$ git clone https://github.com/luozhiqiang-code/cloud-music.git
$ cd cloud-music
$ npm install
$ git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
$ cd NeteaseCloudMusicApi
$ npm install2.运行
首先到cloud-music/src/api/config.js修改后端接口地址
export const baseUrl =
"https://netease-cloud-music-api-five-zeta-45.vercel.app/";然后到cloud-music、NeteaseCloudMusicApi目录下分别启动前中后台。
$ npm run dev
$ node app.js