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