美文网首页三脚猫
基于Vue的业务规则(business rules)组件

基于Vue的业务规则(business rules)组件

作者: DADFAD | 来源:发表于2019-08-05 12:46 被阅读0次

概述

业务规则(Business Rules)致力于提供一套易于判断的配置规则,以便于在多数情况下,不部署新代码而能够应对频繁的新需求。

以下是我基于Vue/Element UI的实现:

https://github.com/winzipsdo/vue-business-rules-ui

以下来自GitHub - venmo/business-rules: Python DSL for setting up business intelligence rules that can be configured without code

As a software system grows in complexity and usage, it can become burdensome if every change to the logic/behavior of the system also requires you to write and deploy new code. The goal of this business rules engine is to provide a simple interface allowing anyone to capture new rules and logic defining the behavior of a system, and a way to then process those rules on the backend.

这套规则恰巧非常适合于日志JSON的筛选判断,可以参考以下例子:

我们希望对符合条件的日志进行计数,有如下日志:

{
  "uid": "a",
  "data": {
    "cid": 1,
    "val": 20
  }
}

条件为: uidadata.cid不为1

使用业务规则可表述为:

{
  "all": [
    {
      "name": "uid",
      "operator": "eq",
      "value": "a"
    },
    {
      "name": "data.cid",
      "operator": "neq",
      "value": 1
    }
  ]
}

基于Vue的实现

以下是业务规则的UI Demo:

Conditions Demo

image.png

使用原生JS或者JSX能够很轻易地实现组件的递归嵌套,但在Vue中需要使用一个不常用的特性:递归组件

组件是可以在它们自己的模板中调用自身的。不过它们只能通过name选项来做这件事。

详细实现可见:vue-business-rules-ui/index.vue at master · winzipsdo/vue-business-rules-ui · GitHub

原始的业务规则设计并不利于数据驱动进行渲染,因此在中间添加了一个Adapter进行格式的转换,本例中原本的JSON将被转换为:

{
  "type": "all_any",
  "condition": "all",
  "children": [{
    "type": "condition",
    "name": "uid",
    "operator": "eq",
    "value": "a",
    "val_type": "string"
  }, {
    "type": "condition",
    "name": "data.cid",
    "operator": "neq",
    "value": "1",
    "val_type": "number"
  }],
  "isRoot": true
}

Adapter可见:vue-business-rules-ui/BizRuleAdapter.js at master · winzipsdo/vue-business-rules-ui · GitHub

Demo截图如下所示:

image.png

附录

以下是Javascript的UI实现:

GitHub - chrisjpowers/business-rules: A JavaScript library for building out the logic and UI for business rules.

相关文章

  • 基于Vue的业务规则(business rules)组件

    概述 业务规则(Business Rules)致力于提供一套易于判断的配置规则,以便于在多数情况下,不部署新代码而...

  • MVP-Clean架构分析

    分层 Enterprise Business Rules:业务对象(实体) Application Busines...

  • vue-cli3 webpack配置

    1.列出所有命名规则和插件: vue inspect --rules vue inspect --plugins ...

  • 记录一个CocoaPods组件库依赖问题

    公司某iOS App,下属有几个组件。简单称之为:Platform平台组件、Business业务组件(A, B)....

  • Vue emit & on 探讨

    一、背景 基于Vue父子组件的通信规则,我发现我对父子组件通信出现了误解。首先父组件通过v-bind绑定参数到子组...

  • vue2+ts组件库搭建

    背景 公司通用的框架是vue2+js,组件库也是基于vue+js的。我们组内根据自己的业务特点,使用了vue2+t...

  • el-data-table, 让CRUD更简单👏

    基于Vue2.x, element-ui 2.x,以及开源组件el-form-renderer封装了一个业务组件e...

  • vue-cli项目下引入vant组件

    前言 Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。通过...

  • 自学Java项目之规则引擎

    项目:规则引擎专题 规则引擎,全称为业务规则管理系统,英文名BRMS(Business Rule Manageme...

  • Vue 移动端框架

    1. Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件,这...

网友评论

    本文标题:基于Vue的业务规则(business rules)组件

    本文链接:https://www.haomeiwen.com/subject/fhzpdctx.html