1. 程式人生 > >【bird-front】前端框架介紹

【bird-front】前端框架介紹

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】前端框架介紹