Need help with react-music-lhy?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

BUPTlhuanyu
146 Stars 28 Forks GNU General Public License v3.0 137 Commits 6 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 254,754
CSS
Front e...
React
wechat
131 commits

一个适合练手的react项目

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

项目运行

后端项目启动

##### 安装mysql ##### 启动mysql服务:

net start 
##### 登录用户:
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

  • [x] 完善项目中typescript类型
    • [x] store,action类型
    • [x] 数据类型
    • [x] 无状态组件
      React.SFC
    • [x] 有状态组件
      readonly state : Readonly,react已经对props、props的属性与state的属性作了只读处理
    • [x] react事件类型
    • [x] ref类型
      React.RefObject --> 
    • [x] 媒体事件类型
      const { currentTime } : { currentTime: number } = e.target as HTMLMediaElement
    • [ ] 完善 type 的组织方式
  • [x] 项目本地部署
  • [x] 项目结构的思考,总结
  • [ ] electron构建exe
  • [ ] 个人中心管理系统
    • [x] mysql数据库表的设计
    • [x] 登录注册
    • [x] koa2-cors解决跨域
    • [x] koa-bodyparser解决post数据的解析与提取
    • [x] 后端API功能实现、postman测试、前端测试:getDataByPage, addFavorite, deleteFavorite
    • [x] cookie:利用webpack的webpack-dev-server代理实现本地cookie跨域调试。
    • [x] 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

页面展示

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.