microbee-http 丨 软件开发框架
- 说明文档
- DEMO
- 后端下载
- 前端下载
概述
microbee-http是一款开源分布式http服务器中间件，主要功能如下：
1）作为类似于nginx，apache的HTTP服务器，承担Web服务数据的转发、请求、后端语言的解析任务等；
2）是基于HTTP中间件的低代码开发平台，平台在开发过程中不断优化升级，可轻松自如应对各种需求变更，进一步节省开发时间；
3）与microbee-data数据库中间件集成使用，兼容国内外大部分数据源（如PostgreSQL、Oracle 、MySQL、ClickHouse、BigTable、Redis、Hbase等），完成高负载应用的搭建，解决不同数据库和异构系统之间的阻抗；
4）是将大数据，AI模型泛数据库化。
microbee-http能做什么？
1)Web 开发，支持路由，Session管理，模板等，不需要容器
2)提供对WebSocket的支持
3)TCP/UDP开发，提供了丰富的IO类库，支持多种网络应用开发。
4)支持主流的数据和消息访问
5)microbee-http不仅仅是一个Web开发框架，它更像一个技术栈或者说microbee-http是一个生态体系，下面对microbee-http和Spring做一个对比：
| 项目 | Spring | microbee-http |
| 核心框架 | spring-core | microbee-http |
| Web开发 | spring-webmvc | microbee-http-front |
| jdbc框架 | spring-jdbc | microbee-data |
| 微服务 | Spring-cloud | microbee-http-server |
microbee-http的优势
1)支持多种语言混合编程，提升项目的可集成性和降低项目对语言和技术的依赖。
2)不依赖中间件，开发，部署，运维变得简单。
3)抛弃复杂的实体，数据模型，Maper隐射提升开发效率和维护效率。
4)java程序在线编译，开发者对于简单的程序更新可在线编辑，修改即应用，无需停止项目运行，无需重复打包部署，对于反复修改软件产品研发既降低了开发成本，又提高了更新的时效性。
5)分布式特效和高效的HTTP服务架构使得其根据高负载能力。
技术体系
1)核心模块
microbee-http核心模块主要涵盖前端部分microbee-http-front，服务器部分microbee-http-server和一些基础的功能，如HTTP、TCP、文件系统访问、WebSocket、延时与重复执行、缓存等其他基础的功能。microbee-http-front为javascript实现，其提供完整的api，完成后台数据调取，文件传输，数据上传等，是前端接口调取框架工具集；microbee-http-server使用java与c++语言编写，提供标准的web3.0服务和分布式数据操作平台，（二开接口正在研发中…）。
2)数据访问模块
microbee-http 提供了对关系型数据库、NoSQL、消息中间件的支持，传统的客户端因为是阻塞的，会严重影响系统的性能，因此microbee-http提供了对以上客户端的异步支持。
3)响应式编程
4)整合其他模块
5)认证与授权
后端使用说明
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.2服务端部署
2.3高阶API开发
2.3.1HoContext说明
Hocontext是microbee-http高阶api的上下文对象，包含了http上下文操作的重要分装对象，包括HttpRequestWrapper（目前仅支持http1.0）,Session操作，Actions数据源操作等。
2.3.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.3.3 数据库操作指引
dataActions对象封装了后端数据库操作的所有方法，方法传入参数有两种类型，其一为json字符串，该方式主要是为了前端直接操作数据库；其二为传入参数为java对象list，map，实体bean等，供后台开发人员开发模块时使用，condition和sequence的定义参考3.1.4和3.1.2
1.查询返回多条数据-
Service名称需要按照数据库（table）表明命名，必须继承BaseModel
-
控制器中引入@ModelResources 然后注入对应的service。
在service中获取deleteById方法，根据id删除传入id的对应值。返回boolean类型的值，true表示删除成功，false表示删除失败。
-
Service名称需要按照数据库（table）表明命名，必须继承BaseModel
-
控制器中引入@ModelResources 然后注入对应的service
在service中获取gainOneById方法，根据id查询对应id的所有值。返回Map
-
Service名称需要按照数据库（table）表明命名，必须继承BaseModel
-
控制器中引入@ModelResources 然后注入对应的service
在service中获取对应updateById方法；根据id修改传入map值 。返回一个string字符串判断更新是否成功。
-
Service名称需要按照数据库（table）表明命名，必须继承BaseModel
-
控制器中引入@ModelResources 然后注入对应的service
在service中获取对应delete方法。传入需要修改List
值，得到一个boolean类型的返回值，true表示成功，false表示失败。 
-
Service名称需要按照数据库（table）表明命名，必须继承BaseModel
-
控制器中引入@ModelResources 然后注入对应的service
在service中获取对应batchInsert方法。传入需要插入的List
2.3.4 特殊的输出
1.输出文件或图片
File file = new File("F:\\fzxm\\1.jpg");
hoContext.httpResponse.resFilePrint(file,0,file.length());
2.bufferedImage输出
3.字节输出
4.长连接输出
前后台建立连接后保持连接，可双向收发消息，用来做后台长时间任务处理时向前端发送任务完成进度消息（前端实现进度条显示），即时通信等，使用方式如下
- 创建模块和项目（参照2.3.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.3.5 Python高阶API开发方法
待续……..
2.3.6开启分布式模式
2.4定时任务
2.4.1注解调用
- 开启定时任务步骤
- 在dynamic新增模块(类)
- 使用@Schedules注解该类
- 使用Frequency(value=5)注解类中方法（value为执行频率，单位为秒）
- 使用SchedulesKey(value="key")注解类中的方法 （value 表示需要启动的任务名称 如果该名称重复将无法启动。）
2.4.2行内调用
- 行内调用方式
*key为定时任务名称
*frequency 定时任务频率 单位秒s
2.5持久层开发
2.5.1使用步骤
- 在dynamic下创建model包
- 新建接口，接口名称与对应的数据库表名一直，不区分大小写，如下
- 在模块/控制器，定时任务中使用@ModelResources注解注入
2.5.2持久层编写语法规范和注意事项
接口示例：
控制器示例：
接口规范：
- 在接口文件中首先引入@Model标签；
- 接口名称与对应的数据库表名保持一致。
-
接口需要继承BaseModel类，该类中有基础sql便于对基础CRUD操作。
- 自定义查询sql中引入@Select 注解；注解中填写自己编写的sql语句。
- ${this}表示当前模型对应的数据库表，关联查询时除当前表必须用${this}表示外，其他表可直接写表全名。
- 在判断时使用
<if test=' ' ></if>块来判定if中的语句是否执行。 - 判断句if规则：if中必须带有test=' '（把需要判断的字段以及值传入 test=' ' 中；且test中判断语句只决定示例中红色内容是否执行,且多判断语句用 and/or连接 ）；多个if判断只需在语句中添加多个if块。
控制器规范：
- 在控制器中调用指定接口文件时，首先引入@ModelResources标签然后在声明引入接口名称（public Sm_Archives sm_archives）;
- 控制器中的返回类型必须和接口中返回类型保持一致。
- Map使用规则：map中key,value使用
<String,Object>结构; map中的key值需要和sql中对应。
注意事项：
- if判断中只能用 "${}"不能使用预处理 "#{}"。
- 传值map 中”数值类型”不能用”字符串类型”。
- if判断中不能使用 "===" 恒等符号。
- if判断中不能带有 ":"，" \' "，"`" , "\"" , "#this", "#root" , "#", "[", "{", "not", "+", "-", "~", "@", "new" 等特殊符号或保留字段。
2.6使用缓存
模块方法中使用缓存：
使用@Cached注解标注模块方法，第一次调用时产生缓存直到缓存被删除，代码如下
行内使用：
2.7网络通信
2.7.1HTTP请求
microbee.http.utills.http.Httpclient
sendGet:发送get请求
doPostJson：发送post请求，参数为json数据
sendPost：发送post请求，参数为键值对
2.7.2TCP链接
-
新建TCP返回数据处理类并集成ClientHandler，如下所示
-
获取客户端链接
String host = "101.22.12.12";
int port = 8888;
SocketClient socketClient = SocketClient.getSocketClient(host,port,new TestHandler()); -
向服务端发送数据
socketClient.sendData("dddddd");
2.8初始化操作
在项目启动时执行的业务操作通过实现InitLoad接口来实现，具体使用分两步:
第一步编写java类实现InitLoad接口，如需要可注入模型层，方法见2.3.3@ModelResources
第二步.在server_conf.xml中加入配置（只配置类名称即可）
2.9常用工具类操作
1、HttpClient客户端发送http请求
1）客户端发送postjson类型请求
2）客户端发送sendDelete类型请求
3）客户端发送sendGet类型请求
4）客户端发送sendPost类型请求
5）客户端发送sendput类型请求
2、ClientHandler 客户端处理程序类
使用客户端处理程序类首先实例化ClientHandler传入Long型时间然后在调取使用其下的函数处理。
3、TCPServer传输控制协议类
使用本类时首先实例化TCPServer，传入端口号port和serverHandler，然后在调用TCPServer内部方法。
4、ArrayUtill数组转化操作通用类
在自己的类中直接调用ArrayUtill使用其内部方法做数组的转化。
5、FileUtils文件操作类
在自己的类中直接调用FileUtils使用其内部方法做文件的操作。
6、FtpUtil类操作
在自己的类中直接调用FtpUtil使用其内部方法对文Ftp服务器文件做下载，上传等操作。
7、EmailSenderUtil邮件发送操作类
首先声明EmailSenderUtil类传入SEND_ADDRESS 发送者邮箱、SEND_PASSWORD发送者密码、HOST 发送协议、PORT端口，（当传值为空或null时默认走程序自带值）然后调用sendEmail方法传值（sentTo接收者邮箱，subject消息标题，content消息内容）
前端使用手册
McrbHttpClient是前端数据调取操作对象，成员对象有两部分，其一是conf数据对象，用来配置服务端即Microbee-Http-Server的IP/域名地址（默认IP地址为127.0.0.1），端口号(默认端口为80)等；其二是Function对象，用来操作Microbee-Http-Server获取数据，同步数据，与高阶API交互等。
前端使用说明：
1.需先引入配置文件https://mhc.ixiera.com/mhc/main_min.js；
2.新建config.js文件，添加如下代码，然后将config.js引入到HTML文件；
if(McrbHttpClient.commfn.checkdomain()){
McrbHttpClient.conf.host = 'http://www.xxxxx.com'; // 域名设置
}else{
McrbHttpClient.conf.host = 'http://127.0.0.1'; // 服务器ip设置
}
McrbHttpClient.conf.port = '8088'; // 端口号设置
McrbHttpClient.conf.wshost = "ws://127.0.0.1:8088/wwwsss"; // 长连接服务器ip设置
3.1基础API使用
3.1.1查看模型与数据库表对照关系
MICROBEE-HTTP MANAGEMENT开发人员运维和管理系统运行的工具，可查看模型或数据表设计，通过可视化界面操作系统的启停，设置配置，查看日志等
- 登录MICROBEE-HTTP MANAGEMENT系统
- 登录成功后显示项目所属数据库内所有表信息（固化表及自定义模型表），点击查看按钮进行查看相应数据库表详细信息。
3.1.2 oprt运算符取值对照表
| = | mcb_eq | 等于 |
| >= | mcb_geq | 大于等于 |
| <= | 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:1}]; |
3.1.5 搜索/模糊查询（可分页）
| 方法名 | searchlst |
| 参数 |
func：回调方法 md：模型名称 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.1.11根据id更新一条数据
| 方法名 | renewbyid |
| 参数 |
func：回调方法 md：模型名称 sets:更新的字段与数据的映射关系：{uname:"张三",oid:2,rtime:"1441784199"} id：id对应值 |
| 用例 | |
|
var md = "md72";//模型名称 var sets = {uname:"张三11",oid:999,rtime:"1441784199"}; var id = 243; McrbHttpClient.renewbyid(update,md,sets,id); function update(e){ console.log(e) } 返回值：res = 1 表示成功； |
|
3.1.12根据id查询一条数据
| 方法名 | gainOneById |
| 参数 |
func：回调方法 md：模型名称 id：id对应值 |
| 用例 | |
|
var md = "md72";//模型名称 var id= 243; McrbHttpClient.gainOneById(funcOne,md,id); function funcOne(e){ console.log(e) } |
|
3.1.13根据id删除一条数据(物理删除)
| 方法名 | removeById |
| 参数 |
func：回调方法 md：模型名称 id：id对应值 |
| 用例 | |
|
var md = "md72";//模型名称 var id= 243; McrbHttpClient.removeById(delete,md,id); function delete(e){ console.log(e) } 返回值：status = 1 表示成功； |
|
3.1.14按条件批量删除（易误删表中所有数据，谨慎使用）
| 方法名 | delbycdt |
| 参数 |
func：回调方法 md：模型名称 condition:删除条件：[{lgc:1,ky:'oid',oprt:'mcb_eq',vl:2}] |
| 用例 | |
|
var md = "md72";//模型名称 var condition = [{lgc:1,ky:'oid',oprt:'mcb_eq',vl:2}]; // 删除条件 McrbHttpClient.delbycdt(delete,md,condition); function delete(e){ // 回调 console.log(e) } 返回值：{"status":1} status = 1 删除成功 |
|
3.1.15批量插入数据
| 方法名 | batchInsert |
| 参数 |
func：回调方法 md：模型名称 sets:需批量插入的数据：[{uname:"张三11",oid:999,rtime:"1441784199"}, {uname:"张三12",oid:999,rtime:"1441784198"}] |
| 用例 | |
|
//批量插入 var md = "md72"; // 模型名称 var sets = [ // 批量插入的数据 {uname:"张三11",oid:999,rtime:"1441784199"}, {uname:"张三12",oid:999,rtime:"1441784198"} ]; McrbHttpClient.batchInsert(insdate,md,sets); function insdate(e){ // 回调方法 console.log(e) } 返回值：{"status":1} status = 1 插入成功 |
|
3.1.16查询最大值
| 方法名 | gmax |
| 参数 |
func：回调方法 md：模型名称 condition:查询条件：[{lgc:1,ky:'oid',oprt:'mcb_eq',vl:999}] gmaxby:查询最大值字段名称 |
| 用例 | |
|
//查询最大值 var md = "md72"; // 模型名称 var condition = [{lgc:1,ky:'oid',oprt:'mcb_leq',vl:999}]; // 查询条件 var gmaxby = 'id'; // 查询最大值字段名称 McrbHttpClient.gmax(getmax, md, condition, gmaxby); function getmax(e){ // 回调 console.log(e) } 返回值：{"status":1,"res":"2922"} status = 1 请求成功，res查询的最大值 |
|
3.1.17查询最小值
| 方法名 | gmin |
| 参数 |
func：回调方法 md：模型名称 condition:查询条件：[{lgc:1,ky:'oid',oprt:'mcb_eq',vl:999}] gminby:查询最小值字段名称 |
| 用例 | |
|
//查询最小值 var md = "md72"; // 模型名称 var condition = [{lgc:1,ky:'oid',oprt:'mcb_eq',vl:999}]; // 查询条件 var gminby = 'id'; // 查询最小值字段名称 McrbHttpClient.gmin(getmin, md, condition, gminby); function getmin(e){ // 回调 console.log(e) } 返回值：{status: 1, res: '1421'} status = 1 请求成功，res查询的最小值 |
|
3.1.18去重查询列表（可分页，可排序，可去重，可设置每页条数）
| 方法名 | searchlstdstct |
| 参数 |
func：回调方法 md：模型名称 page：页码 condition： 条件（参考condition与sql语言关键词参照表） sequence：排序，默认为{}空，可选参数，其形式为{排序字段：排序方式}，排序方式请参考3.1.2之排序参数对照表 page_count：每页请求几条数据，可选参数，默认：每页请求10条 distinctby: 去重字段，可选参数，默认：去重的字段为“id” |
| 用例 | |
|
// 简洁版 var md = "md72";//模型名称 var page = 1 //页码 var condition = [{lgc:1,ky:'oid',oprt:'mcb_geq',vl:1}];// 查询条件 McrbHttpClient.searchlstdstct(lst,md,page,condition); function lst(e){// 回调 console.log(e) } // 详细版 var md = "md72";//模型名称 var page = 1 //页码 var page_count = 1; // 每页请求几条数据 var condition = [{lgc:1,ky:'oid',oprt:'mcb_geq',vl:1}]; // 查询条件 var sequence = {id:0}; // 排序 var distinctby = 'oid' // 去重字段 McrbHttpClient.searchlstdstct(lst, md, page, condition, sequence, page_count, distinctby); function lst(e){ // 回调 console.log(e) } 返回值：{ // 当前页显示的数据 "datasets": [ {"rtime": "1441784199","id": "6","oid": "999","uname": "张三12"} ], // 总条数 "attach": [{"total": "3"}] } |
|
3.1.19去重查询总记录数
| 方法名 | countdstct |
| 参数 |
func：回调方法 md：模型名称 condition：条件（参考condition与sql语言关键词参照表） distinctby:去重字段 |
| 用例 | |
|
//去重查询总记录数 var md = "md72";//模型名称 var condition = [{lgc:1,ky:'oid',oprt:'mcb_geq',vl:1}]; // 查询条件 var distinctby = "oid"; // 去重字段 McrbHttpClient.countdstct(lst, md, condition, distinctby); function lst(e){ console.log(e) } 返回值：{"total":"9952"} // total总记录条数 |
|
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。
（1:成功提示信息，2:错误或警告提示信息，3:蓝色提示信息，4:橙色提示信息，5：绿色提示信息）
McrbHttpClient.popup.msg(content,{icon:1})；
参数说明：
| 参数 | 说明 | 类型 | 可选值 |
| content | 消息文字 | string | 文字内容 |
| icon | 图标 | Number | 1:成功提示，2:错误或警告提示，3:蓝色提示，4:橙色提示，5：绿色提示 |
应用实例：
效果展示：
McrbHttpClient.popup.confirm()询问弹窗
提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。
基础用法：
居中显示，提示询问是否进行操作“确定”或者“取消”。
仅传入文字提示，如实例1；
传入options作为第一个参数，它是一个字面量对象。icon字段表明消息类型，可以为1:成功提示，2:错误或警告提示，3:蓝色提示，4:橙色提示，5：绿色提示。参数title必须定义为String类型，如实例2；
如需设置两个默认按钮的文字显示，则可添加第二个参数设置（若未设置则显示默认），或需设置点击两个按钮后的后续响应，如实例3；
McrbHttpClient.popup.confirm(options1,options2,cb1,cb2)
参数说明：
| 参数 | 说明 | 类型 | 可选值 |
| options1.title | 标题 | string | —— |
| options1.content | 消息文字 | string | —— |
| options1.icon | 图标 | Number | 1:成功提示，2:错误或警告提示，3:蓝色提示，4:橙色提示，5：绿色提示 |
| 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()确认语弹窗
当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。
基础用法：McrbHttpClient.popup.alert(options)
居中显示，中断用户操作，直到用户确认关闭。
可只设置提示文字，如下:
如传入参数为options对象，title为标题string类型，icon为图标对应的值为int类型（1:成功提示，2:错误或警告提示，3:蓝色提示，4:橙色提示，5：绿色提示），content为描述内容；如实例2或实例3；callback回调函数
参数说明：
| 参数 | 说明 | 类型 | 可选值 |
| title | 标题 | string | —— |
| content | 消息文字 | string | —— |
| icon | 图标 | Number | 1:成功提示，2:错误或警告提示，3:蓝色提示，4:橙色提示，5：绿色提示 |
| callback | 回调函数 | function | —— |
实例2：
实例3：
McrbHttpClient.popup.open()打开自定义html窗体
当用户进行操作时会被触发，中断用户操作，弹出自定义html内容。
基础用法：
默认居中显示，中断用户操作，弹出自定义html内容，知道用户触发相应事件触发关闭。
设置content自定义html的dom元素；
设置标题title显示自定义标题内容，如实例1；
如需多层弹出，必须设置id参数，如实例2；
options选填，如需特殊设置可使用；
McrbHttpClient.popup.open(content,title,id,options)
参数说明：
| 参数 | 说明 | 类型 | 可选值 |
| content | 自定义html内容 | —— | 自定义内容的dom元素 |
| title | 标题 | string | 必填 |
| id | 弹窗id | string | 必填 |
| options.position | 弹出初始位置 | String | 选填（默认center）center居中，left-top左上角，left-bottom左下角，right-top右上角，right-bottom右下角 |
| options.isdrag | 是否可拖拽 | String | 选填（默认0）0:不可拖动，1：可拖动 |
实例1：
实例2：
McrbHttpClient.popup.ifream()打开ifream 嵌套页面窗体
基础用法：McrbHttpClient.popup.ifream(url, t, w, h)
url 嵌套路径；t 设置窗体标题；w 设置窗体宽度；h 设置窗体高度
McrbHttpClient.popup.notice()打开通知提醒窗体
基础用法：McrbHttpClient.popup.notice(type, icon, w, d)
type(1:成功消息，2:错误消息，3:提示消息，4:警告消息)；icon(true显示，false不显示)；t 标题；d 描述
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.calendarSetVal(dom,date)
参数说明：
| 参数 | 说明 |
| dom | 绑定元素 |
| date | 赋值时间（格式：中国标准时间） |
实例：
效果展示：
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表单的渲染
4.form实例方法
获取某一字段的值：form.getValue(name)
获取所有表单项的值：form.allValues()
对某一字段进行赋值：form.setValue(name)
批量赋值：form.setValues(obj), obj={name1:value1, name2:value2...}
参数：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属性对应值 |
| unit (String) | 单位。如m,kg等 |
| custom (String | Dom) | 自定义区块，添加在input后，class名称“mcb-input-custom” |
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（Object[]） | 每个单元按钮选项的配置 |
raidoList中每个Objcet字段及代表的含义如下：
| id(String) | Radio按钮的及其label（for属性）对应的id |
| value(String/Number) | 该radio对应的值（提交表单时提交的值） |
| label (String) | 该radio对应的label，自定义。 |
| checked（Boolean） | 是否被默认选中 |
| showIcon（Boolean） | 是否为图标+文字形式的radio |
| iconPath（String） | 图标的路径 |
6.checkbox
| type(String) | checkbox |
| label (String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| required (Boolean) | 是否为必填项 |
| checkboxList Object[]） | 每个单元按钮选项的配置 |
checkboxList中每个Objcet字段及代表的含义如下：
| id(String) | Checkbox按钮的及其label（for属性）对应的id |
| value(String/Number) | 该Checkbox对应的值（提交表单时提交的值） |
| text (String) | 该Checkbox对应的label，自定义。 |
| checked（Boolean） | 是否被默认选中 |
| showIcon（Boolean） | 是否为图标+文字形式的checkbox |
| iconPath（String） | 图标的路径 |
7.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 | 上传之后的回调函数 |
8.button
| type(String) | button |
| name (Array[String]) | 按钮组显示的名字。 |
| event (Array[String]) | 字符串数组，可取值：submit, reset, cancel。表示按钮对应的事件 |
| callback (Array[Function]) | 函数数组，表示按钮事件对应的回调函数。 |
| beforeSumbit (Function) | 表单提交前的回调函数，用于处理特殊校验等。返回一个布尔类型的值，返回true时，表单正常进入提交流程，返回false时，提交终止。 |
9.edittext
| type(String) | edittext |
| label (String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| required (Boolean) | 是否为必填项 |
| setdata(Object) |
编辑器参数项设置： Id编辑器绑定元素的id; width编辑器宽; height编辑器高; filePostName上传图片接口中file参数名; uploadJson上传图片接口地址; |
10.video
| type(String) | video |
| label (String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| maxSize (Number) | 视频文件最大多少MB |
| required (Boolean) | 是否为必填项 |
11.switch (开关)
| type (String) | switch |
| label (String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| active (Boolean) | 开关是否打开 |
| required (Boolean) | 是否为必填项 |
12.map(拾点器)
注意事项：使用map组件时，需要设置高德地图的key、securityJsCode及version(默认值为1.4.15, 可选2.0)
| type (String) | map |
| label (String) | 元素label，自定义。 |
| name (String) | 元素的name属性。 |
| width(String) | 地图宽度(可选，默认值为100%) |
| height(String) | 地图高度(可选，默认值为400px) |
| layers(Array) | 地图图层（非必填），satellite卫星图，roadNet路网图 |
实例：
效果展示：
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表格‘列’属性内容设置 | array | 必填项;(包含的属性有Key、title、align、width、isAll) |
| columns中Key | 显示数据的字段名 | String | —— |
| columns中title | 设置列-标题名称 | String | —— |
| columns中align | 单元格中文字对其方式 | String | —— |
| columns中width | 设置列宽 | String | —— |
| columns中isAll | 单元格鼠标悬浮（悬浮显示全部信息） | Boolean | 默认false;(开启true) |
| dataSource | table数据 | array | 必填 |
| width | 控制表格宽度 | String | 默认宽800px |
| ischeck | true/false是否全选 | Boolean | 默认false |
| tableid | 挂载元素的ID | String | 必填 |
实例1：
效果展示：
1获取选中数据实例2：（单元格一行溢出省略，鼠标悬浮查看全部内容）
如需单元格一行溢出省略显示，鼠标悬浮时则可查看全部信息，则需设置isAll为true且设置width。
效果展示：
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获取选中数据组合：列表 + 分页
参数说明：
| 参数名 | 说明 | 类型 | 可选值 |
| options1 | 配置列表参数（参考3.4.9） | object | 必填 |
| options2 | 配置分页参数（参考3.4.10） | object | 必填 |
| callback (Array[Function]) | 点击分页后的回调函数 | —— | —— |
分页切换时回调函数callback中返回curPage, start, end, listObj, pageObj
curPage 当前页码，start 开始，end 结束，listObj 列表对象，pageObj 分页对象
分页切换 - 重新赋值数据 + 渲染
listObj.options.dataSource = dataSource;
listObj.render(listObj.options);
如果初始化渲染第2页，只需浏览器地址中拼上参数curPage=2即可
3.4.11编辑器
具体功能有：
字体加粗、倾斜、下划线、删除线、p标签、h1标签、h2标签、h3标签、字体颜色、背景颜色、字体大小、图片、列表、居左、居右、居中等;
点击"确定"返回编辑器内容；
点击"取消"清空编辑器内容；
参数说明：
| 参数名 | 说明 | 类型 | 可选值 |
| el | 挂载元素的id | String | 必填 |
| callback | 回调函数 | —— | —— |
实例：
效果展示：
3.4.12Tab选项卡
基本用法：McrbHttpClient.tabfn.init(options, callback);
参数说明：
| 参数 | 说明 | 类型 | 可选值 |
| eleid | 挂载元素的id | String | 必填 |
| trigger | 设置如何触发事件，点击触发：click鼠标滑过触发：hover | String | 默认值click |
| btncolor | 选中状态颜色设置 | String | 默认值orange |
| callback | 切换触发回调函数 | function | 返回值：当前点击的元素，如需带参可给点击tab项设置属性data-value,如果存在此属性回调函数会返回 |
用法实例：
效果展示：
- 大橘
- 汪汪
- 库库
- 斑点
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 | 添加成功回调函数 | —— | —— |
用法实例：
效果展示：
- 大橘大
- 汪汪
- 库库
- 斑点
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 | —— |
用法实例：
效果展示:
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:类型；（input输入框,select下拉选择,date时间选择,button搜索按钮,submit自定义名称的搜索按钮,reset重置按钮） Key:关键字，对应的字段名设置； 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导航菜单
使用说明：
html文件中定义div容器，定义导航菜单配置项navOptions（参数见下方说明），调用导航菜单初始化方法McrbHttpClient.navMenu.init(navOptions)。
参数说明：
| 参数 | 说明 |
| id | 导航菜单容器id |
| fontColor | 字体颜色(非必填，默认为#aaa) |
| fontSize | 字体大小(非必填，默认为16px) |
| backgroundColor | 背景色(非必填，默认为#2F4056) |
| activeIndex | 初始状态时被激活的栏目的序号（非必填） |
| activeFontColor | 被激活栏目的字体颜色(非必填，默认为#fff) |
| activeBackgroundColor | 被激活栏目的背景色(非必填，默认为#396ae7) |
| openBtn | 展开按钮的url地址（非必填） |
| closeBtn | 收起按钮的url地址（非必填） |
| group (Array) | 导航菜单栏目group |
group为数组类型，内部包含一个或多个导航菜单的栏目对象，导航菜单的栏目对象的参数如下
| 参数 | 说明 |
| index | 栏目的index |
| title | 栏目的标题 |
| icon | 栏目图标（非必填） |
| activeIcon | 激活栏目的图标（非必填） |
| 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 |
| toolsShow | 是否开启节点操作； | boolean | 默认值false |
| toolsData |
节点操作设置参数；仅当节点操作开启（toolsShow:true）时起作用； 如:[{{type:'look',text:'查看',className:'lookBtn'}}]; 说明：type设置功能类型；text:设置按钮显示文字；className：设置按钮样式 |
Array | 默认值[] |
| data | 数据；var tree_data = [ { id : '100000', name_text : '廊坊银行总行', children : [ { id : '110000', name_text : '廊坊分行', children : [ { id : '111000', name_text : '廊坊银行金光道支行', }, { id : '112000', name_text : '廊坊银行解放道支行', children : [ { id : '112100', name_text : '廊坊银行广阳道支行', }, { id : '112200', name_text : '廊坊银行三大街支行', } ] }, { id : '113000', name_text : '廊坊银行开发区支行', } ] } ] }, { id: '200000', name_text: '邯郸银行总行', children: [ { id: '210000', name_text: '邯郸分行', children: [ { id: '213000', name_text: '邯郸银行开发区支行', }, { id: '212000', name_text: '邯郸银行解放道支行', children: [ { id: '212200', name_text: '邯郸银行三大街支行', }, { id: '212100', name_text: '邯郸银行广阳道支行', } ] }, { id: '211000', name_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.效果展示
3.4.19自动化组件
具体使用方法说明：
-
(1)配置服务器参数;
配置请参考如下：(如已配置请忽略)
McrbHttpClient.conf.host = "http://127.0.0.1"
McrbHttpClient.conf.port = "8081"
-
(2)自动化列表需配置列表操作功能按钮;
var xxx = [btnName, btnType, fun]
btnName按钮名称:string；btnType按钮类型:1跳转链接，0执行方法；fun执行操作；
配置请参考如下(pc端)：
var item1 = ["查看",1,"/auto/{{mark}}_view.html?id={{id}}"];
var item2 = ["修改",1,"/auto/{{mark}}_edit.html?id={{id}}"];
var item3 = ["删除",0,"delete({{id}})",];
var item4 = ["说明",1,"https://smcms.ixiera.com/"];
var options = new Array(item1,item2,item3,item4);
配置请参考如下(移动端)：
var item1 = ["查看",1,"/auto/{{mark}}_m_view.html?id={{id}}"];
var item2 = ["修改",1,"/auto/{{mark}}_m_edit.html?id={{id}}"];
var item3 = ["删除",0,"delete({{id}})",];
var item4 = ["说明",1,"https://smcms.ixiera.com/"];
var options = new Array(item1,item2,item3,item4);
-
(3)创建自动化工具;
请参考如下：
let autoFormFactory = McrbHttpClient.autoFormFactory(containerId, moduleId, url)
自动化列表：
let autoFormFactory = McrbHttpClient.autoList(containerId, moduleId, url, options)
参数：containerId(String):自动化表单工具容器id(统一写成autoFormContainer), moduleId(String):模型id(如图4-19所示), url(String):提交成功后跳转的url
图4-19
-
(4)渲染表单或列表
请参考如下：
autoFormFactory.render(contId)
参数contId渲染容器id
-
(5)配置面包屑
配置面包屑内容说明：
1.如浏览器地址中存在参数menuid=xxx，自动化工具函数会根据提供的menuid查询对应的菜单信息以及其父级信息显示；
2.如浏览器地址中不存在参数menuid=xxx，自动化工具函数会查询当前模型信息显示；
1)、自动化表单:添加/编辑（autoFormFactory）
具体使用方法:
参数说明：
containerId(String):自动化表单工具容器id统一写成autoFormContainer;
moduleId(String):模型id(如图4-19所示);
url(String):提交成功后跳转的url;
formId:表单id;
应用实例如下：
2)、自动化表单:数据展示（autoFormView）
具体使用方法:
参数说明：
containerId(String):自动化表单工具容器id统一写成autoFormContainer;
moduleId(String):模型id(如图4-19所示);
url(String):提交成功后跳转的url;
viewId:信息显示容器id;
应用实例如下：
3)、自动化列表（autoList/autoMobileList）
具体使用方法(pc端):
具体使用方法(移动端):
参数说明：
containerId(String):自动化表单工具容器id统一写成autoFormContainer;
moduleId(String):模型id(如图4-19所示);
url(String):提交成功后跳转的url;
options列表操作功能按钮;
listId:列表组件id;
注意：移动端搜索条件字段仅显示设置的第一个;列表显示字段仅显示设置的前两个;
配置按钮说明：item = [text, type, url];
text 按钮显示文字
type按钮类型：1常用链接，0删除按钮，2自定义url
url字符串中可使用{{字段名}}
应用实例如下：
3.4.20自定义组件颜色
定义了一些css变量来控制组件颜色，这些颜色变量均有其默认值。如想在其他项目中自定义组件颜色， 只需要在该项目中建立projectname_color.css（文件名自定义）文件，在该文件中对这些颜色变量赋新值，覆盖原有的默认值即可。
注意：1. projectname_color.css中变量名必须与组件颜色变量名一致，否则无效；2. projectname_color.css需要在引用https://mhc.ixiera.com/mhc/main.js之后引用。
颜色变量表如下：
| 名称 | 描述 |
| --mcb-button-background | 普通按钮背景色 |
| --mcb-button-fontcolor | 普通按钮文字颜色 |
| --upload-btn-background | 上传按钮背景色 |
| --upload-btn-fontcolor | 上传按钮文字颜色 |
| --reset-btn-background | 重置按钮背景色 |
| --reset-btn-fontcolor | 重置按钮文字颜色 |
| --reset-btn-bordercolor | 重置按钮边框颜色 |
| --thumb-background | 滚动条滑块颜色 |
| --page-selected-background | 页码按钮背景色（被选中） |
| --page-selected-fontcolor | 页码按钮文字颜色（被选中） |
| --page-selected-hover-fontcolor | 鼠标悬停时页码按钮文字颜色（被选中） |
| --page-unselected-background | 页码按钮背景色（未选中） |
| --page-unselected-bordercolor | 页码按钮边框颜色（未选中） |
| --page-disabled-bordercolor | 页码禁用按钮边框颜色 |
| --page-disabled-fontcolor | 页码禁用按钮文字颜色 |
| --table-bordercolor | 表格边框颜色（包含内部线） |
| --table-thead-background | 表头背景色 |
| --table-thead-fontcolor | 表头文字颜色 |
如果想要修改本系统的主题色，可通过修改css/cms_color.css文件中相对应的颜色值，可自定义主题色，以及按钮，列表等的颜色
3.4.21折叠面板
配置项options如下
| name (String) | 折叠面板item的name属性 |
| title (String) | 折叠面板item标题 |
| content (String) | 折叠面板item展开后显示的文字内容 |
使用实例：
效果展示：
3.4.22Layout布局
使用方法：
mcb-row代表一行，mcb-col嵌套在mcb-row中。一行等分20份，mcb-span1代表占宽度的1/20，依次类推，mcb-col从左往右排列。当一行中mcb-span总数小于20时，并且在mcb-row中使用space-between类时，元素之间间隔等分。（兼容性：Edge 12, Firefox 20, Safari 9, Chrome 29, IE 11, Opera 12）
与Layout布局相关的css变量：
--layout-border-color mcb-col的边框颜色
--layout-border-width mcb-col的边框线宽度
--layout-padding mcb-col的内边距
使用实例：
效果展示：
标题
导航
内容
间隔等分：
1
2
3
4
3.4.23多选下拉
基本用法：
创建实例: let multipleSelection = McrbHttpClient.multipleSelection(containerId);
containerId 装载容器的id
渲染: multipleSelection.render(options);
options.name string 字段名
options.data arrary 下来可选择数据
options.data中{key：文字，val：值}
获取 - 选中的值: multipleSelection.getValue();
展示：
3.4.24Steps步骤条
基本用法：
创建实例: let stepBar = McrbHttpClient.stepBar(containerId);
渲染: stepBar.render(options);
设置当前步骤数: stepBar.setCurrentVal(val);
获取当前步骤数: stepBar.getCurrentVal();
获取当前步骤 - 自定义数据： stepBar.getExtData();
参数说明：
| 名称 | 类型 | 描述 |
| containerId | string | 装载容器的id |
| options | object | 步骤条配置参数 |
options参数说明：
| 名称 | 类型 | 描述 |
| current | number | 当前步骤 |
| waitColor | string | 默认颜色（未执行步骤颜色） |
| processColor | string | 当前步骤颜色 |
| finishColor | string | 已完成步骤颜色 |
| alignCenter | boolean | 是否居中对齐（默认false, true） |
| finishStatus | string | finish(默认，只改变颜色)，success成功对勾样式 |
| simple | boolean | 是否简洁版 (默认false, true时alignCenter、description失效) |
| iconType | boolean | 是否带图标（默认false, true时finishStatus失效） |
| direction | string | 显示方向（默认horizontal, vertical（纵向）/horizontal（水平）；当direction=vertical时simple、alignCenter,description失效） |
| data | arrary | 步骤数据 （必填） |
options.data参数说明：
| 名称 | 类型 | 描述 |
| title | string | 名称（必填） |
| description | string | 描述（选填；当simple=true或direction=vertical时，description失效不显示） |
| icon | string | 默认图标（当iconType=true时必填，iconType=false时失效） |
| icon_process | string | 当前步骤图标（当iconType=true时必填，iconType=false时失效） |
| icon_finish | string | 已完成步骤图标（当iconType=true时必填，iconType=false时失效） |
| extData | string/object/arrary | 自定义数据（选填） |
基础版：设置finishColor、processColor、waitColor颜色
基础版：设置finishColor、processColor、waitColor颜色；finishStatus = 'success'
基础版：设置finishColor、processColor、waitColor颜色；iconType = true带图标的步骤条
基础版：设置finishColor、processColor、waitColor颜色；居中对其alignCenter = true和描述description
简洁版：设置finishColor、processColor、waitColor颜色；simple = true简洁版
简洁版：设置finishColor、processColor、waitColor颜色；simple = true简洁版；iconType = true带图标的步骤条
简洁版：设置finishColor、processColor、waitColor颜色；simple = true简洁版；iconType = true带图标的步骤条；extData自定义数据
简洁版：设置finishColor、processColor、waitColor颜色；direction = vertical纵向；
3.4.25VisualCharts可视化图表
基本用法：
创建实例: let visualCharts = McrbHttpClient.visualCharts(containerId);
渲染: visualCharts.render(options);
重绘赋值: visualCharts.setValue(data, xdata, ydata);
参数说明：
| 名称 | 类型 | 描述 |
| containerId | string | 装载容器的id |
| type | string | 类型（'pie'饼状图，'line'折线图，'bar'柱状图，默认pie） |
| options | object | 图表配置参数（选填，默认基础样式） |
| data | arrary | 数据集合（必填） |
| xdata | arrary | x轴数据集合（选填，类型type=line/bar时，有效） |
| ydata | arrary | y轴数据集合（选填，类型type=line/bar时，有效） |
options参数说明：
请参考echarts可视化图表使用说明
options.data参数说明：
| 名称 | 类型 | 描述 |
| name | string | 名称（必填） |
| data | arrary | 值（必填） |
注释：ptions.data中也可自定义属性，自定义属性请参考echarts中option.series配置使用
饼状图 - 基础样式
折线图 - 基础样式
柱状图 - 基础样式
3.4.26可调序列表
使用方法：
1. 创建可排序列表实例：
const sortlistTest = McrbHttpClient.sortList(containerId, cols)
其中containerId为sortlist容器的ID, cols为sortlist配置项
2. 渲染可调序列表
sortlistTest.render(dataSource)
dataSource为要渲染的数据
配置项cols的参数
| key(String) | 字段名称 |
| title(String) | 字段名称对应的标题 |
数据项dataSource格式见使用实例
使用实例：
效果展示：
3.4.27常用样式说明
三角形
元素追加class样式依次为:triangle-inner-top-left, triangle-inner-top-right, triangle-inner-bottom-left, triangle-inner-bottom-right
可通过控制--triangle-background-color变量来修改三角形颜色，或自定义修改css来控制三角形的颜色
方向三角型追加class样式依次为:triangle-direction-left, triangle-direction-right, triangle-direction-top, triangle-direction-bottom
可通过控制--triangle-background-color变量来修改三角形颜色，或自定义修改css来控制三角形的颜色
外部三角型对话气泡追加class样式依次为:triangle-outside-left, triangle-outside-right, triangle-outside-top, triangle-outside-bottom
可通过控制--triangle-border-color变量来修改三角形边框颜色，或自定义修改css来控制三角形的边框颜色
默认内容外边距
通用布局内外边距:--default-padding-s,--default-padding-m,--default-padding-l,--default-margin-s,--default-margin-m,--default-margin-l
便于统一修改，以及统一界面间距的统一性
默认字体标题
通用默认字体标题:-title-font-level-first,title-font-level-two,itle-font-level-three,title-font-level-four,title-font-text
便于统一修改，以及统一界面字体大小
一级标题
二级标题
三级标题
四级标题
正文内容
默认内容显示/隐藏
通用class: 隐藏default-content-hide，显示default-content-show
默认多行溢出
通用class: 一行溢出default-one-line-overflow，两行溢出default-two-line-overflow，三行溢出default-three-line-overflow
一行溢出一行溢出一行溢出一行溢出一行溢出一行溢出一行溢出一行溢出一行溢出一行溢出一行溢出一行溢出一行溢出一行溢出一行溢出
两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出两行溢出
三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出三行溢出
3.4.28表单组formSet
1.使用说明：
实例化formsets对象，并进行渲染：
const formsetsIns = McrbHttpClient.formSets(containerId, options)
formsetsIns.render()
实例方法：
获取表单组的所有值 formsetsIns.getValues()
getValues方法返回值结构如下：
设置表单组的值 formsetsIns.setValues(data)
2.参数说明：
配置options:Array
input类型
| type(string) | input(必填) |
| name(string) | 表单项name属性(必填) |
| label(string) | 表单元素label(必填) |
| placeholder(string) | input框placeholder属性(选填) |
select类型
| type(String) | select(必填) |
| name(String) | 表单项name属性(必填) |
| label(String) | 表单元素label(必填) |
| placeholder(String) | 下拉框未选择时，显示的提示(选填) |
| opts(Array | 下拉框选项对应的数据信息(必填) |
opts参数
| text(String) | 选项显示的文字(必填) |
| value(String|Number) | 选项的值(必填) |
| selected(Boolean) | 改选项是否被选中(选填) |
3.使用示例：
4.效果展示：
3.4.29列表组合
基本用法：
创建实例: let list = McrbHttpClient.listPage(containerId);
渲染: list.render(options, options2, data, callback);
分页切换触发callback回调 - 赋值更新: vlist.tableupdata(data);
设置初始化第N页，及当前页数据：list.initList(curPage, data);
参数说明：
| 参数名 | 说明 | 类型 | 可选值 |
| options | table配置列表参数（参考3.4.9） | object | 必填 |
| options2 | pages配置分页参数（参考3.4.10） | object | 必填 |
| data | 初始页数据 | arrary | 必填 |
| callback (Array[Function]) | 切换分页后的回调函数 | Function | 必填 |
分页切换时回调函数callback中返回curPage, start, end（curPage 当前页码，start 开始，end 结束）
分页切换 - 赋值data数据，更新table数据重新渲染list.tableupdata(data)
实例
本文档来自-microbee-http低代码软件开发平台
回到
顶部
顶部