React+AntD 後臺管理系統解決方案 -- 終極版

react-admin(嘗試一下)

react-admin system solution

文檔地址：wiki

問題和方案彙總：issue

更新日誌遷移至CHANGELOG.md😁(重要！對於瞭解項目部分功能和代碼頗有用！)

cli 命令行腳手架安裝和使用 react-admin 🔥

使用 react-admin-creator 快速安裝和下載 react-admin 模板來開發項目：

npm i -g react-admin-creator

react-admin-creator myapp

前言

網上react後臺管理開源免費的完整版項目比較少，因此利用空餘時間集成了一個版本出來，已放到GitHub
啓動和打包的時間都稍長，請耐心等待兩分鐘

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

依賴模塊

<span style="color: rgb(184,49,47);">項目是用create-react-app建立的，主要仍是列出新加的功能依賴包</span>

<span style="color: rgb(184,49,47);">點擊名稱可跳轉相關網站😄😄</span>

• react
• react-router(<span style="color: rgb(243,121,52);">react路由，4.x的版本，若是還使用3.x的版本，請切換分支（ps:分支再也不維護）</span>)
• redux(基礎用法，可是封裝了通用action和reducer，demo中主要用於權限控制（ps：目前能夠用16.x的context api代替），能夠簡單瞭解下)
• antd(<span style="color: rgb(243,121,52);">螞蟻金服開源的react ui組件框架</span>)
• axios(<span style="color: rgb(243,121,52);">http請求模塊，可用於前端任何場景，很強大👍</span>)
• echarts-for-react(<span style="color: rgb(243,121,52);">可視化圖表，別人基於react對echarts的封裝，足夠用了</span>)
• recharts(<span style="color: rgb(243,121,52);">另外一個基於react封裝的圖表，我的以爲是沒有echarts好用</span>)
• nprogress(<span style="color: rgb(243,121,52);">頂部加載條，蠻好用👍</span>)
• react-draft-wysiwyg(<span style="color: rgb(243,121,52);">別人基於react的富文本封裝，若是找到其餘更好的能夠替換</span>)
• react-draggable(<span style="color: rgb(243,121,52);">拖拽模塊，找了個簡單版的</span>)
• screenfull(<span style="color: rgb(243,121,52);">全屏插件</span>)
• photoswipe(<span style="color: rgb(243,121,52);">圖片彈層查看插件，不依賴jQuery，仍是蠻好用👍</span>)
• animate.css(<span style="color: rgb(243,121,52);">css動畫庫</span>)
• react-loadable(代碼拆分，按需加載，預加載，樣樣都行，具體見其文檔，推薦使用)
• redux-alita 極簡的redux2react工具
• 其餘小細節省略

功能模塊

<span style="color: rgb(184,49,47);">備註：項目只引入了ant-design的部分組件，其餘的組件antd官網有源碼，能夠直接複製到項目中使用，後續有時間補上所有組件。</span>

<span style="color: rgb(184,49,47);">項目使用了antd的自定義主題功能-->黑色，若想替換其餘顏色，具體操做請查看antd官網</span>
<!--more-->

• 首頁

  • 完整佈局
  • 換膚(全局功能，暫時只實現了頂部導航的換膚，後續加上其餘模塊)

• 導航菜單

  • 頂部導航(菜單伸縮，全屏功能)
  • 左邊菜單(增長滾動條以及適配路由的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.yarn 或者 npm安裝相關包文件(首先推薦使用yarn，國內建議增長淘寶鏡像源，否則很慢，你懂的😁)

有些老鐵遇到運行時報錯，首先肯定下是否是最新穩定版的nodejs和npm或者yarn(推薦用yarn)，切記不要用cnpn

// 首推薦使用yarn裝包
yarn or npm i

3.啓動項目

yarn start or npm start

4.打包項目

yarn build or npm run build

Q&A(點擊問題查看答案)

1.create-react-app 打包項目run build 增長進度條信息?

2.接口跨域了，怎麼在本地開發時配置代理?

3.在使用hashRouter的狀況下怎麼實現相似錨點跳轉?

4.怎麼添加多頁面配置?

5.路由傳參數接問號怎麼傳?

6.如何兼容IE瀏覽器?

結尾

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

歡迎和感謝你們PR~~👏👏

如有問題，可加QQ羣與我交流

• 1羣：264591039（已滿）
• 2羣：592688854（已滿）
• 3羣：743490497 (已滿)
• 4羣：150131600

若是對你有幫助，給個star喲~~❤️❤️❤️❤️