React+AntD後台管理系統解決方案（補）

ps: 之前發的那篇不知道莫名的消失了，真坑爹！重新補上！

補充：改項目用到的框架和技術點：react+react-router+redux+antd+webpack等。

不僅是後台系統，有些設計和理念也適合前台頁面，比如許可權管理，響應式布局等。

源博客地址：點我查看

源碼地址：https://github.com/yezihaohao/react-admin

最下方增加版本更新日誌??

前言

網上react後台管理開源免費的完整版項目比較少，所以利用空餘時間集成了一個版本出來，已放到GitHub

啟動和打包的時間都稍長，請耐心等待兩分鐘

• GitHub地址
• 預覽地址(已增加響應式，可手機預覽??)

依賴模塊

項目是用create-react-app創建的，主要還是列出新加的功能依賴包

點擊名稱可跳轉相關網站????

• react@15.5.0
• react-router@3.0.2(react路由,4.x的差異還是比較大，暫時還是3.x的版本)
• antd@2.9.3(螞蟻金服開源的react ui組件框架)
• axios@0.16.1(http請求模塊，可用於前端任何場景，很強大??)
• echarts-for-react@1.2.0(可視化圖表，別人基於react對echarts的封裝，足夠用了)
• recharts@0.22.3(另一個基於react封裝的圖表，個人覺得是沒有echarts好用)
• nprogress@0.2.0(頂部載入條，蠻好用??)
• react-draft-wysiwyg@1.9.6(別人基於react的富文本封裝，如果找到其他更好的可以替換)
• react-draggable@2.2.4(拖拽模塊，找了個簡單版的)
• screenfull@3.2.0(全屏插件)
• photoswipe@4.1.2(圖片彈層查看插件，不依賴jQuery，還是蠻好用??)
• animate.css@3.5.1(css動畫庫)
• 其他小細節省略

功能模塊

備註：項目只引入了ant-design的部分組件，其他的組件antd官網有源碼，可以直接複製到項目中使用，後續有時間補上全部組件。 項目使用了antd的自定義主題功能–>黑色，若想替換其他顏色，具體操作請查看antd官網

• 首頁
• 完整布局
• 換膚(全局功能，暫時只實現了頂部導航的換膚，後續加上其他模塊)
• 導航菜單
• 頂部導航(菜單伸縮，全屏功能)
• 左邊菜單(增加滾動條以及適配路由的active操作)
• UI模塊
• 按鈕(antd組件)
• 圖標(antd組件並增加彩色表情符)
• 載入中(antd組件並增加頂部載入條)
• 通知提醒框(antd組件)
• 標籤頁(antd組件)
• 輪播圖(ant動效組件)
• 富文本
• 拖拽
• 畫廊
• 動畫
• 基礎動畫(animate.css所有動畫)
• 動畫案例
• 表格
• 基礎表格(antd組件)
• 高級表格(antd組件)
• 非同步表格(數據來自掘金醬的介面)
• 表單
• 基礎表單(antd組件)
• 圖表
• echarts圖表
• recharts圖表
• 頁面
• 登錄頁面(包括GitHub第三方登錄)
• 404頁面

功能截圖

代碼目錄

+-- build/ ---打包的文件目錄+-- config/ ---npm run eject 後的配置文件目錄+-- node_modules/ ---npm下載文件目錄+-- public/| --- index.html ---首頁入口html文件| --- npm.json ---echarts測試數據| --- weibo.json ---echarts測試數據+-- src/ ---核心代碼目錄| +-- axios ---http請求存放目錄| | --- index.js| +-- components ---各式各樣的組件存放目錄| | +-- animation ---動畫組件| | | --- ...| | +-- charts ---圖表組件| | | --- ...| | +-- dashboard ---首頁組件| | | --- ...| | +-- forms ---表單組件| | | --- ...| | +-- pages ---頁面組件| | | --- ...| | +-- tables ---表格組件| | | --- ...| | +-- ui ---ui組件| | | --- ...| | --- BreadcrumbCustom.jsx ---麵包屑組件| | --- HeaderCustom.jsx ---頂部導航組件| | --- Page.jsx ---頁面容器| | --- SiderCustom.jsx ---左邊菜單組件| +-- style ---項目的樣式存放目錄，主要採用less編寫| +-- utils ---工具文件存放目錄| --- App.js ---組件入口文件| --- index.js ---項目的整體js入口文件，包括路由配置等--- .env ---啟動項目自定義埠配置文件--- .eslintrc ---自定義eslint配置文件，包括增加的react jsx語法限制--- package.json

安裝運行

1.下載或克隆項目源碼

2.npm安裝相關包文件(國內建議增加淘寶鏡像源，不然很慢，你懂的??)或者用yarn

npm i

3.啟動項目

npm start

4.打包項目

npm run build

更新日誌

2017-07-08

• 依賴包版本升級
• react@15.6.1
• antd@2.11.2
• webpack@2.6.1
• 等等

2017-08-01

• 引入redux系列
• redux@3.7.2
• redux-thunk@2.2.0
• react-redux@5.0.5
• 增加許可權管理模塊
• 使用easy-mock模擬數據模擬登錄介面
• 使用redux系列將登錄用戶數據傳遞給許可權組件
• 許可權組件採用Render Callback的方式傳遞許可權給需要受控制的組件（具體做法請查看源代碼。）
• 用戶狀態保存在localStorage中
• 具體做法請運行項目查看
• PS：以上管理許可權只是一種方式，但這絕對不是唯一的方式，也不是最好的方式。如果你有更好的方式，不妨加上面的群和大家一起分享下。????
• 增加路徑別名
• 使用@別名處理引入組件相對路徑過長問題。
• 缺點：編輯器不能使用快捷提示和快捷跳轉到相應的文件

2017-08-13

許可權管理模塊增加頁面跳轉許可權驗證

• 點擊許可權管理的路由攔截，若沒有訪問許可權則會跳轉到404頁面。
• 大致實現方式(非常簡單)：通過向自定義router組件傳入store，登錄之後可獲取到redux中的許可權state數據，並通過判斷是否包含許可權進行跳轉。ps: 該demo的效果是管理員登錄之後才能跳轉到路由攔截頁面。具體操作請拉取代碼嘗試

2017-08-26

增加響應式布局

• 替換antd Col 組件的響應式柵格為md(具體參數用法請查看antd官方文檔)
• 初始化頁面是獲取當前瀏覽器寬度設置菜單顯示類型
• 監聽window的onresize函數，設置菜單顯示類型。PS：瀏覽器寬度存入redux中，方便組件之間傳遞

結尾

該項目會不定時更新，後續時間會添加更多的模塊

若有問題，可加QQ群264591039與我交流

如果對你有幫助，給個star喲~~????????