CN115617327A - 低代码页面搭建系统、方法及计算机可读存储介质 - Google Patents

Abstract

本发明公开了一种低代码页面搭建系统、方法及计算机可读存储介质，系统包括：数据模型表单配置器，用于配置表单之间的关系类型并配置所述表单的每个控件对应的数据库表列名称和目标组件，以得到数据模型；可视化页面编辑器，用于低代码编辑各种应用页面；可视化页面编辑器包括可拖拽画布和模型驱动型组件；所述可拖拽画布用于将所述模型驱动型组件和所述数据模型绑定以得到表格列表页并基于所述通用搭建协议得到生成的JSON数据；动态渲染引擎，用于渲染所述表格列表页以预览所述表格列表页对应的目标页面；代码生成器，用于将所述JSON数据转换为用户端源码并导出到所述代码仓库。本发明既能够快速搭建所需页面又具有高扩展性。

Description

低代码页面搭建系统、方法及计算机可读存储介质

技术领域

本发明涉及前端开发技术领域，尤其涉及一种低代码页面搭建系统、方法及计算机可读存储介质。

背景技术

随着企业数字化、信息化市场规模的扩大，越来越多的企业寻求更高效的开发平台来实现应用类软件的开发。尤其是中台业务的爆炸性增长给技术团队提出了巨大的挑战。无法满足快速迭代的中台业务需求、体验差是各企业业务发展中名列前茅的痛点之一。解决了快速建站和优质体验打造问题，会成为企业信息化的助力。相对于传统开发，速度更快、成本更低的低代码开发平台越来越多。目前市面上的低代码平台种类繁多，应用在中后台领域的aPass类平台就有零代码、宜搭类通用型低代码平台等；通常它们的实现是将底层架构、页面元素高度抽象化为可视化界面，通过组件、业务模板、拖拽式设计快速构建应用。

但是，这些低码的开发方法存在以下缺陷：目前所谓的无代码平台或者低代码平台往往自定义能力及可扩展性差的问题。

发明内容

本发明的主要目的在于提供一种低代码页面搭建系统、方法及计算机可读存储介质，旨在解决现有无代码平台或者低代码平台自定义能力及可扩展性差的技术问题。

为实现上述目的，本发明提供一种低代码页面搭建系统，所述低代码页面搭建系统包括：

数据模型表单配置器，用于配置表单之间的关系类型并配置所述表单的每个控件对应的数据库表列名称和目标组件，以得到数据模型；

可视化页面编辑器，用于低代码编辑各种应用页面；

可视化页面编辑器包括可拖拽画布和模型驱动型组件；

所述可拖拽画布用于将所述模型驱动型组件和所述数据模型绑定以得到表格列表页并基于预设的通用搭建协议得到生成的JSON数据；

动态渲染引擎，用于渲染所述表格列表页以得到所述表格列表页对应的目标页面；

代码生成器，用于将所述JSON数据转换为用户端源码并导出到代码仓库。

可选地，所述低代码页面搭建系统还包括：抽象工具集合模块，所述抽象工具集合模块包括状态管理单元、权限控制单元以及操作历史记录单元；所述模型驱动型组件包括CRUD表格组件。

可选地，所述可拖拽画布还包括渲染层和交互层、吸附单元和参考线；所述可视化页面编辑器还包含：组件配置面板和模型驱动表格配置器；

所述组件配置面板用于配置所述模型驱动型组件的组件属性，所述组件属性包括：表格样式、事件、动态接口配置、布局、列表操作栏；

所述模型驱动表格配置器用于增添删改所述表格列表页。

可选地，所述数据模型表单配置器包括：数据库字段属性配置单元、组件类别配置单元、搜索查询项配置单元以及表单校验配置单元。

可选地，所述数据模型的模型属性包括：数据库字段及类型、组件类型、表单校验项、搜索查询项、下拉组件数据字典映射、页面显示以及隐藏字段。

可选地，所述通用搭建协议为定义组件结构、页面层级结构、数据源以及事件的JSON Schema约束协议，所述JSON Schema约束协议对应的代码全部为JavaScript语法。

可选地，所述动态渲染引擎包括运行时解析引擎；

