WO2025030524A1 - Method and apparatus for back-end data acquisition by webpage component, and computer device - Google Patents

Abstract

A method and apparatus for back-end data acquisition by a webpage component, a computer device, and a storage medium. Specifically, the method comprises: receiving a data request from a front-end webpage; according to the subscription topic of the data request, obtaining corresponding data from the back end via an event bus; and distributing the data to a corresponding component of the front-end webpage. By means of the described method, the event bus serves as a medium for providing back-end data to webpage-end components, and webpage-end components can send requests to the event bus in a unified manner, thereby obtaining corresponding data feedback conveniently and in a unified manner.

Description

Method, device and computer equipment for obtaining background data by web page component Technical Field

The present application relates to the industrial field, and in particular, to a method, apparatus, computer equipment and storage medium for a web page component to obtain background data.

Background Art

Low-code web page display pages are gradually being widely used in industrial applications. For example, low-code widgets are used to display on the front-end web page. However, there is currently no mature solution for low-code front-end web page components to obtain corresponding data from the backend, and there are also problems such as complex configuration and complex testing. How to quickly and easily obtain backend data and how to distribute it to multiple low-code components on the front end of the web page to display the corresponding data information is a problem that needs to be solved.

Summary of the invention

The present invention summary section is provided to introduce some selected concepts in a simplified form, which will be further described in the following detailed description section. The present invention summary section is not intended to identify any key features or essential features of the claimed subject matter, nor is it intended to be used to help determine the scope of the claimed subject matter.

Based on this, the present application provides a method for a web page component to obtain background data, wherein a data request of a front-end web page is received; corresponding background data is obtained through an event bus according to a subscription topic of the data request; and the data is sent to a corresponding component of the front-end web page.

Through the above method, the web page can uniformly obtain the backend data for the web page components through the event bus, providing a unified support and docking method for the data of the web page components.

Furthermore, the data request includes a Websocket data request and an Http data request, and receiving the data request of the front-end web page includes: receiving a Websocket data request or an Http data request of the front-end web page.

Through the above method, the event bus can also connect to two different data request methods, Websocket and Http, to facilitate web components to obtain or request data from the background.

Furthermore, the front-end webpage includes a first component and a second component, and the data is sent to the corresponding component of the front-end webpage, wherein the corresponding component is the first component, and further includes: receiving the output data of the first component through the event bus; if the subscription topic of the second component is related to the first component, then The output data of the first component is sent to the second component through the event bus.

Through the above method, components can obtain corresponding data through the event bus on the premise of subscribing to topics, which facilitates the process of data sharing and transmission between components.

Furthermore, wherein the front-end web page is a single web page application, receiving the data request of the front-end web page includes: receiving the data request of the single web page application.

Through the above method, using the event bus, the corresponding background data can be easily and effectively obtained for a single web application.

Furthermore, the present application also discloses a device for obtaining background data through an event bus, wherein a request receiving module is used to receive data requests from front-end web pages; an event bus module is used to obtain corresponding background data based on a subscription topic of the data request; and a data sending module is used to send the data to a corresponding component of the front-end web page.

The present application also provides a computer device, including a memory and a processor, wherein the memory stores a computer program, and wherein the processor implements the above method when executing the computer program.

The present application also provides a computer-readable storage medium on which a computer program is stored. When the computer program is executed by a processor, the above method is implemented.

The present application also provides a computer program product, which is tangibly stored on a computer-readable medium and includes computer-executable instructions. When the computer-executable instructions are executed, at least one processor is enabled to perform the above-mentioned method.

BRIEF DESCRIPTION OF THE DRAWINGS

Implementations of the present disclosure are illustrated by way of example and not by way of limitation in the figures of the accompanying drawings in which like references indicate the same or similar parts.

FIG. 1 is a schematic diagram of a process of a method for a web page component to obtain background data according to an embodiment of the present application.

FIG. 2 is a schematic diagram of an apparatus for a web page component to obtain background data according to an embodiment of the present application.

FIG3 is a schematic diagram of a computer device used by a web page component to obtain background data according to an embodiment of the present application.

The reference numerals are as follows:

Steps S101-S103

200:      Device

201: Module

202: Module

203: Module

300:      Computer equipment

