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一下，也歡迎指正~~