React結合AntD、Node的編寫簡單的管理系統

React結合AntD、Node的編寫簡單的管理系統

你們好，剛學完React基本知識就等不及當即上手寫個東西，正好管理系統好像是通常你們都會寫寫的東西，我也就想利用餘韻寫個簡單的管理系統，由於我也仍是個剛學了幾個月前端的小白，基本上都是初次使用，也只是想簡單的分享下項目的成果，因此有什麼問題也但願幫我指點指點。

GitHub連接：https://github.com/Keifer-G/BackgroundManageSystem.git

登錄頁面

我首先是完成了登錄頁面，由於第一次使用React寫項目，因此踩了不少坑。這裏的話，由於本身仍是身爲一個設計生，因此也儘可能不讓本身的頁面醜陋，不少時候還會去想怎麼樣會好看點，logo也就是我本身隨便設計了一個，背景是一個GIF，也利用animate.css放了點自我感受還Ok的動效，而後我首當其衝遇到的就是命名問題，react的className不是像Vue那樣組件各自互不影響的，我第一次嘗試，索性就直接把form的那個UI本身寫了，而後樣式也本身添了上去，可是我剛開始寫沒有引入React 的Css庫，也還不知道React的命名問題，因此問題就暫時潛伏在了這裏：

當我認識並引入了antd的css庫時，它將我原來寫的登錄form的樣式都給覆蓋了，而後就再配置了less，用less一點點把我原來的樣式給再覆蓋了回來。

後臺的話，我是利用的是Node的Koa框架和MongoDB數據庫，登錄操做的話，主要就是前臺先驗證而後是post請求，後臺再驗證響應，這裏開始我也記得一個坑，我利用了MongoDB的可視化建立了兩個集合，重要的是，我在可視化工具裏建立的集合名不是複數，這樣我從node上就讀取不到這個集合，可是利用mongodb自己操做能夠找到，因此這裏坑了我一下子，若是是直接利用mongodb建立集合的話，它是會自動變成複數的，因此我感受仍是儘可能用mongodb後臺建立集合。

在mongodb可視化工具建立的集合必需要是複數，不然可能會有問題。

跨域問題的話，我就是利用koa-cors，引入在簡單設置成本身的須要就行了。前臺驗證的話，AantD的form表單組件這方面仍是很齊全的，結合文檔上的使用方法，就能夠很快的作好前臺的驗證，好比字符長度的限制等，我還寫了兩條AantD表單的注意點：

1. 在導出的地方改成 export default From.create(['能夠寫入這個組件的標識名‘])(['使用form的組件‘])，這樣才能使用from中的一些配置屬性
2. 使用 validator 進行自定義校驗的時候函數必定要執行一次 callback() ，和以前的callback（‘[內容]’）不一樣，若是少了它，onSubmit 的提交事件就會失效

登錄頁面的的話就基本上完成了，而後是主要的管理頁面，管理系統的佈局我就直接使用了AantD的 Layout 佈局中的一種，頁面的大概內容：

主頁面

首頁 側邊導航和頂部都是固定的，主題內容部分根據導航的index值來顯示不一樣的組件，頂部的話我設置了廣播消息，消息內容能夠在管理員身份的用戶界面來推送新的廣播，右側的消息點擊能夠顯示全部的廣播消息內容。 主題的按鈕我是用了 dynamic-antd-theme 這個組件，這個設置很簡單，它是尋找了全部的關於主題內容的顏色，並對其進行設置，在我這裏有個弊端，它把側邊導航條的選中色給變暗了，不太好改，並且我以爲還行就沒改。 搜索欄是爲了美觀放上去了，可是也能夠去用來添加一些頁面的索引，頭像點擊右側會出現一個展現我的信息的抽屜，就是利用AntD的抽屜組件。

用戶頁 用戶頁是我寫的較多的地方，這裏分紅了兩種角色，管理員角色和通常職員角色，管理員在這部分顯示的是對通常職員進行管理界面，而職員的這個界面顯示的是管理員推送的任務列表。

如上圖，我的信息卡片能夠實現修改我的信息，可是這裏個人修改頭像部分是僅僅根據轉化爲uri進行數據庫存儲實現的。 管理員同時還能夠建立新的職員帳號，推送全體的任務消息和廣播消息，以及推送我的的任務消息。

操做頁