所述运行时解析引擎基于所述JSON Schema约束协议解析和预览目标页面，并在所述目标页面中嵌入iframe，当所述JSON数据变更，根据所述JSON Schema约束协议中的描述信息将所述模型驱动型组件分类加载和属性处理，并将所述模型驱动型组件基于grid网格系统的布局处理及组件导入按需加载，递归每一个加载节点，同时加载对应的JavaScript逻辑，创建对象，并通过可拖拽画布中的当前模型驱动型组件渲染得到新的目标页面。

此外，为实现上述目的，本发明还提供一种低代码页面搭建方法，所述低代码页面搭建方法应用于低代码页面搭建系统，所述方法包括以下步骤：

配置表单的每个控件对应的数据库表列名称和目标组件以得到数据模型；

将模型驱动型组件和所述数据模型绑定以得到表格列表页并基于预设的通用搭建协议以得到生成的JSON数据；

渲染所述表格列表页以预览所述表格列表页对应的目标页面；

将所述JSON数据转换为用户端源码并导出到代码仓库。

此外，为实现上述目的，本发明还提供一种智能设备，包括处理器、存储器、以及存储在所述存储器上的可被所述处理器执行的低代码页面搭建程序，其中，所述低代码页面搭建程序被所述处理器执行时，实现如上所述的低代码页面搭建方法的步骤。

本发明还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有低代码页面搭建程序，其中，所述低代码页面搭建程序被处理器执行时，实现如上所述的低代码页面搭建方法的步骤。

本发明技术方案中的低代码页面搭建系统，包括：数据模型表单配置器，用于配置表单之间的关系类型并配置所述表单的每个控件对应的数据库表列名称和目标组件，以得到数据模型；可视化页面编辑器，用于低代码编辑各种应用页面；可视化页面编辑器包括可拖拽画布和模型驱动型组件；所述可拖拽画布用于将所述模型驱动型组件和所述数据模型绑定以得到表格列表页并基于预设的通用搭建协议得到生成的JSON数据；动态渲染引擎，用于渲染所述表格列表页以得到所述表格列表页对应的目标页面；代码生成器，用于将所述JSON数据转换为用户端源码并导出到代码仓库。

核心地，本发明主要通过在低代码页面搭建系统中的数据模型表单从而便于开发人员快速创建和自定义各种数据模型，以及便于配置各个表单之间的对应关系；通过低代码页面搭建中的模型驱动型组件，将模型驱动型组件拖拽至可拖拽画布的时候绑定该数据模型，就可以快速创建一个带增删改查功能的满足通用型场景的表格列表页，极大地增强了自定义能力和拓展性，同时相比于现有的通过拖拽设计数据模型或在页面编辑器上从无到有拖拽CRUD页面减少了繁复的拖拽流程及需求对接成本。在低代码页面搭建系统中配置了动态渲染引擎，能够实时预览各个组件组合所形成的页面结果，便于开发人员能够实时掌握页面搭建状况以及需要在用户层面展示的用户页面；通过低代码页面搭建系统中的代码生成器，能够将在模型驱动型组件和数据模型绑定之后得到的JSON数据转换为用户端的源码从而搭建好的页面能够为多端用户所使用，提高页面搭建和发布效率。

附图说明

图1为本发明实施例方案涉及的智能设备的硬件运行环境的结构示意图；

图2为本发明低代码页面搭建方法第一实施例的流程示意图；

图3为本发明低代码页面搭建系统框架结构示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明实施例提出一种智能设备。智能设备可以包括个人计算机、手机、平板等智能设备，在此不做限制。

如图1所示，图1是本发明实施例方案涉及的智能设备的硬件运行环境的结构示意图。

如图1所示，该智能设备可以包括：处理器1001，例如CPU，网络接口1004，用户接口1003，存储器1005，通信总线1002。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示器(Display)、输入单元比如控制面板，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如WIFI接口)。存储器1005可以是高速RAM存储器，也可以是稳定的存储器(non-volatile memory)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。作为一种计算机存储介质的存储器1005中可以包括低代码页面搭建程序。

本领域技术人员可以理解，图1中示出的硬件结构并不构成对设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

继续参照图1，图1中作为一种计算机可读存储介质的存储器1005可以包括操作系统、用户接口模块、网络通信模块以及低代码页面搭建程序。

在图1中，网络通信模块主要用于连接服务器，与服务器进行数据通信；而处理器1001可以调用存储器1005中存储的低代码页面搭建程序，并执行如下步骤：

配置表单的每个控件对应的数据库表列名称和目标组件以得到数据模型；

