首先,后台管理系統一定要前后端分離,一方面提高前端技術選型的靈活性,再一方面也可以解決后端人員使用模版語言的麻煩。其次,后台管理系統都會有較復雜的數據交互和組件化的需求,react是個合適的選擇,mvvm的框架要么概念太多、要么模版語言偏命令式。選擇了react之后,再搭配antd,將會是個很好的選擇。react-bootstrap也是不錯的選擇,但是相對於antd來講,它的組件較少,需要自己封裝一些通用組件。數據流方面,慎用redux,在大部分的場景,使用組件state比用redux來的簡單快捷。構建工具一定得用webpack,生成的前端資源最好在一個目錄下,這樣可以方便前端的自動化發布。
然后,后台管理系統的外殼,去百度一個好看些的主題,將樣式臨摹下來就可以,最好找那些與antd樣式相近的主題。在多人開發的情況下,router和左側菜單的代碼非常容易沖突,要考慮進行隔離以及抽離成json。可以將外殼的邏輯(其中包括外殼的樣式、router的定義、左側導航的定義)封裝成一個frame組件,每次業務開發將它作為最上層的組件。這樣,開發頁面時,配置好router和左側菜單,定義好自己的業務組件,然后引入frame組件,整體開發就有個清晰的流程,再加之antd組件的豐富,即使是開發經驗在一年以下的前端,經過培訓之后也可以輕松的勝任后台系統的開發。
最后附上一個demo,公司目前所用的后台管理系統是在這個demo上開發的
下一篇的主題是 --- 前端自動化發布
