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一下,也欢迎指正~~
相关推荐
ctg 2020-10-14
小飞侠V 2020-09-25
苗疆三刀的随手记 2020-06-03
maple00 2020-06-01
changcongying 2020-11-02
changcongying 2020-10-30
苗疆三刀的随手记 2020-10-29
zouph000 2020-10-25
Jruing 2020-10-23
PMJ0 2020-10-13
ChaITSimpleLove 2020-10-06
QiaoranC 2020-09-25
changcongying 2020-09-17
taizuduojie 2020-09-15
淼寒儿 2020-09-13
lyjava 2020-09-11
彤庆的技术 2020-09-02
锅哥 2020-08-27
ruanhongbiao 2020-08-16