将模型驱动型组件和所述数据模型绑定以得到表格列表页并基于预设的通用搭建协议以得到生成的JSON数据；

渲染所述表格列表页以预览所述表格列表页对应的目标页面；

将所述JSON数据转换为用户端源码并导出到代码仓库。

基于上述控制器的硬件结构，提出本发明低代码页面搭建方法的各个实施例。

本发明实施例提供一种低代码页面搭建系统。

请参照图3，图3为本发明低代码页面搭建系统的框架结构示意图；在本发明第一实施例中，低代码页面搭建系统应用于前端的中后台场景；低代码页面搭建系统包括：可视化页面编辑器、数据模型表单配置器、通用搭建协议、动态渲染引擎以及代码仓库；所述可视化页面编辑器包括模型驱动型组件；所述代码仓库包括代码生成器；

在本实施例中，可视化页面编辑器也即图3中的低代码编辑器，用于低代码编辑各种应用页面；可以通过可视化页面编辑器中的组件资源单元获取到各种模型驱动型组件，还可以通过可视化页面编辑器中的组件配置面板配置模型驱动型组件的属性。

在一实施例中，所述模型驱动型组件包括CRUD表格组件，还可以包括其他数据组件、UI组件、逻辑组件等组件。对于CRUD表格组件，在搭建页面有大量表格的时候，它可以把一个完整的增删改查全部封装，从而在得到的表格列表页进行增删改查等自定义操作，方便快捷，不需要有大量的拖拽操作。

所述数据模型表单配置器，用于配置表单之间的关系类型并配置所述表单的每个控件对应的数据库表列名称和目标组件，以得到数据模型；

在本实施中，如图3所示，数据模型表单配置器可以用来对在线表单配置表关系，也就是表单之间的关系类型，这里的关系类型包括但不想限于：一对多、多对一、多对多等表关系的映射，例如对于一对多的表关系可映射为树形表格列表组件，进而丰富了业务场景。数据模型表单配置器可以用来配置所述表单的每个控件对应的数据库表列名称和目标组件，将表单和各个具体的模型驱动型组件关联对应起来，数据模型表单配置器还用于配置数据库属性字段及类型、组件类型、表单校验项、搜索查询项、下拉组件数据字典映射、页面显示和隐藏字段等模型属性，在通过数据模型表单配置器配置完成之后就得到了所需的数据模型。

在一实施例中，所述数据模型表单配置器包含数据库字段属性配置单元、组件类别配置单元、搜索查询项配置单元以及表单校验配置单元。其中数据库字段属性配置单元用于配置数据库属性字段及类型，所述组件类别配置单元用于配置组件类型，所述搜索查询项配置单元用于配置搜索查询项，所述表单校验配置单元用于配置表单校验项。

此外，数据模型表单配置器还使用聚合分发策略对数据源管理进行了优化，使得页面同类请求在发出前合并，响应后拆包分发，依靠一个简单的请求队列和请求缓存避免了页面内的重复请求，基于数据模型表单配置器从而能够覆盖绝大多数的中后台业务场景中的“0代码”或低代码，降低了开发成本提高了搭建页面的效率。

所述可视化页面编辑器还包括可拖拽画布，所述可拖拽画布用于将所述模型驱动型组件和所述数据模型绑定以得到表格列表页并基于预设的通用搭建协议得到生成的JSON数据；

本实施例中的可视化页面编辑器即对应于图3中的低代码编辑器，在低代码编辑器中的画布区域为可拖拽画布，开发人员可根据自己的习惯在开发界面上将其进行自由拖拽，在编辑器界面将CRUD表格组件拖拽至画布的时候绑定该数据模型，就可以快速创建一个带增删改查功能的满足通用型场景的表格列表页，在该表格列表页开发人员开始通过勾选、输入的方式对页面进行编辑搭建，从而代替常规的拖拽，相比于现有的通过拖拽设计数据模型或在编辑器上从无到完成拖拽CRUD页面减少了繁复的拖拽流程及需求对接成本。

至此，本发明的低代码页面搭建系统实现了表关联关系映射；对页面数据源统一管理，采用聚合分发策略避免重复请求、优化请求性能，也即响应快，能够实现中后台场景大部分CRUD类页面的零代码开发。

在一实施例中，所述可拖拽画布还包括渲染层和交互层、吸附单元和参考线；所述可视化页面编辑器还包含：组件配置面板和模型驱动表格配置器；

