一个适合练手的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
- 1、Tab组件与路由
- 2、基于better-scroll的react轮播图组件
- 3、http-proxy-middleware
- 4、create-react-app搭建代理（一）
- 5、create-react-app搭建代理（二）
- 6、scroll组件：移动端滚动
- 7、loading组件
- 8、图片懒加载
D3
- 1、图片懒加载组件优化
- 2、歌曲信息页&typescript的用法
- 3、滚动列表复用组件
- 4、异步获取数据&保存组件状态
- 5、除Link外控制路由跳转：withRouter & typescript
- 6、redux使用方法
D4
- 1、withRouter&connect&typescript的使用
- 2、页面切换与异步数据请求bug
- 3、getDerivedStateFromProps使用技巧
- 4、基于react-transition-group的react过渡动画
- 5、react-lodable组件动态导入
- 6、react中输入框防抖debounce
D5
D6
部署
node后端
- 1、后端项目结构
- 2、代理实现本地cookie跨域调试
- 3、webpack-dev-server原理分析
- 4、基于session与cookie的登录凭证
- 5、cookie+签名实现登录凭证
调试
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
页面展示