302: Processor

304: Memory

DETAILED DESCRIPTION

In the following description, a large number of specific details are set forth for the purpose of explanation. However, it is to be understood that the implementation of the present invention can be implemented without these specific details. In other examples, well-known circuits, structures and techniques are not shown in detail to avoid affecting the understanding of the description.

References throughout the specification to "an implementation," "implementation," "exemplary implementations," "some implementations," "various implementations," etc., indicate that the implementation of the invention being described may include certain features, structures, or characteristics, however, it does not mean that every implementation must include these certain features, structures, or characteristics. Furthermore, some implementations may have some, all, or none of the features described for other implementations.

Low-code web page display pages are gradually being widely used in industrial applications. For example, low-code widgets are used to display on the front-end web page. However, there is currently no mature solution for low-code front-end web page components to obtain corresponding data from the backend, and there are also problems such as complex configuration and complex testing. How to quickly and easily obtain backend data and how to distribute it to multiple low-code components on the front end of the web page to display the corresponding data information is a problem that needs to be solved.

The implementation scenario of the present application is to use the event bus as an intermediate medium to provide a connection between the components on the web page and the background data. Specifically, as a component on the web page, by subscribing to a topic, a data request can be uniformly sent to the event bus. After the event bus receives the data request, it obtains the corresponding data from the background, and then feeds the data back to the component on the front end of the web page to complete the corresponding graphical display of the data of the component. The way in which the above components uniformly obtain data from the event bus is more convenient and unified. And the present application discloses a low-code industrial application design. After obtaining the data from the back end, the data is displayed on the widget of the front-end web page to complete the asynchronous data update of the widget of the front-end web page.

Specifically, the present application discloses a method for a web page component to obtain background data, which includes:

S101, receiving a data request from a front-end web page.

The front-end webpage is a usage webpage displayed to the user. The webpage includes components. The component is a webpage module that can be used to obtain data and then display it through certain charts or other methods. The component is displayed on the front-end webpage. In some embodiments, a data request can be sent by loading or setting the front-end webpage. The data request is related to the widget and is used to obtain the data required for the widget to display so as to display it on the corresponding component.

In some embodiments, the corresponding front-end webpage includes not only a plurality of widgets but also a control panel. The control panel can set the data request method of the widget, such as data topic name, data access type, security level, access address (Data URL), etc.

Furthermore, the data request includes a Websocket data request and an Http data request, and the receiving of the data request of the front-end webpage includes: receiving a Websocket data request or an Http data request of the front-end webpage. The data request comes from a widget of the front-end webpage made by the low-code platform.

S102, acquiring corresponding data in the background through the event bus according to the subscription topic of the data request.

Among them, the data request contains the subscribed topic. The way this application obtains data is through the subscription of the topic, so as to obtain the data under the corresponding topic from the background. For example, after subscribing to the relevant topic, when the data of the relevant topic is generated or discovered in the background, the data will be transmitted to the event bus. The data acquisition method is relatively convenient and asynchronous. In short, after the event bus obtains the corresponding data request, the corresponding data will be obtained from the background through the subscribed topic.

S103, sending the data to the corresponding component of the front-end webpage.

After the event bus obtains the corresponding data, it sends the corresponding data to the corresponding component of the front-end webpage, so that after the corresponding component obtains the corresponding data, it can further display the obtained data.

Further, the data distribution includes: the push data received from the server by Websocket and the response data obtained after requesting the server by Http. Specifically, the data distribution includes the push data received from the server after establishing the Websocket connection and the response data obtained after requesting the server data under the Http protocol.

The Websocket is a protocol that can receive data pushed by the server after establishing a long link. When the event bus obtains the corresponding request and obtains data from the background, the background will actively push the data of the corresponding topic to the event bus. After receiving the data, the event bus sends it to the components of the front-end web page, thereby completing the data update of the front-end web page components.

The HTTP is a protocol that usually requests the server to obtain response data, which is triggered by the loading of the web page. When the web page loads and updates the data display of the component, the data request is sent to the event bus, which then obtains data from the background and feeds it back to the component of the front-end web page. Each update of the data display of the component is completed by loading the web page. If there is no data request in the form of HTTP, the display data of the component of the front-end web page remains unchanged.