所述组件配置面板用于配置所述模型驱动型组件的组件属性，所述组件属性包括：表格样式、事件、动态接口配置、布局、列表操作栏；

所述模型驱动表格配置器用于增添删改所述表格列表页。

针对拖拽体验的不流畅产生的问题，对组件dom进行打标，通过低代码页面搭建系统中的Mutation Observer(变动观察器)监控所有组件dom(Document Object Model，文档对象模型)元素坐标，在开发人员进行点选及拖拽组件时计算鼠标偏移量更新定位，同时将画布拆分为渲染层和交互层将dom独立，为拖拽组件添加吸附和智能参考线，便于开发人员拖拽组件进行搭配，在需要进行拖拽时提高了拖拽的效率以此优化了页面编辑器界面使用体验。

在一实施例中，所述通用搭建协议为定义组件结构、页面层级结构、数据源以及事件的JSON Schema约束协议，所述JSON Schema约束协议对应的代码全部为JavaScript语法。可以将该JSON Schema约束协议存储在数据库中以便于需要时进行调用。该JSONSchema约束协议可以作为实现组件通用性及扩展性的前提，它主要定义了页面搭建规则和对页面进行描述。具体地，该通用搭建协议除了组件嵌套规则外还定义了函数、变量、生命周期等动态属性；可以进行协议版本控制，语义清晰；不引入新的语法概念，代码部分纯js语法，降低上手门槛；支持第三方npm包引入，增强协议描述能力的扩展性；搭建的页面基于此协议能在不同搭建产品中流通，满足多种业务场景需要。

基于上述的JSON Schema约束协议，能够在将CRUD表格组件和对应的数据模型绑定在一起时，自动地生成JSON数据(结果配置数据)。

动态渲染引擎，用于渲染所述表格列表页以得到所述表格列表页对应的目标页面；

本实施例的动态渲染引擎区别于常规的渲染引擎，其能够根据画布上组件等其他要素的改变而实时为开发人员提供预览当前表格列表页对应的目标页面。

在一实施例中，所述动态渲染引擎包括运行时解析引擎；

运行时解析引擎也即图3中的运行时加载单元。

所述运行时解析引擎基于所述JSON Schema约束协议解析和预览目标页面，并在所述目标页面中嵌入iframe，当所述JSON数据变更，根据所述JSON Schema约束协议中的描述信息将所述模型驱动型组件分类加载和属性处理，并将所述模型驱动型组件基于grid网格系统的布局处理及组件导入按需加载，递归每一个加载节点，同时加载对应的js逻辑，创建对象，并通过可拖拽画布中的当前模型驱动型组件渲染得到新的目标页面。

其中iframe是HTML标签，作用是文档中的文档，或者浮动的框架。根据JSONSchema约束协议定义的组件嵌套规则、函数、变量、生命周期等动态属性，对基于当前画布区域中的模型驱动型组件与对应的数据模型的绑定，能够解析和预览到目标页面，由于开发人员所需要搭建的目标页面一般都无法一次性搭建到位，所以也需要不断地进行调试，所以为了提高页面搭建的效率，为该目标页面嵌入iframe框架，每次当JSON数据变更时，也就是画布区域中模型驱动型组件、或者数据模型或者一些其他要素产生变动时，反映在中后台就是JSON数据的变动，一旦出现上述变动，意味着目标页面也会发生改变，为了具体实现动态渲染引擎能够实时渲染以预览目标页面，以及提升渲染效率，可以利用所述JSONSchema约束协议中的描述信息将当前的所述模型驱动型组件进行分类加载和属性处理，并将所述模型驱动型组件基于低代码页面搭建系统中的grid网格系统的布局处理及组件导入按需加载，递归每一个加载节点，同时加载对应的JavaScript逻辑，创建对象，并通过可拖拽画布中的当前模型驱动型组件渲染得到新的目标页面。

进一步地，动态渲染引擎在组件层级区分前后端渲染，将组件模块中注入预设的渲染方法，页面渲染时通过识别JSON Schema约束协议中的标记来判断component-stage(组件加载阶段)状态，即可对同一张页面中的不同组件采用不同的渲染模式，自动度高拓展性强。

所述代码生成器，用于将所述JSON数据转换为用户端源码并导出到所述代码仓库。