個人操做部分的想法是直到作到這裏纔想到作什麼的，操做的東西就大體爲對新聞類文章的篩選，如上圖的頁面，這個頁面是給予最直觀的操做，點擊卡片的話右側會出現一個顯示更加具體內容的抽屜，這部分的全部數據我都把它放到了redux狀態管理中，由於東西全是本身作的，這樣會比較方便這裏也就會有個問題，就是不要頻繁的使用redux的dispatch：

不要頻繁的使用redux中的dispatch，這樣會形成嚴重的卡頓問題，咱們能夠把dispatch的操做放到批量完成後或者必定時間後，還有組件銷燬的時候去dispatch

另一個操做頁面就是傳統的操做也表格，查看操做就能夠顯示當條內容的全部具體內容。滾動部分的話都用了butter-scroll的滾動組件。

可視化數據頁 這部份內容，因爲沒有去弄足夠的數據，因此在這兩個頁面我基本上僅僅是把可視的ui給弄了進去：

上面這個就是實現了左邊大圖和右邊小圖內容點擊置換。設置頁面和關於沒什麼東西因此就不展現了。

如上分別爲修改我的信息，反饋信息，修改主題，和查看廣播消息列表，更多具體內容可查閱GITHUB上的內容。若是喜歡的話就來個star吧🙏。

下面是一點在寫的時候的問題記錄

• antd 表單的使用

  • 在導出的地方改成 export default From.create(['能夠寫入這個組件的標識名‘])(['使用form的組件‘])，這樣才能使用from中的一些配置屬性
  • 網絡請求能夠放在onSubmit 的回調函數中
  • 使用 validator 進行自定義校驗的時候函數必定要執行一次 callback() ，和以前的callback（‘[內容]’）不一樣，若是少了它，onSubmit 的提交事件就會失效
  • 引用antd的css => import 'antd/dist/antd.css'

• 內部的條件渲染-> 不能使用if，使用三元運算符， [條件] ? () : () => 括號內的第一個參數能夠寫函數等，第二個放組件

• create-react-app建立的項目是看不到webpack相關的配置文件，因此須要先暴露出來，使用如下命令： npm run eject ,暴露webpack配置時出現「Remove untracked files, stash or commit any changes, and try again.」錯誤,這是由於咱們使用腳手架建立一個項目的時候，自動給咱們增長了一個.gitignore文件,而咱們本地卻沒有文件倉庫,這就須要在終端輸入以下命令(git add .)(git commit -m '')，而後在 npm run eject 便可

• 分類組件渲染，與flutter相同，將須要的組件寫入一個數組，根據事件與Index來展現須要的組件

• [報錯]has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

  • 解決方法：
    • 在後臺報錯的路由響應設置響應頭，容許跨域
    • ctx.set('Access-Control-Allow-Origin:*')

• 手動上傳頭像 customRequest 屬性

• 使用better-scroll 實現滾動 mouseWheel 設置鼠標滾輪是否能夠觸發，默認爲false即不可滾動

• react 中文字超出的處理

  • overflow : 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', webkitLineClamp: '2', webkitBoxOrient: 'vertical'
  • 注意 要有寬度，其次 webkitLineClamp 這個數值是字符串，而不是數字

• reducer裏的參數變量action，就是actions裏對應的返回數據

• [報錯]咱們不能在組件銷燬後設置state，防止出現內存泄漏的狀況

  • 若是代碼中有定時器一類的延時設置state狀態的代碼，能夠在組件銷燬時清除定時器 componentWillUnmount() { clearTimeout(timer); }
  • 若是有異步設置state值的狀況，在組件銷燬時清除全部的state狀態 componentWillUnmount() { this.setState = (state, callback) => { return } }

• 自執行點擊事件=>document.getElementById('xxx').click();

• 在獲取redux中的用戶信息時的willMounted中，不只要在監聽變化的subscribe 中setState一次，還得在外部（willMounted內部）再setState一次，以達到進入便獲得數據

• 多檢測條件的正確性

• 頻繁使用store會形成性能急劇下降，因此能夠在unMount的時候或者完成了一個階段的時候去更新store裏的數據

• 數據庫若是是本身用可視化添加必定要是複數的集合名，否則在mongoose裏沒法識別

• koa 的 ctx 在回調中沒法傳值到前端,這個能夠嘗試利用try{}catch(e){}