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

<?xml version="1.0" encoding="UTF-8"?> <conf> <pm name="port">80</pm> <pm name="dburl">jdbc:mysql://xxxxx:3306/smcms?characterEncoding=utf-8</pm> <pm name="dbdriver">com.mysql.jdbc.Driver</pm> <pm name="dbuser">root</pm> <pm name="dbpassword">xxxxxx</pm> <!--上传或提交内容的大小,单位K--> <pm name="csize">3024</pm> <!--数据库链接池配置--> <pm name="initialSize">10</pm> <pm name="maxActive">20</pm> <!--web配置--> <pm name="javadir">C:\develop-ym\dynamic</pm> <pm name="webRoot">C:\develop-ym\webroot</pm> <pm name="gnrtstatichtml">C:\develop-ym\webroot</pm> <pm name="uploaddir">C:\develop-ym\webroot</pm> <!--安全配置--> <pm name="keyPath">111</pm> <pm name="certPath">111</pm> <redirectss> <redirect> <path>/uploads</path> <rdct>http://www.baidu.com</rdct> </redirect> <redirect> <path>/test111</path> <rdct>189.12.12.3:90</rdct> </redirect> </redirectss> </conf>

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

2.1.2.1重定向配置

1.目录转发

将URL段(以跟目录始)转发到其他域的相同目录,参数不变

<redirect> <path>/uploads</path> <rdct>http://www.baidu.com</rdct> </redirect>

意为将当前域的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核心开发包,该包存放在私有仓库中
    父项目配置 <parent> <groupId>microbee-httpdev</groupId> <artifactId>microbee-httpdev</artifactId> <version>1.2-SNAPSHOT</version> </parent> 加入依赖 <dependency> <groupId>microbee-httpdev</groupId> <artifactId>microbee-httpdev</artifactId> <version>1.2-SNAPSHOT</version> </dependency>
  • 创建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<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.4.3 数据库操作指引

dataActions对象封装了后端数据库操作的所有方法,方法传入参数有两种类型,其一为json字符串,该方式主要是为了前端直接操作数据库;其二为传入参数为java对象list,map,实体bean等,供后台开发人员开发模块时使用,condition和sequence的定义参考3.1.4和3.1.2

  • 1.查询返回多条数据 List<ConditionPJ> 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<Map<String,Object>> lists = hoContext.dataActions.gatAll("sys_role",conditionPJList,1,sequence);
  • 2.查询返回一条数据 List<ConditionPJ> conditions1 = new ArrayList<>(); ConditionPJ conditionPJ1 = new ConditionPJ(); conditionPJ1.setLgc(1); conditionPJ1.setKy("id"); conditionPJ1.setOprt("mcb_eq"); conditionPJ1.setVl("57"); conditions1.add(conditionPJ1); Map<String,Object> mp = hoContext.dataActions.gainOne("sys_role",conditions1); System.out.println("=======getOne========="+mp.get("rname"));
  • 3.查询获取总记录数 List<ConditionPJ> conditions2 = new ArrayList<>(); ConditionPJ conditionPJ2 = new ConditionPJ(); conditionPJ2.setLgc(1); conditionPJ2.setKy("id"); conditionPJ2.setOprt("mcb_eq"); conditionPJ2.setVl("57"); conditions2.add(conditionPJ2); Map<String,Object> mp1 = hoContext.dataActions.gainCount("sys_role",conditions2); System.out.println(mp1); System.out.println("=======getcount========="+mp1.get("total"));
  • 4.求和 List<ConditionPJ> conditions3 = new ArrayList<>(); ConditionPJ conditionPJ3 = new ConditionPJ(); conditionPJ3.setLgc(1); conditionPJ3.setKy("id"); conditionPJ3.setOprt("mcb_eq"); conditionPJ3.setVl("57"); conditions3.add(conditionPJ2); Map<String,Object> 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包
  • 新建接口,接口名称与对应的数据库表名一直,不区分大小写,如下
  • package dynamic.model; import microbee.http.annotation.Model; import microbee.http.annotation.Select; import microbee.http.apps.dbnet.BaseModel; import java.util.List; import java.util.Map; @Model public interface Sm_Archives extends BaseModel { @Select("select * from ${this} where id=${id}") public List<Map<String,Object>> test(Map<String,Object> data); }
  • 在模块/控制器,定时任务中使用@ModelResources注解注入
  • package dynamic; import dynamic.model.Sm_Archives; import microbee.http.annotation.Frequency; import microbee.http.annotation.ModelResources; import microbee.http.annotation.Schedules; import java.util.HashMap; import java.util.List; import java.util.Map; @Schedules public class testSc { @ModelResources public Sm_Archives sm_archives; @Frequency(value=3) public void test(){ System.out.println("定时任务开始执行1"); Map map = new HashMap<String,Object>(){{ put("id",123); }}; List<Map<String,Object>> m = sm_archives.test(map); System.out.println("=========="+m.get(0).get("title")); } }

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/test
    data:传递给后台的数据,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文件中。

