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

2019年9月20日 272次阅读 来源: lhuanyu

一个适合练手的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项目》

    原文作者：lhuanyu
    原文地址: https://segmentfault.com/a/1190000018227484
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