【bird-front】前端框架介紹

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

效果圖：