經過一段時間的總結和完善,我的管理系統快速開發模板已經基本成型,現在GitHub上開源啦:
QuickAdmin
QuickAdmin是基于Spring Boot和React.js實現的管理系統開發框架。用于開發網站的后臺管理系統。
本框架提供了如下功能:
- 完整的基于Bootstrap的響應式UI界面實現。
- 基于React的常用的管理系統顯示組件。
- 前后臺間的通信封裝。
- 常用的數據庫基礎操作封裝。
- 最小化的用戶管理功能
- 常用的簡單工具類
本框架中富文本編輯器采用WangEditor實現。是一個國人開源的優秀的輕量級富文本編輯器,希望多多支持。
##框架概述
本框架主要實現前端頁面的組件化,通過組合組件實現常見管理系統的大部分功能。同時也充分利用React.js的豐富資源和強大能力。用戶可以充分擴展自己的功能。
本框架依賴于以下環境:
- JDK
- Gradle
- Node.js
- Webpack
開發環境以Intellij Idea為例,
- 以Gradle項目引入項目,并執行sync以解決依賴
- 配置Application及application.properties,配置數據源及監聽端口等參數。application.properties是Spring boot的配置文件,具體配置可以參考Spring Boot文檔。
- 使用本項目提供的demo.sql文件初始化數據庫。
- 通過
Application.main()
方法或執行run任務啟動服務即可訪問。默認用戶為admin,密碼為admin - 不建議通過其它方式為本管理系統添加頁面。
開發時推薦按照以下方式進行:
- 在
com.xinou.quickadmin.controller.api
包下為前端提供json接口。應當繼承BaseController
類,并調用響應render方法提供返回。 - 通過修改
com.xinou.quickadmin.controller.AuthIntercepto
類構造方法中傳入接口實現不同的用戶校驗邏輯。 - 通過添加@IngeroCheck注解可以簡單地跳過特定請求的登錄驗證。
- 在
resource/comp
下創建React組件,在application.js
中配置路由。并使用webpack進行打包,生成的文件為`resources//jsx/main.js`` - 頁面中導航組件位于
resources/comp/framework/navbar.js
,通過在application.js中配置json,最多提供兩層導航支持。 - 開發組件建議參考現有demo,在
resources/comp/framework/adminUIComponents.js
中提供了常用的數據展示組件。
##開發指南
見詳見Github的ReadMe文件