chenjinlin616/QuickAdmin

#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中提供了常用的数据展示组件。

##开发指南

###后端开发

####Controller

本项目中Controller主要任务是为前端提供json接口。应当继承com.xinou.quickadmin.controller.BaseController方法，并调用响应render方法提供返回。

####Service

本项目中service主要为controller提供业务支持。在com.xinou.quickadmin.service.BaseService中提供了常见的数据库操作。

####登录验证及跳过

本项目通过拦截器实现登录验证，拦截器为com.xinou.quickadmin.auth.AuthInterceptor。

通过Application.addInterceptors()方法添加AuthInterceptor的实例，即可实现登录验证。

默认用户校验很简单，可以通过实现com.xinou.quickadmin.auth.UserAuth接口来实现更丰富的校验功能。

在Controller中提供的接口上添加@IngoreCheck可以跳过此接口的登录验证。

####工具类

IDUtil：用于生成ID，验证码，邀请码等字符串

MD5Util：用于计算MD5值

TextUtil：用于将文本输入中的回车换为<br/>换行。

###前端开发

####导航设置

导航配置位于/resources/comp/application.js中IndexWrapper.state.navtree参数

主页面左侧导航栏通过一个json数组配置，每个导航包括一个name属性和component属性，分别为导航名称和对应组件的路由。

导航通过React-router的Link组件实现路由跳转。

通过配置subnav可以支持最多双层导航。

案例json如下所示：

[
    {
        name:"用户管理",//导航名称
        component:"/user/admin"//对应组件路由
    },{
        name:"新闻管理",
        subnav:[//子导航列表
            {
                name:"新闻列表",
                component:"/news/list"
            }

        ]
    }
]

在组件中需要跳转，可以使用Link组件，或者通过hashHistory实现跳转。

hashHistory.push("/news/update/"+item.id);

####路由设置

组件路由通过React-route实现。配置位于application.js中。是标准的React-router用法。

添加一个路由仅需要一行代码：

<Route path="user/admin" component={AdminUserList}/>

path指定访问路径，component指定加载的组件。

####组件应用

在项目中包含了user.comp.js和news.comp.js两个案例。用户可以自行仿照添加组件。

user.comp.js中的 AdminUserList 组件是一个标准的列表视图组件。已经添加了详尽的注释，代码就不再重复粘贴。

####网络请求

在/resources/comp/framework/commonUtil.js中，提供了两个基本的网络请求：xget和xpost方法。

在xget和xpost方法中封装了对标准返回数据的基本处理，对于报错会直接处理。所以回调方法的参数仅为data对象。

##组件列表

所有预设的组件源码均位于/resources/comp/framework/adminUIComponents.js文件中。部分组件可能依赖于commonUtils.js中的工具类。

###SmartBox

基本的外包裹框，包括标题栏，面包屑导航和功能按钮。

用法如下：

<SmartBox title="标题" index={["导航1级","导航2级"...]} option={{reload:function(){},add:function(){}}}

Title参数为一个字符串，显示为标题。

Index参数为面包屑导航，为一个字符串数组，可以有任意多级。

Option为限选项，根据需要自行选择添加。未指定的则不会显示在右上角。reload为刷新按钮，add为加号按钮。

###DataTable

基本的数据表格。

用法如下：

<DataTable index={[{name:"列名",col:"字段名"}]} data={[{k:v,k2:v2},{k:v,k2:v3}]} buttons={{name:"按钮文字",onclick:function(item){点击事件}}}/>

Index：列名与数据字段的映射。表头由列名组成，根据对应的字段名在数据中查找数据填充表格。col参数可以对应字段名，也可以对应一个方法，将方法的返回值用来填充表格。

比如用于显示一个图片：

{name:"image",col:function(item){return <img src={item.image} />}

Data：数据列表。一般是通过Ajax从服务端请求得来的列表。

Buttons：最后一列的功能按钮，传入参数item为对应此列的数据对象。可以做任何操作。

###Pager

分页按钮

用法如下：

<Pager pagecount={12} last={1} callback={function(page){加载数据}} />

Pagecount：总计页数。

Last：当前页数。

以上两个参数在标准的页面接口返回信息中可以找到。一般存储在state中以供使用。

callback：点击选择页数之后加载数据的接口。page参数为用户选中的页数。可以在此通过Ajax请求数据。

###ImageUpdate

一个可以预览的图片上传组件。通过formData实现异步上传，需要提供文件上传接口。也可自行改写此组件，使用OSS等第三方文件上传组件。

用法如下：

<ImageUpdate title="标题" action = "/common/imgupload" url={"http://img.url"} onChange={function(url){this.setState({url:url}}}/>

Title：此行输入的标题

Action：上传图片的接口URL,此接口上传文件字段为file，返回值应为图片URL，可以根据自己的参数自行改写。

Url：显示图片的URL。

onChange：当选中图片后的回调方法，在回调方法中必须重新指定URL参数以实现显示图片的效果。

###SingleButtonImageUploader

类似于ImageUpdate的组件，不提供预览，仅有一个按钮。

用法如下：

<SingleButtonImageUploader title="标题" action = "/common/imgupload" 
    url={"http://img.url"} onChange={function(url){this.setState({url:url}}} auto=false/>

Title：此行输入的标题

Action：上传图片的接口URL,此接口上传文件字段为file，返回值应为图片URL，可以根据自己的参数自行改写。

Url：显示图片的URL。

onChange：当选中图片后的回调方法。

auto：是否支持重复上传，设为auto后，当上传成功后文字仍为title，否则为上传成功。

###Modal

基于Bootstrap模态框的弹出框。可以作为容器与其它组件配合使用。

用法如下：

<Modal id="id" title="标题" btns={[{title:"按钮",onclick:function(){...}}]}><div>里面随便写</div></Modal>

弹出框带有一个标题和底部按钮栏。自带有关闭按钮。

可以通过Bootstrap的调用方式：$("#id").modal("show")和$("#id").modal("hidden")来控制模态框的开关。

title：标题

id：唯一的id，用于控制此模态框

btns：在按钮列表中可以添加其余按钮。

###SelectableInput

基于html5的datalist实现的输入搜索选框，类似于12306的地址选择功能。

用法如下：

<SelectableInput pkey="pkey" title="标题"  data={[{k:v},{kv:vk}]} onChange={function(value){...}} inputable=true/>

pkey：唯一key，用于对应datalist于input

title：标题

data：数据数据，也可以使用另一种方式：dataurl，输入一个url，然后会向此url请求参数。此url也应当使用标准接口。

onChange: 输入数据后的回调方法

inputable：是否接受用户自定义输入。为true时接受。否则不接受在data之外的输入。

###SearchLabel

支持选择条件的搜索框，仅允许同时一个条件进行搜索。

用法如下：

<SearchLabel searchKeys={[{key:"name",name:"姓名"},{key:"age",name:"年龄"]} loadPage={function(queryString){...}}/>

searchKeys：用于搜索的条件列表,key表示实际上传的字段，name是用于显示的名称

loadPage:用于加载数据的回调函数。queryString是可以直接拼接在url后的参数列表。包括searchType和searchData两个参数。分别为搜索的key和数据。

chenjinlin616 / QuickAdmin

About

Languages