Typescript3 + react16.7 + react-router4.3 + koa2 + mysql项目

Anything0 2019-07-01

一个适合练手的react项目

项目以及项目笔记会不断更新
体会vue与react项目区别
声明:本项目参考了滴滴大佬的vue项目,原vue项目请关注ustbhuangyi

项目运行

前端项目启动

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

后端项目启动

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

项目笔记

D1

D2

D3

D4

D5

D6

部署

node后端

ToDo

  • [x] 完善项目中typescript类型

    • [x] store,action类型
    • [x] 数据类型
    • [x] 无状态组件 React.SFC
    • [x] 有状态组件
      readonly state : Readonly<IState>,react已经对props、props的属性与state的属性作了只读处理
    • [x] react事件类型
    • [x] ref类型 React.RefObject<Scroll> --> <Scroll ref={this.toplist}></Scroll>
    • [x] 媒体事件类型 const { currentTime } : { currentTime: number } = e.target as HTMLMediaElement
  • [x] 项目本地部署
  • [ ] 组件优化
  • [ ] create-react-app优化打包
  • [ ] electron构建exe
  • [ ] 个人中心管理系统

    • [x] mysql数据库表的设计
    • [x] 登录注册
    • [x] koa2-cors解决跨域
    • [x] koa-bodyparser解决post数据的解析与提取
    • [x] 后端API功能实现、postman测试、前端测试:getDataByPage, addFavorite, deleteFavorite
    • [ ] cookie
    • [ ] session

页面展示

Typescript3 + react16.7 + react-router4.3 + koa2 + mysql项目Typescript3 + react16.7 + react-router4.3 + koa2 + mysql项目Typescript3 + react16.7 + react-router4.3 + koa2 + mysql项目Typescript3 + react16.7 + react-router4.3 + koa2 + mysql项目Typescript3 + react16.7 + react-router4.3 + koa2 + mysql项目Typescript3 + react16.7 + react-router4.3 + koa2 + mysql项目Typescript3 + react16.7 + react-router4.3 + koa2 + mysql项目

Typescript3 + react16.7 + react-router4.3 + koa2 + mysql项目

相关推荐