// 使用方法:在封装接口请求的方法中添加 // 请求开始回调函数 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.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:

//使用方法:可在当前页面的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.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)。

实例:

<div id=”upload_test”></div> <script> let upload_options = { isImgUploader: true, maxSize: 10, fileType: 'image/*', isMulti: true } let cb = function(data) { console.log(data); } let upload_plugin = McrbHttpClient.upload('upload_test', upload_options, cb); </script>

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 触发事件后执行函数

实例:

//使用方法:可在当前页面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.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 回调函数:返回选中值

实例:

//使用方法:可在当前页面的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.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]) 函数数组,表示按钮事件对应的回调函数。

实例:

<form id="test"></form> <script type="text/javascript"> 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.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:

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

// 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.4.11编辑器

具体功能有:

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

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

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

参数说明:

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

实例:

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

效果展示:

3.4.12Tab选项卡

基本用法:McrbHttpClient.tabfn.init(options);

参数说明:

参数 说明 类型 可选值
eleid 挂载元素的id String 必填
trigger 设置如何触发事件,点击触发:click鼠标滑过触发:hover String 默认值click
btncolor 选中状态颜色设置 String 默认值orange

用法实例:

//使用方法: <div id="mytab" class="components_tab"> <ul class="tabbtns"> <li class="on">大橘</li> <li>汪汪</li> <li>库库</li> <li>斑点</li> </ul> <div class="tabboxs"> <div class="box on">111</div> <div class="box">222</div> <div class="box">333</div> <div class="box">444</div> </div> </div> // tab选项卡 McrbHttpClient.tabfn.init({ eleid:'mytab', trigger:'hover', // click + hover btncolor:'#0078FF' });

效果展示:

  • 大橘
  • 汪汪
  • 库库
  • 斑点
111
222
333
444

动态操作tab:McrbHttpClient.tabfunc.init(options);

参数说明:

参数 说明 类型 可选值
eleid 挂载元素的id String 必填
btncolor 选中状态颜色设置 String 默认值orange
dynamics 是否开启动态操作:true开启,false不开启 boolean 默认值false
addfun 设置添加项参数 —— ——
title 新增项标题 String ——
content 新增项内容 String ——
callback 添加成功回调函数 —— ——

用法实例:

//使用方法: <div id="mytab2" class="components_tab"> <ul class="tabbtns"> <li class="on">大橘</li> <li>汪汪</li> <li>库库</li> <li>斑点</li> </ul> <div class="tabboxs"> <div class="box on">111</div> <div class="box">222</div> <div class="box">333</div> <div class="box">444</div> </div> </div> // tab选项卡 动态操作 var content = document.getElementById('tableDOM'); McrbHttpClient.tabfunc.init({ eleid:'mytab2', btncolor:'#0078FF', dynamics:true, addfun:{ title:'8989', content:content, callback:function(e){ console.log(e) } } });

效果展示:

  • 大橘大
  • 汪汪
  • 库库
  • 斑点
111
222
333
444

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 ——
// percent动态修改的百分比 McrbHttpClient.progress.change({ ele_id:'progress_bar', percent: percent, },function(e){ // console.log('当前进度是'+e); });

用法实例:

<div id="progress_bar"></div> // 进度条 McrbHttpClient.progress.init({ ele_id:'progress_bar', bgcolor:'#f57e00', istext:true, fontsize:'12px', fontcolor:'#0069ff', position:'right', percent: 0, size:'20px', }); var percent = 0; var timer = setInterval(function(){ // 这里采用随机的两位数来模拟 var a = Math.floor(Math.round(Math.random()*(100-10)+10)/10); percent = percent+a; // console.log(percent) if(percent>100){ percent = 100; clearInterval(timer); } McrbHttpClient.progress.change({ ele_id:'progress_bar', percent: percent, },function(e){ // console.log('当前进度是'+e); }); },1000);

效果展示:

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 必填

用法实例:

<div id="breadcrumb"></div> <div id="breadcrumb1"></div> // 面包屑breadcrumb var breadcrumb_data = [ { name:'页面1', url:'javascript:;', },{ name:'页面2', url:'javascript:;', },{ name:'页面3', url:'javascript:;', },{ name:'页面4', url:'javascript:;', }, ]; McrbHttpClient.breadcrumb.init({ ele_id:'breadcrumb', fontsize:'16px', fontcolor:'#0069ff', split_line:'/', lastcolor:'#0069ff', islasturl:true, data:breadcrumb_data, }); McrbHttpClient.breadcrumb.init({ ele_id:'breadcrumb1', fontsize:'16px', fontcolor:'#0069ff', split_line:'-', lastcolor:'#999', data:breadcrumb_data, });

效果展示:

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 成功回调函数 —— ——

用法实例:

<div id="searchpupo"></div> // 搜索框 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:'搜索', } ]; McrbHttpClient.searchfn.compopu({ ele_id:'searchpupo', data:zuhedata, callback:function(e){ console.log(e) } });

效果展示:

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 该栏目的子栏目,为数组类型,包含一个或多个导航菜单的栏目对象

用法实例:

