CN116301813B

CN116301813B - 低代码平台开发方法及系统

Info

Publication number: CN116301813B
Application number: CN202310552140.9A
Authority: CN
Inventors: 任军庆; 林滔; 胡茂华; 王新岐
Original assignee: Yiyaowang Technology Shanghai Co ltd
Current assignee: Yiyaowang Technology Shanghai Co ltd
Priority date: 2023-05-17
Filing date: 2023-05-17
Publication date: 2023-08-15
Anticipated expiration: 2043-05-17
Also published as: CN116301813A

Abstract

本申请涉及应用开发领域，公开了一种低代码平台开发方法及系统，可以通过拖拽与简单配置实现快速开发，提高开发效率，避免任务堆积。该方法包括配置富文本编辑器，选择组件并调用组件的挂载方法，将组件插入光标位置，在属性配置面板对组件进行属性配置；将属性配置面板配置的属性数据与组件的实例关联保存，根据挂载的组件的特殊属性筛除组件，保留以组件的实例命名的坑位，将其余富文本源码保留至服务器数据库；以及，从服务器数据库中获取富文本源码，通过配置在客户端中的解析器进行解析，将组件挂载到相应坑位，并将关联保存的属性数据应用到组件中，客户端生成包含组件的完整页面。

Description

低代码平台开发方法及系统

技术领域

本申请涉及应用开发领域，具体涉及一种低代码平台开发方法及系统。

背景技术

本部分旨在为权利要求书中陈述的本申请的实施方式提供背景或上下文。此处的描述不因为包括在本部分中就承认是已被公开的现有技术。

公司现有的后台系统，超过一半以上的页面都是相同类型，即表格/表单/详情展示/流程或它们的组合等类型，这部分的前端开发工作大体上是不断重复的过程，开发过程中人力资源会浪费，开发效率较低，业务应用无法快速交付。另一方面，传统的软件开发对专业有一定的门槛要求，在前端开发人员占比有所缺失的情况下，容易造成任务堆积。

发明内容

本申请的目的在于提供一种低代码平台开发方法及系统，可以通过拖拽与简单配置实现快速开发，提高开发效率，避免任务堆积。

本申请公开了一种低代码平台开发方法，包括：

配置富文本编辑器，选择组件并调用所述组件的挂载方法，将所述组件插入光标位置，在属性配置面板对所述组件进行属性配置；

将所述属性配置面板配置的属性数据与所述组件的实例关联保存，根据挂载的所述组件的预定属性筛除组件富文本源码，保留以所述组件的实例命名的坑位，将其余未被筛除的富文本源码保留至服务器数据库；

从所述服务器数据库中获取所述富文本源码，通过配置在客户端中的解析器进行解析，将所述组件挂载到相应坑位，并将关联保存的所述属性数据应用到所述组件中，所述客户端生成包含所述组件的完整页面。

在一个优选例中，在所述富文本编辑器中使用动态模板生成富文本模板，并设置变量坑位；

使用应用程序编程接口获取用户数据，通过所述解析器解析配置完成的所述富文本源码，将所述变量坑位替换为同名的变量值。

在一个优选例中，所述设置变量坑位进一步包括：

在所述富文本编辑器中编写文档，对需要使用变量的位置选择被替换的信息进行变量替换；

基于所述变量替换，所述富文本源码在变量的位置留下变量坑位。

在一个优选例中，还包括：

在所述富文本编辑器中进行编辑时将预置的所述组件挂载到富文本的标记语言文件的指定节点；

将所述组件的标记语言文件从所述富文本的标记语言文件中抽出保存并只保留坑位节点；

渲染不包含所述组件的富文本，将所述组件挂载到所述坑位节点。

在一个优选例中，所述动态模板为动态数据以模板语法的形式实现。

在一个优选例中，进一步包括：

通过所述解析器解析所述低代码平台的前台页面，将所述前台页面的解析逻辑集成到独立的软件开发工具包；

将所述软件开发工具包独立引入到第三方业务系统。

在一个优选例中，所述属性配置面板配置的属性数据与所述组件的实例关联保存至所述服务器中

本申请还公开了一种低代码平台开发系统，包括：

富文本编辑器，被配置为选择组件并调用所述组件的挂载方法，将所述组件插入光标位置，所述富文本编辑器包括属性配置面板，所述属性配置面板被配置为所述组件进行属性配置；

服务器，被配置为保留未被筛除的富文本源码，所述未被筛除的富文本源码为通过将所述属性配置面板配置的属性数据与所述组件的实例关联保存，根据挂载的所述组件的预定属性筛除组件富文本源码并保留以所述组件的实例命名的坑位获得；