Furthermore, the front-end web page includes a first component and a second component, and the data is sent to the corresponding component of the front-end web page, wherein the corresponding component is the first component, and further includes: receiving the output data of the first component through the event bus; if the subscription topic of the second component is related to the first component, sending the output data of the first component to the second component through the event bus.

Specifically, among the components of the web page front end, some components can obtain the output data of other components as the data they need. These components can be called second components, and they subscribe to the relevant topics of other components. The subscribed components can be called first components. In some embodiments, the first component subscribes to the relevant topics of the background data. The second component subscribes to the relevant topics of the first component, and the purpose is to obtain the processed data or output data of the first component. After completing data processing, the first component will send the corresponding output data to the event bus. Therefore, as long as the second component sends or has previously sent a data request for the topic of the first component to the event bus, it can obtain the data of the topic of the first component that it has subscribed to through the event bus; in other words, after receiving the data about a topic from the first component, the event bus will send it to the relevant second component that has subscribed to this topic. After receiving the corresponding data, the second component displays the corresponding data.

Furthermore, wherein the front-end web page is a single web page application, receiving the data request of the front-end web page includes: receiving the data request of the single web page application.

Specifically, the method of connecting the front-end web widget and the back-end data transmission through the event bus of the present application is suitable for single web applications because the switching page of a single web application only replaces the component in the routing module, so the event bus is always retained and does not need to be frequently reloaded.

Furthermore, the event bus can also be called a web fronted event bus (Web fronted event bus), which can support corresponding components of multiple web front ends and can exchange data with the back end. When a component of a web front end subscribes to an event of a certain topic, the event bus will obtain the data of the event of the corresponding topic from the background, and then push it to the web front end component or load it to the web front end component. The corresponding web front end component will display the data of the event of the subscribed topic accordingly. In the above manner, the components of the web front end can be expanded arbitrarily, and the web page components generated by low code that subscribe to the same data can obtain the data of the events subscribed by the background through the web front end event bus as long as they are connected to the web front end event bus.

Specifically, the backend data is subscribed through subscription. When the frontend web page is loaded, the data connection and transmission from the backend data to the frontend web page component can be completed through an intermediate medium, such as a network frontend event bus, and further displayed on the components of the frontend web page.

Furthermore, some components can also use the output of other components as subscribed events or topics, and use the output of the corresponding component's events or topics as their own acquired data. For example, component 2 can send the processed topic topic a2 and data data a2 to the event bus through its own component, and component 3 subscribes to topic topic a2, so component 3 obtains the corresponding data data a2 of the corresponding topic topic a2 from the event bus, so that component 3 completes the corresponding data display. The displayed data content is the corresponding data data a2 of topic topic a2.

Furthermore, the web page front-end event bus performs the same processing for the two data acquisition modes of Websocket and HTTP. This is equivalent to using a unified configuration for both Websocket and HTTP requests, decoupling different request methods, and only associating the topic itself. In this way, both Websocket requirements and HTTP requirements can be processed uniformly.

Furthermore, the configuration of the component may include: data topic name, data access type, security level, and access address (Data URL). The configuration of Websocket and HTTP can be as follows:

In some embodiments, when the webpage is configured, the left half of the webpage is the webpage front-end component, and the right half of the webpage is the configuration panel. The configuration panel can be used to configure the contents of Table 1 and Table 2 above.

Furthermore, the present application also found the following technical problems:

a. Manufacturing systems need to push information to a web front end in product line operations to display charts or request approvals. If many web front end components are composed of low-code engines that lack unified network connection management, events from websocket connections on the back end may be difficult to scale.

b. Web front-end components composed of low-code engines usually configure network connections through Websocket or HTTP, which leads to complexity in development, maintenance and testing.

Some of the inherent reasons for the above problems are analyzed as follows:

a. Network front-end components composed of low-code engines usually obtain data through independent http requests (standalone http request), and may require consequence triggers to organize interactions with other front-end components. If there is no unified event bus in the network front-end code base, it may increase the complexity of the system.

b. Developers must build multiple utilities for the network on the network front end (e.g. error/warning messages for network events). Testers must build unit tests using different methods for each network connection.

