JSON Schema动态表单配置规则应用

已于 2023-09-04 17:50:39 修改
阅读量1.5k 收藏 1
点赞数
分类专栏： 分布式 文章标签： json 分布式 数据库
于 2023-08-24 21:51:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangyanping20108/article/details/132483324
版权

目录

前言

一、JSON Schema 规范

二、schema字段描述

三、JSON Schema 应用

一、业务描述

二、模版数据表设计

  三、规则表设计

四、构造Groovy 脚本参数Map

五、执行Groovy 脚本

前言

Formily 提供了 JSON Schema、JSX Schema、纯 JSX 三种开发模式。由于 JSON 可以序列化保存到数据库中，所以 JSON Schema 的方式非常适合后端动态渲染表单，前端完全不需要维护 schema，只需利用 Formliy 提供的 SchemaForm 来渲染后端返回的 schema 即可。我们仅需通过 Form Builder 或者 Page Designer 之类的工具来输出 JSON Schema，然后交给 SchemaForm 或者 PageEngine 之类的组件来渲染。

一、JSON Schema 规范

JSON Schema 是一个社区推动的 JSON 文件协议，用于规范 JSON 文件内容。它与平台无关，可以描述任意复杂的数据结构，相比 XML，JSON 的描述格式更加紧凑，可读性更好。JSON Schema 在 JSON 的格式上，加入了一些列的标准化属性，用于描述结构化数据。Formily 遵循 JSON Schema 使用最广泛的[draft-07 标准](Specification Links

我们可以借助 ajv 这类 JSON Schema 验证工具，来认识不同 Schema 规范的区别，详情可参考 [draft-07 (and draft-06)](Ajv JSON schema validator)。

用 JSON Schema 来描述表单适合于低代码或者数据中台的快速开发。前端不需要维护 schema，schema 可以存在后端，随意分发动态渲染。

二、schema字段描述

 演示地址：https://xrender.fun/schema-builder

{
  "bsonType": "object", // 固定节点
  "description": "表的描述",
  "required": [], // 必填字段，比如name,age
  "permission": {
    "read": false, // 前端非admin的读取记录权限控制。默认值是false，即可以不写。可以简单的true/false，也可以写表达式
    "create": false, // 前端非admin的新增记录权限控制。默认值是false，即可以不写。可以简单的true/false，也可以写表达式
    "update": false, // 前端非admin的更新记录权限控制。默认值是false，即可以不写。可以简单的true/false，也可以写表达式
    "delete": false, // 前端非admin的删除记录权限控制。默认值是false，即可以不写。可以简单的true/false，也可以写表达式
    "count": false // 前端非admin的求数权限控制。默认值是true，即可以不写。可以简单的true/false，也可以写表达式
    // 对数据进行数量统计时（包括count方法、及groupField内的count操作）均会同时触发表级的count权限及read权限
  },
  "properties": { // 表的字段清单
    "_id": {
      "description": "ID，系统自动生成"
    },
    "other": { // 字段名称，每个表都会带有_id字段
      "bsonType": "", // 字段类型，可选值： string | password | int | double | bool | date | timestamp | object | file | array
      "arrayType": "file", // 指定字段类型为数时，其元素项类型，bsonType="array" 时有效。
      "title": "", //<string> 标题，开发者维护时自用。在schema2code生成前端表单代码时，默认用于表单项前面的label
      "description": "", //<string> 描述，开发者维护时自用。在生成前端表单代码时，如果字段未设置componentForEdit，且字段被渲染为input，那么input的placehold将默认为本描述
      "defaultValue": "", //<string | object>默认值
      "forceDefaultValue": "", //<string | object> 强制默认值，不可通过clientDB的代码修改，常用于存放用户id、时间、客户端ip等固定值。
      "required": [], //<array> 是否必填。支持填写必填的下级字段名称。required可以在表级的描述出现，约定该表有哪些字段必填。也可以在某个字段中出现，如果该字段是一个json对象，可以对这个json中的哪些字段必填进行描述。
      "enum": [], //<array> 字段值枚举范围，数组中至少要有一个元素，且数组内的每一个元素都是唯一的。enum最多只可以枚举500条
      "enumType": "", //<string> 字段值枚举类型，可选值tree。设为tree时，代表enum里的数据为树形结构。此时schema2code可生成多级级联选择组件
      "fileMediaType": "", //<string> 文件类型，bsonType="file" 时有效，可选值 all|image|video 默认值为all,表示所有文件，image表示图片类型文件，video表示视频类型文件
      "fileExtName": "", //<string>文件扩展名过滤，bsonType="file" 时有效，多个文件扩展名用 "," 分割，例如: jpg,png，
      "maximum": 20, //<number>如果bsonType为数字时，可接受的最大值
      "exclusiveMaximum": , //<boolean>bsonType为数字时, 是否排除 maximum
      "minimum": , //<number>如果bsonType为数字时，可接受的最小值
      "exclusiveMinimum", //<boolean>bsonType为数字时, 是否排除 minimum
      "minLength", //<number>bsonType = String | Array时，限制字符串或数组的最小长度
      "maxLength", //<number>bsonType = String | Array时，限制字符串或数组的最大长度
      "trim": "both", //<boolean> bsonType = String 时，去除空白字符。可选值none|both|start|end，默认值none trim优先级高于其它驗证，它会在先去掉空格之后，再进行驗证。
      "format": //枚举类型，可选值 url | email。设置字段数据格式。目前只支持这二种格式。数据不符合此格式时无法录入。
      "pattern": //<string>正则表达式，比如设置手机号码正则，如果该字段值不符合手机号正则，则录入失败。  验证手机号正则："pattern": "^\\+?[0-9-]{3,20}$"

        "validateFunction": "", //<string | object>扩展校验函数名，用于校验该字段值是否符合要求
      /* 值类型为:String 时表示校验函数名
      值类型为object格式：
       {
         "name": """  //<string>校验函数名
         "client": true //<boolean>默认值true。值为true时客户端也可以在生成的代码中改为自己的校验函数，此时客户端的校验仍然生效（不懂）
       } */

      "permission": { //<object> 字段的数据库权限，仅write、read
        "write": true,
        "read": true
      },
      "errorMessage": "", //<string|Objeect>当数据写入或更新时，校验数据合法性失败后，返回的错误提示
      // 比如：
      // "errorMessage": "{title}不能为空"  {title} 为当前字段设置的title属性值
      // 或者指定具体出错点
      // "errorMessage": {
      //     "required": "{title}不能为空", //当required不满足时，出错提示内容
      //     "minLength": """ , //当minLength不满足时，出错提示内容
      //     "maximum": """ , //当maximum不满足时，出错提示内容
      //     "pattern": , //当pattern不满足时，出错提示内容
      //     "format": "{title}格式无效"  //当format不满足时，出错提示内容
      //   }
      "foreignKey": "", //<string>外键索引。关联字段。表示该字段的原始定义指向另一个表的某个字段，值的格式为：关联表名.字段名。关联字段定义后可用于联表查询，通过关联字段合成虚拟联表，极大的简化了联表查询的复杂度
      "parentKey": "", //<string>同一个数据表内父级的字段。 用于树状(tree)数据查询
      "label": "", //<string> schema2code的配置。字段标题。schema2code生成前端代码时，渲染表单项前面的label标题。如果不填，会使用title属性。适用于title不便显示在表单项前面的情况
      "group": "", //<string> schema2code的配置。分组id。schema2code生成前端代码时，多个字段对应的表单项可以合并显示在一个uni-group组件中
      "order": 0, //<int> schema2code的配置。表单项排序序号。

      //!!!!! componentForEdit 类型为对象和数组。测试数组不成功。对象可以。~！！！！
      "componentForEdit": {}, //<object | array> 生成前端编辑页面文件时(add.vue、edit.vue)，使用什么组件渲染这个表单项。比如使用input输入框。格式：
      /* 示例一:简单的组件
      {
        "name": "input", //此字段所用组件名
        "props": { //设置组件属性
            "placeholder": "请输入昵称"  //逻辑或数值类型要加:号，比如：  ":disabled": false
        }
        //"children": '' //<string> 子组件名。
        //"childrenData": [] //<array> 子组件数据
      }
      示例二:带子组件的组件
      {
          "name": "select",
          "children": "<option value=\"{value}\">{label}</option>",
          "childrenData": [{"label": "中文简体", "value": "zh-cn"}]
      } */

      "componentForShow": [] // <object | array>生成前端展示页面时(list.vue、detail.vue)，使用什么组件渲染。比如使用uni-dateformat格式化日期。
    }
  },
  "fieldRules": [
    /* 字段之间的约束关系。比如字段开始时间小于字段结束时间。也可以只校验一个字段。支持表达式
    注意：这里的rule是为符合条件，而不是不满足条件
    {
      "rule": "end_date == null || end_date != null && create_date < end_date", // 校验规则
      "errorMessage": "创建时间和结束时间不匹配", // 错误提示信息（仅在新增时生效，更新数据时不会提示此信息）
      "client": false // schema2code时，当前规则是否带到前端也进行校验。目前此属性暂不生效，fieldRules不会在客户端校验数据，仅会在云端进行校验
    } */
  ]
}

三、JSON Schema 应用

一、业务描述

在项目开发中，我们经常需要定义一些规则，根据规则匹配处理相应的业务。比如在广告投放业务中，我们有以下规则的动态组合回传用户关键行为【注册，激活，支付等转化】。

  • 用户阅读时长 + 用户收益

      

  • 广告曝光数     + 用户收益

       

  • 用户支付金额

二、模版数据表设计

如上，根据不同条件组合回传用户的关键行为非常适合用动态表单开发。首先我们先定义模版表

字段名称字段类型字段描述
idBIGINT(20)主键
groovy_codeVARCHAR(64)Groovy模版编码
groovy_nameVARCHAR(64)Groovy模版名称
contentTEXTGroovy脚本
schema_jsonTEXT数据结构
statusTINYINT(4)状态  1:启用  2:停用

   content：Groovy脚本返回Boolean 值，用于规则是否匹配成功。

  用户阅读时间投放模版Groovy 脚本

import java.util.Date;
import java.util.Map;

import cn.hutool.core.convert.Convert;
import com.xinwu.shushan.core.common.ApplicationContextHelper;
import com.xinwu.shushan.launch.infra.cache.UserReadTimeCache;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

public class Groovy {
    private static Logger logger = LoggerFactory.getLogger("launch_book_readTime");

    public Boolean match(Map<String, Object> map) {
        Integer expectedReadTime = Convert.toInt(map.get("readTime"));
        Integer userId = (Integer) map.get("userId");
        Date date = (Date) map.get("date");
        UserReadTimeCache userReadTimeCache = ApplicationContextHelper.getBean(UserReadTimeCache.class);
        int actualReadBookTime = userReadTimeCache.getReadTime(date, userId);

        logger.info("template-launch_book_readTime#userId={},expectedReadTime={},actualReadBookTime={}", userId, expectedReadTime, actualReadBookTime);

        return actualReadBookTime >= expectedReadTime;
    }
}

用户阅读时间 schema_json 数据结构：

{
    "type":"object",
    "properties":{
        "readTime":{
            "title":"阅读时长(秒)",
            "type":"number",
            "defaultValue":300,
            "props":{
                "placeholder":"请输入阅读时长"
            },
            "required":true,
            "min":0,
            "widget":"inputNumber"
        }
    },
    "displayType":"row",
    "maxWidth":"340px"
}

  三、规则表设计

launch_config 投放配置表定义

字段名称字段类型字段描述
idINT(10)主键
channel_typeVARCHAR(32)渠道
product_typeINT(11)产品类型
advertiser_idVARCHAR(64)广告主ID
conversionVARCHAR(128)转化
groovy_codeVARCHAR(64)模版code
condition_jsonVARCHAR(1024)条件[json schema 表单值]

四、构造Groovy 脚本参数Map

private Map<String, Object> buildMap(Integer userId,Integer productType,Date date,String conditionJson) {
        Map<String, Object> map = Maps.newHashMap();
        
        map.put("date", date);
        map.put("userId", userId);
        map.put("productType", productType);


        if (StringUtils.isNotBlank(conditionJson)) {
            Map<String, Object> conditionMap = JSON.parseObject(conditionJson, Map.class);
            map.putAll(conditionMap);
        }

        return map;
    }

五、执行Groovy 脚本

   public Boolean proceed(String templateCode, Map<String, Object> map) {
        GroovyObject groovyObject = groovyRepository.getByCode(templateCode);

        Invocation invocation = new Invocation(groovyObject, "match", new Object[]{map});
        Object result = invocation.proceed();

        return (Boolean) result;
    }
yangyanping20108
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JSON-Schema定义规范
01-25
熟悉XML的开发人员都知道，对XML文档的定义有一个XML Schema。同样，对于JSON文件的定义，也应该有一个JSON Schema以规范JSON文件内容。IETF负责起草相关规范最新版本是2018年3月19日发布的Draft 7。JSON Schema用以标注和验证JSON文档的元数据的文档，可以类比于XML Schema。相对于JSON Schema，一个JSON文档就是JSON Schema的一个instance。JSON Schema的特点： • 描述现有数据格式。 • 干净的人类和机器可读的文档。 • 完整的结构验证，有利于自动化测试。 • 完整的结构验证，可用于验证客户端提交的数据。
js json编辑器_基于JSON Schema的前端可视化活动编辑器
weixin_39655377的博客
11-22 1261
先看效果，为一个可视化活动编辑器。 演示地址：https://form.lljj.me/vue-editor.html#/editor 项目地址：https://github.com/lljj-x/vue-json-schema-form/基于 JSON Schema 开箱即用的简单活动可视化编辑器。背景在做生成一个可视化店铺装修系统的时候，需要解决配置数据表单的通用性，参阅了一些现用的解决方案...
JSON Schema及其用法
最新发布
读万卷书 行万里路
03-30 1150
本篇主要介绍JSON Schema的基本语法，必要时会使用python代码来验证。JSON Schema是一种用于描述的规范，可以用来定义JSON数据对象的结构、格式和约束条件。通过JSON Schema，可以对JSON数据进行验证、校验和文档化，确保数据的正确性和完整性。
dms:基于Json Schema的动态Json数据配置平台
05-11
动态数据管理神器-DMS 重构中，敬请期待... 介绍 什么是DMS？ 基于Json Schema/UI Schema模块化的Json动态数据管理平台。 什么是Json Schema/UI Schema？ 用于动态生成表单的Schema，参考 使用场景有哪些？ 无论前端、后端、移动端、运维，理论上所有需要动态配置数据的场景都可以使用。 针对前端、移动端：可以配置页面每个模块展示型数据，也可以配置各种版本号用于动态更新，各种功能开关、页面主题等。 针对后端：可以配置业务相关的ID，配置类目，城市列表，热门等。 针对运维：可以作为区分环境的配置中心等。 当然使用场景远不止这些...... 可以运用到生产环境吗？ 当然可以，DMS存储的数据读写是完全分开的，目前支持通过Redis（使用redis获取数据方式请参考）、CDN(推荐)两种获取数据方式。即使DMS自身服务器挂掉，也不会影响数据的读取。
react动态表单JSONSchema构建Web表单
weixin_41644392的博客
06-30 294
react动态表单JSONSchema构建Web表单
前端schema表单配置生成方案
逸尘的专栏
01-04 8522
一、背景 表单Form开发，尤其在中台项目中，是FE????的家常便饭，一般需要大量的重复性工作????： • 编写模板 • 编写校验规则 • 表单提交（偶尔联动） 同时，Server也需要编写校验规则。然而，伴随业务变更和前后端开发同步不及时的情况，前后端校验规则可能会存在不一致的问题。所以「前后端共用校验规则」也可在范畴之内。 二、目标 减少重复性工作????：通过配置自动生成表单模板，同时这个配置最好还能描述表单校验相关。 三、方案选型 1.form-render 2019年10月阿里开源，基于Rea
limon-json-schema-form:Vue3.0+TS 生成表单组件
04-22
limon-json-schema-form 使用 Vue3.0 + TypeScript 搭建的表单生成组件 a form generator based on jsonschema for vue3 API 设计 <JsonSchemaForm schema={schema} value={value} xss=removed locale={locale} contextRef={someRef} uiSchema={uiSchema} /> schema json schema 对象，用来定义数据，同时也是我们定义表单的依据 value 表单的数据结果，你可以从外部改变这个 value，在表单被编辑的时候，会通过onChange透出 value 需要注意的是，因为 vue 使用的是可变数据，如果每次数据变化我们都去改变value的对象
JSON schema（模式）
梁辰兴的博客
11-13 5792
JSON Schema 译为“JSON模式”，它是由 IETF 编写和起草的。那么 JSON Schema 有什么作用呢？IETF 是 The Internet Engineering Task Force 的简称，译为“国际互联网工程任务组”，是一个公开性质的大型民间国际团体。{"id" : 1 , "name" : "JSON教程" , "author" : "C语言中文网" , "price" : 99.9 }
JSON Schema&表单UI快速生成解析
Qlly
04-08 3916
一、JSON Schema ​ JSON（JavaScript Object Notation）是一种轻量&常见的数据交换格式，基本的数据的结构就是key-value，具有易于生成和解析的优点，通过JSON可以灵活地表达程序所需要的数据结构。 ​ 但JSON本身并没有特定的规范（本身结构也不支持注释），所以对于数据本身的描述是缺失的，比如说开发人员或者程序，就无法判断下面这份数据里面的age为string是否是符合预期的类型。 { "name": "John Doe", "mobile":
JSON Schema的应用(具体的使用场景)
天心天地生的博客
10-21 3596
借助vue、react框架组件化理念以及动态渲染组件能力，涌现了许多基于JSON Schema配置文件渲染表单或者组件的库，有效解决通用性组件大量重复使用的场景。通过JSON配置组件乃至页面，能够使代码转化为文件，使数据得以导入导出，便于迁移储存。另外也可以开发可视化编辑器，通过拖拽交互，生成JSON文件，降低开发使用难度。基于这一系列的方案，使开发效率大大提升和降低后续的代码维护。
JSON & JSON Schema
l_dongyang的博客
12-27 1249
存储数据时、数据传输时、组件交互及数据验证的时候，JSON，在不同平台、组件及场景下的应用，已经自证了它作为无关平台标记语言的易用性及通用性。结合JSON Schema能够完成数据定义、数据传输以及数据验证的完整过程。
FormBuilder:从 JSON 为 Javascript、Node.js、PHP(Smarty,Twig)、Ruby 构建 html 表单
07-09
FormBuilder (pre-alpha) 从 JSON 为 Javascript、Node.js、PHP(Smarty,Twig)、Ruby 构建 html 表单 主要条款： 从行构建表单。 行有一个标签（单个）、控件（多个）和消息（多个）。 行本质（标签、控件、消息）呈现的顺序相同。 标签是带有标签或跨度的 HTML 容器，带有文本内容 控件是 HTML 容器，内部有单独的控件或单个控件 控件是带有表单控件（输入、文本区域、选择、按钮）的 HTML 容器 消息是 HTML 容器，其中包含一些消息或单个消息 消息是 HTML 容器，其中包含消息文本内容 表单、行、标签、控件、消息可以有如下选项： name（本质的逻辑名称，控件具有相同的名称属性，本质具有带名称的类名） id（id 属性） 类名（扩展类名） 值（用于控制） 属性（其他属性、数据等） before（在
vue3-json-schema-form:基于jsonschema的vue3表单生成器
05-23
vue3-json-schema-form a form generator based on jsonschema for vue3 Project setup npm install npm run serve npm run build npm run test:unit npm run lint API 设计 <JsonSchemaForm schema={schema} value={value} xss=removed locale={locale} contextRef={someRef} uiSchema={uiSchema} /> schema json schema 对象，用来定义数据，同时也是我们定义表单的依据 value 表单的数据结果，你可以从外部改变这个 value，在表单被编辑的时候，会通过onChange透出
Element UI表单设计及代码生成器，支持可视化拖拽、代码下载、界面设计等。
04-08
Element UI表单设计及代码生成器，支持可视化拖拽、代码下载、界面设计等。
react-jsonschema-form：一个用于从JSON模式构建Web表单的React组件
02-03
react-jsonschema-form 一个简单的组件，能够使用声明性地构建和定制Web表单。 ·· 支持的主题 文献资料 阅读“阅读上的文档。 现场游乐场 gh页上有一个。 贡献 阅读我们的以开始使用。 学分 由BrowserStack支持的测试
vue-jsonschema-form:vue2的JSON模式表单生成器
05-12
vue-jsonschema-form [WIP：未准备好] 基于JSON模式表单生成器 概述 该项目的目的是创建一个简单的Vue组件，该组件能够根据构建HTML表单，并且默认情况下使用语义。 入门 克隆此存储库，安装依赖项并使用dev命令运行。 # Clone this repository git clone https://github.com/fagbokforlaget/vue-jsonschema-form.git # Change directory to cloned path cd vue-jsonschema-form # Install dependencies npm install # Run in `DEV` mode npm run dev # Lint all source files using ESLINT npm run lint
基于 React 和 JSONSchema 的动态表单解决方案
11-18
基于 React 和 JSONSchema 的动态表单解决方案 ，Drip-Form 使用 JSON 配置文件生成具备数据联动、复杂校验、异步请求及嵌套的表单，可以减少复杂冗余的表单开发工作。 配套可视化表单生成器、Node 校验工具使用，可...
java脚本引擎Groovy实战
yangyanping20108的博客
07-06 7356
​互联网时代随着业务的飞速发展，不仅产品迭代、更新的速度越来越快，个性化需求也是越来越多。如何快速的满足各种业务的个性化需求是我们要重点思考的问题。我们开发的系统如何才能做到热部署就能适应各种规则变化呢？实现业务和规则的解耦。 好了，Java的ScriptEngine脚本引擎给了我们一个选择，它支持代码动态执行，代码修改后不需要重启JVM进程，就可以使用解析或编译方式执行，非常方便，在一些动态业务规则、热更新、热修复等场景中会非常方便。
QLExpress规则引擎实战
yangyanping20108的博客
07-27 5201
由阿里的电商业务规则、表达式（布尔组合）、特殊数学公式计算（高精度）、语法分析、脚本二次定制等强需求而设计的一门动态脚本引擎解析工具。
json schema
08-02
JSON Schema是一种用于定义JSON数据结构和约束的规范。它可以用于完成JSON数据校验，并且在自动化API文档、自动化输入表单生成、JSON数据可视化等方面也有广泛的应用场景。[1]Json Schema定义了一套词汇和规则，用来定义JSON数据的元数据。这些元数据通过JSON数据形式表达，定义了JSON数据需要满足的规范，包括成员、结构、类型、约束等。[2]JSON模式规范分为核心、验证和超模式三个部分，以及一个相关的规范，即相对JSON指针。核心部分定义了JSON模式的基础，验证部分定义了JSON模式的验证关键字，超模式部分定义了JSON模式的超媒体关键字，而相对JSON指针扩展了JSON指针语法中的相对指针。[3]所以，JSON Schema是一种强大的工具，可以帮助我们定义和验证JSON数据的结构和约束。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值