解析器，被配置为从所述服务器的数据库中获取所述富文本源码进行解析，将所述组件挂载到相应坑位，并将关联保存的所述属性数据应用到所述组件中。

在一个优选例中，还包括应用程序编程接口，所述应用程序编程接口被配置为从所述服务器的数据库读取用户数据。

本申请还公开了一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机可执行指令，所述计算机可执行指令被处理器执行时实现如前文描述的方法中的步骤。

本申请的实施方式中，通过在富文本编辑器中采用交互组件，可以使富文本文档不再只是单纯的获取信息的形态，可以具有与用户丰富的交互能力，实现各种需要技术人员进行代码开发的功能

进一步地，在富文本编辑器中使用动态模板，并在富文本模板中使用变量，通过应用程序编程接口从数据库中读取用户数据，从而可以根据不同业务场景动态生成不同的页面并实时可见；

进一步地，将前台页面的解析逻辑集成到独立的软件开发工具包，可以实现前台页面与低代码平台独立部署。

上述发明内容中公开的各个技术特征、在下文各个实施方式和例子中公开的各技术特征、以及附图中公开的各个技术特征，都可以自由地互相组合，从而构成各种新的技术方案（这些技术方案均应该视为在本说明书中已经记载），除非这种技术特征的组合在技术上是不可行的。例如，在一个例子中公开了特征A+B+C，在另一个例子中公开了特征A+B+D+E，而特征C和D是起到相同作用的等同技术手段，技术上只要择一使用即可，不可能同时采用，特征E技术上可以与特征C相组合，则，A+B+C+D的方案因技术不可行而应当不被视为已经记载，而A+B+C+E的方案应当视为已经被记载。

附图说明

图1是根据本申请的一个实施方式的流程示意图；

图2是根据本申请的一个实施方式的流程示意图；

图3是根据本申请的一个实施方式的系统结构示意图。

具体实施方式

在以下的叙述中，为了使读者更好地理解本申请而提出了许多技术细节。但是，本领域的普通技术人员可以理解，即使没有这些技术细节和基于以下各实施方式的种种变化和修改，也可以实现本申请所要求保护的技术方案。

部分概念的说明：

Css样式：Cascading Style Sheets，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

jsonSchema：也称为json模式，可以对现有的json数据格式进行描述（字段类型、内容长度、是否必须存在、取值示例等）。jsonschema是一个描述清晰、人机可读的文档，具有自动测试、验证客户端提交的数据的功能。

HTML：超文本标记语言或超文本链接标示语言。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如<html>），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。

服务器：是指网络中能对其它设备提供服务的计算机系统。服务器服务的对象通常称为终端或客户端，服务器与终端之间可以通过有线或者无线的方式通信连接。服务器的实现方式是多种多样的，可以是单台的计算机设备，也可以是多台计算机设备的组合（例如集群服务器，云服务器等）。服务器在一些应用场景中也可以被称为服务端，云端等。

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请的实施方式作进一步地详细描述。

本申请的第一实施方式涉及一种低代码平台开发方法，其流程如图1所示，该方法包括以下步骤：

在步骤S101中，配置富文本编辑器，选择组件并调用组件的挂载方法，将组件插入光标位置，在属性配置面板对组件进行属性配置。

在步骤S102中，将属性配置面板配置的属性数据与组件的实例关联保存，根据挂载的组件的预定属性筛除组件富文本源码，保留以组件的实例命名的坑位，将其余未被筛除的富文本源码保留至服务器数据库。

在步骤S103中，从服务器数据库中获取富文本源码，通过配置在客户端中的解析器进行解析，将组件挂载到相应坑位，并将关联保存的属性数据应用到组件中，客户端生成包含组件的完整页面。

可选地，富文本源码由富文本编辑器生成，富文本源码的格式为HTML。

可选地，将步骤S102中属性配置面板配置的属性数据与组件的实例关联保存至服务器中。

具体地，在配置富文本编辑器中，确定光标位置后，在组件面板选择相应的组件，即会插入光标位置；在属性配置面板，对该组件做各种属性配置，以上为编辑后台的使用交互。每个组件都具有挂载到指定位置的方法mount，插入到该光标位置即为调用该组件的挂载方法，由于富文本内容源码为HTML，所以按照选择器选中该位置进行挂载即可，挂载的组件上有预定的HTML属性component=true，以备后用。在保存富文本内容时，会根据component=true筛除组件HTML，并留下以组件实例命名的坑位，将其余富文本源码HTML保存到服务器数据库。在前台页面，获取到富文本内容源码后，会将相应组件挂载到相应名称的组件坑位，同时会将关联保存的组件属性设置到组件中，至此，前台页面生成完成。

