可视化逻辑表达式编辑器

52 2个月前

优质博文：IT-BLOG-CN

一、QueryBuilder介绍

QueryBuilder 是一个用于创建查询和过滤器的 UI 组件。

QueryBuilder的特点
1、支持的输入属性丰富，常见的字符串，整数，浮点数，布尔类型，日期类型，数组列表等都支持
2、高度可定制。QueryBuilder是由规则以及规则组组合而成的查询以及过滤组件，规则以及规则组可以层层嵌套，所以复杂的规则也可以配置出来。
3、支持的生成脚本语句多。QueryBuilder的最终目的是，通过配置规则树，最终把规则树转化为我们想要的脚本语句。

目前支持的脚本语句有 groovy脚本，jsonLogic脚本,mpsql脚本等目前市面上的QueryBuilder很多，功能大同小异，我们选用的是react-awesome-query-builder，功能性以及可用性相比较是最好的

QueryBuilder的详细介绍
可视化逻辑表达式编辑器

QueryBuilder主要分为以下几个部分：

规则以及规则组
1、规则可以理解为一条判断语句，比如今天天气很好，或者今天天气不好，它的结果是一个布尔判断，即是或者否
2、规则组，则是多个规则的组合，比如当前时间大于8点并且当前时间小于21点并且今天不是周末，他是老师或者他是公务员，它是有多个布尔判断拼接而成，结果也是一个布尔值

连接词(conjunctions) 连接词是用来连接规则与规则或者规则组与规则组，或者规则与规则组之间关系的逻辑词，连接词有三种，不是，或者，并且，对应的逻辑符号是！，||， &&

输入属性(widgets)，或者叫做左值(leftValue) 输入属性支持的类型有文本/数值/单选值/多选值/日期类型/布尔类型/函数

操作符(operators) 操作符是用来连接输入属性以及期望值的逻辑符号
1、不同的输入属性会有不同的操作符
2、对于文本类型，对应的操作符有[“等于”,“不等于”,“包含”,“包含数组项”,“字符开头是”,“字符结尾是”,“正则匹配”,“为空”,“不为空”]
3、对于数值类型，对应的操作符有[“等于”,“不等于”,“小于”,“小于等于”,“大于”,“大于等于”,“范围在”,“范围不在”,“为空”,“不为空”]
4、对于数组类型，对应的操作符有[“等于”,“不等于”,“等于其中一个”,“不等于其中一个”,“包含其中一个”]
5、对于布尔类型，对应的操作符有[“等于”,“不等于”]

期望值，或者叫做右值(rightValue) 期望值就是我们希望在这个规则里命中的值，如果输入值跟期望值相匹配，那么这条规则就返回true,否则这条规则就返回false

总结一下：输入属性 + 操作符 + 期望值就组合形成一个规则

规则+ 连接词+规则可以组成一个规则组

规则和规则组相互嵌套，可以形成一个规则树

比如截图里面的规则树就是由两个规则+两个规则组嵌套组合而成

接下来我来介绍一下怎么由规则树解析成我们想要的groovy脚本语言

举例说明规则的解析过程

先看单条规则是怎样解析成groovy脚本的