Therefore, this application designs an event bus for the front end of the web page, and connects the data between the front end and the back end through the event bus. The details are as follows:

The further developed web frontend event bus based on Rx.JS (Apache-2.0 license) will solve the problem of extending components for event response. Specifically, the event bus provides subscription and publishing interfaces for each web frontend component, allowing low-code based web frontend components to get data or deliver data by topic with consequence for event, which means that web pages composed of low-code engines can send events in a simple way over network connections; however, frontend projects composed of single-page applications (Single Page Application) will be suitable for the present invention. Frontend projects composed of multi-page applications (Multi Page Application) cannot benefit from the general event bus.

Therefore, the production pipeline system can implement the network front end with a lower complexity code base design (network front end components based on user interface configuration) through component-level control capabilities.

Furthermore, the Rx.JS-based event bus can simplify the utilities of the network front end as follows:

The event bus will use the observable function of Rx.JS (such as the observable function for events) to obtain asynchronous results (such as asynchronous acquisition through the Promise function) for Websocket (push) and HTTP (request loading), which allows the configuration to use the same code, thereby unifying the request configuration, resulting in the only association being the subject, which is used for Websocket or HTTP response processing. Therefore, the client code that handles the Websocket or HTTP receiving network connection will use the signal function of Rx.JS to send events to subscribers (observable objects). Therefore, during the development, maintenance, and testing process, this design simplifies the network front-end components developed based on the low-code engine.

In summary, the design feature of this application is to receive http or websocket data requests through the event bus in an environment where a network front-end component (a network front-end component based on user interface configuration) is made using a low-code engine.

It should be understood that, although the various steps in the flowchart of FIG. 1 are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence according to the order indicated by the arrows. Unless there is a clear description in this article, the execution of these steps is not strictly limited in order, and these steps can be executed in other orders. Moreover, at least a part of the steps in FIG. 1 may include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily to be carried out in sequence, but can be executed in turn or alternately with other steps or at least a part of the steps or stages in other steps.

Figure 2 provides a device 200 for a web page component to obtain background data, wherein a request receiving module 201 is used to receive a data request from a front-end web page; an event bus module 202 is used to obtain corresponding background data based on a subscription topic of the data request; and a data sending module 203 is used to send the data to a corresponding component of the front-end web page.

Furthermore, the data request includes a Websocket data request and an Http data request, and the request receiving module 201 is used to receive a Websocket data request or an Http data request of a front-end web page.

Furthermore, the front-end webpage includes a first component and a second component, and the event bus module 202, Used for sending the data to the corresponding component of the front-end web page, wherein the corresponding component is a first component, and the event bus module 202 is also used to receive the output data of the first component; if the subscription topic of the second component is related to the first component, the output data of the first component is sent to the second component.

Furthermore, the front-end web page is a single web application, and the request receiving module 201 is further used to receive a data request of the single web application.

It should be noted that the device may include more or fewer modules to implement the described functions. For example, at least one module in FIG. 2 may be further divided into a plurality of different submodules, each of which is used to perform at least a portion of the operations described herein in conjunction with the corresponding module. In addition, in some examples, the device 200 may also include additional modules for performing other operations already described in the specification. In addition, those skilled in the art will appreciate that the exemplary device 200 may be implemented using software, hardware, firmware, or any combination thereof.

Fig. 3 provides a computer device. According to one embodiment, the computer device 300 may include a processor 302, and the processor 302 executes a computer program stored in a memory 304. When the computer program is executed by the processor, the above method is implemented.

Those skilled in the art will understand that the structure shown in FIG. 3 is merely a block diagram of a partial structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the present application is applied. The specific computer device may include more or fewer components than shown in the figure, or combine certain components, or have a different arrangement of components.

Those of ordinary skill in the art can understand that all or part of the processes in the methods for implementing the above-mentioned embodiments can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the implementation methods of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the various embodiments provided in this application can include at least one of non-volatile and volatile memory. Non-volatile memory may include read-only memory (ROM), magnetic tape, floppy disk, flash memory or optical memory, etc. Volatile memory may include random access memory (RAM) or external cache memory. As an illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM).

The present application also provides a computer-readable storage medium on which a computer program is stored. When the computer program is executed by a processor, the above steps are implemented.