可选地，可以在富文本编辑器中使用动态模板生成富文本模板，并设置变量坑位。使用应用程序编程接口获取用户数据，通过解析器解析配置完成的富文本源码，将变量坑位替换为同名的变量值。

可选地，设置变量坑位的过程中可以进一步包括在富文本编辑器中编写文档，对需要使用变量的位置选择被替换的信息进行变量替换。基于变量替换，富文本源码在变量的位置留下变量坑位。

其中可选地，替换方式可以为隐式替换或显示替换。在隐式替换中，在富文本编辑器中编写文档，编写（部分）完成后，对需要使用变量的位置，选择要被替换的文本，在属性面板中，选择“变量替换”并填入相应的变量名称，类似地，对于图片、视频等形态的信息展示，以同样方式做变量替换；替换后的富文本内容源码在变量处，会留下使用Mustache语法（例如:{{username}}）的坑位，但此坑位在编辑态文档中通过设置css样式不直接显示出来。在显式替换中，可以直接在编写富文本文档时，使用Mustache语法设置变量坑位，即同样达到在编辑文档中设置坑位的目的。

可选地，富文本编辑器中可以采用交互组件，在富文本编辑器中进行编辑时将预置的组件挂载到富文本的标记语言文件（下面简称为富文本HTML）的指定节点（可以在编辑时实时地体验效果），在本实施例中优选地将预置组件挂载到富文本HTML指定dom节点，将组件的标记语言文件富文本HTML中抽出保存并只保留坑位节点，先渲染不包含组件的富文本，将组件挂载到坑位节点。

可选地，动态数据可以通过以模板语法的形式实现。

在本实施例中采用了Mustache语法：

Masterpiece of the {{word}} heritage

Taj Mahal is a mausoleum built in Agra between 1631 and 1648

上述{{word}}是变量坑位，视觉效果实时可见。

通过交互组件和动态数据渲染的方式可以实现以富文本为基础的动态、可交互配置页面低代码工具。

可选地，可以通过解析器解析低代码平台的前台页面，将前台页面的解析逻辑集成到独立的软件开发工具包，将软件开发工具包独立引入到第三方业务系统。通过这种方式可以使业务系统页面从业务上完全独立于低代码配置平台。具体地，前台页面的解析逻辑集成到独立的js sdk，从低代码平台独立；基础逻辑功能可以包含：从低代码服务端通过Ajax请求获取到富文本源码（部分请求是纯技术实现，用户在业务使用时无感知），然后，根据前文提到的解析方法解析生成包含动态数据、交互组件的低代码页面，js sdk可以以npm包或cdn链接的形式引入到第三方业务系统，从而与低代码平台做到独立部属。

为了能够更好地理解本申请的技术方案，下面结合一个具体的例子来进行说明，该例子中罗列的细节主要是为了便于理解，不作为对本申请的保护范围的限制，如图2所示。

在步骤S201中，在富文本编辑器中编辑时，选中不同的组件并进行拖拽，点选或配置各个组件对应的属性（属性可以包括组件特性、css样式以及逻辑动作等），保存时生成jsonSchema存储到服务器。从而可以实现不同界面元素的组合、数据的获取以及组件之间的交互逻辑，做到实时预览效果。

在步骤S202中，客户端从服务器获取页面对应的jsonSchema数据，通过sdk解析，自动生成完整的页面。独立的sdk支持在不同的项目引用。

在步骤S203中，针对未配置数据来源的情况，sdk根据所搭建的页面自动生成虚拟数据对页面进行填充，使页面更真实更完整。

本申请的第二实施方式涉及一种低代码平台开发系统，其系统结构如图3所示，该低代码平台开发系统包括富文本编辑器、服务器以及解析器。

富文本编辑器被配置为选择组件并调用组件的挂载方法，将组件插入光标位置，富文本编辑器包括属性配置面板，属性配置面板被配置为组件进行属性配置。

服务器被配置为保留未被筛除的富文本源码，未被筛除的富文本源码通过将属性配置面板配置的属性数据与组件的实例关联保存，根据挂载的组件的预定属性筛除组件富文本源码并保留以组件的实例命名的坑位获得。

解析器被配置为从服务器的数据库中获取富文本源码进行解析，将组件挂载到相应坑位，并将关联保存的属性数据应用到组件中，所述解析器被配置在客户端中，通过客户端生成包含组件的完整页面。

可选地，该系统还可以设有应用程序编程接口（未示出），该应用程序编程接口被配置为从服务器的数据库读取用户数据。

可选地，服务器中可以包括数据库，属性配置面板配置的属性数据与组件的实例关联保存至服务器的数据库中。

第一实施方式是与本实施方式相对应的方法实施方式，第一实施方式中的技术细节可以应用于本实施方式，本实施方式中的技术细节也可以应用于第一实施方式。

