CN115033235A - System and method for flexibly multiplexing web page based on low-code development platform - Google Patents
System and method for flexibly multiplexing web page based on low-code development platformDownload PDFInfo
- Publication number
- CN115033235A CN115033235ACN202210756228.8ACN202210756228ACN115033235ACN 115033235 ACN115033235 ACN 115033235ACN 202210756228 ACN202210756228 ACN 202210756228ACN 115033235 ACN115033235 ACN 115033235A
- Authority
- CN
- China
- Prior art keywords
- page
- component
- metadata
- rendering
- event
- 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/36—Software reuse
- 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)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
Translated fromChinese
Description
Translated fromChinese技术领域technical field
本发明属于程序开发技术领域，具体涉及基于低代码开发平台进行web页面灵活复用的系统及方法。The invention belongs to the technical field of program development, and in particular relates to a system and method for flexible reuse of web pages based on a low-code development platform.
背景技术Background technique
在低代码开发平台中，每个web页面是由组件模板可视化拖拽设计的，组件都包含一套完整的事件或方法配置定义，这些web页面就是组件模板集合，通常生成JSON元数据来驱动。目前低代码开发平台都是单个页面设计，页面内不能灵活复用展示另一个页面信息，数据只能在单个页面内流动。In the low-code development platform, each web page is designed by visual drag-and-drop of component templates. Components contain a complete set of event or method configuration definitions. These web pages are a collection of component templates, which are usually driven by JSON metadata. At present, low-code development platforms are designed with a single page, and the information of another page cannot be flexibly reused within a page, and data can only flow within a single page.
这样的低代码开发平台设计模式使用起来比较单一，复杂的页面结构不能进行灵活的数据交互，组件全部堆叠在一个页面内维护改动也比较困难。此外，在一些特殊组件或业务场景中，一个信息页面被另一个页面内的事件触发嵌入复用展示在所难免，到目前为止还未有相关技术来解决低代码开发平台中同一页面可以被灵活复用进行数据交互的问题：Such a low-code development platform design mode is relatively simple to use, the complex page structure cannot allow flexible data interaction, and it is difficult to maintain and change all components stacked on one page. In addition, in some special components or business scenarios, it is inevitable that an information page is triggered by an event in another page to be embedded and reused. So far, there is no relevant technology to solve the problem that the same page can be flexibly displayed in a low-code development platform. The problem of multiplexing data interaction:
1.例如标签页组件需要动态添加已设计页面作为选项卡显示的内容。1. For example, the tab page component needs to dynamically add the designed page as the content displayed by the tab.
2.例如数据表格组件的不同行需要展开显示详细信息视图。2. For example, different rows of the data table component need to be expanded to display the detailed information view.
3.例如新增或编辑事件都需要打开相同的外部对话框操作表单信息。3. For example, adding or editing events needs to open the same external dialog box to operate the form information.
发明内容SUMMARY OF THE INVENTION
针对现有技术中的上述不足，本发明提供的基于低代码开发平台进行web页面灵活复用的系统及方法解决了低代码开发平台对具有数据传递功能的通用页面结构不能进行灵活数据交互的问题。In view of the above deficiencies in the prior art, the system and method for flexible reuse of web pages based on a low-code development platform provided by the present invention solves the problem that the low-code development platform cannot perform flexible data interaction on a general page structure with a data transfer function .
为了达到上述发明目的，本发明采用的技术方案为：一种基于低代码开发平台进行web页面灵活复用的系统，包括依次连接的可视化设计端、服务端和部署端；In order to achieve the above purpose of the invention, the technical solution adopted in the present invention is: a system for flexible reuse of web pages based on a low-code development platform, including a visual design end, a server end and a deployment end connected in sequence;
所述可视化设计端用于生成web页面；所述服务端用于存储web页面的页面元数据所述部署端用于进行页面渲染。The visual design end is used to generate a web page; the server end is used to store page metadata of the web page; the deployment end is used to render the page.
进一步地：所述可视化设计端具体为低代码开发平台，其设置有web页面组件库；所述web页面组件库包括若干组件。Further: the visual design terminal is specifically a low-code development platform, which is provided with a web page component library; the web page component library includes several components.
上述进一步方案的有益效果为：低代码平台可以独立开发一个设计系统web页面的管理端，无需编码或只需少量代码就可以快速生成应用程序的开发平台。The beneficial effects of the above-mentioned further scheme are: the low-code platform can independently develop a management terminal of the web page of the design system, and a development platform that can quickly generate an application program without coding or with only a small amount of code.
进一步地：所述部署端包括后端渲染服务模块和前端渲染框架；Further: the deployment end includes a back-end rendering service module and a front-end rendering framework;
所述后端渲染服务模块用于生成页面元数据的实例和渲染批次号；所述前端渲染框架用于将页面元数据的实例和组件模板渲染成页面视图。The back-end rendering service module is used to generate an instance of page metadata and a rendering batch number; the front-end rendering framework is used to render the instance of page metadata and a component template into a page view.
一种基于低代码开发平台进行web页面灵活复用的系统的基于低代码开发平台进行web页面灵活复用的方法，包括以下步骤：A system for flexible reuse of web pages based on a low-code development platform, and a method for flexible reuse of web pages based on a low-code development platform, comprising the following steps:
S1、通过可视化设计端建立web页面，并将web页面的页面元数据存储至服务端；S1. Create a web page through the visual design side, and store the page metadata of the web page to the server side;
S2、通过部署端获取服务端的页面元数据，得到页面视图；S2. Obtain the page metadata of the server through the deployment end, and obtain the page view;
S3、根据用户需要进行的页面视图复用，触发组件绑定事件，得到事件脚本实例；S3. According to the page view reuse required by the user, trigger the component binding event to obtain the event script instance;
S4、根据事件脚本实例调用进行页面视图之间的数据交互。S4. Data interaction between page views is performed according to the event script instance call.
进一步地：所述步骤S1包括以下分步骤：Further: the step S1 includes the following sub-steps:
S11、基于可视化设计端的web页面组件库中的组件，选择指定组件通过拖拉的方式建立web页面；S11. Based on the components in the web page component library of the visual design side, select a specified component to create a web page by dragging and dropping;
S12、基于web页面的组件，配置所述组件的元数据，得到页面元数据；S12, based on the component of the web page, configure the metadata of the component to obtain the page metadata;
其中，所述页面元数据包括第一标识ID以及包含建立web页面的所有组件元数据，每个所述组件元数据都包括第二标识ID、组件类型、样式定义、属性定义、事件定义和方法定义；Wherein, the page metadata includes a first identification ID and metadata of all components including building a web page, and each of the component metadata includes a second identification ID, component type, style definition, attribute definition, event definition and method definition;
所述组件类型用于关联已封装的组件模板进行数据绑定渲染，所述样式用于定义所述组件的渲染样式脚本，所述事件用于定义所述组件可触发的联动操作事件；所述方法用于定义所述组件的内置处理回调方法。The component type is used to perform data binding rendering in association with an encapsulated component template, the style is used to define a rendering style script of the component, and the event is used to define a linkage operation event that can be triggered by the component; the method is used to define the built-in processing callback method of the component.
上述进一步方案的有益效果为：根据用户业务需求进行样式调整、组件属性配置、交互事件脚本定义等操作，即可完成web页面的生成。The beneficial effects of the above-mentioned further solution are: performing operations such as style adjustment, component attribute configuration, interaction event script definition, etc. according to the user's business requirements, and then the generation of the web page can be completed.
进一步地：所述步骤S2包括以下分步骤：Further: the step S2 includes the following sub-steps:
S21、根据页面元数据调用后端渲染服务模块生成页面元数据实例；S21, calling the back-end rendering service module according to the page metadata to generate a page metadata instance;
S22、根据页面元数据实例调用前端渲染框架生成页面视图。S22. Invoke the front-end rendering framework to generate a page view according to the page metadata instance.
进一步地：所述步骤S21中，生成的页面元数据实例设置有渲染批次号，其生成方法具体为：Further: in the step S21, the generated page metadata instance is set with a rendering batch number, and the generation method is specifically:
通过后端渲染服务模块将页面元数据中每个组件元数据的第二标识ID进行处理，生成渲染批次号；The second identification ID of each component metadata in the page metadata is processed by the back-end rendering service module to generate a rendering batch number;
所述步骤S22具体为：根据页面元数据实例中的组件通过前端渲染框架的component语法标签指定渲染的组件，将指定渲染的组件对应的组件元数据与组件模板动态绑定，生成页面视图。The step S22 is specifically: according to the component in the page metadata instance, the component to be rendered is specified through the component syntax tag of the front-end rendering framework, and the component metadata corresponding to the specified rendered component is dynamically bound with the component template to generate the page view.
进一步地：所述步骤S3具体为：Further: the step S3 is specifically:
基于用户需要复用指定的页面视图，触发组件绑定事件，获取页面元数据的渲染批次号，通过后端渲染服务模块调用渲染批次号和事件ID进行事件脚本查询，得到事件脚本实例。Based on the user's need to reuse the specified page view, trigger the component binding event, obtain the rendering batch number of the page metadata, and call the rendering batch number and event ID through the back-end rendering service module to query the event script to obtain the event script instance.
进一步地：所述步骤S4具体为：Further: the step S4 is specifically:
S41、根据事件脚本实例触发页面交互事件，调用后端渲染服务模块请求关联复用的子页面；S41. Trigger the page interaction event according to the event script instance, and call the back-end rendering service module to request the associated multiplexed sub-page;
S42、通过前端渲染框架渲染所述复用的子页面的页面元数据实例；并返回所述子页面元数据中的第一标识ID；S42, rendering the page metadata instance of the multiplexed sub-page by the front-end rendering framework; and returning the first identification ID in the sub-page metadata;
S43、根据返回的第一标识ID确定事件脚本中第一标识ID对应第二标识ID的组件，并根据确定的组件进行数据交互的挂载方法，进行页面数据回填，实现页面视图的数据交互。S43: Determine the component in the event script whose first identification ID corresponds to the second identification ID according to the returned first identification ID, and perform page data backfilling according to the determined mounting method of the component for data interaction to realize data interaction of the page view.
进一步地：所述步骤S4中，数据交互的挂载方法具体为：Further: in the step S4, the mounting method for data interaction is specifically:
获取数据挂载KEY值，创建交互挂载对象，在Vue根容器组件的root根实例对象上缓存挂载对象，并作为KEY值主题消息发布给嵌入页面内的交互组件，判断所述交互组件是否已经创建；Obtain the data mount KEY value, create an interactive mount object, cache the mount object on the root root instance object of the Vue root container component, and publish it as a KEY value topic message to the interactive component embedded in the page, and determine whether the interactive component is has been created;
若是，则根据所述交互组件接收KEY值主题消息，立即执行挂载交互方法，更新己经执行的标识状态；If so, receive the KEY value topic message according to the interaction component, immediately execute the mount interaction method, and update the already executed identification state;
若否，则异步初始化创建交互组件，并获取所述交互组件数据挂载KEY值，查询Vue根容器组件的root根实例对象上缓存的挂载对象，当存在挂载对象时，执行挂载交互方法，更新己经执行的标识状态。If not, asynchronously initialize and create the interactive component, and obtain the data mount KEY value of the interactive component, query the mount object cached on the root root instance object of the Vue root container component, and execute the mount interaction when there is a mount object. method to update the flag state that has already been executed.
本发明的有益效果为：The beneficial effects of the present invention are:
(1)本发明通过对设计页面的常规元数据添加可计算管理的标识ID规则变量，使原本静态的元数据具有了动态使用的特性，结合后端渲染服务模块生成的页面元数据实例、组件事件脚本实例以及调用API方法，为页面内所有组件的复用渲染及事件隔离运行提供了基础支持，能够在低代码开发平台中实现web页面灵活复用交互。(1) The present invention makes the original static metadata have the characteristics of dynamic use by adding a computationally manageable identification ID rule variable to the conventional metadata of the design page, combined with the page metadata instances and components generated by the back-end rendering service module The event script instance and calling API method provide basic support for the multiplexed rendering and event isolation operation of all components in the page, and can realize flexible multiplexing and interaction of web pages in the low-code development platform.
(2)本发明通过对web页面进行数据交互，可以增强页面数据模型的通用灵活性，让整个页面的数据结构不再臃肿，管理维护也变得更简单，能够满足更多web系统功能设计需求。(2) The present invention can enhance the general flexibility of the page data model by performing data interaction on the web page, so that the data structure of the entire page is no longer bloated, management and maintenance become simpler, and more web system functional design requirements can be met. .
附图说明Description of drawings
图1为基于低代码开发平台进行web页面灵活复用的系统框架图。Figure 1 is a system framework diagram for flexible reuse of web pages based on a low-code development platform.
图2为基于低代码开发平台进行web页面灵活复用的方法流程图。FIG. 2 is a flowchart of a method for flexible reuse of web pages based on a low-code development platform.
具体实施方式Detailed ways
下面对本发明的具体实施方式进行描述，以便于本技术领域的技术人员理解本发明，但应该清楚，本发明不限于具体实施方式的范围，对本技术领域的普通技术人员来讲，只要各种变化在所附的权利要求限定和确定的本发明的精神和范围内，这些变化是显而易见的，一切利用本发明构思的发明创造均在保护之列。The specific embodiments of the present invention are described below to facilitate those skilled in the art to understand the present invention, but it should be clear that the present invention is not limited to the scope of the specific embodiments. For those of ordinary skill in the art, as long as various changes Such changes are obvious within the spirit and scope of the present invention as defined and determined by the appended claims, and all inventions and creations utilizing the inventive concept are within the scope of protection.
实施例1：Example 1:
如图1所示，在本发明的一个实施例中，一种基于低代码开发平台进行web页面灵活复用的系统，包括依次连接的可视化设计端、服务端和部署端；As shown in FIG. 1, in one embodiment of the present invention, a system for flexible reuse of web pages based on a low-code development platform includes a visual design end, a server end, and a deployment end that are connected in sequence;
所述可视化设计端用于生成web页面；所述服务端用于存储web页面的页面元数据；所述部署端用于将页面元数据的实例和组件模板进行视图绑定渲染。The visual design end is used to generate a web page; the server end is used to store page metadata of the web page; and the deployment end is used to perform view binding rendering on an instance of the page metadata and a component template.
所述可视化设计端具体为低代码开发平台，其设置有web页面组件库；所述web页面组件库包括若干组件。The visual design terminal is specifically a low-code development platform, which is provided with a web page component library; the web page component library includes several components.
在本实施例中，低代码开发平台是一种无需编码或只需少量代码就可以快速生成应用程序的开发平台。In this embodiment, the low-code development platform is a development platform that can quickly generate an application program without coding or with only a small amount of code.
所述部署端包括后端渲染服务模块和前端渲染框架；The deployment end includes a back-end rendering service module and a front-end rendering framework;
所述后端渲染服务模块用于生成页面元数据的实例；所述前端渲染框架用于将页面元数据和组件模板渲染成页面视图。The back-end rendering service module is used to generate an instance of page metadata; the front-end rendering framework is used to render page metadata and component templates into page views.
实施例2：Example 2:
本实施例针对一种基于低代码开发平台进行web页面灵活复用的系统的实施方法。This embodiment is directed to an implementation method of a system for flexible reuse of web pages based on a low-code development platform.
如图2所示，一种基于低代码开发平台进行web页面灵活复用的方法，包括以下步骤：As shown in Figure 2, a method for flexible reuse of web pages based on a low-code development platform includes the following steps:
S1、通过可视化设计端建立web页面，并将web页面的页面元数据存储至服务端；S1. Create a web page through the visual design side, and store the page metadata of the web page to the server side;
S2、通过部署端获取服务端的页面元数据，得到页面视图；S2. Obtain the page metadata of the server through the deployment end, and obtain the page view;
S3、根据用户需要进行的页面视图复用，触发组件绑定事件，得到事件脚本实例；S3. According to the page view reuse required by the user, trigger the component binding event to obtain the event script instance;
S4、根据事件脚本实例调用进行页面视图之间的数据交互。S4. Data interaction between page views is performed according to the event script instance call.
所述步骤S1包括以下分步骤：The step S1 includes the following sub-steps:
S11、基于可视化设计端的web页面组件库中的组件，选择指定组件通过拖拉的方式建立web页面；S11. Based on the components in the web page component library of the visual design side, select a specified component to create a web page by dragging and dropping;
所述组件类型用于关联已封装的组件模板进行数据绑定渲染，所述样式用于定义所述组件的渲染样式脚本，所述事件用于定义所述组件可触发的联动操作事件；所述方法用于定义所述组件的内置处理回调方法。The component type is used to perform data binding rendering in association with an encapsulated component template, the style is used to define a rendering style script of the component, and the event is used to define a linkage operation event that can be triggered by the component; the method is used to define the built-in processing callback method of the component.
在本实施例中，用户设计管理系统页时，需要在可视化设计端的数据文件目录中新建设计页面，打开设计页面后选择合适的组件进行拖拽设计。In this embodiment, when the user designs the management system page, it is necessary to create a new design page in the data file directory of the visual design end, and after opening the design page, select appropriate components for drag-and-drop design.
用户设计带展开行的数据表格时，需要在设计页面内拖拽放置表格组件，并对表格列对象属性进行配置。When users design a data table with expanded rows, they need to drag and drop table components on the design page, and configure table column object properties.
用户设计新增/编辑按钮点击弹出外部对话框维护表单信息界面时，需要在主操作页面内拖拽放置新增/编辑按钮，然后单独在对话框设计页面内对表单信息内容进行设计。When the user designs the Add/Edit button and clicks to pop up the external dialog box to maintain the form information interface, you need to drag and drop the Add/Edit button in the main operation page, and then design the form information content in the dialog design page separately.
S12、基于web页面的组件，配置所述组件的元数据，得到页面元数据；S12, based on the component of the web page, configure the metadata of the component to obtain the page metadata;
所述页面元数据包括第一标识ID以及包含建立web页面的所有组件元数据，每个所述组件元数据都包括第二标识ID、组件类型、样式定义、属性定义、事件定义和方法定义；The page metadata includes a first identification ID and includes all component metadata for building a web page, and each of the component metadata includes a second identification ID, a component type, a style definition, an attribute definition, an event definition, and a method definition;
页面元数据的第一标识ID为BatchNo，其可保持整个页面被复用时渲染批次号BatchNo全局唯一，可以让页面内任意子组件能够快速获取到所属同一批次渲染的根页面对象。第二标识ID的BatchNo_UUID中的UUID作用为保持组件拖拽设计时全局唯一，分隔符则用于前端在渲染处理时可以获取渲染批次号及区分组件。The first identifier ID of the page metadata is BatchNo, which can keep the rendering batch number BatchNo globally unique when the entire page is reused, allowing any sub-component in the page to quickly obtain the root page object that belongs to the same batch of rendering. The UUID in the BatchNo_UUID of the second ID is used to keep the components globally unique when the component is dragged and dropped, and the separator is used for the front-end to obtain the rendering batch number and distinguish components during rendering processing.
本发明的第一标识符作用为保持整个页面被复用时渲染批次号BatchNo全局唯一，第二标识符作用为保持组件拖拽设计时UUID全局唯一，分隔符则用于前端在渲染处理时可以获取渲染批次号及区分组件。而页面根容器标识ID只有渲染批次号BatchNo，这样做的好处是可以让页面内任意子组件能够快速获取到所属同一批次渲染的根页面对象。The first identifier of the present invention is used to keep the rendering batch number BatchNo globally unique when the entire page is reused, the second identifier is used to keep the UUID globally unique when the component is dragged and designed, and the separator is used for the front end when rendering processing. You can get the rendering batch number and distinguish components. The page root container ID only has the rendering batch number BatchNo. The advantage of this is that any subcomponent in the page can quickly obtain the root page object that belongs to the same batch of rendering.
在本实施例中，配置管理系统页时，需要配置菜单组件的菜单项元数据属性，该元数据属性与菜单组件模板绑定显示为菜单选择项，然后继续配置菜单组件的菜单项选择事件，在该事件的处理脚本中调用自定义的公共新增标签页选项卡的方法，将选中菜单项的页面地址动态请求生成元数据实例并渲染显示到对应的标签页选项卡区域中。In this embodiment, when configuring the management system page, it is necessary to configure the menu item metadata attribute of the menu component, which is bound to the menu component template and displayed as a menu selection item, and then continues to configure the menu item selection event of the menu component, In the processing script of this event, call the custom method of adding a new tab page, and dynamically request the page address of the selected menu item to generate a metadata instance and render and display it in the corresponding tab page tab area.
配置带展开行的数据表格时，将表格组件行展开的复用页面嵌入地址属性为事先独立设计好的详细信息页面，接着配置表格行展开事件，定义与嵌入复用页面的数据交互处理脚本，该处理脚本会遍历展开的详细页面内所有表单元素组件标识ID，再传参调用自定义的数据挂载方法对表单元素组件进行赋值回填行数据操作。When configuring a data table with expanded rows, set the embedded address attribute of the multiplexed page expanded by the table component row to the detailed information page designed independently in advance, then configure the table row expansion event, and define the data interaction processing script embedded with the multiplexed page. The processing script will traverse the IDs of all form element components in the expanded detail page, and then pass parameters to call the custom data mounting method to assign values to the form element components and backfill row data operations.
配置新增/编辑按钮点击弹出外部对话框维护表单信息界面时，配置按钮组件的点击事件脚本，在该脚本中定义弹出单独设计的目标对话框页面执行步骤，添加弹窗触发前事件执行逻辑，通过调用数据挂载渲染方法，在对话框内组件初始化时对新增/编辑的表单数据回填赋值；然后配置对话框表单内提交按钮的点击事件，添加调用服务接口处理表单数据步骤脚本，将接口请求返回数据缓存到步骤变量中。Configure the new/edit button. When the external dialog box is clicked to pop up the maintenance form information interface, configure the click event script of the button component. In the script, define the execution steps of popping up a separately designed target dialog page, and add the event execution logic before the pop-up window is triggered. By calling the data mount rendering method, the new/edited form data is backfilled when the components in the dialog are initialized; then configure the click event of the submit button in the dialog form, add the call service interface to process the form data step script, and put the interface Request return data is cached in step variables.
所述步骤S2包括以下分步骤：The step S2 includes the following sub-steps:
S21、根据页面元数据调用后端渲染服务模块生成页面元数据实例；S21, calling the back-end rendering service module according to the page metadata to generate a page metadata instance;
S22、根据页面元数据实例调用前端渲染框架生成页面视图。S22. Invoke the front-end rendering framework to generate a page view according to the page metadata instance.
所述步骤S21中，生成的页面元数据实例设置有渲染批次号，其生成方法具体为：In the step S21, the generated page metadata instance is set with a rendering batch number, and the generation method is specifically:
通过后端渲染服务模块将页面元数据中每个组件元数据的第二标识ID进行处理，生成渲染批次号；The second identification ID of each component metadata in the page metadata is processed by the back-end rendering service module to generate a rendering batch number;
在本实施例中，主页面在渲染时已经调用后端服务统一生成了所有组件第一标识ID的渲染批次号BatchNo(不包括复用的子页面)，而当复用渲染子页面时也需要调用后端服务生成子页面的渲染批次号BatchNo，这样做的好处是可以让每次渲染的页面组件对象都是唯一标识的，便于前端组件的区分操作管理。复用渲染子页面的流程为：访问主页面地址；请求主页面元数据模板；返回主页面渲染批次号的页面元数据实例并渲染；请求渲染子页面元数据实例；返回子页面渲染批次号的页面元数据实例并渲染。In this embodiment, the main page has called the back-end service to uniformly generate the rendering batch number BatchNo of the first identification IDs of all components (excluding the multiplexed sub-pages) when rendering, and when the sub-pages are rendered multiplexed, the The back-end service needs to be called to generate the batch number BatchNo of the sub-page. The advantage of this is that each rendered page component object can be uniquely identified, which is convenient for the distinguishing operation management of front-end components. The process of multiplexing and rendering sub-pages is: accessing the main page address; requesting the main page metadata template; returning the page metadata instance of the main page rendering batch number and rendering; requesting the rendering of the sub-page metadata instance; returning the sub-page rendering batch Number of page metadata instances and rendering.
所述步骤S22具体为：根据页面元数据实例中的组件通过前端渲染框架的component语法标签指定渲染的组件，将指定渲染的组件对应的组件元数据与组件模板动态绑定，生成页面视图。The step S22 is specifically: according to the component in the page metadata instance, the component to be rendered is specified through the component syntax tag of the front-end rendering framework, and the component metadata corresponding to the specified rendered component is dynamically bound with the component template to generate the page view.
component语法标签的用法为：渲染一个“元组件”为动态组件，并根据is值决定一个组件被渲染；is值是一个字符串，它既可以是HTML标签名称也可以是组件名称。The usage of the component syntax tag is: render a "meta component" as a dynamic component, and determine a component to be rendered according to the is value; the is value is a string, which can be either an HTML tag name or a component name.
所述步骤S3具体为：The step S3 is specifically:
基于用户需要复用指定的页面视图，触发组件绑定事件，获取页面元数据的第一标识ID，并通过截取前缀得到事件ID，通过后端渲染服务模块调用渲染批次号和事件ID进行事件脚本查询，得到事件脚本实例。Based on the user's need to reuse the specified page view, trigger the component binding event, obtain the first identification ID of the page metadata, and obtain the event ID by intercepting the prefix, and call the rendering batch number and event ID through the back-end rendering service module. Script query to get the event script instance.
在本实施例中，主页面数据列表行展开事件触发操作的方法具体为：In this embodiment, the method for triggering the operation of the main page data list row expansion event is as follows:
用户触发数据列表绑定的行展开事件，调用后端服务请求行展开关联复用的子页面，前端渲染该次复用的子页面元数据实例(前端渲染完成后会把相关组件对象都缓存管理起来，以便后续通过组件元数据的第二标识ID获取使用，调用后端服务请求行展开定义的事件脚本，前端声明数据列表渲染批次的事件脚本实例(当主页面内有事件定义调用组件方法时，只能操作所属同一批次渲染的组件，需要同步更新事件脚本里面的组件引用页面元数据的第一标识ID渲染批次号BatchNo)。执行事件脚本实例中对不同渲染批次页面组件进行数据交互的挂载方法(当主页面操作不同批次渲染的子页面组件时，需要通过组件标识ID的UUID后缀进行数据挂载传参)；子页面内各个表单组件初始化渲染过程中，会执行数据挂载方法进行数据回填绑定展示。The user triggers the row expansion event bound to the data list, calls the back-end service to request the row expansion associated multiplexed sub-page, and renders the metadata instance of the multiplexed sub-page in the front-end (after the front-end rendering is completed, the related component objects will be cached and managed so that it can be subsequently obtained and used through the second identification ID of the component metadata, call the back-end service request line to expand the defined event script, and the front-end declares the event script instance of the data list rendering batch (when there is an event definition in the main page to call the component method , you can only operate the components that belong to the same batch of rendering, and you need to synchronize the update of the first ID of the component reference page metadata in the event script. Interactive mounting method (when the main page operates sub-page components rendered in different batches, data mounting and parameter transmission need to be carried out through the UUID suffix of the component ID); during the initialization and rendering process of each form component in the sub-page, data hanging will be executed. Load method for data backfill binding display.
所述步骤S4具体为：The step S4 is specifically:
S41、根据事件脚本实例触发页面交互事件，调用后端渲染服务模块请求关联复用的子页面；S41. Trigger the page interaction event according to the event script instance, and call the back-end rendering service module to request the associated multiplexed sub-page;
S42、通过前端渲染框架渲染所述复用的子页面的页面元数据实例；并返回所述子页面元数据中的第一标识ID；S42, rendering the page metadata instance of the multiplexed sub-page by the front-end rendering framework; and returning the first identification ID in the sub-page metadata;
S43、根据返回的第一标识ID确定事件脚本中第一标识ID对应第二标识ID的组件，并根据确定的组件进行数据交互的挂载方法，进行页面数据回填，实现页面视图的数据交互。S43: Determine the component in the event script whose first identification ID corresponds to the second identification ID according to the returned first identification ID, and perform page data backfilling according to the determined mounting method of the component for data interaction to realize data interaction of the page view.
所述步骤S4中，数据交互的挂载方法具体为：In the step S4, the mounting method for data interaction is specifically:
获取数据挂载KEY值，创建交互挂载对象，在Vue根容器组件的root根实例对象上缓存挂载对象，并作为KEY值主题消息发布给嵌入页面内的交互组件，判断所述交互组件是否已经创建；Obtain the data mount KEY value, create an interactive mount object, cache the mount object on the root root instance object of the Vue root container component, and publish it as a KEY value topic message to the interactive component embedded in the page, and determine whether the interactive component is has been created;
若是，则根据所述交互组件接收KEY值主题消息，立即执行挂载交互方法，更新己经执行的标识状态；If so, receive the KEY value topic message according to the interaction component, immediately execute the mount interaction method, and update the already executed identification state;
若否，则异步初始化创建交互组件，并获取所述交互组件数据挂载KEY值，查询Vue根容器组件的root根实例对象上缓存的挂载对象，当存在挂载对象时，执行挂载交互方法，更新己经执行的标识状态。If not, asynchronously initialize and create the interactive component, and obtain the data mount KEY value of the interactive component, query the mount object cached on the root root instance object of the Vue root container component, and execute the mount interaction when there is a mount object. method to update the flag state that has already been executed.
进行带展开行的数据表格的数据交互方法具体为：The data interaction method for a data table with expanded rows is as follows:
在表格的行展开事件脚本中对详细信息页面进行数据回填处理，该事件内部会调用后端渲染服务模块获取展开的页面地址对应的页面元数据实例，然后将该实例数据作为JSON参数传递到事件脚本中，这样用户就可以遍历获取到详细信息页面的所有组件第二标识ID信息，以及组件关联的表格行数据对象属性值，再通过调用页面数据挂载方法来处理详细信息页面内组件的回填赋值。In the row expansion event script of the table, data backfill processing is performed on the details page. The back-end rendering service module is called inside the event to obtain the page metadata instance corresponding to the expanded page address, and then the instance data is passed as a JSON parameter to the event. In the script, the user can traverse and obtain the second identification ID information of all components on the detail page, as well as the attribute value of the table row data object associated with the component, and then process the backfill of the components in the detail page by calling the page data mount method. Assignment.
进行新增/编辑按钮点击弹出外部对话框维护表单信息界面的数据交互方法具体为：Click the Add/Edit button to pop up an external dialog to maintain the form information interface. The data interaction method is as follows:
新增/编辑按钮在弹出外部公共对话框时，如果需要传递主页面的数据，就需要通过数据挂载方法进行交互，默认取的整个主页面Vue根容器组件作为外部对话框嵌入页面的父容器组件，主页面根容器组件的第二标识ID嵌入交互的组件的UUID后缀。When the new/edit button pops up the external public dialog box, if you need to transfer the data of the main page, you need to interact through the data mounting method. By default, the entire main page Vue root container component is taken as the parent container of the external dialog embedded page. Component, the second identification ID of the main page root container component is embedded in the UUID suffix of the interacting component.
当事件脚本触发数据挂载方法时，传入挂载点直接父容器组件的第二标识ID至父容器组件实例对象，获取父容器组件对象临时存储的挂载KEY值作为迭代的业务数据KEY值，再截取传入的嵌入的交互组件的UUID后缀，完成生成数据挂载KEY值。When the event script triggers the data mount method, pass the second identification ID of the direct parent container component of the mount point to the parent container component instance object, and obtain the mount KEY value temporarily stored by the parent container component object as the iterative business data KEY value , and then intercept the incoming UUID suffix of the embedded interactive component to complete the generation of the data mount KEY value.
本发明的有益效果为：本发明通过对设计页面的常规元数据添加可计算管理的标识ID规则变量，使原本静态的元数据具有了动态使用的特性，结合后端渲染服务模块生成的页面元数据实例、组件事件脚本实例以及调用API方法，为页面内所有组件的复用渲染及事件隔离运行提供了基础支持，能够在低代码开发平台中实现web页面灵活复用交互。The beneficial effects of the present invention are: the present invention adds a computably manageable identification ID rule variable to the conventional metadata of the design page, so that the original static metadata has the characteristics of dynamic use, combined with the page metadata generated by the back-end rendering service module Data instances, component event script instances, and calling API methods provide basic support for the multiplexed rendering and event isolation operation of all components in the page, enabling flexible reuse and interaction of web pages in a low-code development platform.
本发明通过对web页面进行数据交互，可以增强页面数据模型的通用灵活性，让整个页面的数据结构不再臃肿，管理维护也变得更简单，能够满足更多web系统功能设计需求。The invention can enhance the general flexibility of the page data model by performing data interaction on the web page, so that the data structure of the entire page is no longer bloated, management and maintenance become simpler, and more functional design requirements of the web system can be met.
在本发明的描述中，需要理解的是，术语“中心”、“厚度”、“上”、“下”、“水平”、“顶”、“底”、“内”、“外”、“径向”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的设备或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性或隐含指明的技术特征的数量。因此，限定由“第一”、“第二”、“第三”的特征可以明示或隐含地包括一个或者更多个该特征。In the description of the present invention, it should be understood that the terms "center", "thickness", "upper", "lower", "horizontal", "top", "bottom", "inner", "outer", " The orientation or positional relationship indicated such as "radial" is based on the orientation or positional relationship shown in the accompanying drawings, which is only for the convenience of describing the present invention and simplifying the description, rather than indicating or implying that the device or element referred to must have a specific orientation, It is constructed and operated in a particular orientation and is therefore not to be construed as a limitation of the present invention. In addition, the terms "first", "second" and "third" are used for descriptive purposes only, and should not be construed as indicating or implying relative importance or the number of an impliedly indicated technical feature. Thus, a feature defined by "first", "second", "third" may expressly or implicitly include one or more of that feature.
Claims (10)
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210756228.8ACN115033235A (en) | 2022-06-30 | 2022-06-30 | System and method for flexibly multiplexing web page based on low-code development platform |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210756228.8ACN115033235A (en) | 2022-06-30 | 2022-06-30 | System and method for flexibly multiplexing web page based on low-code development platform |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115033235Atrue CN115033235A (en) | 2022-09-09 |
Family
ID=83126366
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210756228.8APendingCN115033235A (en) | 2022-06-30 | 2022-06-30 | System and method for flexibly multiplexing web page based on low-code development platform |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115033235A (en) |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115454411A (en)* | 2022-09-16 | 2022-12-09 | 福建海峡基石科技集团有限公司 | A low-code rapid development method based on template language |
| CN115775622A (en)* | 2023-02-10 | 2023-03-10 | 成都瑞华康源科技有限公司 | A visualization method based on port configuration of operating room equipment set |
| CN115841102A (en)* | 2022-12-30 | 2023-03-24 | 深圳市金政软件技术有限公司 | Method, device, equipment and storage medium for generating dynamic data report |
| CN115964075A (en)* | 2022-12-28 | 2023-04-14 | 苏州峰之鼎信息科技有限公司 | Application export and import method and device, computer equipment and storage medium |
| CN116560637A (en)* | 2023-04-13 | 2023-08-08 | 珠海沃德尔软件科技有限公司 | Method and system for developing application system in configuration form for digital transformation |
| CN116861125A (en)* | 2023-07-05 | 2023-10-10 | 康键信息技术（深圳）有限公司 | Business data acquisition method, device, computer equipment and readable storage medium |
| CN117234494A (en)* | 2023-09-08 | 2023-12-15 | 红有软件股份有限公司 | Method for dynamically generating front-end page |
| CN118550656A (en)* | 2024-08-01 | 2024-08-27 | 奇秦科技(北京)股份有限公司 | Multi-page form data and event isolation system and method in low-code platform based on SPA |
| CN120257491A (en)* | 2025-06-05 | 2025-07-04 | 深空探测实验室(天都实验室) | A method and device for interface editing and data driving of spacecraft simulation model |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20080022231A1 (en)* | 2006-07-21 | 2008-01-24 | Cyberlink Corp. | Systems and Methods for Downloading Interactive Content to Implement Remote Control Functionality in a Video Playback Device |
| EP2704037A2 (en)* | 2012-08-31 | 2014-03-05 | Sitecore A/S | A method for generating or updating an interactive webpage |
| CN112433799A (en)* | 2020-11-25 | 2021-03-02 | 平安普惠企业管理有限公司 | Page generation method, device, equipment and medium |
| CN112527414A (en)* | 2020-12-23 | 2021-03-19 | 平安普惠企业管理有限公司 | Front-end-based data processing method, device, equipment and storage medium |
| US20210318857A1 (en)* | 2020-04-09 | 2021-10-14 | Modak Technologies FZE | Platform for web services development and method therefor |
| 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 |
| CN114217877A (en)* | 2021-12-17 | 2022-03-22 | 杉数科技(北京)有限公司 | Operation processing method, device, equipment and medium based on page interaction component |
- 2022
- 2022-06-30CNCN202210756228.8Apatent/CN115033235A/enactivePending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20080022231A1 (en)* | 2006-07-21 | 2008-01-24 | Cyberlink Corp. | Systems and Methods for Downloading Interactive Content to Implement Remote Control Functionality in a Video Playback Device |
| EP2704037A2 (en)* | 2012-08-31 | 2014-03-05 | Sitecore A/S | A method for generating or updating an interactive webpage |
| US20210318857A1 (en)* | 2020-04-09 | 2021-10-14 | Modak Technologies FZE | Platform for web services development and method therefor |
| CN112433799A (en)* | 2020-11-25 | 2021-03-02 | 平安普惠企业管理有限公司 | Page generation method, device, equipment and medium |
| CN112527414A (en)* | 2020-12-23 | 2021-03-19 | 平安普惠企业管理有限公司 | Front-end-based data processing method, device, equipment and storage medium |
| 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 |
| CN114217877A (en)* | 2021-12-17 | 2022-03-22 | 杉数科技(北京)有限公司 | Operation processing method, device, equipment and medium based on page interaction component |
Non-Patent Citations (2)
| Title |
|---|
| CHUWEN: "Vue 3 渲染后端返回的标签 | component 标签的使用 和 compile 的使用", pages 1 - 2, Retrieved from the Internet <URL:https://nowtime.cc/webdev/1716.html>* |
| 时遇倾城色: "vue页面引入另一个页面", pages 1, Retrieved from the Internet <URL:https://blog.csdn.net/qq_31970227/article/details/109626246?spm=1001.2014.3001.5502>* |
Cited By (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115454411A (en)* | 2022-09-16 | 2022-12-09 | 福建海峡基石科技集团有限公司 | A low-code rapid development method based on template language |
| CN115964075B (en)* | 2022-12-28 | 2024-03-01 | 苏州峰之鼎信息科技有限公司 | Application export import method and device, computer equipment and storage medium |
| CN115964075A (en)* | 2022-12-28 | 2023-04-14 | 苏州峰之鼎信息科技有限公司 | Application export and import method and device, computer equipment and storage medium |
| CN115841102A (en)* | 2022-12-30 | 2023-03-24 | 深圳市金政软件技术有限公司 | Method, device, equipment and storage medium for generating dynamic data report |
| CN115775622B (en)* | 2023-02-10 | 2023-04-21 | 成都瑞华康源科技有限公司 | Visualization method based on port configuration of operating room equipment set |
| CN115775622A (en)* | 2023-02-10 | 2023-03-10 | 成都瑞华康源科技有限公司 | A visualization method based on port configuration of operating room equipment set |
| CN116560637A (en)* | 2023-04-13 | 2023-08-08 | 珠海沃德尔软件科技有限公司 | Method and system for developing application system in configuration form for digital transformation |
| CN116560637B (en)* | 2023-04-13 | 2023-10-20 | 珠海沃德尔软件科技有限公司 | Method and system for developing application system in configuration form for digital transformation |
| CN116861125A (en)* | 2023-07-05 | 2023-10-10 | 康键信息技术（深圳）有限公司 | Business data acquisition method, device, computer equipment and readable storage medium |
| CN117234494A (en)* | 2023-09-08 | 2023-12-15 | 红有软件股份有限公司 | Method for dynamically generating front-end page |
| CN118550656A (en)* | 2024-08-01 | 2024-08-27 | 奇秦科技(北京)股份有限公司 | Multi-page form data and event isolation system and method in low-code platform based on SPA |
| CN118550656B (en)* | 2024-08-01 | 2024-11-12 | 奇秦科技(北京)股份有限公司 | Multi-page form data and event isolation system and method in low-code platform based on SPA |
| CN120257491A (en)* | 2025-06-05 | 2025-07-04 | 深空探测实验室(天都实验室) | A method and device for interface editing and data driving of spacecraft simulation model |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN115033235A (en) | System and method for flexibly multiplexing web page based on low-code development platform | |
| US12327093B2 (en) | Executing a process-based software application in a first computing environment and a second computing environment | |
| CN104636139B (en) | One kind visualizes cross-platform mobile application exploitation and generation system | |
| CN114064024B (en) | Micro-application development method, device, equipment, storage medium and program product | |
| CN101213515B (en) | Method and apparatus for controlling the z-order of lifted elements rendered in a rendering | |
| CN103064663B (en) | The generation of browser plug-in, issue, loading and update method and system | |
| WO2016155388A1 (en) | Method and device for installing and running application | |
| CN115826963A (en) | Process event development multiplexing method and system based on low-code development platform | |
| CA2853616A1 (en) | Improved configuration of a user interface for a mobile communications terminal | |
| CN110297636A (en) | A kind of automatic production of HTML page and parameter management method based on page configuration file, system and device | |
| CN110297624B (en) | Implementation method of Widget system based on electron framework and television adopting system | |
| CN112052000A (en) | Component multiplexing and rendering method and device | |
| CN108920645A (en) | Method and device for displaying intelligent device page, intelligent device and storage medium | |
| CN114385672A (en) | Information processing method and device, electronic device and storage medium | |
| CN110673827B (en) | Android system-based resource calling method, device, and electronic equipment | |
| CN113504862A (en) | View data processing method and device, target device and storage medium | |
| CN116595284B (en) | Webpage system operation method, device, equipment, storage medium and program | |
| CN118519619A (en) | Application method and device of front-end scaffold | |
| CN118656110A (en) | Page configuration method and device | |
| CN111124386B (en) | Animation event processing method, device, equipment and storage medium based on Unity | |
| CN114968224A (en) | Tree component packaging system and method for multiple service scenes | |
| CN117667265A (en) | Service card generation method and related devices | |
| JP2003140893A (en) | User interface program automatic generation device, automatic generation method, program and recording medium | |
| CN113407183A (en) | Interface generation method, device, equipment and storage medium | |
| EP4621606A1 (en) | Sub-application page processing method and apparatus, and computer device and storage medium |
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 |