react16 + typescript + webpack4 + mobx + antd的CMS项目

React

该项目主要使用的前端框架是react16，有用到新特性React.lazy，这样我们就不需要使用Loadable啦~。前端UI使用了蚂蚁金服的Antd，以及状态管理mobx，react-router4，axios异步请求库，目前项目可以线上正常运行。

该项目对标CMS的angular6+版cms-fe-angular6，只是换成了React技术栈，授权方式也换成了JWT模式(有大坑，但已解决...)，接口也从标准的RESTful模式换成了GraphQL(这个非常值得推荐)。

后端对标koa2的ES6版cms-be变化也大，首先字段从下划线模式换成了单驼峰模式，其次也将ES6改成Typescript了，加入了mongodb日志记录，配合中间件使用，效果非常好。

主要技术栈

react16
react-router4
typescript
webpack4
mobx
antd
graphql
jwt

项目架构

截图：

项目目录解析：

build // webpack打包配置目录
dist // 发布目标目录
src // 源码目录
    @types // typescript类型申明
    assets // sass、img等资源目录
    components // 公共组件
    constants // 常量配置
    models // ts模型，包含该interface或class
    pages // 项目功能页面(页面和store按功能分目录放一起，可灵活调整)
    routes // 路由
    stores // 根store存储
    utils // 辅助方法等
    index.tsx // 入口文件

目前实践总结

GraphQL模式，确实很爽，前端需要什么数据，在前端定义好数据模型的前提下，按照自己的需要去查询，得到预期的数据。

使用JWT模式替代传统Session-Cookie风险确实很大，因为服务端不保存任何信息，无法感知用户退出登录，目前我使用了Redis解决了该问题(感觉又回到了Session模式...)。

项目地址：https://github.com/xpioneer/r...

喜欢的话，欢迎star一下，也欢迎指正~~