在本实施例中，转换代码之后的出码结果可以针对不同场景适配多端，比如网页、安卓应用、苹果商店应用、小程序等，对于网页，可以将数据库中存储的JSON Schema搭建协议转化为基于Vue的前端代码，从而用户可以根据开发者搭建好的页面进行正常地交互使用，也即实现目标页面的功能。对于其他用户端，可根据使用场景扩展转化为其它框架源码。

继续参照图3，再进一步地，之所以本实施例中的代码生成器可以应用于多端多场景，可以借助于代码仓库中的适配模块和扩展插件，不同场景的应用，对应不同的扩展插件，比如安卓应用的扩展插件，再将扩展插件结合适配模块和代码生成器，在三者的作用下实现了多段多场景源码的转换。

在一实施例中，所述低代码页面搭建系统还包括：抽象工具集合模块，所述抽象工具集合模块包括状态管理单元、权限控制单元以及操作历史记录单元。

通过状态管理单元可以实时地获悉页面搭建过程中所有可能出现的问题和提示以及页面搭建状况。可以继续参照图3，权限控制单元主要用于对相关人员的操作权限进行配置，操作历史记录单元用于记录各个页面搭建过程中的操作历史。

此外，继续参照图3，可视化页面编辑器还包括工具栏，可以进行撤回操作、保存等各种应用工具。可视化页面编辑器可以进行高扩展的插件生态和物料仓库，其中的组件资源也可以从物料仓库中进行获取得到。该内置的物料仓库支持全量组件低代码化：从入料模块到生成Vue源码通过export语句的静态解析，及prop-types库动态解析入口文件相结合实现一键低代码化，组件可配置props及对应的配置方式，动态渲染引擎获取到组件实例，以组件集合的形式接入物料仓库。

可视化页面编辑器中还包括流程编排、运行时加载(运行时解析引擎)、数据源管理、页面搭建协议(通用搭建协议)、设计规范(描述信息)、CLI脚手架等功能模块。

本发明主要通过在低代码页面搭建系统中的数据模型表单从而便于开发人员快速创建和自定义各种数据模型，以及便于配置各个表单之间的对应关系；通过低代码页面搭建中的模型驱动型组件，将模型驱动型组件拖拽至可拖拽画布的时候绑定该数据模型，就可以快速创建一个带增删改查功能的满足通用型场景的表格列表页，极大地增强了自定义能力和拓展性，同时相比于现有的通过拖拽设计数据模型或在页面编辑器上从无到有拖拽CRUD页面减少了繁复的拖拽流程及需求对接成本。在低代码页面搭建系统中配置了动态渲染引擎，能够实时预览各个组件组合所形成的页面结果，便于开发人员能够实时掌握页面搭建状况以及需要在用户层面展示的用户页面；通过低代码页面搭建系统中的代码生成器，能够将在模型驱动型组件和数据模型绑定之后得到的JSON数据转换为用户端的源码从而搭建好的页面能够为多端用户所使用，提高页面搭建和发布效率。

此外，请参照图2，图2为本发明低代码页面搭建方法第一实施例的流程示意图。本发明还提供一种低代码页面搭建方法，所述低代码页面搭建方法应用于上述各个实施例中的低代码页面搭建系统，所述方法包括以下步骤：

步骤S10，配置表单的每个控件对应的数据库表列名称和目标组件以得到数据模型；

步骤S20，将模型驱动型组件和所述数据模型绑定以得到表格列表页并基于预设的通用搭建协议以得到生成的JSON数据；

步骤S30，渲染所述表格列表页以预览所述表格列表页对应的目标页面；

步骤S40，将所述JSON数据转换为用户端源码并导出到代码仓库。

其中，低代码页面搭建方法可参照本发明低代码页面搭建系统的各个实施例，此处不再赘述。

本发明中的低代码页面搭建方法可以通过将模型驱动型组件中的CRUD组件与对应的数据模型绑定得到表格列表页从而不需要或者很少需要拖拽组件的操作，提高了页面搭建时的流畅性和自定义能力以及可拓展性，通过渲染得到目标页面和转换得到的用户端源码能够便捷高效地生成可以进行发布的目标页面，提高了页面的发布效率。

此外，本发明还提供一种计算机可读存储介质。本发明计算机可读存储介质上存储有低代码页面搭建程序，其中，低代码页面搭建程序被处理器执行时，实现如上述的低代码页面搭建方法的步骤。

