microbee-http 丨 低代码开发平台

概述


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文件中,其详细配置如下

<conf> <pm name="port">80</pm> <pm name="dburl"> jdbc:mysql://175.25.56.246:3306/uav_platform?characterEncoding=utf-8</pm> <pm name="dbdriver">com.mysql.jdbc.Driver</pm> <pm name="dbuser">root</pm> <pm name="dbpassword">Niuniu8$88</pm> <!--数据库链接池配置--> <pm name="dbpoosize">10</pm> <pm name="dbpoosize">10</pm> <redirectss> <redirect> <path>/test111</path> <rdct>189.12.12.3:90</rdct> </redirect> <redirect> <path>/test111</path> <rdct>189.12.12.3:90</rdct> </redirect> <redirect> <path>/test111</path> <rdct>189.12.12.3:90</rdct> </redirect> </redirectss> </conf>

pm为服务器常用参数,redirectss为301重定向配置,也可以作为代理服务器配置,用以完成重定向、多路转发、统一授权等。

2.2服务端部署

2.3高阶API开发

2.3.1HoContext说明

Hocontext是microbee-http高阶api的上下文对象,包含了http上下文操作的重要分装对象,包括HttpRequestWrapper(目前仅支持http1.0),Session操作,Actions数据源操作等。

2.3.2 JAVA高阶API开发方法

  • 新建任意maven项目(不选择任何依赖)
  • 引入microbee-http-dvlpevrmt核心开发包,该包存放在私有仓库中
  • 引入junit测试包(暂不支持测试)
  • 在项目跟目录下新建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<String> datas = 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; } } // 该模块的访问路径为:Test/te

2.3.3 Python高阶API开发方法

待续……..

2.3.4开启分布式模式


前端使用手册


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框架工具组件

该框架中的工具组件使用须引入mhc.js文件,组件方法封装在此js文件,工具组件对应的样式在ctools.css文件;

3.3.1加载动画

加载数据时显示动效。使用该方法需要引入mhc.js文件,接口访问时会自动加载,相对应的样式在同目录下的ctools.css文件中。

// 使用方法:在封装接口请求的方法中添加 // 请求开始回调函数 xhr.addEventListener('loadstart', e => { // console.log('请求开始') n++; var loadingdiv = document.getElementById('loading_ing'); if (loadingdiv == null) {this.loadfn.addLoading();} }) // 请求结束 xhr.addEventListener('loadend', e => { // console.log(' 请求结束') n--; if( n == 0){this.loadfn.removeLoading();} });

3.3.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:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.msg('操作中断!')

实例2:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.msg('操作成功!',{icon:1}) McrbHttpClient.popup.msg('操作失败!',{icon: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:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.confirm('确定要删除吗?');

实例2:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.confirm({ title: '提示语', content: '确定要删除吗?', icon:2 })

实例3:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.confirm({ title: '提示', content: '请问确定要删除吗?', icon:2 },{ btn: ['删除' ,'取消'] },function(){ alert('ok') },function(){ alert('no') } )

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:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.prompt("请输入你的名字","Keafmd")

实例2:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.prompt("请输入你的名字","Keafmd",function(e){ // console.log(e) McrbHttpClient.popup.msg('您提交的数据:'+e) })

实例3:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.prompt("请输入你的名字","Keafmd",function(e){ // console.log(e) McrbHttpClient.popup.msg('您提交的数据:'+e) },function(e){ // console.log(e) McrbHttpClient.popup.msg('您未完成提交') })

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:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.alert('操作成功')

实例2:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.alert({ title: '敬请期待!', icon:3 })

实例3:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.popup.alert({ title: '审核通过!', content: '您申请的信息已通过审核!', icon:1 }) McrbHttpClient.popup.alert({ title: '审核未通过!', content: '您申请的信息未通过审核!', icon:2 })

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:

//使用方法:可在当前页面的js中使用下面的方法 // 自定义html窗体内容 <table id="opendiv"> <tr> <td>参数</td> <td>说明</td> <td>类型</td> <td>可选值</td> </tr> <tr> <td>title</td> <td>标题</td> <td>string</td> <td>非必填</td> </tr> <tr> <td>content</td> <td>自定义html内容</td> <td>——</td> <td>自定义内容的dom元素</td> </tr> </table> // 打开自定义html窗体 var title = "标题"; var content = document.getElementById('opendiv'); McrbHttpClient.popup.open(content,title,'msid');

实例2:

//使用方法:可在当前页面的js中使用下面的方法 // 自定义html窗体内容 <table id="opendiv"> <tr> <td>参数</td> <td>说明</td> <td>类型</td> <td>可选值</td> </tr> <tr> <td>title</td> <td>标题</td> <td>string</td> <td>非必填</td> </tr> <tr> <td>content</td> <td>自定义html内容</td> <td>——</td> <td>自定义内容的dom元素</td> </tr> </table> // 打开自定义html窗体 var title = "标题"; var content = document.getElementById('opendiv'); McrbHttpClient.popup.open(content,title,'ccid'); $('#opendiv').click(function(){ var content2 = document.createElement('div'); content2.innerText = '222222'; content2.onclick = function(e){ var content3 = document.createElement('div'); content3.innerText = '333333'; content3.onclick = function(e){ McrbHttpClient.popup.alert('tttttt'); } McrbHttpClient.popup.open(content3, 'ee','ccid3'); } McrbHttpClient.popup.open(content2,'','ccid2'); });

3.3.3上传文件

使用该方法需要引入mhc.js文件,接口访问时会自动加载,相对应的样式在同目录下的ctools.css文件中。

功能描述:可以上传1.图片文件;2.所有类型的文件

参数说明:

参数 说明
第一个参数(id) String,挂载容器的id
第二个参数(isImgUploader) Boolean,是否为图片上传组件。为true时,表示只传图片的组件,false时,可以上传任意文件。不同取值,UI不同。
返回值 upload对象 {data: […]},data中为文件路径的数组。

使用方法

1.首先在html文件中加入div标签,id自定义。

2.然后在script标签或js文件中调用函数McrbHttpClient.upload(id, isImgUploader)。

实例:

<div id=”upload_test”></div> <script> McrbHttpClient.upload(‘upload_test’, true); </script>

效果展示:

3.3.4流加载

该模块包含信息流加载和图片懒加载两大核心组成,其对服务端和前端体验有非常大的性能帮助。

信息流 - 滚动加载/手动点击加载

信息流即异步逐页渲染列表元素。

如页面初始时只显示了6个,想通过加载更多来显示余下列表,只需要执行下列方法即可。

参数说明:

参数 说明
id string,绑定挂载元素的id
type 触发类型:scroll滚动到底部触发,click点击触发
icon 加载动画样式1-8,共8种样式
text 设置提示文字
function 触发事件后执行函数

实例:

//使用方法:可在当前页面html的js中使用下面的方法 // 信息流 - 手动点击加载 McrbHttpClient.loadfn.lazyload({ id:'lazy', type:'click', icon:2, text:'LOADING...' },function(){ console.log('您触发了click事件') }); // 信息流 - 滚动加载 McrbHttpClient.loadfn.lazyload({ id:'lazy', type:'scroll', icon:3, text:'LOADING...' },function(){ console.log('您触发了scroll事件') });

效果展示:

图片懒加载

该模块是一个用于加载当前屏图片的高性能方式,对网站因为图片可能带来的压力,可做出优化效果。(只会针对img元素有效)

参数说明:

参数 说明
第一个参数 Array图片路径集合
第二个参数 string,绑定挂载元素的id

实例:

//使用方法:可在当前页面html的js中使用下面的方法 // 图片懒加载 var imgs = [ 'http://5b0988e595225.cdn.sohucs.com/images/20181210/f3ecdb2198864d25bf05e54d7fc37ad7.jpeg', 'https://pic1.zhimg.com/v2-9efbeaa8877dcd5f04974a53ceba2878_r.jpg', 'http://5b0988e595225.cdn.sohucs.com/images/20181210/f3ecdb2198864d25bf05e54d7fc37ad7.jpeg', 'http://5b0988e595225.cdn.sohucs.com/images/20181210/f3ecdb2198864d25bf05e54d7fc37ad7.jpeg', 'http://5b0988e595225.cdn.sohucs.com/images/20181210/f3ecdb2198864d25bf05e54d7fc37ad7.jpeg', 'http://5b0988e595225.cdn.sohucs.com/images/20181210/f3ecdb2198864d25bf05e54d7fc37ad7.jpeg', ] McrbHttpClient.loadfn.lazyimg(imgs,'container');

效果展示:

3.3.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.3.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.3.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 回调函数:返回选中值

实例:

//使用方法:可在当前页面的js中使用下面的方法 McrbHttpClient.searchfn.selectfn({ id:'selectdemo', width:'150px', isradius:false, placeholder:'请选择项目' }, optData, function(e){ console.log(e) }) McrbHttpClient.searchfn.selectfn({ id:'selectdemo2', width:'150px', isradius:true, placeholder:'请选择项目名称' }, optData, function(e){ console.log(e) })

效果展示:

3.3.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) textarea
label (String) 元素label,自定义。
name (String) 元素的name属性。
required (Boolean) 是否为必填项
opts (Object) 例:opts: {'请选择颜色': '','红色': 1,'绿色': 2}Key为选项显示的值,value为表单提交时的值,空串代表默认项。

4.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) 是否被默认选中

5.upload

type(String) upload
label (String) 元素label,自定义。
name (String) 元素的name属性。
required (Boolean) 是否为必填项
maxSize(Number) 上传文件的最大大小,单位Mb
btnText(String) 上传按钮显示的文字
isImg 是否只上传图片,切有缩略图
callback 上传之后的回调函数

6.button

type(String) button
name (Array[String]) 按钮组显示的名字。
event (Array[String]) 字符串数组,可取值:submit, reset。表示按钮对应的事件
callback (Array[Function]) 函数数组,表示按钮事件对应的回调函数。

实例:

<form id="test"></form> <script> let testForm = McrbHttpClient.form('test'); let options = [ { type: "input", name: "phone", required: true, verify: ['phone'], label: "手机号", placeholder: "请输入手机号", },{ type: "select", name: "color", required: true, label: "颜色", opts: { '请选择颜色': "", '红色': 1, '绿色': 2, },       },{ type: "radio", label: "类别", name: "type", required: true, radioList: [ { id: "annimal", value: 1, label: "动物", checked: true, },{ id: "plant", value: 2, label: "植物", checked: true, }, ], },{ type: "upload", label: "图片上传", name: "img", required: true, maxSize: 5, btnText: "上传图片", isImg: true, callback: function(data){ console.log(data); }, },{ type: "textarea", label: "描述", name: "description", required: false, placeholder: "请简要描述…", },{ type: "button", event: ["submit"], callback: [onSubmit], name: ["确定"], }, ] function onSubmit(){ let data = testForm.getValue('color'); console.log(data); } testForm.render(options); </script>

效果展示:

3.3.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:

<a id='getDataBtn' style="padding: 4px 10px; background-color: #fff;border: 1px solid #ddd;border-radius: 4px;margin: 10px 0;">获取选中数据</a> <div id="tableDOM"></div> // table表格参数 const columns1 = [ {key: 'name',title: '姓名', align: 'center',}, {key: 'age',title: '年龄',align: 'center',}, {key: 'job',title: '工作',align: 'center',render:function (text, data){ return '<span style="color:red;">'+text+'</span>' } }, ]; // 表格数据 const dataSource1 = [ {name: '张三', age: '20', job: '经理'}, {name: '李四',age: '21', job: '总监'}, {name: '周五',age: '22', job: '实习生'}, ] // 渲染table McrbHttpClient.tableDom.common({ columns:columns1, dataSource:dataSource1, width:'100%', ischeck:true, },'tableDOM'); // 获取选中数据 var dataBtn = document.getElementById('getDataBtn'); dataBtn.onclick = function(){ console.log('获取选中数据') var ff = McrbHttpClient.tableDom.getchecked('tableDOM'); console.log(ff) }

效果展示:

1获取选中数据

实例2:

<a id='getDataBtn2' style="padding: 4px 10px; background-color: #fff;border: 1px solid #ddd;border-radius: 4px;margin: 10px 0;">获取选中数据</a> <div id="tableDOM2"></div> // table表格参数 const columns2 = [ {key: 'name',title: '姓名', align: 'center',}, {key: 'age',title: '年龄',align: 'center',}, {key: 'job',title: '工作',align: 'center',render:function (text, data){ return '<span style="color:red;">'+text+'</span>' } }, { key: 'action', title: '操作', align: 'center', render:function (text, data){ return McrbHttpClient.tableDom.createTool([{ type:'del', text:'删除', classname:'delBtn' },{ type:'edit', text:'修改', classname:'editBtn' },{ type:'look', text:'查看', classname:'lookBtn' }],data,function(e,type){ // e:点击行数据 // type:点击事件执行类型--删除、修改、查看 if(type == 'del'){ console.log('删除数据:') console.log(e) }else if(type == 'edit'){ console.log('修改数据:') console.log(e) }else if(type == 'look'){ console.log('查看数据:') console.log(e) } }) } }, ]; // 表格数据 const dataSource2 = [ {name: '张三', age: '20', job: '经理'}, {name: '李四',age: '21', job: '总监'}, {name: '周五',age: '22', job: '实习生'}, ] // 渲染table McrbHttpClient.tableDom.common({ columns:columns2, dataSource:dataSource2, width:'100%', ischeck:true, },'tableDOM2'); // 获取选中数据 var dataBtn2 = document.getElementById('getDataBtn2'); dataBtn2.onclick = function(){ console.log('获取选中数据') var ff = McrbHttpClient.tableDom.getchecked('tableDOM2'); console.log(ff) }

效果展示:

2获取选中数据

3.3.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:

// table表格参数 const columns3 = [ {key: 'name',title: '姓名', align: 'center',}, {key: 'age',title: '年龄',align: 'center',}, {key: 'job',title: '工作',align: 'center',}, {key: 'action',title: '操作',align: 'center',render:function (text, data){ return McrbHttpClient.tableDom.createTool([{ type:'del',text:'删除',classname:'delBtn'},{ type:'edit',text:'修改',classname:'editBtn'},{ type:'look',text:'查看',classname:'lookBtn'}],data,function(e,type){ // e:点击行数据 // type:点击事件执行类型--删除、修改、查看 if(type == 'del'){ console.log('删除数据:') console.log(e) }else if(type == 'edit'){ console.log('修改数据:') console.log(e) }else if(type == 'look'){ console.log('查看数据:') console.log(e) } }) } }, ]; // table表格数据 const data3 = [ {name: '张三', age: '20', job: '经理'}, {name: '李四',age: '21', job: '总监'}, {name: '周五',age: '22', job: '实习生'}, {name: '郑六',age: '23', job: '职员'}, {name: '郑1',age: '23', job: '职员'}, {name: '郑2',age: '23', job: '职员'}, {name: '郑3',age: '23', job: '职员'}, {name: '郑4',age: '23', job: '职员'}, {name: '郑5',age: '23', job: '职员'}, {name: '郑6',age: '23', job: '职员'}, {name: '郑7',age: '23', job: '职员'}, {name: '郑8',age: '23', job: '职员'}, {name: '郑9',age: '23', job: '职员'}, {name: '郑11',age: '23', job: '职员'}, {name: '郑12',age: '23', job: '职员'}, {name: '郑13',age: '23', job: '职员'}, {name: '郑14',age: '23', job: '职员'}, {name: '郑15',age: '23', job: '职员'}, ] // 渲染 page+table McrbHttpClient.loadPage.init({ el:'#table_page', pageSize:5,//每页显示条数 totalCount:data3.length,//总记录数 curPage:1,//当前页数,不设置则默认1 nav_count:5,//显示多少个导航 callback:function(curPage,start,end){//点击翻页后的回调函数 console.log("正在加载第("+curPage+")页的数据,请稍后......."); var dataSource = []; for( var i = start; i < end; i++){ dataSource.push(data3[i]); if(i == (end - 1)){ McrbHttpClient.tableDom.common({columns:columns3, dataSource:dataSource,},'tableDOM3'); } } } });

效果展示:

3获取选中数据

3.3.11编辑器

具体功能有:

字体加粗、倾斜、下划线、删除线、p标签、h1标签、h2标签、h3标签、字体颜色、背景颜色、字体大小、图片、列表、居左、居右、居中等;

点击"确定"返回编辑器内容;

点击"取消"清空编辑器内容;

参数说明:

参数名 说明 类型 可选值
el 挂载元素的id String 必填
callback 回调函数 —— ——

实例:

<div id='edit-cont'></div> // 编辑器 McrbHttpClient.editor.creatEditor('edit-cont',function(e){ // 返回编辑器内容 console.log(e) });

效果展示:

本文档来自-microbee-http低代码软件开发平台
//调用模型对照表 McrbHttpClient.mdlst(viewList); function viewList(e){ console.log(e) } //查询列表(可分页) var md = "md72";//模型名称 var page = 1 //页码 var condition = [{lgc:1,ky:'id',oprt:'mcb_geq',vl:222},{lgc:1,ky:'rid',oprt:'mcb_geq',vl:55}]; McrbHttpClient.searchlst(lst,md,page,condition); function lst(e){ console.log(e) } //求和 var md = "md72";//模型名称 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) } //查询总记录数 var md = "md72";//模型名称 var condition = [{lgc:1,ky:'id',oprt:'mcb_geq',vl:222}]; McrbHttpClient.getcount(funccount,md,condition); function funccount(e){ console.log(e) } //查询符合条件的一条记录 var md = "md72";//模型名称 var condition = [{lgc:1,ky:'id',oprt:'mcb_geq',vl:222}]; McrbHttpClient.gainOne(funcOne,md,condition); function funcOne(e){ console.log(e) } //插入数据 var md = "md72";//模型名称 var sets = {uname:"张三",oid:2,rtime:"1441784199"}; McrbHttpClient.save(ins,md,sets); function ins(e){ console.log(e) } //更新 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) } //查询所有+多条件 var md = "md87"; //模型名称 var page = 0 //页码 var condition = [ {lgc: 1,ky: 'task_id',oprt: 'mcb_eq',vl: "TK-1655882990080"}, {lgc: 1,ky: 'isdelete',oprt: 'mcb_eq',vl: 0}, ]; McrbHttpClient.searchlst(lst, md, page, condition); function lst(e) { console.log(e); } /****高阶api调用***/ var data = {name:"张三",age:2}; McrbHttpClient.ho(funcho,"Test/te",data); function funcho(e){ console.log(e) }
回到
顶部