相应地，本申请的实施方式还提供一种计算机可读存储介质，其中存储有计算机可执行指令，该计算机可执行指令被处理器执行时实现本申请的各方法实施方式。计算机可读存储介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括但不限于，相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读存储介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

需要说明的是，在本申请中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。本申请中，如果提到根据某要素执行某行为，则是指至少根据该要素执行该行为的意思，其中包括了两种情况：仅根据该要素执行该行为、和根据该要素和其它要素执行该行为。多个、多次、多种等表达包括2个、2次、2种以及2个以上、2次以上、2种以上。

在描述方法的步骤时使用的序号本身并不对这些步骤的顺序构成任何的限定。例如，序号大的步骤并非一定要在序号小的步骤之后执行，也可以是先执行序号大的步骤再执行序号小的步骤，还可以是并行执行，只要这种执行顺序对于本领域技术人员来说是合理的即可。又如，拥有连续编号序号的多个步骤（例如步骤101，步骤102，步骤103等）并不限制其他步骤可以在其间执行，例如步骤101和步骤102之间可以有其他的步骤。

本说明书包括本文所描述的各种实施例的组合。对实施例的单独提及（例如“一个实施例”或“一些实施例”或“优选实施例”）；然而，除非指示为是互斥的或者本领域技术人员很清楚是互斥的，否则这些实施例并不互斥。应当注意的是，除非上下文另外明确指示或者要求，否则在本说明书中以非排他性的意义使用“或者”一词。

此外应理解，以上所述仅为本说明书的较佳实施例而已，并非用于限定本说明书的保护范围。凡在本说明书一个或多个实施例的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本说明书一个或多个实施例的保护范围之内。

在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

Claims

1.一种低代码平台开发方法，其特征在于，包括：

配置富文本编辑器，在所述富文本编辑器中使用动态模板生成富文本模板，并设置变量坑位，选择组件并调用所述组件的挂载方法，将所述组件插入光标位置，在属性配置面板对所述组件进行属性配置；

从所述服务器数据库中获取所述富文本源码，使用应用程序编程接口获取用户数据，通过配置在客户端中的解析器进行解析，通过所述解析器解析配置完成的所述富文本源码，将所述变量坑位替换为同名的变量值，将所述组件挂载到相应坑位，并将关联保存的所述属性数据应用到所述组件中，所述客户端生成包含所述组件的完整页面；

其中，所述替换为显示替换或隐式替换，在所述隐式替换中，在所述富文本编辑器中编写文档，编写完成后，对需要使用变量的位置，选择要被替换的内容，并填入相应的变量名称，替换后的富文本内容源码在变量处，留下使用Mustache语法的坑位，该坑位在编辑态文档中通过设置css样式不直接显示出来；在所述显示替换中，直接在编写富文本文档时，使用所述Mustache语法设置变量坑位。

2.如权利要求1所述的低代码平台开发方法，其特征在于，所述设置变量坑位进一步包括：

3.如权利要求1所述的低代码平台开发方法，其特征在于，还包括：

4.如权利要求1所述的低代码平台开发方法，其特征在于，所述动态模板为动态数据以模板语法的形式实现。

5.如权利要求1所述的低代码平台开发方法，其特征在于，进一步包括：

将所述软件开发工具包独立引入到第三方业务系统。

6.如权利要求1所述的低代码平台开发方法，其特征在于，所述属性配置面板配置的属性数据与所述组件的实例关联保存至所述服务器中。

7.一种低代码平台开发系统，其特征在于，包括：

富文本编辑器，被配置为选择组件并调用所述组件的挂载方法，使用动态模板生成富文本模板，并设置变量坑位，将所述组件插入光标位置，所述富文本编辑器包括属性配置面板，所述属性配置面板被配置为所述组件进行属性配置；

服务器，被配置为保留未被筛除的富文本源码，所述未被筛除的富文本源码为通过将所述属性配置面板配置的属性数据与所述组件的实例关联保存，根据挂载的所述组件的预定属性筛除组件富文本源码并保留以所述组件的实例命名的坑位获得；以及，

解析器，被配置为从所述服务器的数据库中获取所述富文本源码进行解析，解析配置完成的所述富文本源码，将所述变量坑位替换为同名的变量值，将所述组件挂载到相应坑位，并将关联保存的所述属性数据应用到所述组件中，所述解析器被配置在客户端中，所述客户端被配置为生成包含所述组件的完整页面；

8.如权利要求7所述的低代码平台开发系统，其特征在于，还包括应用程序编程接口，所述应用程序编程接口被配置为从所述服务器的数据库读取用户数据。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机可执行指令，所述计算机可执行指令被处理器执行时实现如权利要求1至6中任意一项所述的方法中的步骤。