自己利用業餘時間，基於React+antd寫了一個後臺管理模板。主要是熟悉antd元件和React，頁面主要還是展示頁面,比較簡單不涉及後臺互動。

github地址：基於React+antd實現後臺模板
預覽地址：預覽地址
登入的背景圖比較大，所以做了一個loading效果，等圖載入完畢後再顯示登入頁面，首次載入可能比較慢

技術棧

• react
• antd
• react-router
• mobx
• canvas
• ES6
• cookie

自己參考了其他優秀的外掛，比如動態打字效果、背景粒子效果、shuffle（洗牌），全屏外掛等，自己對有些外掛封裝成類使用

所有路由都需要登入才可進入，自己封裝了PrivateRoute元件來實現路由認證，登入資訊儲存在cookie中，原本是儲存在store中，但是重新整理頁面後登入狀態丟失，所以就儲存在cookie中
登入背景圖太大，使用了

專案目錄結構

assets----儲存靜態圖片資源和共用icon圖示
components----儲存共用元件
routes----業務頁面入口和常用模板
store----狀態管理
utils----工具函式

專案截圖

問題

整個demo不復雜，主要是熟悉react和路由等，在打包的過程中出現了一點小問題。我打包的檔案是放在伺服器二級目錄下，所以打包的路徑要改為相對路徑，不能使用絕對路徑，我在package.json中添加了homepage:’.'解決了路徑問題。然後BrowserRouter加上了 basename=‘二級目錄名稱’ 屬性，結果還是出現js路徑錯誤，我一直以為是webpack打包的問題，找了很久才發現是因為BrowserRouter，將BrowserRouter改為HashRouter就訪問正確。
使用react-router（v4）時，如果有伺服器端的動態支援，建議使用 BrowserRouter，否則建議使用 HashRouter。
關於BrowserRouter和HashRouter的區別，可以參考：

最後

demo是我斷斷續續寫的，只有下班和週末有時間。寫demo的目的主要是熟悉React和react-router以及antd，整個demo中參考了一些其他人的想法，如動畫效果等。另外基於vue的個人專案可以看這個仿製移動端QQ音樂

其他個人專案

覺得不錯的給個star鼓勵支援！^_^