【bird-front】前端框架介紹
阿新 • • 發佈:2017-12-28
lan 查看 後臺管理 gpo mas button 圖片 blank div
bird前端項目,基於react、antd、antd-admin,封裝常用數據組件,細粒度權限解決方案。
bird-front是基於react的後臺管理系統前端項目,框架構建部分嚴重借鑒於antd管理系統解決方案antd-admin,其項目地址:https://github.com/zuiidea/antd-admin。
bird-front地址:https://github.com/liuxx001/bird-front
權限方案:
bird-front對權限部分進行了重新設計,支持更細粒度的權限控制(按鈕級)。前端的權限應該控制什麽?資源的可見性。其包括:
- 路由的可見性。
- 頁面中按鈕的可見性。
在登錄時獲取用戶擁有的權限集合,在前端存儲。
- 路由可見性控制:路由變化時,進行權限判斷,通過則渲染對應組件,否則渲染403組件。
- 按鈕的可見性控制:封裝bird-button組件,傳入按鈕所需權限名,內部進行權限判斷,通過則渲染按鈕。
前端的權限控制只能處理頁面渲染,不能保證系統的絕對安全,服務端也需要對接口的權限進行驗證。
組件:
bird-front對常用的數據組件進行了封裝,使其簡單易用,包括:
- 全自動數據表格:bird-grid。查看文檔
- 下拉選擇器:bird-selector。查看文檔
- 全自動樹表:bird-tree-grid。查看文檔
- 數據樹:bird-tree。查看文檔
- 全自動表單:bird-form。查看文檔
- 權限按鈕:bird-button。查看文檔
所有業務組件的理念均是結合服務端接口進行組件的封裝,兼顧靈活性的同時保證更優的業務開發速度。
項目獲取:
git clone https://github.com/liuxx001/bird-front
安裝依賴包:
npm install
啟動項目:
npm run start
登錄名:admin 登錄密碼:admin
效果圖:
【bird-front】前端框架介紹