基於React和SpringBoot的快速開發模板QuickAdmin

晦若晨曦發表於2017-12-14
ReactSpring BootUI

經過一段時間的總結和完善，我的管理系統快速開發模板已經基本成型，現在GitHub上開源啦：

QuickAdmin

QuickAdmin是基於Spring Boot和React.js實現的管理系統開發框架。用於開發網站的後臺管理系統。

本框架提供瞭如下功能：

  • 完整的基於Bootstrap的響應式UI介面實現。
  • 基於React的常用的管理系統顯示元件。
  • 前後臺間的通訊封裝。
  • 常用的資料庫基礎操作封裝。
  • 最小化的使用者管理功能
  • 常用的簡單工具類

本框架中富文字編輯器採用WangEditor實現。是一個國人開源的優秀的輕量級富文字編輯器，希望多多支援。

##框架概述

本框架主要實現前端頁面的元件化，通過組合元件實現常見管理系統的大部分功能。同時也充分利用React.js的豐富資源和強大能力。使用者可以充分擴充套件自己的功能。

本框架依賴於以下環境：

  • JDK
  • Gradle
  • Node.js
  • Webpack

開發環境以Intellij Idea為例，

  1. 以Gradle專案引入專案，並執行sync以解決依賴
  2. 配置Application及application.properties，配置資料來源及監聽埠等引數。application.properties是Spring boot的配置檔案，具體配置可以參考Spring Boot文件。
  3. 使用本專案提供的demo.sql檔案初始化資料庫。
  4. 通過Application.main()方法或執行run任務啟動服務即可訪問。預設使用者為admin，密碼為admin
  5. 不建議通過其它方式為本管理系統新增頁面。

開發時推薦按照以下方式進行：

  • 在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檔案

相關文章