equal:{ label:'等于', groovy:(leftValue, rightValue)=> `${leftValue}==${rightValue}`, labelForFormat:'==', sqlOp:'=', reversedOp:'not_equal', formatOp:(field, op, value, valueSrcs, valueTypes, opDef, operatorOptions, isForDisplay, fieldDef)=>{if(valueTypes =='boolean'&& isForDisplay)return value =='No'? `NOT ${field}` : `${field}`;elsereturn `${field}${opDef.label}${value}`;}, mongoFormatOp: mongoFormatOp1.bind(null,'$eq', v => v,false), jsonLogic:'==',}, like:{ label:'包含', groovy:(leftValue, rightValue)=> `${leftValue}.contains(${rightValue})`, labelForFormat:'Like', reversedOp:'not_like', sqlOp:'LIKE', sqlFormatOp:(field, op, values, valueSrc, valueType, opDef, operatorOptions)=>{if(valueSrc =='value'){return `${field} LIKE ${values}`;}elsereturn undefined;// not supported}, mongoFormatOp: mongoFormatOp1.bind(null,'$regex', v =>(typeof v =='string'?escapeRegExp(v): undefined),false),//jsonLogic: (field, op, val) => ({ "in": [val, field] }), jsonLogic:"in", _jsonLogicIsRevArgs:true, valueSources:['value'],}, between:{ label:'范围在', groovy:(leftValue, rightValue)=> `(${leftValue}>=${rightValue[0]}&&${leftValue}<=${rightValue[1]}) `, labelForFormat:'BETWEEN', sqlOp:'BETWEEN', cardinality:2, formatOp:(field, op, values, valueSrcs, valueTypes, opDef, operatorOptions, isForDisplay)=>{ let valFrom = values.first(); let valTo = values.get(1);if(isForDisplay)return `${field}>=${valFrom} AND ${field}<=${valTo}`;elsereturn `${field}>=${valFrom}&&${field}<=${valTo}`;}, mongoFormatOp: mongoFormatOp2.bind(null,['$gte','$lte'],false), valueLabels:['开始值','结束值'], textSeparators:[ null,'到'], reversedOp:'not_between', jsonLogic:"<=",},

由于操作符有很多，他们的解析过程比较类似，我就不一一介绍了。

规则树由规则以及规则组嵌套而成，最后生成的数据结构就是一个树状结构

下图是上面的示例对应的规则树结构

{"id":"99aa8a99-4567-489a-bcde-f18de0917366","type":"group","children1":{"b8b8abba-89ab-4cde-b012-318de0917366":{"type":"rule","properties":{"field":"weather","operator":"equal","value":["晴"],"valueSrc":["value"],"valueType":["text"]}},"9b898a88-4567-489a-bcde-f18de0917366":{"type":"rule","properties":{"field":"weekday","operator":"select_any_in","value":[["6","7"]],"valueSrc":["value"],"valueType":["multiselect"]}},"aa989a8a-0123-4456-b89a-b18de0923911":{"type":"group","properties":{"conjunction":"AND"},"children1":{"89b8abab-cdef-4012-b456-718de0923912":{"type":"rule","properties":{"field":"phone","operator":"match","value":["^1[3456789]\\d{9}$"],"valueSrc":["value"],"valueType":["text"]}},"898baa88-89ab-4cde-b012-318de092c6b8":{"type":"rule","properties":{"field":"isOpen","operator":"equal","value":[true],"valueSrc":["value"],"valueType":["boolean"]}}}},"a9a8baa9-4567-489a-bcde-f18de092e65a":{"type":"group","properties":{"conjunction":"AND"},"children1":{"b8a8b99b-0123-4456-b89a-b18de092e65a":{"type":"rule","properties":{"field":"time","operator":"greater","value":[8],"valueSrc":["value"],"valueType":["number"]}},"89bbb8bb-cdef-4012-b456-718de093f996":{"type":"rule","properties":{"field":"time","operator":"less","value":[17],"valueSrc":["value"],"valueType":["number"]}}}}},"properties":{"conjunction":"AND"}}

知道了单条规则翻译以及规则树结构，就可以把规则树对应的groovy脚本翻译出来

由于我们是Java项目，所以我们需要groovy脚本即可，上述流程树翻译好的groovy脚本

(weather =="晴"&& weekday in["6","7"]&&(!!(phone =~/^1[3456789]\d{9}$/)&& isOpen ==true)&&(time >8&& time <17))

除了groovy脚本，还有一种常用的脚本是jsonLogic脚本
jsonLogic，这是一种用 json 构造的语法树，最主要优势是语言无关、前后端通用。非常简单明了，jsonLogic 官方有 js/php/python/ruby 对应的解析库。

//Rule{"and":[{"==":[{"var":"weather"},"晴"]},{"in":[{"var":"weekday"},["6","7"]]},{"and":[{"match":[{"var":"phone"},"^1[3456789]\d{9}$"]},{"==":[{"var":"isOpen"},true]}]},{"and":[{">":[{"var":"time"},8]},{"<"[{"var":"time"},17]}]}]}// Data{"weather":"""weekday":"","phone":"","isOpen": null,"time": null }

我们知道

{// 天气 "weather":""// 星期几 "weekday":"",// 游乐场电话 "phone":"",// 游乐场是否开门 "isOpen":null,// 时间 "time":null}

这几个是输入属性,对这个流程树设置不同的输入属性，就可以得到不同的布尔值
比如设置输入属性 {“weather”: “晴”,“weekday”: “6”,“phone”:“13212341234”,“isOpen”:true,“time”:12} 得到的值就是 true
比如设置输入属性 {“weather”: “晴”,“weekday”: “5”,“phone”:“13212341234”,“isOpen”:true,“time”:12} 得到的值就是 false

逻辑表达式编辑器的实现
逻辑表达式编辑器流程介绍

我们的逻辑表达式编辑器就是基于上述的QueryBuilder的规则树实现的，对于QueryBuilder过滤器后面加了输出语句
可视化逻辑表达式编辑器

这样就是一个判断分支。

对于复杂逻辑肯定会有多个判断分支，我们可以添加多个判断分支组合起来
可视化逻辑表达式编辑器

由于分支不一定都命中，所以我们要设置一个兜底逻辑，相当于判断语句中的default,这样整个逻辑表达式的流程就完整了
可视化逻辑表达式编辑器

这样，对应的逻辑就可以这样简单的表示

二、服务端实现介绍

首先看一下流程图
可视化逻辑表达式编辑器

对于每一个规则流程都有一个唯一的accesskey,比如
trip.ibu.TTS.outbound
trip.flight.Offline.outbound.call

我们在项目初始化的时候，项目里面有几个规则流程，把这些规则流程对应的accessKey放到List里面，然后逐个的遍历初始化

一个规则流程有多个规则分支，因为groovy脚本，Java程序是无法直接执行的，因此我们需要需要进行转化。

这里我们用到了GroovyClassLoader,GroovyClassLoader主要负责在运行时编译groovy脚本为Class的工作，从而使Groovy实现了将groovy源代码动态加载为Class的功能。

注意，我们要有预热的过程，不能在程序运行中将groovy脚本转化为class对象，然后让程序执行。因为一个规则流程有多个规则分支，一个规则分支就对应一个groovy脚本，运行的时候就要转化成一个class对象，一个复杂的规则流程可能有几百个规则分支。

由于groovy脚本转化为class对象是比较耗时的，所以在程序初始化阶段进行预热是有必要的。

// 脚本转化为class对象 GroovyClassLoader classLoader =newGroovyClassLoader(); Class<Script> scriptClazz =(Class<Script>) classLoader.parseClass(JARS + scriptStr);// 执行判断 Binding binding =newBinding(parameters); Script script = InvokerHelper.createScript( scriptClazz, binding);return(boolean) script.run();