CN114461204A - 一种将多层级对象数据翻译为原生代码的开发系统和方法 - Google Patents

一种将多层级对象数据翻译为原生代码的开发系统和方法 Download PDF

Info

Publication number
CN114461204A
CN114461204A CN202210380014.5A CN202210380014A CN114461204A CN 114461204 A CN114461204 A CN 114461204A CN 202210380014 A CN202210380014 A CN 202210380014A CN 114461204 A CN114461204 A CN 114461204A
Authority
CN
China
Prior art keywords
data
component
page
value
editor
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202210380014.5A
Other languages
English (en)
Other versions
CN114461204B (zh
Inventor
张逸
蒋奕
谢子剑
喻磊
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Nanjing Hurricane Engine Information Technology Co ltd
Original Assignee
Nanjing Hurricane Engine Information Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Nanjing Hurricane Engine Information Technology Co ltd filed Critical Nanjing Hurricane Engine Information Technology Co ltd
Priority to CN202210380014.5A priority Critical patent/CN114461204B/zh
Publication of CN114461204A publication Critical patent/CN114461204A/zh
Application granted granted Critical
Publication of CN114461204B publication Critical patent/CN114461204B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/34Graphical or visual programming
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/40Transformation of program code
    • G06F8/41Compilation
    • G06F8/42Syntactic analysis
    • G06F8/427Parsing

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种将多层级对象数据翻译为原生代码的开发系统和方法,属于数据处理技术领域。本系统包括可视化编辑器、资源中心、数据中心、解析器、转换器、生成器、代码仓库:利用可视化编辑器通过拖动及属性设置的方式修改页面数据;利用资源中心统筹所有静态的资源数据;利用数据中心对用户产生的数据和资源数据管理;利用解析器解析数据中心元数据,生成抽象模型;利用转换器将抽象模型转换成实际端的模型;利用生成器遍历模型数据,调用各个端生成器生成相应代码;利用代码仓库将生成器生成的代码推到对应仓库。本发明在框架升级时只需要改翻译模块即可生成新的代码,不需要手工迁移代码,能够解决手工代码日益冗余的问题。

Description

一种将多层级对象数据翻译为原生代码的开发系统和方法
技术领域
本发明涉及数据处理技术领域,具体为一种将多层级对象数据翻译为原生代码的开发系统和方法。
背景技术
多层级对象数据是一种嵌套层次比较深的复杂对象,主要用于描述系统的元素、物料、插件等。该数据记载了页面中各类信息,并与资源数据关联,最终会持久化到数据库中。比如组件数据,需记录该组件的元数据,组件属性数据,组件绑定关系等,而最终被翻译模块消费生成源代码。
在现有技术发展中,企业数字化转型加大了对低代码的需求,传统业务开发周期较长,且成本较高,需要专业的程序员开发及维护,成本过高。目前市面上的低代码多为生成配置数据,强依赖平台本身,对于私有化部署有较大门槛。同时配置数据对于逻辑性很强的交互或者业务是难以胜任的。
发明内容
本发明的目的在于提供一种将多层级对象数据翻译为原生代码的开发系统和方法,以解决上述背景技术中提出的问题。
为了解决上述技术问题,本发明提供如下技术方案:
一种将多层级对象数据翻译为原生代码的开发方法,该方法包括以下步骤:
S1、可视化编辑器通过拖动及属性设置的方式修改页面数据并实时进行预览;
S2、利用资源中心统筹所有静态的资源数据,拉取资源及缓存至数据中心,数据中心管理用户产生的数据和资源数据,将配置及插件初始化,对响应式的数据通过控制器对外暴露修改接口;
S3、利用解析器解析数据中心元数据,生成抽象模型,所述抽象模型为一个树形结构,抽象模型中包含翻译需要的数据;
S4、利用转换器将抽象模型转换成实际端的模型,并配置修正属性和逻辑块,利用生成器遍历模型数据,调用各个端生成器生成相应代码,通过代码仓库将生成器生成的代码推到对应仓库。
根据上述技术方案,所述可视化编辑器包括视图编辑器、逻辑编辑器;
所述视图编辑器负责组件树的实时渲染,属性修改和逻辑绑定;
所述渲染代理模块用于在渲染层构建一个代理的虚拟节点专门负责监听该虚拟节点的数据变化,然后重绘真实的渲染节点;所述交互模块用于属性修改,并传输至控制器;所述事件处理模块用于代理所有真实dom节点事件,然后根据事件类型和操作的节点触发相应命令,通过控制器去实际操作组件树;所述控制器用于维护所有响应式数据的引用,并保留操作历史用于回退用户操作;
所述逻辑编辑器底层使用了开源的Blockly编辑器,通过拖拽的方式,生成业务处理方法,在逻辑编排中添加了结构化定义、自动翻译和用户行为推测;
所述结构化定义用于帮助用户推断数据类型、增加生成代码的鲁棒性;所述自动翻译用于让用户自由命名函数或变量,在逻辑编辑器内部会翻译成语义化的命名;所述行为推测用于在用户触发特定操作时,逻辑编辑器自动帮特定操作构建部分逻辑,用户只需要补充其中可变的逻辑空缺。
根据上述技术方案,所述生成器在翻译过程中边翻译边进行依赖收集,并对依赖的版本兼容性进行合并和修正,生成完的代码在语义上有歧异或不符合用户理解的语法,会统一转换成抽象语法树进行修改,最终生成目标代码。
根据上述技术方案,所述可视化编辑器包括有组件配置模块;
所述可视化编辑器通过拖动及属性设置的方式修改页面数据包括:
通过组件配置模块在可视化编辑器编辑组件的过程中,对组件在画板上的位置进行分析。
根据上述技术方案,所述组件配置模块还包括组件分析子模块、组件分析子模块;
所述组件分析子模块还包括有历史数据库;
所述历史数据库存储组件属性修改时的管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值:
对历史数据库中存储管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值进行归一化处理,以管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值的归一化值为自变量,构建回归方程:
Figure 100002_DEST_PATH_IMAGE001
其中,
Figure 485408DEST_PATH_IMAGE002
为回归方程的回归系数,
Figure 594309DEST_PATH_IMAGE003
为误差因子;
Figure 221600DEST_PATH_IMAGE004
代表管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值的归一化值;
Figure 136466DEST_PATH_IMAGE005
代表组件属性修改概率;
设置组件属性修改概率阈值,在
Figure 408179DEST_PATH_IMAGE005
超出组件属性修改概率阈值时,启动画板规划子模块;
所述画板规划子模块还包括:
获取历史数据库中组件修改的属性;所述属性包括大小、颜色、位置;
以平均值作为属性修改的标准值,获取当前属性修改的预测值;所述预测值中包括大小修改值、位置移动概率;
Figure 78194DEST_PATH_IMAGE006
Figure 100002_DEST_PATH_IMAGE007
其中,
Figure 599306DEST_PATH_IMAGE008
代表预测的大小修改值,i代表序号,m代表数据总量,
Figure 100002_DEST_PATH_IMAGE009
代表第i次的属性修改的大小值;
Figure 521125DEST_PATH_IMAGE010
预测的位置移动概率值;
Figure 912924DEST_PATH_IMAGE011
代表在数据总量m中出现位置移动的次数;
根据
Figure 753841DEST_PATH_IMAGE008
Figure 27827DEST_PATH_IMAGE010
构建任意两组件之间的间隔区域:
Figure 487758DEST_PATH_IMAGE012
其中,
Figure 858697DEST_PATH_IMAGE013
代表任意两组件之间的间隔区域值,
Figure 480302DEST_PATH_IMAGE014
Figure 303902DEST_PATH_IMAGE014
分别为大小修改值与位置移动概率值的影响系数值;
根据任意两组件之间的间隔区域对画板进行排列,生成显示框,在管理员进行拖拽操作时亮起,指引管理员操作。
在上述技术方案中,利用页面停留时间与页面操作顺序判断管理员的页面使用习惯,对其进行属性修改的个性化进行分析,利用组件与页面比例值进行加权分析属性修改的概率,因为一般在组件页面的比例值较大的情况下,图形配置并不符合常规配置,因此管理员会进行属性修改,调节组件大小与位置,而在调节过程中,由于各组件之间的距离不好把控,容易出现误触现象,需要管理员多次人工调节位置,降低工作效率并且也极其不方便。
一种将多层级对象数据翻译为原生代码的开发系统,该系统包括可视化编辑器、资源中心、数据中心、解析器、转换器、生成器、代码仓库:
所述可视化编辑器用于通过拖动及属性设置的方式修改页面数据并实时进行预览;所述资源中心用于统筹所有静态的资源数据;如组件属性,方法块的配置等,这些资源大都存在版本控制,为了加快加载速度,本地会对已加载的资源进行缓存;而某些资源的升级需要迁移用户数据,资源中心会进行数据修正。所述数据中心用于对用户产生的数据和资源数据管理,将配置及插件初始化,对响应式的数据通过控制器对外暴露修改接口;所述解析器用于解析数据中心元数据,生成抽象模型,所述抽象模型为一个树形结构,抽象模型中包含翻译需要的数据;所述转换器用于将抽象模型转换成实际端的模型,并配置修正属性和逻辑块;所述生成器用于遍历模型数据,调用各个端生成器生成相应代码;所述代码仓库用于将生成器生成的代码推到对应仓库。
根据上述技术方案,所述可视化编辑器包括视图编辑器、逻辑编辑器;
所述视图编辑器负责组件树的实时渲染,属性修改和逻辑绑定;所述视图编辑器包括渲染代理模块、交互模块、控制器、事件处理模块、组件树;
所述渲染代理模块用于在渲染层构建一个代理的虚拟节点专门负责监听该虚拟节点的数据变化,然后重绘真实的渲染节点;所述交互模块用于属性修改,并传输至控制器;所述事件处理模块用于代理所有真实dom节点事件,然后根据事件类型和操作的节点触发相应命令,通过控制器去实际操作组件树;所述控制器用于维护所有响应式数据的引用,并保留操作历史用于回退用户操作;
所述逻辑编辑器底层使用了开源的Blockly编辑器,通过拖拽的方式,生成业务处理方法,在逻辑编排中添加了结构化定义、自动翻译和用户行为推测;
所述结构化定义用于帮助用户推断数据类型、增加生成代码的鲁棒性;所述自动翻译用于让用户自由命名函数或变量,在逻辑编辑器内部会翻译成语义化的命名;所述行为推测用于在用户触发特定操作时,逻辑编辑器自动帮特定操作构建部分逻辑,用户只需要补充其中可变的逻辑空缺。
根据上述技术方案,所述生成器在翻译过程中边翻译边进行依赖收集,并对依赖的版本兼容性进行合并和修正,生成完的代码在语义上有歧异或不符合用户理解的语法,会统一转换成抽象语法树进行修改,最终生成目标代码。
根据上述技术方案,所述视图编辑器还包括有组件配置模块;
所述组件配置模块用于在可视化编辑器编辑组件的过程中,对组件在画板上的位置进行分析,保证容纳组件数量最多的同时不出现覆盖和误触情况;
所述组件配置模块包括组件分析子模块、画板规划子模块;
所述组件分析子模块用于根据页面停留时间、页面操作顺序、组件与页面比例值生成预测组件属性修改概率;所述画板规划子模块用于根据预测组件属性修改概率对画板布局进行规划,显示各组件的拖拽位置。
根据上述技术方案,所述组件分析子模块还包括有历史数据库;
所述历史数据库存储组件属性修改时的管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值:
对历史数据库中存储管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值进行归一化处理,以管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值的归一化值为自变量,构建回归方程:
Figure 100002_DEST_PATH_IMAGE015
其中,
Figure 98682DEST_PATH_IMAGE002
为回归方程的回归系数,
Figure 996231DEST_PATH_IMAGE003
为误差因子;
Figure 54317DEST_PATH_IMAGE004
代表管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值的归一化值;
Figure 630792DEST_PATH_IMAGE005
代表组件属性修改概率;
设置组件属性修改概率阈值,在
Figure 256745DEST_PATH_IMAGE005
超出组件属性修改概率阈值时,启动画板规划子模块;
所述画板规划子模块还包括:
获取历史数据库中组件修改的属性;所述属性包括大小、颜色、位置;
以平均值作为属性修改的标准值,获取当前属性修改的预测值;所述预测值中包括大小修改值、位置移动概率;
Figure 71117DEST_PATH_IMAGE016
Figure 565683DEST_PATH_IMAGE007
其中,
Figure 363875DEST_PATH_IMAGE008
代表预测的大小修改值,i代表序号,m代表数据总量,
Figure 969300DEST_PATH_IMAGE009
代表第i次的属性修改的大小值;
Figure 575862DEST_PATH_IMAGE010
预测的位置移动概率值;
Figure 365963DEST_PATH_IMAGE011
代表在数据总量m中出现位置移动的次数;
根据
Figure 261238DEST_PATH_IMAGE008
Figure 529408DEST_PATH_IMAGE010
构建任意两组件之间的间隔区域:
Figure 459318DEST_PATH_IMAGE017
其中,
Figure 92425DEST_PATH_IMAGE013
代表任意两组件之间的间隔区域值,
Figure 599629DEST_PATH_IMAGE014
Figure 546857DEST_PATH_IMAGE014
分别为大小修改值与位置移动概率值的影响系数值;
根据任意两组件之间的间隔区域对画板进行排列,生成显示框,在管理员进行拖拽操作时亮起,指引管理员操作。
为了提高效率减少数据传输,会拉取相应远端仓库的代码进行差异比较,最终生成仓库的提交动作,将代码推到仓库中
与现有技术相比,本发明所达到的有益效果是:
本发明中可视化编辑器通过拖动及属性设置的方式修改页面数据并实时进行预览。通过可视化逻辑块的拖动生成逻辑方法,并与视图进行绑定从而完成复杂业务逻辑。代码通过解析、转换和生成最终生成源代码。生成器通过插件机制,以获得良好的扩展性。制作过程通过算法的优化和智能标注以达到良好的性能和极高的制作效率;
本发明提供了可视化的交互,降低使用门槛,让普通的用户通过拖拽即可完成业务逻辑的搭建,大大提高生产效率;提供了自动的逻辑伸缩,根据用户的操作自动帮用户生成逻辑和绑定关系;基于Blockly二次开发,提供了一套逻辑编排引擎,用于处理复杂业务逻辑;同时平台底层对标原生代码,几乎所有业务都能完成,并且由于直接产生源代码,私有化部署或者源码交付更加简单;另外生成代码对标实际手工代码,翻译过程中会对函数或者变量名称进行语义化处理,基于抽象的数据模型,如果框架升级只需要改翻译模块即可生成新的代码,不需要手工迁移代码;
本发明还能够解决手工代码日益冗余的问题,利用本系统可自动分析逻辑和视图等引用关系,一键删除冗余变量和方法;在性能优化方面,如样式,逻辑等,只需要在翻译层做一遍优化,整个项目都能得到提升;
本发明还提供页面与画板的优化方式,对组件大小、位置及属性修改概率进行预测,提高工作效率,进一步提升系统的简便性。
附图说明
附图用来提供对本发明的进一步理解,并且构成说明书的一部分,与本发明的实施例一起用于解释本发明,并不构成对本发明的限制。在附图中:
图1是本发明一种将多层级对象数据翻译为原生代码的开发系统的整体结构示意图;
图2是本发明一种将多层级对象数据翻译为原生代码的开发系统的视图编辑器结构示意图;
图3是本发明一种将多层级对象数据翻译为原生代码的开发系统的逻辑编辑器结构示意图;
图4是本发明一种将多层级对象数据翻译为原生代码的开发系统的数据结构流程示意图;
图5是本发明一种将多层级对象数据翻译为原生代码的开发系统的基础模型示意图;
图6是本发明一种将多层级对象数据翻译为原生代码的开发系统的实施例页面添加示意图;
图7是本发明一种将多层级对象数据翻译为原生代码的开发系统的实施例逻辑编辑器示意图;
图8是本发明一种将多层级对象数据翻译为原生代码的开发系统的实施例代码保存示意图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
请参阅图1-图8,在本实施例1中:
一种将多层级对象数据翻译为原生代码的开发方法,该方法包括以下步骤:
S1、可视化编辑器通过拖动及属性设置的方式修改页面数据并实时进行预览;
S2、利用资源中心统筹所有静态的资源数据,拉取资源及缓存至数据中心,数据中心管理用户产生的数据和资源数据,将配置及插件初始化,对响应式的数据通过控制器对外暴露修改接口;
S3、利用解析器解析数据中心元数据,生成抽象模型,所述抽象模型为一个树形结构,抽象模型中包含翻译需要的数据;
S4、利用转换器将抽象模型转换成实际端的模型,并配置修正属性和逻辑块,利用生成器遍历模型数据,调用各个端生成器生成相应代码,通过代码仓库将生成器生成的代码推到对应仓库。
所述可视化编辑器包括视图编辑器、逻辑编辑器;
所述视图编辑器负责组件树的实时渲染,属性修改和逻辑绑定;
所述渲染代理模块用于在渲染层构建一个代理的虚拟节点专门负责监听该虚拟节点的数据变化,然后重绘真实的渲染节点;所述交互模块用于属性修改,并传输至控制器;所述事件处理模块用于代理所有真实dom节点事件,然后根据事件类型和操作的节点触发相应命令,通过控制器去实际操作组件树;所述控制器用于维护所有响应式数据的引用,并保留操作历史用于回退用户操作;
所述逻辑编辑器底层使用了开源的Blockly编辑器,通过拖拽的方式,生成业务处理方法,在逻辑编排中添加了结构化定义、自动翻译和用户行为推测;
所述结构化定义用于帮助用户推断数据类型、增加生成代码的鲁棒性;所述自动翻译用于让用户自由命名函数或变量,在逻辑编辑器内部会翻译成语义化的命名;所述行为推测用于在用户触发特定操作时,逻辑编辑器自动帮特定操作构建部分逻辑,用户只需要补充其中可变的逻辑空缺。
所述生成器在翻译过程中边翻译边进行依赖收集,并对依赖的版本兼容性进行合并和修正,生成完的代码在语义上有歧异或不符合用户理解的语法,会统一转换成抽象语法树进行修改,最终生成目标代码。
所述可视化编辑器包括有组件配置模块;
所述可视化编辑器通过拖动及属性设置的方式修改页面数据包括:
通过组件配置模块在可视化编辑器编辑组件的过程中,对组件在画板上的位置进行分析。
所述组件配置模块还包括组件分析子模块、组件分析子模块;
所述组件分析子模块还包括有历史数据库;
所述历史数据库存储组件属性修改时的管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值:
对历史数据库中存储管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值进行归一化处理,以管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值的归一化值为自变量,构建回归方程:
Figure 721486DEST_PATH_IMAGE015
其中,
Figure 463177DEST_PATH_IMAGE002
为回归方程的回归系数,
Figure 457678DEST_PATH_IMAGE003
为误差因子;
Figure 943017DEST_PATH_IMAGE004
代表管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值的归一化值;
Figure 972153DEST_PATH_IMAGE005
代表组件属性修改概率;
设置组件属性修改概率阈值,在
Figure 884745DEST_PATH_IMAGE005
超出组件属性修改概率阈值时,启动画板规划子模块;
所述画板规划子模块还包括:
获取历史数据库中组件修改的属性;所述属性包括大小、颜色、位置;
以平均值作为属性修改的标准值,获取当前属性修改的预测值;所述预测值中包括大小修改值、位置移动概率;
Figure 632122DEST_PATH_IMAGE016
Figure 717889DEST_PATH_IMAGE007
其中,
Figure 476898DEST_PATH_IMAGE008
代表预测的大小修改值,i代表序号,m代表数据总量,
Figure 685025DEST_PATH_IMAGE009
代表第i次的属性修改的大小值;
Figure 529485DEST_PATH_IMAGE010
预测的位置移动概率值;
Figure 481260DEST_PATH_IMAGE011
代表在数据总量m中出现位置移动的次数;
根据
Figure 360354DEST_PATH_IMAGE008
Figure 739383DEST_PATH_IMAGE010
构建任意两组件之间的间隔区域:
Figure 867876DEST_PATH_IMAGE017
其中,
Figure 498709DEST_PATH_IMAGE013
代表任意两组件之间的间隔区域值,
Figure 356943DEST_PATH_IMAGE014
Figure 47819DEST_PATH_IMAGE014
分别为大小修改值与位置移动概率值的影响系数值;
根据任意两组件之间的间隔区域对画板进行排列,生成显示框,在管理员进行拖拽操作时亮起,指引管理员操作。
利用本系统生成代码流程如下:
新建页面:
进入可视化编辑器,点击“页面”标签的右上角“加号”图标,可创建一个新的页面;“双击”页面名称可以打开页面;“单击”页面名称可以编辑页面名称;“右击”页面名称,可以看到更多操作,如图5所示
编辑页面:
打开页面,页面左侧为“资源栏”,你可以拖动“组件”放置到中间的空白部分,我们称之为 “画板”,在制作 web 时,你可以认为它是用户的浏览器窗口。
视图编辑器:
当“组件”被放置到“画板”上面后,鼠标单击即可选中组件,在右侧会展示该组件的相关 “属性”、“交互”、“控制”、“注释”。通过这些设置,你可以控制你的“组件”的表达形式。通过各种“组件”的组合,会呈现出完全不同的效果。
逻辑编辑器:
逻辑是整个页面的一个部分,它和视图部分相互影响,共同实现产品意图。
点击顶部的“逻辑”按钮,会弹出“逻辑编辑器”。
创建编辑方法:
在右下角创建一个方法,这个方法可以被视图部分的组件交互所调用,也可以被“过程” (生命周期)所调用。
创建使用变量:
如果你的方法使用到了变量,你可以在左下角切换到“变量”标签,创建你所需要的变量。
保存:
应用的保存支持快捷键“ctrl/command+s”,这是一种快速保存方式,会将你制作的数据快速保存,但不会生成代码。点击右上角的“保存”按钮,输入“变更描述”,可以生成代码。
在本实施例2中:
一种将多层级对象数据翻译为原生代码的开发系统,该系统包括可视化编辑器、资源中心、数据中心、解析器、转换器、生成器、代码仓库:
可视化编辑器包括视图编辑器、逻辑编辑器;
视图编辑器负责组件树的实时渲染,属性修改和逻辑绑定;视图编辑器包括渲染代理模块、交互模块、控制器、事件处理模块、组件树;
渲染代理模块用于在渲染层构建一个代理的虚拟节点专门负责监听该虚拟节点的数据变化,然后重绘真实的渲染节点;交互模块用于属性修改,并传输至控制器;事件处理模块用于代理所有真实dom节点事件,然后根据事件类型和操作的节点触发相应命令,通过控制器去实际操作组件树;控制器用于维护所有响应式数据的引用,并保留操作历史用于回退用户操作;
逻辑编辑器底层使用了开源的Blockly编辑器,通过拖拽的方式,生成业务处理方法,在逻辑编排中添加了结构化定义、自动翻译和用户行为推测;
结构化定义用于帮助用户推断数据类型、增加生成代码的鲁棒性;自动翻译用于让用户自由命名函数或变量,在逻辑编辑器内部会翻译成语义化的命名;行为推测用于在用户触发特定操作时,逻辑编辑器自动帮特定操作构建部分逻辑,用户只需要补充其中可变的逻辑空缺。
生成器在翻译过程中边翻译边进行依赖收集,并对依赖的版本兼容性进行合并和修正,生成完的代码在语义上有歧异或不符合用户理解的语法,会统一转换成抽象语法树进行修改,最终生成目标代码。
视图编辑器还包括有组件配置模块;
组件配置模块包括组件分析子模块、画板规划子模块;
组件分析子模块还包括有历史数据库;
历史数据库存储组件属性修改时的管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值:
对历史数据库中存储管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值进行归一化处理,以管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值的归一化值为自变量,构建回归方程:
Figure 725925DEST_PATH_IMAGE001
其中,
Figure 894869DEST_PATH_IMAGE002
为回归方程的回归系数,
Figure 279714DEST_PATH_IMAGE003
为误差因子;
Figure 545DEST_PATH_IMAGE004
代表管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值的归一化值;
Figure 572472DEST_PATH_IMAGE005
代表组件属性修改概率;
设置组件属性修改概率阈值,在
Figure 669741DEST_PATH_IMAGE005
超出组件属性修改概率阈值时,启动画板规划子模块;
画板规划子模块还包括:
获取历史数据库中组件修改的属性;所述属性包括大小、颜色、位置;
以平均值作为属性修改的标准值,获取当前属性修改的预测值;所述预测值中包括大小修改值、位置移动概率;
Figure 112355DEST_PATH_IMAGE006
Figure 269667DEST_PATH_IMAGE007
其中,
Figure 63310DEST_PATH_IMAGE008
代表预测的大小修改值,i代表序号,m代表数据总量,
Figure 698691DEST_PATH_IMAGE009
代表第i次的属性修改的大小值;
Figure 261391DEST_PATH_IMAGE010
预测的位置移动概率值;
Figure 589604DEST_PATH_IMAGE011
代表在数据总量m中出现位置移动的次数;
根据
Figure 339385DEST_PATH_IMAGE008
Figure 44036DEST_PATH_IMAGE010
构建任意两组件之间的间隔区域:
Figure 726821DEST_PATH_IMAGE012
其中,
Figure 960356DEST_PATH_IMAGE013
代表任意两组件之间的间隔区域值,
Figure 463013DEST_PATH_IMAGE014
Figure 705775DEST_PATH_IMAGE014
分别为大小修改值与位置移动概率值的影响系数值;
根据任意两组件之间的间隔区域对画板进行排列,生成显示框,在管理员进行拖拽操作时亮起,指引管理员操作。
需要说明的是,在本文中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。
最后应说明的是:以上所述仅为本发明的优选实施例而已,并不用于限制本发明,尽管参照前述实施例对本发明进行了详细的说明,对于本领域的技术人员来说,其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换。凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。

Claims (10)

1.一种将多层级对象数据翻译为原生代码的开发方法,其特征在于:该方法包括以下步骤:
S1、可视化编辑器通过拖动及属性设置的方式修改页面数据并实时进行预览;
S2、利用资源中心统筹所有静态的资源数据,拉取资源及缓存至数据中心,数据中心管理用户产生的数据和资源数据,将配置及插件初始化,对响应式的数据通过控制器对外暴露修改接口;
S3、利用解析器解析数据中心元数据,生成抽象模型,所述抽象模型为一个树形结构,抽象模型中包含翻译需要的数据;
S4、利用转换器将抽象模型转换成实际端的模型,并配置修正属性和逻辑块,利用生成器遍历模型数据,调用各个端生成器生成相应代码,通过代码仓库将生成器生成的代码推到对应仓库。
2.根据权利要求1所述的一种将多层级对象数据翻译为原生代码的开发方法,其特征在于:所述可视化编辑器包括视图编辑器、逻辑编辑器;
所述视图编辑器负责组件树的实时渲染,属性修改和逻辑绑定;所述视图编辑器包括渲染代理模块、交互模块、控制器、事件处理模块、组件树;
所述渲染代理模块用于在渲染层构建一个代理的虚拟节点专门负责监听该虚拟节点的数据变化,然后重绘真实的渲染节点;所述交互模块用于属性修改,并传输至控制器;所述事件处理模块用于代理所有真实dom节点事件,然后根据事件类型和操作的节点触发相应命令,通过控制器去实际操作组件树;所述控制器用于维护所有响应式数据的引用,并保留操作历史用于回退用户操作;
所述逻辑编辑器底层使用了开源的Blockly编辑器,通过拖拽的方式,生成业务处理方法,在逻辑编排中添加了结构化定义、自动翻译和用户行为推测;
所述结构化定义用于帮助用户推断数据类型、增加生成代码的鲁棒性;所述自动翻译用于让用户自由命名函数或变量,在逻辑编辑器内部会翻译成语义化的命名;所述行为推测用于在用户触发特定操作时,逻辑编辑器自动帮特定操作构建部分逻辑,用户只需要补充其中可变的逻辑空缺。
3.根据权利要求1所述的一种将多层级对象数据翻译为原生代码的开发方法,其特征在于:所述生成器在翻译过程中边翻译边进行依赖收集,并对依赖的版本兼容性进行合并和修正,生成完的代码在语义上有歧异或不符合用户理解的语法,会统一转换成抽象语法树进行修改,最终生成目标代码。
4.根据权利要求1所述的一种将多层级对象数据翻译为原生代码的开发方法,其特征在于:所述可视化编辑器包括有组件配置模块;
所述可视化编辑器通过拖动及属性设置的方式修改页面数据包括:
通过组件配置模块在可视化编辑器编辑组件的过程中,对组件在画板上的位置进行分析。
5.根据权利要求4所述的一种将多层级对象数据翻译为原生代码的开发方法,其特征在于:所述组件配置模块还包括组件分析子模块、组件分析子模块;
所述组件分析子模块还包括有历史数据库;
所述历史数据库存储组件属性修改时的管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值:
对历史数据库中存储管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值进行归一化处理,以管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值的归一化值为自变量,构建回归方程:
Figure DEST_PATH_IMAGE001
其中,
Figure 451319DEST_PATH_IMAGE002
为回归方程的回归系数,
Figure 121335DEST_PATH_IMAGE003
为误差因子;
Figure 845708DEST_PATH_IMAGE004
代表管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值的归一化值;
Figure 626583DEST_PATH_IMAGE005
代表组件属性修改概率;
设置组件属性修改概率阈值,在
Figure 18381DEST_PATH_IMAGE005
超出组件属性修改概率阈值时,启动画板规划子模块;
所述画板规划子模块还包括:
获取历史数据库中组件修改的属性;所述属性包括大小、颜色、位置;
以平均值作为属性修改的标准值,获取当前属性修改的预测值;所述预测值中包括大小修改值、位置移动概率;
Figure 531402DEST_PATH_IMAGE006
Figure DEST_PATH_IMAGE007
其中,
Figure 539809DEST_PATH_IMAGE008
代表预测的大小修改值,i代表序号,m代表数据总量,
Figure DEST_PATH_IMAGE009
代表第i次的属性修改的大小值;
Figure 265320DEST_PATH_IMAGE010
预测的位置移动概率值;
Figure 636258DEST_PATH_IMAGE011
代表在数据总量m中出现位置移动的次数;
根据
Figure 320180DEST_PATH_IMAGE008
Figure 19146DEST_PATH_IMAGE010
构建任意两组件之间的间隔区域:
Figure 407402DEST_PATH_IMAGE012
其中,
Figure 508213DEST_PATH_IMAGE013
代表任意两组件之间的间隔区域值,
Figure 690933DEST_PATH_IMAGE014
Figure 888913DEST_PATH_IMAGE014
分别为大小修改值与位置移动概率值的影响系数值;
根据任意两组件之间的间隔区域对画板进行排列,生成显示框,在管理员进行拖拽操作时亮起,指引管理员操作。
6.一种将多层级对象数据翻译为原生代码的开发系统,其特征在于:该系统包括可视化编辑器、资源中心、数据中心、解析器、转换器、生成器、代码仓库:
所述可视化编辑器用于通过拖动及属性设置的方式修改页面数据并实时进行预览;所述资源中心用于统筹所有静态的资源数据;所述数据中心用于对用户产生的数据和资源数据管理,将配置及插件初始化,对响应式的数据通过控制器对外暴露修改接口;所述解析器用于解析数据中心元数据,生成抽象模型,所述抽象模型为一个树形结构,抽象模型中包含翻译需要的数据;所述转换器用于将抽象模型转换成实际端的模型,并配置修正属性和逻辑块;所述生成器用于遍历模型数据,调用各个端生成器生成相应代码;所述代码仓库用于将生成器生成的代码推到对应仓库。
7.根据权利要求6所述的一种将多层级对象数据翻译为原生代码的开发系统,其特征在于:所述可视化编辑器包括视图编辑器、逻辑编辑器;
所述视图编辑器负责组件树的实时渲染,属性修改和逻辑绑定;所述视图编辑器包括渲染代理模块、交互模块、控制器、事件处理模块、组件树;
所述渲染代理模块用于在渲染层构建一个代理的虚拟节点专门负责监听该虚拟节点的数据变化,然后重绘真实的渲染节点;所述交互模块用于属性修改,并传输至控制器;所述事件处理模块用于代理所有真实dom节点事件,然后根据事件类型和操作的节点触发相应命令,通过控制器去实际操作组件树;所述控制器用于维护所有响应式数据的引用,并保留操作历史用于回退用户操作;
所述逻辑编辑器底层使用了开源的Blockly编辑器,通过拖拽的方式,生成业务处理方法,在逻辑编排中添加了结构化定义、自动翻译和用户行为推测;
所述结构化定义用于帮助用户推断数据类型、增加生成代码的鲁棒性;所述自动翻译用于让用户自由命名函数或变量,在逻辑编辑器内部会翻译成语义化的命名;所述行为推测用于在用户触发特定操作时,逻辑编辑器自动帮特定操作构建部分逻辑,用户只需要补充其中可变的逻辑空缺。
8.根据权利要求6所述的一种将多层级对象数据翻译为原生代码的开发系统,其特征在于:所述生成器在翻译过程中边翻译边进行依赖收集,并对依赖的版本兼容性进行合并和修正,生成完的代码在语义上有歧异或不符合用户理解的语法,会统一转换成抽象语法树进行修改,最终生成目标代码。
9.根据权利要求7所述的一种将多层级对象数据翻译为原生代码的开发系统,其特征在于:所述视图编辑器还包括有组件配置模块;
所述组件配置模块用于在可视化编辑器编辑组件的过程中,对组件在画板上的位置进行分析;
所述组件配置模块包括组件分析子模块、画板规划子模块;
所述组件分析子模块用于根据页面停留时间、页面操作顺序、组件与页面比例值生成预测组件属性修改概率;所述画板规划子模块用于根据预测组件属性修改概率对画板布局进行规划,显示各组件的拖拽位置。
10.根据权利要求9所述的一种将多层级对象数据翻译为原生代码的开发系统,其特征在于:
所述组件分析子模块还包括有历史数据库;
所述历史数据库存储组件属性修改时的管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值:
对历史数据库中存储管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值进行归一化处理,以管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值的归一化值为自变量,构建回归方程:
Figure DEST_PATH_IMAGE015
其中,
Figure 18543DEST_PATH_IMAGE002
为回归方程的回归系数,
Figure 973861DEST_PATH_IMAGE003
为误差因子;
Figure 593061DEST_PATH_IMAGE004
代表管理员每一次的页面停留时间、页面操作顺序、组件与页面比例值的归一化值;
Figure 266619DEST_PATH_IMAGE005
代表组件属性修改概率;
设置组件属性修改概率阈值,在
Figure 731099DEST_PATH_IMAGE005
超出组件属性修改概率阈值时,启动画板规划子模块;
所述画板规划子模块还包括:
获取历史数据库中组件修改的属性;所述属性包括大小、颜色、位置;
以平均值作为属性修改的标准值,获取当前属性修改的预测值;所述预测值中包括大小修改值、位置移动概率;
Figure 540923DEST_PATH_IMAGE016
Figure 331024DEST_PATH_IMAGE007
其中,
Figure 23037DEST_PATH_IMAGE008
代表预测的大小修改值,i代表序号,m代表数据总量,
Figure 432153DEST_PATH_IMAGE009
代表第i次的属性修改的大小值;
Figure 486696DEST_PATH_IMAGE010
预测的位置移动概率值;
Figure 57486DEST_PATH_IMAGE011
代表在数据总量m中出现位置移动的次数;
根据
Figure 830270DEST_PATH_IMAGE008
Figure 511918DEST_PATH_IMAGE010
构建任意两组件之间的间隔区域:
Figure 420968DEST_PATH_IMAGE012
其中,
Figure 428239DEST_PATH_IMAGE013
代表任意两组件之间的间隔区域值,
Figure 94843DEST_PATH_IMAGE014
Figure 970395DEST_PATH_IMAGE014
分别为大小修改值与位置移动概率值的影响系数值;
根据任意两组件之间的间隔区域对画板进行排列,生成显示框,在管理员进行拖拽操作时亮起,指引管理员操作。
CN202210380014.5A 2022-04-12 2022-04-12 一种将多层级对象数据翻译为原生代码的开发系统和方法 Active CN114461204B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210380014.5A CN114461204B (zh) 2022-04-12 2022-04-12 一种将多层级对象数据翻译为原生代码的开发系统和方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210380014.5A CN114461204B (zh) 2022-04-12 2022-04-12 一种将多层级对象数据翻译为原生代码的开发系统和方法

Publications (2)

Publication Number Publication Date
CN114461204A true CN114461204A (zh) 2022-05-10
CN114461204B CN114461204B (zh) 2022-06-17

Family

ID=81418597

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210380014.5A Active CN114461204B (zh) 2022-04-12 2022-04-12 一种将多层级对象数据翻译为原生代码的开发系统和方法

Country Status (1)

Country Link
CN (1) CN114461204B (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116414375A (zh) * 2023-06-07 2023-07-11 长威信息科技发展股份有限公司 一种导出设计版源码的方法和系统
CN117236632A (zh) * 2023-10-08 2023-12-15 常州同泰生物药业科技股份有限公司 一种狂犬病疫苗生产线物料管控方法
CN117289914A (zh) * 2023-11-22 2023-12-26 南京飓风引擎信息技术有限公司 基于SpringBoot框架的数据转换系统及方法

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170109933A1 (en) * 2015-10-14 2017-04-20 Prime Software Systems, Inc. Visualizing the structure and execution of a program
CN108597014A (zh) * 2018-04-03 2018-09-28 万玉帝 一种基于可视化编程的跨平台渲染效果的编辑系统
US10788957B1 (en) * 2019-08-22 2020-09-29 Intel Corporation Web page designing with sandboxed custom editors
US20210255842A1 (en) * 2020-02-18 2021-08-19 Trixta, Inc. Low-Code Development Platform
CN113504908A (zh) * 2021-07-19 2021-10-15 中国建设银行股份有限公司 业务代码生成方法、装置、电子设备及计算机可读介质
CN113961183A (zh) * 2021-10-22 2022-01-21 平安银行股份有限公司 可视化编程方法、装置、设备及存储介质

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170109933A1 (en) * 2015-10-14 2017-04-20 Prime Software Systems, Inc. Visualizing the structure and execution of a program
CN108597014A (zh) * 2018-04-03 2018-09-28 万玉帝 一种基于可视化编程的跨平台渲染效果的编辑系统
US10788957B1 (en) * 2019-08-22 2020-09-29 Intel Corporation Web page designing with sandboxed custom editors
US20210255842A1 (en) * 2020-02-18 2021-08-19 Trixta, Inc. Low-Code Development Platform
CN113504908A (zh) * 2021-07-19 2021-10-15 中国建设银行股份有限公司 业务代码生成方法、装置、电子设备及计算机可读介质
CN113961183A (zh) * 2021-10-22 2022-01-21 平安银行股份有限公司 可视化编程方法、装置、设备及存储介质

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
IVAN BACHER 等: ""The Code Mini-Map Visualisation: Encoding Conceptual Structures Within Source Code"", 《2018 IEEE WORKING CONFERENCE ON SOFTWARE VISUALIZATION》 *
刘炳元: "《一种可视化编程语言的低代码开发方法实践》", 《福建电脑》 *
徐飞: ""浅谈低代码平台涉及的一些技术选型"", 《HTTPS://ZHUANLAN.ZHIHU.COM/P/182211043》 *

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116414375A (zh) * 2023-06-07 2023-07-11 长威信息科技发展股份有限公司 一种导出设计版源码的方法和系统
CN116414375B (zh) * 2023-06-07 2023-09-01 长威信息科技发展股份有限公司 一种导出设计版源码的方法和系统
CN117236632A (zh) * 2023-10-08 2023-12-15 常州同泰生物药业科技股份有限公司 一种狂犬病疫苗生产线物料管控方法
CN117289914A (zh) * 2023-11-22 2023-12-26 南京飓风引擎信息技术有限公司 基于SpringBoot框架的数据转换系统及方法
CN117289914B (zh) * 2023-11-22 2024-02-02 南京飓风引擎信息技术有限公司 基于SpringBoot框架的数据转换系统及方法

Also Published As

Publication number Publication date
CN114461204B (zh) 2022-06-17

Similar Documents

Publication Publication Date Title
CN114461204B (zh) 一种将多层级对象数据翻译为原生代码的开发系统和方法
US6466240B1 (en) Method for visually writing programs or scripts that transform structured text presented as a tree
US5555408A (en) Knowledge based information retrieval system
RU2537776C2 (ru) Основанная на разметке расширяемость для интерфейсов пользователя
US7904821B1 (en) Graphical user interface that is convertible at runtime
JPH0658624B2 (ja) グラフィカル・ユーザ・インターフェース管理装置
CN116225429A (zh) 基于拖拽式组件框架的ipage网页式低代码开发平台
US20090077091A1 (en) System for development and hosting of network applications
CN101334728A (zh) 一种基于xml文档描述的界面生成方法和平台
JP2008512794A (ja) オブジェクト処理グラフアプリケーション開発システム
CN103383645A (zh) 代码生成方法及系统
CN102591659A (zh) 一种移动终端主界面上的微件实现方法及其管理方法
JP2009535730A (ja) プログラミング言語における式ツリーの深い埋め込みのためのジェネリックインターフェイス
CN101776999A (zh) 软件系统开发实施平台
CN112764743B (zh) 一种基于数据模型驱动自动生成软件的方法
JP2020017277A (ja) グラフィックインタフェースに基づく、イベント動作をプログラミングするwebレポーティングデザインシステム
US7958073B2 (en) Software and methods for task method knowledge hierarchies
CN115202626A (zh) 一种支持多技术栈组件的低代码前端开发方法
CN110377371B (zh) 一种基于Web标签的样式表系统管理方法
Paganelli et al. A tool for creating design models from web site code
CN115935944A (zh) 一种跨平台的标准文件树形结构生成方法与展示控件
US20050081193A1 (en) System and method for interacting with computer programming languages at semantic level
CN113655996B (zh) 一种基于需求模型的企业级系统生成方法
CN116360766A (zh) 一种基于ddd可视化设计器的低代码系统和装置
Cooper Integrating dataflow evaluation into a practical higher-order call-by-value language

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant