基于React和SpringBoot的快速开发模板QuickAdmin

3,804 阅读2分钟

经过一段时间的总结和完善,我的管理系统快速开发模板已经基本成型,现在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文件