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

项目架构

截图:

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

项目目录解析:

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一下,也欢迎指正~~

相关推荐