<div id="testmenu1"></div> <div id="testmenu2"></div> <script type="text/javascript"> let options21 = { id: "testmenu1", mode: "horizontal", activeIndex: "1-2-1", fontSize: "20px", group: [ { index: "0", title: "首页", href: "", }, { index: "1", title: "栏目一", children: [ { index: "1-1", title: "<span>子栏目一</span>", href: "", }, { index: "1-2", title: "子栏目二", children: [ { index: "1-2-1", title: "三级栏目一", href: "https://www.baidu.com", }, { index: "1-2-2", title: "三级栏目二", }, { index: "1-2-3", title: "三级栏目三", children: [ { index: "1-2-3-1", title: "四级栏目一", }, ], }, ], }, ], }, { index: "2", title: "栏目二", callback: alertCol2, }, { index: "3", title: "栏目三", href: "", children: [ { index: "3-1", title: "二级栏目", href: "https://www.taobao.com", }, ], }, { index: "4", title: "栏目四", href: "", }, ], }; let options22 = { id: "testmenu2", mode: "vertical", activeIndex: "1-2-1", fontSize: "20px", group: [ { index: "0", title: "首页", href: "", }, { index: "1", title: "栏目一", children: [ { index: "1-1", title: "<span>子栏目一</span>", href: "", }, { index: "1-2", title: "子栏目二", children: [ { index: "1-2-1", title: "三级栏目一", href: "https://www.baidu.com", }, { index: "1-2-2", title: "三级栏目二", }, { index: "1-2-3", title: "三级栏目三", children: [ { index: "1-2-3-1", title: "四级栏目一", }, ], }, ], }, ], }, { index: "2", title: "栏目二", callback: alertCol2, }, { index: "3", title: "栏目三", href: "", children: [ { index: "3-1", title: "二级栏目", href: "https://www.taobao.com", }, ], }, { index: "4", title: "栏目四", href: "", }, ], }; McrbHttpClient.navMenu.init(options21); McrbHttpClient.navMenu.init(options22); function alertCol2(option) { alert(option.title); } </script>

效果展示(垂直):

效果展示(水平):

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 回调函数 —— 点击回调函数,返回点击项数据

开启复选框时获取选中的数据:

// treemodel3 挂载元素的id McrbHttpClient.treeModel.getChecked('treemodel3');

用法实例1:

<div id="treemodel1"></div> // 基本用法 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: '邯郸银行金光道支行', } ] } ] } ] McrbHttpClient.treeModel.init({ ele_id:'treemodel1', style:1, width:'300px', themeColor:'#f57e00', data:tree_data, },function(e){ console.log(e); });

效果展示

用法实例2:

<div id="treemodel2"></div> // 列表多层级 var cdata = [ { id:'1', name:'栏目1', children:[ { id:'5', name:'栏目1-1', children:[] },{ id:'6', name:'栏目1-2', children:[ { id:'7', name:'栏目1-2-1', children:[] },{ id:'8', name:'栏目1-2-2', children:[ { id:'9', name:'栏目1-2-2-1', children:[] }, ] } ] } ] },{ id:'2', name:'栏目2', children:[ { id:'10', name:'栏目2-1', children:[] },{ id:'11', name:'栏目2-2', children:[] },{ id:'12', name:'栏目2-3', children:[ { id:'13', name:'栏目2-3-1', children:[] },{ id:'17', name:'栏目2-3-2', children:[] }, ] }, ] },{ id:'3', name:'栏目3', children:[ { id:'14', name:'栏目3-1', children:[] },{ id:'15', name:'栏目3-2', children:[ { id:'16', name:'栏目3-2-1', children:[] }, ] }, ] },{ id:'4', name:'栏目4', children:[] }, ]; McrbHttpClient.treeModel.init({ ele_id:'treemodel2', style:2, width:'500px', themeColor:'#2ecc71', ishandle:true, isAddBtn:false, data:cdata },function(e){ console.log(e); });

效果展示

用法实例3:

<button style="background-color: transparent;padding: 5px 10px;border: 1px solid #ddd;border-radius: 4px;margin-bottom: 10px;" onclick="gettreedata()">获取选中数据</button> <div id="treemodel3"></div> // 基本用法 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: '邯郸银行金光道支行', } ] } ] } ] // 开启复选框 McrbHttpClient.treeModel.init({ ele_id:'treemodel3', style:1, width:'400px', themeColor:'rgb(155,10,20)', ischecked:true, ishandle:true, isAddBtn:false, data:tree_data, }); // 获取选中项数据 function gettreedata(){ console.log(McrbHttpClient.treeModel.getChecked('treemodel3')); }

效果展示

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

//使用方法: <div id="lunbotest"></div> <script> let options = { id: 'lunbotest', width: '600px', height: '300px', arrow: 'hover', indicator: 'hover', interval: '3000', imgs: [ './img/carousel1.png', './img/carousel2.png', './img/carousel3.png', './img/carousel4.png' ] } McrbHttpClient.carousel.init(options); </script>

3.效果展示

本文档来自-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) }
回到
顶部