/react-music-lhy

基于react16+ react-router4+ typescript react-redux的移动端音乐播放器

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

一个适合练手的react项目

项目正在用hooks重构
体会vue与react项目区别
声明:本项目参考了滴滴大佬的vue项目,原vue项目请关注ustbhuangyi

项目运行

后端项目启动

安装mysql
启动mysql服务:net start <mysql程序名称>
登录用户: mysql -uroot -p
输入密码
创建数据库:CREATE DATABASE music;
利用server/sql/music.sql中的查询语句创建数据表user
启动一个终端,切换到server文件夹下
npm install
npm start

前端项目启动

npm install
npm run dev
项目中用到的一些自定义types在common/js/typings目录下
可以通过dts-gen为没有types的npm包自动生成d.ts声明文件

项目笔记

D1

D2

D3

D4

D5

D6

部署

node后端

调试

ToDo

  • 完善项目中typescript类型
    • store,action类型
    • 数据类型
    • 无状态组件 React.SFC
    • 有状态组件 readonly state : Readonly<IState>,react已经对props、props的属性与state的属性作了只读处理
    • react事件类型
    • ref类型 React.RefObject<Scroll> --> <Scroll ref={this.toplist}></Scroll>
    • 媒体事件类型 const { currentTime } : { currentTime: number } = e.target as HTMLMediaElement
    • 完善 type 的组织方式
  • 项目本地部署
  • 项目结构的思考,总结
  • electron构建exe
  • 个人中心管理系统
    • mysql数据库表的设计
    • 登录注册
    • koa2-cors解决跨域
    • koa-bodyparser解决post数据的解析与提取
    • 后端API功能实现、postman测试、前端测试:getDataByPage, addFavorite, deleteFavorite
    • cookie:利用webpack的webpack-dev-server代理实现本地cookie跨域调试。
    • cookie + 签名:获取数据库中用户信息
    • session:
      • koa-session-minimal 适用于koa2 的session中间件,提供存储介质的读写接口 。
      • koa-mysql-session 为koa-session-minimal中间件提供MySQL数据库的session数据读写操作。
      • koa-redis 为koa-session-minimal中间件提供redis的session数据读写操作。
    • 数据上传,下载
    • 缓存
    • 静态服务器
    • nginx负载均衡,redis存储
    • 压力测试
    • 日志
    • 部署,pm2
    • websocket, https

页面展示