
microbee-http 丨 低代码开发平台
- 说明文档
- DEMO
- 下载
概述
microbee-http是一款开源分布式http服务器中间件,主要功能如下:第一作为普通HTTP服务器,承担Web服务数据的转发,请求,后端语言的解析任务,类似于nginx,apache等,第二是基于HTTP中间件的低代码开发平台,节省开发时间,轻松自如应对需求变更和开发过程中的不断修改升级,第三与microbee-data数据库中间件集成使用完成高负载应用的搭建,兼容不同数据源,解决不同数据库和异构系统之间的阻抗,第四是将大数据,AI模型泛数据库化。
后端使用说明
microbee-http的使用分为前端部分microbee-http-front和服务器部分microbee-http-server。microbee-http-front为javascript实现,是前端接口调取框架工具集,使用其提供的api完成后台数据调取,文件传输,数据上传等;microbee-http-server使用java与c++语言编写,提供标准的web3.0服务,和分布式数据操作平台,其二开接口正在研发中。
2.1服务器配置说明
2.1.1 模型与数据库表映射关系
视图层数据模型与存储层数据库表的映射关系存储在服务器端mtmapping.xml文件中
<md name="md1">sys_user</md>
md1为前端试图层模型名称,sys_user为存储层数据库表名称
2.1.2.服务器基础配置
基础配置信息存储在server_conf.xml文件中,其详细配置如下
pm为服务器常用参数,redirectss为301重定向配置,也可以作为代理服务器配置,用以完成重定向、多路转发、统一授权等。
2.1.2.1重定向配置
1.目录转发
将URL段(以跟目录始)转发到其他域的相同目录,参数不变
意为将当前域的http://127.0.0.1/uploads/xx/xx重定向为http://www.baidu.com/uploads/xx/xx
2.3服务端部署
2.4高阶API开发
2.4.1HoContext说明
Hocontext是microbee-http高阶api的上下文对象,包含了http上下文操作的重要分装对象,包括HttpRequestWrapper(目前仅支持http1.0),Session操作,Actions数据源操作等。
2.4.2 JAVA高阶API开发方法
- 新建任意maven项目(不选择任何依赖)
- 以microbee-httpdev为父项目,引入microbee-httpdev核心开发包,该包存放在私有仓库中
父项目配置microbee-httpdev microbee-httpdev 1.2-SNAPSHOT microbee-httpdev microbee-httpdev 1.2-SNAPSHOT - 创建main方法,加入如下代码
HttpCore httpCore = new HttpCore(); httpCore.start(); - 在项目跟目录下新建dynamic包(文件夹)
- 本地编写需要的模块,dynamic摸编写要求如下
class类名称 遵循java命名规范,不可重复,否则编译环节会出错,类的报名必须为dynamic 方法 返回值必须为String类型,有且只有一个参数HoContext,方法返回值即为返回给前端的数据 - 在resources/config 目录下创建server_conf.xml文件,可从服务器下载,并修改配置,开发环境只需修改数据源相关配置即可。
- 将编写完的模块(.java文件,非.class)文件复制到服务的dynamic目录中
注意:以上内容也可以直接在服务器的dynamic目录下创建并编辑 - Java开发实例
实例1.package dynamic; import microbee.http.utills.dynamic.HoContext; import java.util.ArrayList; import java.util.List; public class Test { public String te(HoContext hoContext){ List 该模块的访问路径为:Test/tedatas = new ArrayList<>(); datas.add("1000"); String res = hoContext.actions.connActionQuery("select * from vun_system_log where id>? ",datas,true); System.out.println(res); return res; } }
2.4.3 数据库操作指引
dataActions对象封装了后端数据库操作的所有方法,方法传入参数有两种类型,其一为json字符串,该方式主要是为了前端直接操作数据库;其二为传入参数为java对象list,map,实体bean等,供后台开发人员开发模块时使用,condition和sequence的定义参考3.1.4和3.1.2
-
1.查询返回多条数据
List conditionPJList = new ArrayList<>(); ConditionPJ conditionPJ = new ConditionPJ(); conditionPJ.setLgc(1); conditionPJ.setKy("rname"); conditionPJ.setOprt("mcb_vgeq"); conditionPJ.setVl("系统"); conditionPJList.add(conditionPJ); Sequence sequence = new Sequence(); sequence.setSort(1); sequence.setOrderby("id"); List -
2.查询返回一条数据
List conditions1 = new ArrayList<>(); ConditionPJ conditionPJ1 = new ConditionPJ(); conditionPJ1.setLgc(1); conditionPJ1.setKy("id"); conditionPJ1.setOprt("mcb_eq"); conditionPJ1.setVl("57"); conditions1.add(conditionPJ1); Map mp = hoContext.dataActions.gainOne("sys_role",conditions1); System.out.println("=======getOne========="+mp.get("rname")); -
3.查询获取总记录数
List conditions2 = new ArrayList<>(); ConditionPJ conditionPJ2 = new ConditionPJ(); conditionPJ2.setLgc(1); conditionPJ2.setKy("id"); conditionPJ2.setOprt("mcb_eq"); conditionPJ2.setVl("57"); conditions2.add(conditionPJ2); Map mp1 = hoContext.dataActions.gainCount("sys_role",conditions2); System.out.println(mp1); System.out.println("=======getcount========="+mp1.get("total")); -
4.求和
List conditions3 = new ArrayList<>(); ConditionPJ conditionPJ3 = new ConditionPJ(); conditionPJ3.setLgc(1); conditionPJ3.setKy("id"); conditionPJ3.setOprt("mcb_eq"); conditionPJ3.setVl("57"); conditions3.add(conditionPJ2); Map mp2 = hoContext.dataActions.gainSum("sys_role",conditions3,"id"); System.out.println(mp2); System.out.println("=======getsum========="+mp2.get("sum_id"));
2.4.4 特殊的输出
1.输出文件或图片
File file = new File("F:\\fzxm\\1.jpg");
hoContext.httpResponse.resFilePrint(file,0,file.length());
2.长连接输出
前后台建立连接后保持连接,可双向收发消息,用来做后台长时间任务处理时向前端发送任务完成进度消息(前端实现进度条显示),即时通信等,使用方式如下
- 创建模块和项目(参照2.4.2 JAVA高阶API开发方法)
- 模块类形参设置为WsContext()
-
WsContext定义如下表所示
datas 成员变量/map结构 前端传递的数据 DataActions 成员变量 数据库操作对象 resPrint(String res) 成员方法 用来输出数据到浏览器 用例 package dynamic;
import microbee.http.apps.dynamic.WsContext;
import io.netty.handler.codec.http.websocketx.TextWebSocketFrame;
public class Testws {
public void test (WsContext wsContext){
String name = (String)wsContext.datas.get("name");
wsContext.resPrint("1");
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
wsContext.resPrint("2");
try {
Thread.sleep(1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
wsContext.resPrint("3");
}
}
- API测试方法:浏览器访问/wc.html进行测试
- 特别说明:该方法实现的接口不能通过http协议访问,只能通过wc协议访问,且定义url不能与http接口冲突。
2.4.5 Python高阶API开发方法
待续……..
2.4.6开启分布式模式
2.5定时任务
- 开启定时任务步骤
- 在dynamic新增模块(类)
- 使用@Schedules注解该类
- 在该类中创建任意方法(方法必须有形参DataActions dataActions
- 使用Frequency(value=5)注解类中方法(value为执行频率,单位为秒)

2.6持久层开发
2.6.1使用步骤
- 在dynamic下创建model包
- 新建接口,接口名称与对应的数据库表名一直,不区分大小写,如下
- 在模块/控制器,定时任务中使用@ModelResources注解注入
2.6.2持久层编写语法规范和注意事项
前端使用手册
McrbHttpClient是前端数据调取操作对象,成员对象有两部分,其一是conf数据对象,用来配置服务端即Microbee-Http-Server的IP/域名地址(默认IP地址为127.0.0.1),端口号(默认端口为80)等;其二是Function对象,用来操作Microbee-Http-Server获取数据,同步数据,与高阶API交互等。
3.1基础API使用
3.1.1查看模型与数据库表对照关系
该接口为系统保密接口除相关开发人员外不得对外公开,涉及系统安全映射查询: http://host:port/mdlst/ |
通过传参(get/post)获取映射关系 authorize=authorize1212312 authorize1212312为授权密码 |
3.1.2 oprt运算符取值对照表
= | mcb_eq | 等于 |
>= | mcb_geq | 大于等于 |
<=< /td> | mcb_leq | 小于等于 |
like | mcb_vgeq | 模糊查询 |
<> | mcb_neq | 不等于 |
排序参数对照表
desc | 1 |
asc | 0 |
3.1.3 操作类型说明(actype)
actype=1 | 查询 |
actype=2 | 插入 |
actype=3 | 更新 |
actype=4 | 某字段求和 |
actype=5 | 查询一条记录 |
actype=6 | 查询总记录数 |
actype=10 | 高阶API处理 |
3.1.4 condition编写说明
lgc | 逻辑单元,1表示逻辑与即and,0表示逻辑或即or,不能为空 |
ky | 为字段名称 |
oprt | 为运算符参照3.1.2表 |
vl | 为ky字段取值 |
举例:and id>=1 => [{lgc:1,ky:'id',oprt:'mcb_geq',vl:222}]; |
3.1.5 搜索/模糊查询(可分页)
方法名 | searchlst |
参数 |
func:回调方法 md:模型名称 sumby:求和字段名称 condition: 条件(参考condition与sql语言关键词参照表) sequence:排序,默认为{}空,可选参数,其形式为{排序字段:排序方式},排序方式请参考3.1.2之排序参数对照表 |
用例 | |
//查询列表(可分页) var md = "md72";//模型名称 var page = 0 //页码 var condition = [{lgc:1,ky:'id',oprt:'mcb_geq',vl:222},{lgc:1,ky:'rid',oprt:'mcb_geq',vl:55}]; var sequence = {id:0}; McrbHttpClient.searchlst(lst,md,page,condition,sequence); function lst(e){ console.log(e) } |
3.1.6 求和
方法名 | sum |
参数 |
func:回调方法 md:模型名称 sumby:求和字段名称 condition: 条件(参考condition与sql语言关键词参照表) |
用例 | |
//求和 var md = "md73";//模型名称 var sumby = "id" //求和的字段 var condition = [{lgc:1,ky:'id',oprt:'mcb_geq',vl:222}]; McrbHttpClient.sum(funcsum,md,sumby,condition); function funcsum(e){ console.log(e) } |
3.1.7查询总记录数
方法名 | getcount |
参数 |
func:回调方法 md:模型名称 condition: 条件(参考condition与sql语言关键词参照表) |
用例 | |
//查询总记录数 var md = "md73";//模型名称 var condition = [{lgc:1,ky:'id',oprt:'mcb_geq',vl:222}]; McrbHttpClient.getcount(funccount,md,condition); function funccount(e){ console.log(e) } |
3.1.8查询一条记录
方法名 | gainOne |
参数 |
func:回调方法 md:模型名称 condition: 条件(参考condition与sql语言关键词参照表) |
用例 | |
//查询符合条件的一条记录 var md = "md73";//模型名称 var condition = [{lgc:1,ky:'id',oprt:'mcb_geq',vl:222}]; McrbHttpClient.gainOne(funcOne,md,condition); function funcOne(e){ console.log(e) } |
3.1.9插入数据(非批量)
方法名 | save |
参数 |
func:回调方法 md:模型名称 sets:插入的字段与数据的映射关系:{uname:"张三",oid:2,rtime:"1441784199"} |
用例 | |
//插入数据 var md = "md72";//模型名称 var sets = {uname:"张三",oid:2,rtime:"1441784199"}; McrbHttpClient.save(ins,md,sets); function ins(e){ console.log(e) } |
3.1.10更新数据
方法名 | renew |
参数 |
func:回调方法 md:模型名称 sets:更新的字段与数据的映射关系:{uname:"张三",oid:2,rtime:"1441784199"} condition:更新条件(参照3.1.4) |
用例 | |
//更新 var md = "md72";//模型名称 var sets = {uname:"张三11",oid:999,rtime:"1441784199"}; var condition = [{lgc:1,ky:'id',oprt:'mcb_eq',vl:243}]; McrbHttpClient.renew(update,md,sets,condition); function update(e){ console.log(e) } |
3.2高阶API使用
高阶api由后端开发人员开发接口,编写具体输入输出参数说明文档后交付前端开发人员使用
方法名 | ho |
参数 | honame:api名称/路径,由后端开发人员定义 |
data:传递的后端程序的参数列表 | |
用例 | |
//高阶api调用 var data = {name:"张三",age:2}; McrbHttpClient.ho(funcho,"Test/te",data); function funcho(e){ console.log(e) } |
3.3长连接接口使用
前后台建立连接后保持连接,可双向收发消息,用来做后台长时间任务处理时向前端发送任务完成进度消息(前端实现进度条显示),即时通信等,此接口使用ws协议,不能使用http协议访问
- 使用步骤:1创建长连接,2.发送数据
-
创建长连接:每个document对象中只创建一次
配置url McrbHttpClient.conf. wshost createlCnct方法参数 refunc:请求返回时调用的方法 用例 McrbHttpClient.lCnct.createlCnct(resp);
function resp(response){
alert(response)
}
-
发送数据
sendlCnct(url,data) 发送数据 参数 url:接口url,由后台开发人员提供,
eg:Test/testdata:传递给后台的数据,json格式,
eg: {"id":1,"name":"李四"}用例 var datas = {"id":1,"name":"李四"};
McrbHttpClient.lCnct.sendlCnct("Testws/test",datas);
后台返回数据后会调用createlCnct绑定的resfunc方法,前端在此方法中处理业务逻辑。
3.4框架工具组件
该框架中的工具组件使用须引入mhc.js文件,组件方法封装在此js文件,工具组件对应的样式在ctools.css文件;
3.4.1加载动画
加载数据时显示动效。使用该方法需要引入mhc.js文件,接口访问时会自动加载,相对应的样式在同目录下的ctools.css文件中。
3.4.2弹窗
McrbHttpClient.popup.msg()提示弹窗
常用于主动操作后的反馈提示。
基础用法:
从中间出现,2 秒后自动消失。
不同状态:用来显示「成功、失败、警告」类的操作反馈。
设置icon字段可以定义不同的状态,默认为null。
(icon图标1:成功icon图标; 2:失败icon图标)
McrbHttpClient.popup.msg(content,{icon:1});
参数说明:
参数 | 说明 | 类型 | 可选值 |
content | 消息文字 | string | —— |
icon | 图标 | Number | 1:成功,2:失败,3:警告 |
实例1:

实例2:


McrbHttpClient.popup.confirm()询问弹窗
提示用户确认其已经触发的动作,并询问是否进行此操作时会用到此对话框。
基础用法:
居中显示,提示询问是否进行操作“确定”或者“取消”。
仅传入文字提示,如实例1;
传入options作为第一个参数,它是一个字面量对象。icon字段表明消息类型,可以为1表示成功,2表示失败,3表示警告。参数title必须定义为String类型,如实例2;
如需设置两个默认按钮的文字显示,则可添加第二个参数设置(若未设置则显示默认),或需设置点击两个按钮后的后续响应,如实例3;
McrbHttpClient.popup.confirm(options1,options2,cb1,cb2)
参数说明:
参数 | 说明 | 类型 | 可选值 |
options1.title | 标题 | string | —— |
options1.content | 消息文字 | string | —— |
options1.icon | 图标 | Number | 1:成功,2:失败,3:警告 |
options2.btn | 按钮文字 | array | 设置两个按钮的文字提示 |
cb1 | 回调函数 | Function | 点击第一个按钮后回调函数 |
cb2 | 回调函数 | Function | 点击第二个按钮后回调函数 |
实例1:

实例2:

实例3:

McrbHttpClient.popup.prompt()输入框弹窗
当用户进行操作时会被触发,中断用户操作,提示用户进行输入的对话框。
基础用法:
居中显示,提示用户进行输入操作然后提交。
参数1输入内容的文字提示,参数2设置输入框input的name值,如实例1;
如需设置输入操作后点击‘提交’后的后续响应事件,设置第三个参数回调函数,如实例2;
如需设置输入操作后点击‘取消’后的后续响应事件,设置第四个参数回调函数,如实例3;
McrbHttpClient.popup.prompt(text,keyname,cb1,cb2)
参数说明:
参数 | 说明 | 类型 | 可选值 |
text | 输入内容文字提示 | string | 必填 |
keyname | 输入框input的name值 | string | 必填 |
cb1 | 点击“提交”后回调函数 | Function | 非必填 |
cb2 | 点击“取消”后回调函数 | Function | 非必填 |
实例1:

实例2:
实例3:

McrbHttpClient.popup.alert()确认语弹窗
当用户进行操作时会被触发,该对话框中断用户操作,直到用户确认知晓后才可关闭。
基础用法:
居中显示,中断用户操作,直到用户确认关闭。
可只设置提示文字,如实例1;
如传入参数为options对象,title为标题string类型,icon为图标对应的值为int类型(其中1表示成功,2表示失败,3表示警告),content为描述内容;如实例2或实例3;
参数说明:
参数 | 说明 | 类型 | 可选值 |
title | 标题 | string | —— |
content | 消息文字 | string | —— |
icon | 图标 | Number | 1:成功,2:失败,3:警告 |
实例1:

实例2:

实例3:

McrbHttpClient.popup.open()打开自定义html窗体
当用户进行操作时会被触发,中断用户操作,弹出自定义html内容。
基础用法:
居中显示,中断用户操作,弹出自定义html内容,知道用户触发相应事件触发关闭。
设置content自定义html的dom元素;
设置标题title显示自定义标题内容,如实例1;
如需多层弹出,必须设置id参数,如实例2;
McrbHttpClient.popup.open(content,title,id)
参数说明:
参数 | 说明 | 类型 | 可选值 |
content | 自定义html内容 | —— | 自定义内容的dom元素 |
title | 标题 | string | 必填 |
id | 弹窗id | string | 必填 |
实例1:
参数 | 说明 | 类型 | 可选值 |
title | 标题 | string | 非必填 |
content | 自定义html内容 | —— | 自定义内容的dom元素 |

实例2:
参数 | 说明 | 类型 | 可选值 |
title | 标题 | string | 非必填 |
content | 自定义html内容 | —— | 自定义内容的dom元素 |

3.4.3上传文件
使用该方法需要引入mhc.js文件,接口访问时会自动加载,相对应的样式在同目录下的ctools.css文件中。
功能描述:可以上传1.图片文件;2.所有类型的文件
init方法:初始化上传组件
var upload_obj = McrbHttpClient.upload.init('container_id', options, callback)
参数说明:
参数 | 说明 |
{String} id | 挂载容器的id |
{Object} options | 上传组件的配置参数: 1.{Boolean} isImgUploader 是否为图片上传组件;默认值:true 2.{String|Array[String]} fileType 上传对话框文件类型过滤器;默认值:* 3.{Number} maxSize 上传文件的最大尺寸;默认值:5 4.{String} btnText 上传按钮的文字;默认值:上传 5.{Boolean} isMulti 是否为多图片/多文件上传器.默认值:false |
返回值 | upload对象 包含文件url数据,配置参数options,上传容器dom。 |
使用方法
1.首先在html文件中加入div标签,id自定义。
2.然后在script标签或js文件中调用函数McrbHttpClient.upload.init(id, isImgUploader)。
实例:
setValue方法:给上传组件赋值,用于回显。参数为字符串或字符串数组
upload_obj.setValue('url')
getValue方法:获取上传组件的数据。
upload_obj.getValue()
效果展示:
3.4.4流加载
该模块包含信息流加载和图片懒加载两大核心组成,其对服务端和前端体验有非常大的性能帮助。
信息流 - 滚动加载/手动点击加载
信息流即异步逐页渲染列表元素。
如页面初始时只显示了6个,想通过加载更多来显示余下列表,只需要执行下列方法即可。
参数说明:
参数 | 说明 |
id | string,绑定挂载元素的id |
type | 触发类型:scroll滚动到底部触发,click点击触发 |
icon | 加载动画样式1-8,共8种样式 |
text | 设置提示文字 |
function | 触发事件后执行函数 |
实例:
效果展示:
图片懒加载
该模块是一个用于加载当前屏图片的高性能方式,对网站因为图片可能带来的压力,可做出优化效果。(只会针对img元素有效)
参数说明:
参数 | 说明 |
第一个参数 | Array图片路径集合 |
第二个参数 | string,绑定挂载元素的id |
实例:
效果展示:
3.4.5日期格式化
功能介绍:
日期转换为指定的格式:比如转换成 yyyy-MM-dd hh:mm:ss 或者 yyyy-MM-dd
McrbHttpClient.datefn.patternTime(data, fn)
参数说明:
参数 | 说明 |
data | 日期时间 |
fn | 格式表达式 |
格式表达式说明:
名称 | 表达式 |
年 | {y} |
月 | {m} |
日 | {d} |
时 | {h} |
分 | {i} |
秒 | {s} |
星期 | {a} |
使用方法:
实例方法 | 结果 |
McrbHttpClient.datefn.patternTime('2000/02/02 14:01:31', '{y}-{m}-{d} {h}:{i}:{s}') | 2000-02-02 14:01:31 |
McrbHttpClient.datefn.patternTime(new Date(), '{y}年{m}月{d}日{h}:{i}:{s}') | 2022年10月09日17:11:43 |
McrbHttpClient.datefn.patternTime(new Date(), '{y}/{m}/{d} {h}:{i}:{s}') | 2022/10/09 17:11:43 |
McrbHttpClient.datefn.patternTime(new Date(), '{y}/{m}/{d}') | 2022/10/09 |
McrbHttpClient.datefn.patternTime(new Date(), '{h}:{i}:{s}') | 17:11:43 |
McrbHttpClient.datefn.patternTime(new Date(), '星期{a}') | 星期日 |
3.4.6日期与时间选择器
功能介绍:
通过绑定某id元素渲染日期选择器组件;
有两种风格选择style:1或2;
回调函数,返回选中的日期时间;
McrbHttpClient.datefn.calendarDom(id,style,callback)
参数说明:
参数 | 说明 |
id | string,绑定元素的id |
style | int,时间选择器风格:1或者2 |
callback | 回调函数:返回选择的日期时间 |
实例:
McrbHttpClient.datefn.calendarDom('data_box', 1, function(e){console.log('选择的结果:'+e)}) |
// 输出结果:选择的结果:2022-10-13 00:00:00 |
McrbHttpClient.datefn.calendarDom('data_box2', 2, function(e){console.log('选择的结果:'+e)}) |
// 输出结果:选择的结果:2022-10-13 00:00:00 |
效果展示:
3.4.7下拉菜单
功能介绍:
通过绑定某id元素渲染下拉菜单组件;
可设置组件宽、是否圆角、提示语、以及下拉菜单中的值;
选中后返回选中的值;
McrbHttpClient.searchfn.selectfn({id,width,isradius,placeholder},optData, callback);
参数说明:
参数 | 说明 |
id | 挂载元素id |
width | 设置元素宽,默认值100px |
isradius | True/false,是否设置圆角,默认false |
placeholder | 设置提示语,默认“请选择” |
optData | Array下来列表值的集合 如:var optData = [ { name:'项目aa', value:1, children:[ { name:'项目a1', value:10, }, { name:'项目a2', value:11, }, { name:'项目a3', value:12, } ] },{ name:'项目bb', value:2, children:[] } ] |
callback | 回调函数:返回选中值 |
实例:
效果展示:
3.4.8表单及校验
使用该方法需要引入mhc.js文件,接口访问时会自动加载,相对应的样式在同目录下的style/ctools.css文件中。
功能描述:input, select, button等表单元素的实现,表单提交、表单重置的接口实现。
使用方法:
1.首先在html文件中加入form标签,id自定义。
2.然后在script标签或js文件中调用函数McrbHttpClient.form(id),返回form实例。
参数:id(String): 容器的id; 返回值form实例。
3.调用form实例方法 form.render(options)。实现对form表单的渲染
参数:options(Array),配置项option的数组,每一个配置项对应一个表单元素
目前支持种表单元素,如下:
1.input
配置参数如下:
type(String) | input |
label (String) | 元素label,自定义。 |
name (String) | 元素的name属性。 |
required (Boolean) | 是否为必填项 |
verify (Array[String]) | 字符串数组,表单验证参数。目前可以取值:phone, email, url, number, date, identity |
placeholder (String) | 其placeholder属性对应值 |
2.textarea
type(String) | textarea |
label (String) | 元素label,自定义。 |
name (String) | 元素的name属性。 |
required (Boolean) | 是否为必填项 |
placeholder (String) | 其placeholder属性对应值 |
3.select
type(String) | select |
label (String) | 元素label,自定义。 |
name (String) | 元素的name属性。 |
required (Boolean) | 是否为必填项 |
opts (Object) | 例:opts: {'请选择颜色': '','红色': 1,'绿色': 2}Key为选项显示的值,value为表单提交时的值,空串代表默认项。 |
4.selectInput
type(String) | selectInput |
label (String) | 元素label,自定义。 |
name (String) | 元素的name属性。 |
required (Boolean) | 是否为必填项 |
opts (Array[Object]) | 例:opts: [{value: '', text: '请选择', selected: true}, {value: 1, text: '红色'}, {value: 2, text: '绿色'}, {value: 3, text: '黄色'}] |
5.radio
type(String) | radio |
label (String) | 元素label,自定义。 |
name (String) | 元素的name属性。 |
required (Boolean) | 是否为必填项 |
radioList(Array[Object]) | 每个单元按钮选项的配置 |
raidoList中每个Objcet字段及代表的含义如下:
id(String) | Radio按钮的及其label(for属性)对应的id |
value(String/Number) | 该radio对应的值(提交表单时提交的值) |
label (String) | 该radio对应的label,自定义。 |
checked(Boolean) | 是否被默认选中 |
6.upload
type(String) | upload |
label (String) | 元素label,自定义。 |
name (String) | 元素的name属性。 |
required (Boolean) | 是否为必填项 |
maxSize(Number) | 上传文件的最大大小,单位Mb |
btnText(String) | 上传按钮显示的文字 |
isImg(Boolean) | 是否只上传图片,且有缩略图 |
isMulti(Boolean) | 是否支持多文件/图片上传 |
fileType(String或Array[String]) | isImg为真时无效。input的accept属性值。例:image/*, audio/*, video/*, .pdf, .doc, .xls, .mp4, .png等。默认值:所有类型文件。 |
callback | 上传之后的回调函数 |
7.button
type(String) | button |
name (Array[String]) | 按钮组显示的名字。 |
event (Array[String]) | 字符串数组,可取值:submit, reset。表示按钮对应的事件 |
callback (Array[Function]) | 函数数组,表示按钮事件对应的回调函数。 |
实例:
效果展示:
3.4.9表格table
功能介绍:
width值控制表格宽度;
columns与dataSource中的数据相对应,没有对应数据的地方显示为空;
columns中width设置列宽,columns中align值控制内容在表格中所处的位置;
columns中的render函数方法,可对当前数据进行处理后显示,如实例1;
columns中的render函数方法,也可设置为数据操作(编辑、查看、删除),如实例2;
McrbHttpClient.tableDom.common({columns,dataSource,width:,ischeck,},'tableid');
获取勾选数据方法:
参数id为绑定的table的id;
McrbHttpClient.tableDom.getchecked(tableid);
参数说明:
参数名 | 说明 | 类型 | 可选值 |
columns | table表格列内容设置 | options | 必填;Key、title、align、width |
columns中width | 设置列宽 | String | —— |
columns中align | 控制内容在表格中所处的位置 | String | —— |
dataSource | table数据 | array | 必填 |
width | 控制表格宽度 | String | 默认宽800px |
ischeck | true/false是否全选 | Boolean | 默认false |
tableid | 挂载元素的ID | String | 必填 |
实例1:
效果展示:
1获取选中数据实例2:
效果展示:
2获取选中数据3.4.10page分页
功能介绍:
可自行设置设置每页显示数据条数(pageSize),数据总条数(totalCount),当前页数(curPage),显示多少个页码(nav_count),点击分页后的回调函数(callback);
McrbHttpClient.loadPage.init({el,pageSize,totalCount,curPage,nav_count,callback);
参数说明:
参数名 | 说明 | 类型 | 可选值 |
el | 挂载元素的id | String | 必填 |
pageSize | 每页显示条数 | Int | 必填 |
totalCount | 总记录数 | Int | 必填 |
curPage | 当前页数 | Int | 不设置则默认1 |
nav_count | 显示多少个导航 | Int | 必填 |
callback (Array[Function]) | 点击分页后的回调函数 | —— | —— |
实例1:
效果展示:
3获取选中数据3.4.11编辑器
具体功能有:
字体加粗、倾斜、下划线、删除线、p标签、h1标签、h2标签、h3标签、字体颜色、背景颜色、字体大小、图片、列表、居左、居右、居中等;
点击"确定"返回编辑器内容;
点击"取消"清空编辑器内容;
参数说明:
参数名 | 说明 | 类型 | 可选值 |
el | 挂载元素的id | String | 必填 |
callback | 回调函数 | —— | —— |
实例:
效果展示:
3.4.12Tab选项卡
基本用法:McrbHttpClient.tabfn.init(options);
参数说明:
参数 | 说明 | 类型 | 可选值 |
eleid | 挂载元素的id | String | 必填 |
trigger | 设置如何触发事件,点击触发:click鼠标滑过触发:hover | String | 默认值click |
btncolor | 选中状态颜色设置 | String | 默认值orange |
用法实例:
- 大橘
- 汪汪
- 库库
- 斑点
效果展示:
- 大橘
- 汪汪
- 库库
- 斑点
动态操作tab:McrbHttpClient.tabfunc.init(options);
参数说明:
参数 | 说明 | 类型 | 可选值 |
eleid | 挂载元素的id | String | 必填 |
btncolor | 选中状态颜色设置 | String | 默认值orange |
dynamics | 是否开启动态操作:true开启,false不开启 | boolean | 默认值false |
addfun | 设置添加项参数 | —— | —— |
title | 新增项标题 | String | —— |
content | 新增项内容 | String | —— |
callback | 添加成功回调函数 | —— | —— |
用法实例:
- 大橘
- 汪汪
- 库库
- 斑点
效果展示:
- 大橘大
- 汪汪
- 库库
- 斑点
3.4.13进度条
参数说明:
参数 | 说明 | 类型 | 可选值 |
ele_id | 挂载元素的id | String | 必填 |
bgcolor | 进度条背景色 | String | 默认值#f57e00 |
istext | 是否显示文字百分比:true显示,false不显示 | boolean | 默认值false |
fontsize | 设置文字大小 | String | 默认值14px |
fontcolor | 设置文字颜色 | String | 默认值#333 |
position | 设置文字显示位置:可选centertop,bottom,left,right | String | 默认值center |
percent | 设置百分比 | Int | 默认值100 |
size | 设置进度条的高度 | String | 默认值20px |
动态修改百分比方法:
参数 | 说明 | 类型 | 可选值 |
ele_id | 挂载元素的id | String | 必填 |
percent | 设置百分比 | Int | —— |
用法实例:
效果展示:
3.4.14面包屑
参数说明:
参数 | 说明 | 类型 | 可选值 |
ele_id | 挂载元素的id | String | 必填 |
fontsize | 设置字体大小 | String | 默认值14px |
fontcolor | 设置字体颜色 | String | 默认值#999 |
split_line | 设置分割线 | String | 默认值“ / ” |
lastcolor | 最后一项字体颜色 | String | 默认值#333 |
islasturl | 最后一项是否存在链接:true存在,false不存在 | boolean | 默认值false |
data | 数据; data = [ {name:'页面1',url:'javascript:;',}, {name:'页面2',url:'javascript:;',}, ]; |
Array | 必填 |
用法实例:
效果展示:
3.4.15搜索框
参数说明:
参数 | 说明 | 类型 | 可选值 |
ele_id | 挂载元素的id | String | 必填 |
data | 数据集合; Type:类型;Key:关键字,input输入框、 select下拉选择、date时间选择等对应的字段名设置; prompt:提示语;options是select的选项内容; var zuhedata = [ {type:'input',key:'keyname',prompt:'请输入关键字',}, {type:'select',key:'keytype',prompt:'请选择类型', options:[{ name:'项目aa', value:1, },{ name:'项目bb', value:2, },], }, {type:'date',key:'start_date',prompt:'开始时间',}, {type:'date',key:'end_date',prompt:'结束时间',}, {type:'button',key:'subbtn',prompt:'搜索',} ]; |
Array | 必填 |
callback | 成功回调函数 | —— | —— |
用法实例:
效果展示:
3.4.16导航菜单
参数说明:
参数 | 说明 |
id | 导航菜单容器id |
fontColor | 字体颜色 |
fontSize | 字体大小 |
backgroundColor | 背景色 |
mode | 模式: vertical/horizontal。默认为vertical |
activeIndex | 初始状态时被激活的栏目的序号 |
activeTextColor | 被激活栏目的字体颜色 |
group (Array) | 导航菜单栏目group |
group为数组类型,内部包含一个或多个导航菜单的栏目对象,导航菜单的栏目对象的参数如下
参数 | 说明 |
index | 栏目的index |
title | 栏目的标题 |
href | 点击该栏目跳转的url |
callback | 点击该栏目后的回调 |
children | 该栏目的子栏目,为数组类型,包含一个或多个导航菜单的栏目对象 |
用法实例:
效果展示(垂直):
效果展示(水平):
3.4.17树状结构
基本用法:McrbHttpClient.treeModel.init(options,callback);
参数options说明:
参数 | 说明 | 类型 | 可选值 |
ele_id | 挂载元素的id | String | 必填 |
style_type | 类型:1基础类型,2列表多层级类型 | int | 默认值:1 |
width | 设置容器宽度 | String | 默认值100% |
themeColor | 设置主题色 | String | 默认值#4C90FF |
ischecked | 是否开启复选框,仅style_type=1时可使用; 获取选中项数据方法:McrbHttpClient.treeModel.getChecked(id) |
boolean | 默认值false |
ishandle | 是否开启节点操作; | boolean | 默认值false |
isLookBtn | 是否显示“查看”功能按钮,仅当节点操作开启(ishandle:true)时起作用;点击触发回调函数会返回该条数据 | boolean | 默认值true |
isAddBtn | 是否显示“添加”功能按钮,仅当节点操作开启(ishandle:true)时起作用;点击触发回调函数会返回该条数据 | boolean | 默认值true |
isEditBtn | 是否显示“编辑”功能按钮,仅当节点操作开启(ishandle:true)时起作用;点击触发回调函数会返回该条数据 | boolean | 默认值true |
isDelBtn | 是否显示“删除”功能按钮,仅当节点操作开启(ishandle:true)时起作用;点击触发回调函数会返回该条数据 | boolean | 默认值true |
data | 数据;var tree_data = [ { id : '100000', text : '廊坊银行总行', children : [ { id : '110000', text : '廊坊分行', children : [ { id : '111000', text : '廊坊银行金光道支行', }, { id : '112000', text : '廊坊银行解放道支行', children : [ { id : '112100', text : '廊坊银行广阳道支行', }, { id : '112200', text : '廊坊银行三大街支行', } ] }, { id : '113000', text : '廊坊银行开发区支行', } ] } ] }, { id: '200000', text: '邯郸银行总行', children: [ { id: '210000', text: '邯郸分行', children: [ { id: '213000', text: '邯郸银行开发区支行', }, { id: '212000', text: '邯郸银行解放道支行', children: [ { id: '212200', text: '邯郸银行三大街支行', }, { id: '212100', text: '邯郸银行广阳道支行', } ] }, { id: '211000', text: '邯郸银行金光道支行', } ] } ] } ] | Array | 必填 |
参数callback说明:
参数 | 说明 | 类型 | 可选值 |
callback | 回调函数 | —— | 点击回调函数,返回点击项数据 |
开启复选框时获取选中的数据:
用法实例1:
效果展示
用法实例2:
效果展示
用法实例3:
效果展示
3.4.18轮播图
调用方法:McrbHttpClient.carousel.init(options);
1.参数表
id(String) | 轮播图容器id |
width(String) | 轮播图宽度。例:"600px" |
height(String) | 轮播图高度。例:"300px" |
arrow(String) | 左右箭头显示模式。always:一直显示;hover:鼠标悬停在轮播图上时显示。 |
indicator(String) | 轮播图下方图片指示器切换模式。click:点击切换。hover:悬停切换。 |
interval(String) | 轮播图图片切换间隔。单位为ms。 |
imgs(Array[String]) | 轮播图片Url数组。 |
2.demo
3.效果展示
- 版本号发布时间生产环境框架开发环境框架
- 1.5 2021-02-22 microbee-http-1.5-SNAPSHOT microbee-httpdev + 2.4-SNAPSHOT
顶部