CN115509511A - Low code development platform - Google Patents
Low code development platformDownload PDFInfo
- Publication number
- CN115509511A CN115509511ACN202211285561.1ACN202211285561ACN115509511ACN 115509511 ACN115509511 ACN 115509511ACN 202211285561 ACN202211285561 ACN 202211285561ACN 115509511 ACN115509511 ACN 115509511A
- Authority
- CN
- China
- Prior art keywords
- component
- components
- library
- low
- module
- 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.)
- Pending
Links
Images
Classifications
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
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)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
Description
Translated fromChinese技术领域technical field
本发明涉及计算机技术领域，更具体的涉及一种低代码开发平台。The present invention relates to the field of computer technology, and more specifically to a low-code development platform.
背景技术Background technique
低代码开发平台(LCDP)是无需编码或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法(参考可视编程语言)，使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。低代码开发平台开发生成的页面是由组件实体组成的，通过拖拽的方式将组件实体组合到一起，这种方式非常依赖组件的开发，组件之间没办法通过拖曳的方式生成新的组件，导致页面需要新的组件时，还需投入大量人力物力进行新组件的代码化开发，而且开发过程也会造成错误率高，重复调试等问题。A Low-Code Development Platform (LCDP) is a development platform that can quickly generate applications without coding or with a small amount of code. An approach to application development through visualization (see Visual Programming Languages), which enables developers of various experience levels to create web and mobile applications through a graphical user interface, using drag-and-drop components and model-driven logic. The pages generated by the development of the low-code development platform are composed of component entities. The component entities are combined by dragging and dropping. This method is very dependent on the development of components. There is no way to generate new components by dragging and dropping between components. As a result, when the page needs new components, a lot of manpower and material resources need to be invested in the code development of the new components, and the development process will also cause problems such as high error rate and repeated debugging.
发明内容Contents of the invention
本发明的目的是克服现有技术的上述不足，本专利提出了一种通过将组件实体数据化，通过拖拽的方式将多个组件组装到一起，生成新的组件的低代码开发平台。该平台的拖拽式组件生成模式，可以快速提高组件的丰富程度，从而丰富页面，提高组件的开发效率。本发明的技术方案如下：The purpose of the present invention is to overcome the above-mentioned deficiencies of the prior art. This patent proposes a low-code development platform that converts component entities into data and assembles multiple components together by dragging and dropping to generate new components. The platform's drag-and-drop component generation mode can quickly increase the richness of components, thereby enriching pages and improving component development efficiency. Technical scheme of the present invention is as follows:
一种低代码开发平台，包括组件开发模块、组件管理模块、工作区、发布模块和数据库；A low-code development platform, including a component development module, a component management module, a workspace, a publishing module and a database;
所述组件开发模块，用于开发原子组件；The component development module is used to develop atomic components;
组件管理模块，包括组件池和组件库，所述组件池展示所有原子组件；a component management module, including a component pool and a component library, the component pool displaying all atomic components;
工作区，用于拖拽加载组件并展示页面预览；Workspace, used to drag and drop components and display page previews;
发布模块，接收工作区生成的页面描述数据，解析页面组件以及使用到的组件库；Publish the module, receive the page description data generated by the workspace, parse the page components and the used component library;
其特征在于，所述组件库中的组件可以从组件池中选取，也可以通过拖拽所述原子组件生成新的组件。It is characterized in that the components in the component library can be selected from the component pool, and new components can also be generated by dragging and dropping the atomic components.
进一步，所述组件库包括默认组件库和私有组件库，所述私有组件库由用户自己定义。Further, the component library includes a default component library and a private component library, and the private component library is defined by the user.
进一步，组件由组件实体、组件配置信息、组件描述数据组成。Further, a component is composed of a component entity, component configuration information, and component description data.
进一步，通过拖拽多个所述原子组件生成的组件，其组件描述数据是多个所述原子组件的组件描述数据组合而成，其属性是由组件配置信息配置。Further, for a component generated by dragging and dropping multiple atomic components, its component description data is a combination of component description data of multiple atomic components, and its attributes are configured by component configuration information.
进一步，所述组件开发模块中的组件开发使用typescript编写并定义完整类型，采用.md文件存放组件的基本使用样例，组件开发完成后，所述组件开发模块会自动解析组件类型，生成所述组件配置信息存入数据库，并解析.md文件中的样例生成所述组件描述数据存入数据库，将组件打包为umd文件存入组件存储系统。Further, the component development in the component development module uses typescript to write and define the complete type, and uses the .md file to store the basic usage examples of the component. After the component development is completed, the component development module will automatically parse the component type and generate the The component configuration information is stored in the database, and the sample in the .md file is parsed to generate the component description data, which is stored in the database, and the component is packaged into an umd file and stored in the component storage system.
进一步，所述组件管理模块中的所述组件池从数据库中查询组件的所述组件描述数据，加载组件库的umd文件，遍历所述组件描述数据，加载相应的组件实体在页面上展示。Further, the component pool in the component management module queries the component description data of the components from the database, loads the umd file of the component library, traverses the component description data, loads the corresponding component entity and displays it on the page.
进一步，所述工作区分为组件展示区、页面预览区和组件信息区。Further, the work area is divided into a component display area, a page preview area and a component information area.
进一步，所述发布模块将解析后组件，以及使用到的组件库，动态生成一份组件引入配置js，插入到项目模板中，通过构建工具将项目模板打包成为html或js或css。Further, the release module dynamically generates a component introduction configuration js from the parsed component and the used component library, inserts it into the project template, and packages the project template into html or js or css through the construction tool.
本发明的技术方案，具有以下优点：The technical solution of the present invention has the following advantages:
本申请将组件实体数据化，从而可以使得组件通过拖拽组成新的组件，能够迅速增加组件的丰富度，大幅提高工作效率。This application converts component entities into data, so that components can be dragged and dropped to form new components, which can quickly increase the richness of components and greatly improve work efficiency.
附图说明Description of drawings
本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中：The above and/or additional aspects and advantages of the present invention will become apparent and comprehensible from the description of the embodiments in conjunction with the following drawings, wherein:
图1是低代码开发平台的示意图；Figure 1 is a schematic diagram of a low-code development platform;
图2是组件内容的示意图；Figure 2 is a schematic diagram of component content;
图3是工作区的图示。Figure 3 is an illustration of a workspace.
具体实施方式detailed description
下面将结合附图对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。The technical solutions of the present invention will be clearly and completely described below in conjunction with the accompanying drawings. Apparently, the described embodiments are some of the embodiments of the present invention, but not all of them. Based on the embodiments of the present invention, all other embodiments obtained by persons of ordinary skill in the art without making creative efforts belong to the protection scope of the present invention.
如图1所示，低代码开发平台1，包括组件开发模块2、组件管理模块3、工作区4、发布模块5和数据库6。在所述组件开发模块2中开发原子组件21，所述组件管理模块3包括组件池31和组件库32，在所述组件池中展示所述原子组件21，所述组件管理模块3包括组件池31和组件库32，所有原子组件21在所述组件池展示，所述组件库32中的组件从所述组件31池中选取，或者通过拖拽所述原子组件21生成，所述工作区4用于拖拽加载组件并展示页面预览，所述发布模块5接收所述工作区4生成的页面描述数据，解析页面组件以及使用到的组件库。As shown in FIG. 1 , the low-code development platform 1 includes a component development module 2 , a component management module 3 , a workspace 4 , a publishing module 5 and a database 6 . Atomic component 21 is developed in the component development module 2, the component management module 3 includes a component pool 31 and a component library 32, and the atomic component 21 is displayed in the component pool, and the component management module 3 includes a component pool 31 and a component library 32, all atomic components 21 are displayed in the component pool, the components in the component library 32 are selected from the component pool 31, or generated by dragging the atomic component 21, the workspace 4 Used to drag and drop components and display page previews, the publishing module 5 receives the page description data generated by the workspace 4, and parses the page components and used component libraries.
组件33是低代码平台的基础，如图2所示，组件由组件实体331、组件配置信息332、组件描述数据333组成，所述组件实体331由两种托管方式，一种是通过oss存储组件实体集合的UMD文件，另一种是通过npm的方式管理。每个所述组件实体331对应一份所述组件配置信息332，存储在数据库中，所述组件描述数据333比较灵活，可以包含多个组件实体331的所述组件描述数据333，以及所述组件配置信息332。组件实体331存在于一个组件库32中，组件库32可以由用户定义，也可以预定义为默认组件库，默认组件库中为原子组件库，用户定义的称为私有组件库。私有组件库中的组件是通过原子组件库中的组件组合而成。一个私有组件库组件可以包含多个不同原子组件库中的组件。Component 33 is the basis of the low-code platform. As shown in Figure 2, the component is composed of component entity 331, component configuration information 332, and component description data 333. The component entity 331 is managed in two ways, one is to store components through oss The UMD file of the entity collection, the other is managed by npm. Each of the component entities 331 corresponds to a piece of the component configuration information 332, which is stored in the database. The component description data 333 is relatively flexible and can include the component description data 333 of multiple component entities 331, and the component Configuration information 332 . The component entity 331 exists in a component library 32. The component library 32 can be defined by the user, or can be predefined as a default component library. The default component library is an atomic component library, and the user-defined one is called a private component library. The components in the private component library are composed by the components in the atomic component library. A private component library component can contain components from multiple different atomic component libraries.
所述组件开发模块2用于开发原子组件21，组件开发使用typescript编写并定义完整类型，另外还需要一个.md文件用来存放组件的基本使用样例，组件使用样例为json结构，当组件开发完成后，所述组件开发模块提供的发布命令，会自动解析组件定义的类型，生成组件配置信息存进数据库。然后自动解析.md文件中的样例生成组件描述数据存进数据库，在之后将组件打包为umd文件存入oss，最后将组件库发为npm包。The component development module 2 is used to develop the atomic component 21. The component development uses typescript to write and define the complete type. In addition, a .md file is required to store the basic usage example of the component. The component usage example is a json structure. When the component After the development is completed, the release command provided by the component development module will automatically analyze the type of the component definition, generate component configuration information and store it in the database. Then automatically parse the sample in the .md file to generate component description data and store it in the database, then package the component as an umd file and store it in oss, and finally send the component library as an npm package.
如图3所示，所述工作区4是用来组装页面以及配置属性、绑定事件的地方。所述工作区4会加载默认组件库以及私有组件库中的组件，然后展示在左侧功能区，左侧功能区还包含模版和页面。所述组件库32中组件的预览方式跟所述组件池31中的一致，通过拖动组件预览到中间展示区会生成页面预览，以及页面的描述数据。页面的描述数据是一个组件描述数据副本的集合，包含层级结构信息。右侧功能区包含组件属性配置，样式配置，高级配置三个功能，组件属性的修改会触发组件描述数据副本的改变，其余配置会有相同的行为。As shown in FIG. 3 , the workspace 4 is a place for assembling pages, configuring properties, and binding events. The workspace 4 will load the components in the default component library and the private component library, and then display them in the left functional area, which also includes templates and pages. The preview method of the components in the component library 32 is the same as that in the component pool 31, and the page preview and the description data of the page will be generated by dragging the component preview to the middle display area. The page's description data is a collection of component description data copies, including hierarchical structure information. The functional area on the right includes three functions: component property configuration, style configuration, and advanced configuration. The modification of component properties will trigger the change of the component description data copy, and the rest of the configuration will have the same behavior.
所述发布模块5会接收到页面描述数据，解析页面中用到的组件，以及使用到的组件库，然后动态生成一份组件引入配置js，插入到项目模版中，通过构建工具将项目模版打包成为html、js、css。The publishing module 5 will receive the page description data, analyze the components used in the page, and the used component library, and then dynamically generate a copy of component import configuration js, insert it into the project template, and package the project template through the construction tool Become html, js, css.
本领域的普通技术人员可以理解实现上述实施方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读的记录介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。Those of ordinary skill in the art can understand that all or part of the steps carried by the above-mentioned implementation method can be completed by instructing related hardware through a program, and the program can be stored in a computer-readable recording medium, and the program can be executed when When, one or a combination of the steps of the method embodiment is included.
Claims (8)
Translated fromChinesePriority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211285561.1ACN115509511A (en) | 2022-10-20 | 2022-10-20 | Low code development platform |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211285561.1ACN115509511A (en) | 2022-10-20 | 2022-10-20 | Low code development platform |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115509511Atrue CN115509511A (en) | 2022-12-23 |
Family
ID=84510761
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211285561.1APendingCN115509511A (en) | 2022-10-20 | 2022-10-20 | Low code development platform |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115509511A (en) |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113849165A (en)* | 2021-09-28 | 2021-12-28 | 航天科工网络信息发展有限公司 | A low-code front-end development framework and method based on visual drag and drop and customizable |
| CN114564199A (en)* | 2022-03-04 | 2022-05-31 | 中信银行股份有限公司 | Method, device and equipment for generating use page and readable storage medium |
| CN114995803A (en)* | 2022-05-31 | 2022-09-02 | 中国电信股份有限公司 | Development method of human-computer interface, low-code development platform, terminal and medium |
- 2022
- 2022-10-20CNCN202211285561.1Apatent/CN115509511A/enactivePending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113849165A (en)* | 2021-09-28 | 2021-12-28 | 航天科工网络信息发展有限公司 | A low-code front-end development framework and method based on visual drag and drop and customizable |
| CN114564199A (en)* | 2022-03-04 | 2022-05-31 | 中信银行股份有限公司 | Method, device and equipment for generating use page and readable storage medium |
| CN114995803A (en)* | 2022-05-31 | 2022-09-02 | 中国电信股份有限公司 | Development method of human-computer interface, low-code development platform, terminal and medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| Van Tendeloo et al. | An evaluation of DEVS simulation tools | |
| US9021440B1 (en) | System and method for automated test script generation | |
| US7694272B2 (en) | Method, a language and a system for the definition and implementation of software solutions by using a visualizable computer executable modeling language | |
| Moreau et al. | A templating system to generate provenance | |
| US8694953B2 (en) | Tool and methodology for enterprise software applications | |
| US20080263101A1 (en) | Data Processing Device and Data Processing Method | |
| CN105653644A (en) | Page constructor and page construction method | |
| CN105094818A (en) | Method and system for building comprehensive application of natural resources based on SOA | |
| US20140019889A1 (en) | Regenerating a user interface area | |
| CN111949267B (en) | UI front end generation method and device | |
| CN104317580B (en) | Virtual test application integration development system | |
| CN115422221A (en) | A query construction method, query builder, device and medium for a webpage form | |
| Berenbach et al. | A unified requirements model; integrating features, use cases, requirements, requirements analysis and hazard analysis | |
| US20060277082A1 (en) | System and method for dynamically modeling workflows for interacting stateful resources | |
| US7805452B2 (en) | Data processing device and data processing method | |
| CN115509511A (en) | Low code development platform | |
| Renggli et al. | Magritte–a meta-driven approach to empower developers and end users | |
| Rivero et al. | Improving user involvement through a model-driven requirements approach | |
| Liu et al. | Maramatatau: Extending a domain specific visual language meta tool with a declarative constraint mechanism | |
| CN114924729A (en) | Management terminal page generation method and device | |
| CN114327421A (en) | Method, system, electronic device and storage medium for editing three-dimensional interactive content | |
| Buschle | Tool Support for Enterprise Architecture Analysis: with application in cyber security | |
| CN108920440A (en) | A kind of edit methods of configuration file, device and storage medium | |
| Lehrhuber | Pdf support for qualitative research in the cloud | |
| Keller et al. | Towards comprehensive support for the dynamic analysis of Petri net based models |
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 |