其中，低代码页面搭建程序被执行时所实现的方法可参照本发明低代码页面搭建方法的各个实施例，此处不再赘述。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

应当注意的是，在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的部件或步骤。位于部件之前的单词“一”或“一个”不排除存在多个这样的部件。本发明可以借助于包括有若干不同部件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

以上所述仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是在本发明的发明构思下，利用本发明说明书及附图内容所作的等效结构变换，或直接/间接运用在其他相关的技术领域均包括在本发明的专利保护范围内。

Claims (10)

1.一种低代码页面搭建系统，其特征在于，所述低代码页面搭建系统包括：

数据模型表单配置器，用于配置表单之间的关系类型并配置所述表单的每个控件对应的数据库表列名称和目标组件，以得到数据模型；

可视化页面编辑器，用于低代码编辑各种应用页面；

可视化页面编辑器包括可拖拽画布和模型驱动型组件；

所述可拖拽画布用于将所述模型驱动型组件和所述数据模型绑定以得到表格列表页并基于预设的通用搭建协议得到生成的JSON数据；

动态渲染引擎，用于渲染所述表格列表页以得到所述表格列表页对应的目标页面；

代码生成器，用于将所述JSON数据转换为用户端源码并导出到代码仓库。

2.如权利要求1所述的低代码页面搭建系统，其特征在于，所述低代码页面搭建系统还包括：抽象工具集合模块，所述抽象工具集合模块包括状态管理单元、权限控制单元以及操作历史记录单元；所述模型驱动型组件包括CRUD表格组件。

3.如权利要求1所述的低代码页面搭建系统，其特征在于，所述可拖拽画布还包括渲染层和交互层、吸附单元和参考线；所述可视化页面编辑器还包含：组件配置面板和模型驱动表格配置器；

所述组件配置面板用于配置所述模型驱动型组件的组件属性，所述组件属性包括：表格样式、事件、动态接口配置、布局、列表操作栏；

所述模型驱动表格配置器用于增添删改所述表格列表页。

4.如权利要求1所述的低代码页面搭建系统，其特征在于，所述数据模型表单配置器包括：数据库字段属性配置单元、组件类别配置单元、搜索查询项配置单元以及表单校验配置单元。

5.如权利要求1所述的低代码页面搭建系统，其特征在于，所述数据模型的模型属性包括：数据库字段及类型、组件类型、表单校验项、搜索查询项、下拉组件数据字典映射、页面显示以及隐藏字段。

6.如权利要求1所述的低代码页面搭建系统，其特征在于，所述通用搭建协议为定义组件结构、页面层级结构、数据源以及事件的JSON Schema约束协议，所述JSON Schema约束协议对应的代码全部为JavaScript语法。

7.如权利要求6所述的低代码页面搭建系统，其特征在于，所述动态渲染引擎包括运行时解析引擎；

所述运行时解析引擎基于所述JSON Schema约束协议解析和预览目标页面，并在所述目标页面中嵌入iframe，当所述JSON数据变更，根据所述JSON Schema约束协议中的描述信息将所述模型驱动型组件分类加载和属性处理，并将所述模型驱动型组件基于grid网格系统的布局处理及组件导入按需加载，递归每一个加载节点，同时加载对应的JavaScript逻辑，创建对象，并通过所述可拖拽画布中的当前模型驱动型组件渲染得到新的目标页面。

8.一种低代码页面搭建方法，其特征在于，所述低代码页面搭建方法应用于如权利要求1-7所述的低代码页面搭建系统，所述方法包括以下步骤：

配置表单的每个控件对应的数据库表列名称和目标组件以得到数据模型；

将模型驱动型组件和所述数据模型绑定以得到表格列表页并基于预设的通用搭建协议以得到生成的JSON数据；

渲染所述表格列表页以预览所述表格列表页对应的目标页面；

将所述JSON数据转换为用户端源码并导出到代码仓库。

9.一种智能设备，其特征在于，所述智能设备包括处理器、存储器、以及存储在所述存储器上的可被所述处理器执行的低代码页面搭建程序，其中，所述低代码页面搭建程序被所述处理器执行时，实现如权利要求8所述的低代码页面搭建方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有低代码页面搭建程序，其中，所述低代码页面搭建程序被处理器执行时，实现如权利要求8所述的低代码页面搭建方法的步骤。

Images