The present application also provides a computer program product, which is tangibly stored on a computer-readable medium and includes computer-executable instructions, which, when executed, cause at least one processor to perform the above method.

Furthermore, the computer program can be stored and run in the cloud to perform the method. The components of the program can be deployed on multiple devices and the cloud. For example, the corresponding steps can be deployed and run on a local or local computer, or run on different cloud devices, and transmit signals through a communication connection, or can be deployed and run on a local or local computer. This application does not limit the manner or method, and can flexibly deploy and deploy the corresponding technology, making full use of the cloud, big data, supercomputing power and other equipment and technologies to execute and complete the method.

Some implementations of the present disclosure may include articles. Articles may include storage media, which are used to store logic. Examples of storage media may include one or more types of computer-readable storage media capable of storing electronic data, including volatile memory or non-volatile memory, removable or non-removable memory, erasable or non-erasable memory, writable or rewritable memory, and the like. Examples of logic may include various software units, such as software components, programs, applications, computer programs, applications, system programs, machine programs, operating system software, middleware, firmware, software modules, routines, subroutines, functions, methods, processes, software interfaces, application program interfaces (APIs), instruction sets, computing codes, computer codes, code segments, computer code segments, words, values, symbols, or any combination thereof. In some implementations, for example, articles may store executable computer program instructions, which, when executed by a processor, cause the processor to perform the methods and/or operations described herein. Executable computer program instructions may include any suitable type of code, such as source code, compiled code, interpreted code, executable code, static code, dynamic code, and the like. Executable computer program instructions can be implemented according to a predefined computer language, method or syntax for commanding a computer to perform a specific function. The instructions can be implemented using any appropriate high-level, low-level, object-oriented, visual, compiled and/or interpreted programming language.

What has been described above includes examples of the disclosed architecture. It is certainly not possible to describe every conceivable combination of components and/or methods, but those skilled in the art will appreciate that many other combinations and arrangements are possible. Therefore, the novel architecture is intended to encompass all such substitutions, modifications and variations that fall within the spirit and scope of the appended claims.

Claims (11)

A method for a web page component to obtain background data, wherein: Receive data requests from front-end web pages; According to the subscription topic of the data request, the corresponding data of the background is obtained through the event bus; Distribute the data to corresponding components of the front-end web page. According to the method of claim 1, wherein the data request includes a Websocket push request and an Http load request, and the receiving of the data request of the front-end web page includes: Receive Websocket data requests or Http data requests from the front-end web page. The method according to claim 1, wherein the front-end webpage includes a first component and a second component, and the sending of the data to the corresponding component of the front-end webpage, wherein the corresponding component is the first component, further comprises: Receiving output data of the first component via the event bus; If the subscription topic of the second component is related to the first component, the output data of the first component is sent to the second component through the event bus. The method according to claim 1, wherein the front-end webpage is a single webpage application, and receiving the data request of the front-end webpage comprises: A data request from the single webpage application is received. A device (200) for a web page component to obtain background data, wherein: A request receiving module (201), used for receiving a data request from a front-end web page; An event bus module (202) is used to obtain corresponding data from the background according to the subscription topic of the data request; The data sending module (203) is used to distribute the data to the corresponding components of the front-end web page. The device (200) according to claim 5, wherein the data request includes a Websocket push request and an Http load request, The request receiving module (201) is used to receive a Websocket data request or an Http data request from a front-end web page. The device (200) according to claim 5, wherein the front-end webpage comprises a first component and a second component, The event bus module (202) is used for sending the data to the corresponding component of the front-end webpage, wherein the corresponding component is a first component, The event bus module (202) is also used to receive output data of the first component; if the subscription topic of the second component is related to the first component, the output data of the first component is sent to the second component. The device (200) according to claim 5, wherein the front-end web page is a single web application, The request receiving module (201) is also used to receive a data request from the single webpage application. A computer device comprises a memory and a processor, wherein the memory stores a computer program, wherein the processor implements the steps of any one of the methods of claims 1 to 4 when executing the computer program. A computer-readable storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the steps of the method according to any one of claims 1 to 4. A computer program product tangibly stored on a computer readable medium and comprising computer executable instructions which, when executed, cause at least one processor to perform the method according to any one of claims 1 to 4.