Service component loading method and related device

Abstract

The embodiment of the invention provides a service component loading method and a related device, and the method comprises the following steps: obtaining a remote component corresponding to a service component, the remote component comprising a code component of a first format and a configuration file of a second format; wherein the code component in the first format and the configuration file in the second format can be identified by a remote application; and storing the code component in the first format and the component information. Wherein the component information comprises a code storage path of the code component in the first format and configuration information in the configuration file in the second format; the stored code component in the first format and the component information can be acquired by a remote application. Therefore, the same service component can be called by a plurality of applications without repeated development, so that code redundancy caused by repeated development of similar functional components in different subsystems is improved, and maintenance complexity is simplified.

Description

Technical Field

[0001] The present application relates to the field of server technology, and in particular to a service component loading method and related devices. Background Art

[0002] The front end is the front end of the website, which runs on browsers such as computers and mobile devices to display web pages for users to browse. As the front end pays more and more attention to functional interaction, the reuse of front-end components is becoming increasingly important because it can reduce code duplication and facilitate code maintenance and updates.

[0003] As the scale and complexity of front-end application systems continue to increase, dividing the system into multiple subsystems (or microservices) has become a common architectural choice. Each subsystem has its own engineering project, but this will cause the following problems: similar functional components are repeatedly developed in different subsystems, resulting in code redundancy and increased maintenance complexity. Summary of the invention

[0004] The embodiments of the present application provide a business component loading method and related devices, which are used to enable business components to be used by multiple applications without the need for repeated development, thereby avoiding code redundancy and simplifying maintenance complexity.

[0005] In a first aspect, an embodiment of the present application provides a method for loading a business component, which is applied to a computing device. The computing device refers to a device with a computing function, which may be a server. The method includes the following contents:

[0006] The computing device can obtain the remote component corresponding to the business component, wherein the remote component includes a code component in a first format and a configuration file in a second format. The code component in the first format and the configuration file in the second format can be recognized by the remote application; the code component in the first format and the component information are saved. The component information includes the code storage path of the code component in the first format and the configuration information in the configuration file in the second format; the saved code component in the first format and the component information can be obtained by the remote application. It can be understood that the remote application can use the configuration information in the code component and the component information to register the business component and restore the business environment.

[0007] Thus, the computing device can obtain and save the remote component corresponding to the business component that can be recognized by the remote application, save the code component and component information in the remote component, and when a certain application or multiple applications need the business function corresponding to the business component, the computing device can obtain and parse the component information, thereby obtaining the saved code component using the code storage path of the component information, and then restore it to the business component using the configuration information in the code component and component information. This method can realize that the same business component is called and implemented by multiple applications without repeated development, thereby improving the code redundancy caused by repeated development of similar functional components in different subsystems and simplifying the maintenance complexity.

[0008] In one possible implementation, a business component is a component corresponding to a business function created based on a front-end development framework and / or a user interface UI component library. The business component includes a business code and configuration information, the business code corresponds to a code component in a first format, and the configuration information corresponds to a configuration file in a second format. Exemplarily, the component constructor can construct a business component based on Vue and Element Plus. Business component design is performed through an existing front-end development framework and / or UI component library, without having to start from scratch, thereby improving design efficiency. Furthermore, by setting the front-end development framework and / or UI component library as a business component, these UI component libraries or front-end development frameworks can be reused, saving time and resource loss for repeated development.

[0009] In another possible implementation, the remote component is a component corresponding to the packaged business component, wherein the first format code component in the remote component is a JS format code component, and the second format configuration file is a JavaScript object notation Json format configuration file.

[0010] In another implementation, a property interface is set inside the remote component, and through the property interface, the property modification operation triggered by the property configuration area of ​​the component page is received to synchronously modify the saved remote component; the component page includes a business component and a property configuration area. For example, if a user triggers an edit button of a remote component, the properties of the remote component can be edited, and the modified properties are synchronized to the component information in the memory through the property interface. If a user triggers a delete button of a remote component, the remote component is deleted. If a user triggers a configuration button of a remote component, the parameters of the remote component can be modified, and the modified parameter information is synchronized to the component information in the storage through the property interface. Therefore, through the property interface, the user can synchronously modify the information of the remote component, and the modification is simple and easy to use.

[0011] Furthermore, if the component page includes multiple business components, a function attribute configuration operation of a single business component triggered on the attribute configuration area, or a configuration operation of relationship attributes of multiple components may be received.

[0012] In another specific implementation, the code components are stored in the first resource library, and a code storage path is generated; and the component information including the code storage path and configuration information is stored in the second resource library, thereby facilitating the separate management of the code components and the component information.

[0013] Among them, the first resource library is a static resource library, and the second resource library is a persistent storage resource library. Since the configuration of business components is often dynamic and changes with the changes in the deployment environment. Therefore, the configuration information will be updated frequently. If the configuration file is stored in the persistent storage library, the entire configuration file needs to be replaced every time the configuration information is updated. This method will increase the complexity of the operation and may also cause unnecessary downtime. And the entire file must be loaded every time the configuration is read, which will increase unnecessary overhead. Therefore, the component information of the business component is stored in the persistent storage resource library instead of directly storing the configuration file.

[0014] In another embodiment, in response to receiving a retrieval request sent by a remote application, component information is sent to the remote application so that the remote application obtains the saved code component in the first format based on the code storage path in the component information, and registers the business component based on the code component in the first format and the configuration information in the component information.

[0015] In yet another embodiment, if the business component is created based on a front-end development framework and / or a user interface UI component library; a front-end development framework is created based on the business component, and / or a UI component library is created.

[0016] In a second aspect, an embodiment of the present application provides a computing device, including:

[0017] Memory, used to store programs;

[0018] The processor is used to execute the program stored in the memory. When the program stored in the memory is executed, the processor is used to execute any method as described in the first aspect.

[0019] In a third aspect, the present application provides a computer storage medium for storing a computer program, which, when executed, is used to implement the method provided in any one of the embodiments of the first aspect of the present application.

[0020] In a fourth aspect, the present application provides a computer program product comprising instructions, which, when executed on at least one computing device, enables the at least one computing device to implement the method provided in any one of the embodiments of the first aspect of the present application.

[0021] Any of the business component loading methods provided above corresponds to a computing device or a computer-readable storage medium or a computer program product, etc., which is used to execute the corresponding method provided above. Therefore, the beneficial effects that can be achieved can refer to the beneficial effects in the corresponding method and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] Figure 1 A schematic diagram of the structure of a computing system is provided for an embodiment of the present application;

[0023] Figure 2 A flowchart of a method for loading a service component provided in an embodiment of the present application;

[0024] Figure 3 A schematic diagram of a display page provided in an embodiment of the present application;

[0025] Figure 4 A schematic diagram of loading a service component provided in an embodiment of the present application;

[0026] Figure 5 A schematic diagram of a component builder provided in an embodiment of the present application;

[0027] Figure 6 A schematic diagram of implementing a component center is provided for an embodiment of the present application;

[0028] Figure 7 A schematic diagram of a component parser provided in an embodiment of the present application. DETAILED DESCRIPTION

[0029] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0030] The term "and / or" in this article is merely a description of the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone.

[0031] The terms "first" and "second" in the description and claims of the embodiments of the present application are used to distinguish different objects rather than to describe a specific order of objects. For example, a first target object and a second target object are used to distinguish different target objects rather than to describe a specific order of target objects.

[0032] In the embodiments of the present application, words such as "exemplary" or "for example" are used to indicate examples, illustrations or descriptions. Any embodiment or design described as "exemplary" or "for example" in the embodiments of the present application should not be interpreted as being more preferred or more advantageous than other embodiments or designs. Specifically, the use of words such as "exemplary" or "for example" is intended to present related concepts in a specific way.

[0033] In the description of the embodiments of the present application, unless otherwise specified, the meaning of "multiple" refers to two or more than two. For example, multiple processing units refer to two or more processing units; multiple systems refer to two or more systems.

[0034] First, the professional terms involved in the embodiments of the present application are introduced.

[0035] Front-end development framework: A front-end development framework is a set of predefined code libraries and tools to help developers build user interfaces more efficiently. It provides a set of standardized structures, components, and patterns, allowing developers to focus on business logic without having to write all the HTML, CSS, and JavaScript code from scratch. Common front-end development frameworks include React, Vue, and Angular.

[0036] UI Component Library: UI Component Library is a set of pre-built, reusable user interface components designed to simplify the front-end development process. These components are usually developed based on a front-end framework, provide common UI elements (such as buttons, input boxes, tables, modal boxes, etc.), and have been styled and optimized for interaction. In an embodiment of the present application, the UI component library includes Element UI, Element Plus, Ant Design UI, Material-UI, etc., which can only provide UI component capabilities with similar basic functions.

[0037] Build Tool: Build Tool is used to optimize, compress, merge and package the source code of the front-end project (such as HTML, CSS, JavaScript, etc.) to generate files that can be run in the browser. Build Tool can not only process static resources, but also compile, translate, lazy load and other operations on the code to improve the performance of the application and user experience. Common build tools include: Webpack, Vite, Rollup, etc.

[0038] Web applications: Web applications are applications built on Web technologies and accessed through a browser. Unlike traditional desktop applications, Web applications do not need to be installed, and users can use them by simply opening a browser. Web applications can be static (only displaying information) or dynamic (interacting with the server, processing user input, etc.), and can run on a variety of devices, such as computers, mobile phones, and tablets.

[0039] The embodiment of the present application provides a method for loading a business component. By packaging the business component into a remote component that can be recognized by a remote application, the code component and component information in the remote component are saved. When a certain application or multiple applications need the business function corresponding to the business component, the component information can be obtained and parsed, thereby using the code storage path of the component information to obtain the saved code component, and then using the configuration information in the code component and component information to restore it to the business component. This method can realize that the same business component can be called and implemented by multiple applications without repeated development, thereby improving the code redundancy caused by repeated development of similar functional components in different subsystems and simplifying the maintenance complexity.

[0040] The following is an example of an application scenario of the embodiment of the present application.

[0041] As an example, the business component loading method provided in the embodiment of the present application can be applied to an e-commerce website. Among them, the e-commerce website may need to support applications on multiple platforms, such as mobile terminals (i.e., H5 pages), applets (i.e., third-party applications), or personal computer applications. Each application has similar functional modules, such as product details pages, shopping carts, or order management. When applications on different platforms are running, they can obtain saved component information, and obtain saved code components based on the code storage path in the component information, and then use the code components and the configuration information in the component information to restore the business components and the operating environment of the business components.

[0042] The following is an example of the hardware system architecture of the application scenario.

[0043] Attached Figure 1 A schematic diagram of the structure of a computing system 100 is provided for an embodiment of the present application. The computing system 100 includes a terminal 120, a first server 140, and a second server 130. The terminal 120 is connected to the first server 140 via a communication network 1601. The second server 130 is connected to the first server 140 via a communication network 1602.

[0044] Terminal refers to a device that supports human-computer interaction, has the ability to access the network, and is usually equipped with an operating system. The types of terminal 120 include but are not limited to mobile phones, tablet computers, laptops, desktop computers, cars, vehicle-mounted terminals, wearable devices, handheld game consoles, etc. Terminal 120 may also be called user equipment (UE), smart terminal, mobile terminal user equipment (user device) or terminal equipment (terminal equipment).

[0045] The terminal 120 runs a world wide web (Web) application, an H5 application or other third-party light application. A Web application is an application accessed through a Web browser. A third-party light application refers to a child application that depends on a parent application to run. An H5 application refers to a Web application built based on HyperText Markup Language (HTML) 5 technology. The terminal 120 interacts with the first server 140 through the application to access the service of the remote component stored in the first server 140.

[0046] In one example, the terminal 120 can implement the function of obtaining remote components by running the component constructor. In addition, the terminal 120 can add a component interpreter to each application on the Web application platform. When the application needs to execute a certain business function, it can obtain component information from the server based on the component interpreter, and parse the component information based on the component interpreter to obtain the code storage path and configuration information, load the code component from the database (specifically the first resource library) based on the code storage path, and implement remote loading of components based on the code component and configuration information.

[0047] The second server 130 is for developers. In an embodiment of the present application, the second server 130 may have a built-in component constructor, and developers may construct business components corresponding to business functions based on the component constructor, and package the business components into remote components that can be recognized by the component interpreter. In one implementation, the component constructor constructs the business components based on the front-end development box and / or the UI component library. In another implementation, the component constructor calls a packaging tool to package the business components into remote components, for example, packaging the business components into a ZIP compressed package.

[0048] The first server 140 is used to obtain the remote component, store the standardized code component in the remote component, and store the component information. The component information includes the code storage path of the code component and the configuration information included in the configuration file. In one implementation, the first server 140 is used to store the code component in the first resource library and generate the code storage path. The component information including the code storage path and the configuration information in the configuration file is stored in the second resource library. For example, the first resource library is a static resource library, and the second resource library is a relational database, etc.

[0049] The first server 140 allows the terminal to access the service through the network. The first server 140 can be an independent server, or a cluster or distributed system including multiple servers, or a cloud computing platform or a virtualization center. The server included in the server 140 can be a physical server, or a virtual machine, a container, or a virtualized device based on network function virtualization (NFV). The server included in the server 140 can be a physical server, or a virtualized device such as a virtual machine or a container.

[0050] The communication network 1601 is used to support the data communication connection between the terminal 120 and the first server 140. The communication network 1601 generally supports standard communication technologies and / or protocols. The communication network 1601 is generally the Internet, and may also be any combination of a local area network (LAN), a metropolitan area network (MAN), a wide area network (WAN), a mobile, wired or wireless network, a private network or a virtual private network. The communication network 1601 includes one or more network devices, such as switches, routers, etc.

[0051] The communication network 1602 is used to support the data communication connection between the second server 130 and the first server 140. The communication network 1602 generally supports standard communication technologies and / or protocols. The communication network 1602 is generally the Internet, and may also be any combination of a local area network (LAN), a metropolitan area network (MAN), a wide area network (WAN), a mobile, wired or wireless network, a private network or a virtual private network. The communication network 1602 includes one or more network devices, such as switches, routers, etc.

[0052] It should be noted that the above embodiments are only for illustrative purposes and the embodiments of the present application can be adjusted as needed.

[0053] The following is an example of the method flow of the embodiment of the present application.

[0054] Attached Figure 2 A flowchart of a method for loading a service component provided in an embodiment of the present application. Figure 2 The method 200 shown is as follows Figure 1 The first server, the second server and the terminal are interactively executed. The method specifically includes the following steps:

[0055] S210: The second server obtains a service component.

[0056] The business component refers to a unit or module including codes and configuration files related to executing a business or a specific function of a business. In the embodiment of the present application, the business component can be a folder, and each folder includes two parts: code and configuration file.

[0057] Code includes but is not limited to logic code and application programming interfaces that implement business or business functions.

[0058] The configuration file includes the configuration information corresponding to the business component. The configuration information refers to the parameters, dependencies, and version information required for the runtime of the business component. In an embodiment of the present application, the configuration information may include configurable properties and the default values ​​set. Configurable properties refer to user-defined properties in a business component. For example, for a business component of a web application, the configurable properties include but are not limited to: Application Programming Interface (API) connection information (such as database connection string, message queue address, etc.), timeout, number of retries, etc. In addition, the configuration information also includes information such as component name and component version.

[0059] In an embodiment of the present application, the second server is for developers. Therefore, the second server is also referred to as a construction server. Developers can use the second server to create a business component that implements a certain business function based on the front-end development framework of the second server and / or the UI component library. In one implementation, the second server can have a built-in component builder, which builds business components based on the front-end development framework and / or the UI component library.

[0060] For example, component constructor A101 can configure the business component of the target business function in the UI component library named Element Plus in the front-end development framework Vue3. For example, if the business is to process orders, component constructor A101 can construct a business component with a component name of "OrderManagement". The configuration information of the business component may include basic information and configurable properties. Among them, the basic information is: the component name is OrderManagement, and the component version is V1.0. The configurable properties and their default values ​​are: API request timeout, the default value is 10ms, the number of retries after request failure, the default value is 10 times, the maximum number of items allowed in each order, the default value is 5 pieces, the supported currency, the default value is RMB, etc.

[0061] S220: The second server packages the business components into remote components.

[0062] Remote components refer to business components that can be identified and parsed by the component parser. That is, the component parser can identify the code and configuration information in the business component through the remote component.

[0063] The remote component is a component in a standardized format. That is, the code in the remote component is a code component in the first format, and the configuration file is a configuration file in the second format. The first format and the second format may be the same or different, and both the first format and the second format are standardized formats that can be recognized by the component parser. For example, the component constructor can package the code in the business component to form a code block in JavaScript (JS for short) format, and package the configuration file to form a configuration file in Json format.

[0064] It should be noted that the first format is a code block (or code component) in JS format, it can also be a specific file structure, or it can be a specific binary format. For example, the second format is a code block (or code component) in JS format, it can also be a specific file structure, or it can be a specific binary format, etc., which is not specifically limited in the embodiments of the present application.

[0065] In the embodiment of the present application, the Web application may be multiple different applications, such as Figure 1 As shown, a Web application may include application A, application B, and application C. Each application is provided with a component interpreter. The application can identify and parse the components in a standardized format through the corresponding component interpreter, that is, the remote component. Therefore, even if different Web applications use different front-end development frameworks, they can still understand this standardized format through the component interpreter, and correctly parse and load the remote component.

[0066] Furthermore, after the second server packages the business component into a remote component, the packaged remote component can be displayed on the display page corresponding to the second server. Figure 3 FIG. 3 is a schematic diagram of a display page provided in an embodiment of the present application. The display page 300 includes multiple remote components, for example, Figure 3 It shows remote components such as single-line text, multi-line text, number, amount, radio button, check box, drop-down single-item box and drop-down multi-item box.

[0067] S230: The second server sends the remote component to the first server.

[0068] After acquiring the remote component, the second server sends the remote component to the first server, so that the first server saves the remote component.

[0069] In the embodiment of the present application, the second server does not specifically limit the manner in which the remote component is sent, for example, the remote component is sent to the first server via an HTTP POST request or other protocols. After receiving the request, the first server parses the request content to obtain the remote component.

[0070] S240. The first server saves the code component and component information in the remote component.

[0071] After receiving the remote component of the terminal, the first server stores the code component in the remote component and generates a code storage path to facilitate subsequent terminals to obtain the code component based on the code storage path.

[0072] In addition, the first server also extracts the configuration information of the configuration file in the remote component, and combines the configuration information and the code storage path into component information in a standardized format so that the component parser can identify and parse the component information. Similarly, the format of the component information in a standardized format can be a Json object, a specific file structure, or a specific binary format. For example, the component information is the following Json object:

[0073] Json object {

[0074] Target resource identifier: code storage address

[0075] Attribute: Configuration information

[0076] …

[0077] }

[0078] It should be noted that the component information may also include other content, which is not specifically limited in the embodiments of the present application.

[0079] Furthermore, for the convenience of management, Figure 1As shown, the code components are stored in the first resource library, and the component information is stored in the second resource library. The first resource library and the second resource library are different data storage devices in the server. The first resource library can be a relational database, a non-relational database, a message queue or other, and the second resource library can also be a relational database, a non-relational database, a message queue or other, which is not specifically limited in the implementation of this application.

[0080] Among them, steps S210 to S240 are the process of storing the remote component of the business component in the first server, which is called process 1. The subsequent steps S250 to S2100 are the process of the Web application using the remote component, which is called process 2. Process 1 and process 2 are parallel processes.

[0081] S250: The terminal sends a service request to the first server.

[0082] The terminal sends a service request to the first server according to the service demand.

[0083] In one implementation, a terminal has a built-in Web application platform, which includes multiple applications, such as Figure 1 As shown, the Web application includes three applications, namely application A, application B and application C.

[0084] If application A has a first business function requirement, application A sends a first business request to the server, and the first business request is used to obtain a first remote component corresponding to the first business function from the server. If application B has a second business function requirement, application B sends a second business request to the server, and the second business request is used to obtain a second remote component corresponding to the second business function from the server. If application A has a third business function requirement, application C sends a third business request to the server, and the third business request is used to obtain a third remote component corresponding to the third business function from the server.

[0085] S260. The first server obtains target component information corresponding to the business request from the stored component information.

[0086] At this stage, after receiving the service request from the terminal, the first server needs to obtain the corresponding remote component according to the information in the service request. Specifically, the first server will parse the service request and identify the service function (i.e., target function) required by the application. Figure 1 As shown, the first server can obtain target component information from the second resource library.

[0087] Next, the first server searches for and extracts target component information related to the target functional business function from the stored component information.

[0088] The target component information is component information corresponding to the target business function. The target component information includes target configuration information indicating configuration information corresponding to the target business function, and target code storage path indicating code storage path corresponding to the target business function.

[0089] Example: If application A needs to implement the "select gender" function, that is, application A needs to use a radio button component to let the user select "male" or "female". To this end, application A sends a service request to the server, such as the following service request, requesting to obtain the radio button component:

[0090] {

[0091] "requestType":"getComponent",

[0092] "componentName":"Radio Button",

[0093] "businessFunction": "Select gender"

[0094] }

[0095] After receiving the business request, the first server parses the business request body to extract the key information "radio button" and "select gender". Based on the parsed business function (i.e., select gender), the first server queries the component information in a standardized format in the second resource library. For example, the component information in a standardized format is a Json object. Therefore, the first server can match the target component information according to the business function.

[0096] S270. The terminal receives target component information from the first server.

[0097] (Optionally) S280. The terminal parses the target component information through a component parser to obtain a code storage path and target configuration information.

[0098] The terminal has a built-in component parser in each application, which is used to interpret the received target component information and separate the target code storage path and target configuration information. For example, if the terminal application B receives the drop-down menu component information returned by the server, for example, the drop-down menu component information is Json, specifically:

[0099] {

[0100] "componentName": "Drop-down menu",

[0101] "props":{

[0102] "options":["A","B","C","D"],

[0103] "placeholder":"Please select a city"

[0104] },

[0105] "TargetURL" (target code storage path): " / resources / components / dropdown-menu.js"

[0106] }

[0107] The component parser of application B parses the drop-down menu component information and obtains the target code storage path: / resources / components / dropdown-menu.js. The target configuration information is:

[0108] "options":["A","B","C","D"],

[0109] "placeholder":"Please select a city"

[0110] S290: The terminal obtains a target code component from the stored code components based on the code storage path.

[0111] The terminal downloads the target code component from the first resource library according to the target code storage path. Exemplarily, application B can download the code file of the drop-down menu according to the target code storage path.

[0112] S2100. The terminal generates a target service component based on the target code component and the target configuration information.

[0113] The terminal combines the downloaded code components and the parsed configuration information to assemble complete business components to implement specific business functions.

[0114] In summary, the terminal obtains the business component corresponding to the business function; the business component includes the business code and the configuration file; the business component is packaged to form a remote component that can be recognized and loaded by the remote application; the remote component includes a code component in a first format and a configuration file in a second format; the server saves the code component and component information; the component information includes the code storage path and the configuration information in the configuration file; the remote application of the terminal parses the component information; the saved code component is obtained based on the code storage path; based on the code component and the configuration information, the business component is generated. Thus, by packaging and saving the business component as a remote component that can be recognized by the remote application, the code component and the component information in the remote component are saved, and when a certain application or multiple applications need the business function corresponding to the business component, the component information can be obtained and parsed, so as to obtain the saved code component by using the code storage path of the component information, and then restore it to the business component by using the code component and the configuration information in the component information. This method can realize that the same business component is called and implemented by multiple applications without repeated development, thereby improving the code redundancy caused by the repeated development of similar functional components in different subsystems and simplifying the maintenance complexity.

[0115] The following describes the service component loading method provided by the embodiment of the present application in combination with specific application scenarios, wherein the application is schematically described by taking Web applications, H5 applications and third-party light applications as examples.

[0116] In the embodiment of the present application, the business component loading method includes three stages: stage one is the stage in which the component constructor constructs the remote component, stage two is the stage in which the component center manages the remote component, and stage three is the stage in which the application loads the remote component.

[0117] Attached Figure 4 A schematic diagram of business component loading provided in an embodiment of the present application, wherein the remote loading specifically involves: a component constructor 401, a component center 402 and a component parser 403.

[0118] Among them, the component constructor 401 can be located in Figure 1 The second server shown. Component constructor 401 is a front-end engineering project for constructing business components. Business components correspond to business requirements and are used to implement a certain business and some functions of a certain business.

[0119] In the embodiment of the present application, the component builder 401 constructs business components that meet business function requirements based on the front-end development framework and UI component library.

[0120] Among them, the front-end development framework is a UI toolset used to build and manage web application user interfaces, including but not limited to front-end frameworks such as Vue and React.

[0121] The UI component library is used to provide a set of pre-built, reusable user interface elements, such as buttons, forms, navigation bars, modal boxes, tables, charts, etc. For ease of explanation, the following takes the UI component library including Element Plus as an example. Element Plus includes multiple components, such as ElROW, ElCol, Elform, ..., ElButton.

[0122] The following is combined with Figure 5 , the specific construction process of the component constructor 401 is described in detail. Figure 5 A schematic diagram of the operation of a component constructor provided in an embodiment of the present application.

[0123] like Figure 5 As shown, the component constructor 401 determines the front-end development framework and the UI component library, which is exemplified as follows: Figure 5 The determined front-end development framework is Vue3, and the determined UI component library is Element Plus.

[0124] In one example, the component constructor 401 can analyze business requirements and determine the front-end development framework and UI component library based on the business requirements. For example, the Web business requirements are: cross-browser compatibility, that is, ensuring that the application can work properly on multiple browsers; responsive design and user interaction functions. Based on the Web business requirements, the determined front-end development framework is Vue, and the determined UI component library is Eelement Plus. For another example, the H5 business requirements are: mobile device compatibility, which can be applied on a variety of mobile devices; the application is available in an offline state; adapt to a variety of screen sizes, etc. Based on the H5 business requirements, the determined front-end development framework is Vue, and the determined UI component library is Ant Design, etc. For another example, the third-party light business requirements are: cross-platform compatibility, that is, running on multiple platforms; third-party light applications need to be embedded in other platforms, so it is necessary to ensure that the application is seamlessly integrated with these embedded platforms. Therefore, based on the third-party light business requirements, the determined front-end development framework is Vue, and the determined UI component library is Eelement Plus.

[0125] The component constructor 401 constructs business components corresponding to business requirements based on the determined front-end development framework and UI component library. Figure 5 It shows the business components built based on Vue3 and Element Plus. The business component is a folder, including code and configuration files.

[0126] It should be noted that in the embodiment of the present application, one business requirement corresponds to one business component. Figure 4Three business components are shown, which means three folders are generated, corresponding to three business requirements. Each business component includes code and configuration files that meet the corresponding business requirements.

[0127] It should be noted that in the embodiment of the present application, the component constructor can construct N business components corresponding to N applications in parallel, or can construct N business components corresponding to N applications in sequence. For example, based on the principle of first receiving the business requirements, first constructing, if the business requirements are received at the same time, the construction can be performed in a preset construction order, etc. The embodiment of the present application is not specifically limited.

[0128] In order to make the constructed business components recognized and loaded by the component parser, the component constructor 401 calls the packaging tool to compile and package the constructed business components to form a remote component that can be recognized and loaded by the component parser. Among them, the packaging tool can be Vite and Webpack, or other packaging tools, which are not specifically limited in the embodiments of the present application.

[0129] In the embodiment of the present application, the remote component may be a ZIP component package. The ZIP component package includes code and configuration files, wherein the code may be a software library type code component. A software library type code component is a set of code modules that encapsulate specific functions or tools.

[0130] For example, the code components include four types of code components: ElButton, ElRow, ElForm and ElCol. Among them, ElButton is a component used to create buttons, supports multiple styles and states, and is often used to trigger user interaction operations, such as submitting forms, opening dialog boxes, navigation, etc. ElRow and ElCol are grid system components provided for creating responsive layouts. ElRow represents a row, and ElCol represents a column. By combining these two components, complex page layouts can be easily implemented. ElForm is a container component for creating forms. The software library type code component can be the following structure: ElButton (index.tsx, styles.css), ElRow (index.tsx, styles.css), ElForm (index.tsx, styles.css), ElCol (index.tsx, styles.css). Through the software library type code component, it can be ensured that the component parser in the application recognizes and loads the code, so that these code components can be reused in multiple pages or business components to reduce duplicate code.

[0131] It should be noted that the above-mentioned software library type code components are only for illustrative purposes. In actual use, the embodiment of the present application can also adjust the storage format of the code in the folder according to specific needs.

[0132] The configuration file may be a file in json format, for example, a configuration file named manifest.json, or a configuration file in another format that can be recognized and loaded by the component center. The embodiment of the present application does not specifically limit the configuration file.

[0133] For example, Figure 5 A schematic diagram of packaging a Folder into a ZIP component package through Vite is shown, where one Folder is packaged into a ZIP component package. The ZIP component package is also called a business function component ZIP package.

[0134] It should be noted that when three business components are constructed at the same time, the three business components can be packaged at the same time, or the three business components can be packaged in sequence according to preset rules, which is not specifically limited in the embodiments of the present application.

[0135] It should be noted that the remote component may also be a RAP component package or other component packages, which is not specifically limited in the embodiments of the present application.

[0136] Furthermore, the remote component retains the attribute configuration input interface, wherein the existence of the attribute configuration transfer interface allows the user to modify the configuration through the page and pass the modified content to the remote component, thereby realizing synchronous modification of the remote component.

[0137] The component builder 401 sends the remote component to the component center 402 .

[0138] Component center 402 may be located at Figure 1 The first server shown is used to parse the remote component, obtain the code and configuration file carried in the remote component, store the code in a static resource library, and generate a code storage address. Extract configuration information from the configuration file, and store the configuration information and the code storage address in a persistent storage repository in a preset format. For ease of explanation, the preset format provided in the embodiment of the present application is a Json object format.

[0139] The static resource library is a system for storing and managing static resources. Static resources refer to files that do not need to be frequently modified when the application is running. In an embodiment of the present application, the component parser can directly access the static resource library based on the code storage path and read the code from the static resource library.

[0140] A persistent repository is a system used to store and manage data over a long period of time, ensuring that data is completely preserved after an application restart or server shutdown. Persistent repositories include but are not limited to the following databases: relational databases, non-relational databases, in-memory databases, etc.

[0141] When different web applications use the same function, the component parsers of different applications can obtain the code from the static resource library based on the code storage address, and register it as the business component required by the business needs based on the code component and configuration information. In addition, based on the configuration information, it can also be determined whether the front-end open framework and UI component library obtained by parsing are synchronized with the versions of the front-end development framework and UI component library before the component parser 401 is constructed. By determining whether the versions of the two are the same, compatibility is ensured, potential errors and exceptions are reduced, and the stability of the application is improved.

[0142] It should be noted that in the embodiment of the present application, the reason why the configuration file is not directly stored in the persistent storage repository is that the configuration of the business component is often dynamic and changes with the change of the deployment environment. Therefore, the configuration information will be updated frequently. If the configuration file is stored in the persistent storage repository, the entire configuration file needs to be replaced every time the configuration information is updated. This method will increase the complexity of the operation and may also cause unnecessary downtime. In addition, the entire file must be loaded every time the configuration is read, which will increase unnecessary overhead.

[0143] Exemplary description, attached Figure 6 A schematic diagram of a component center implementation is provided for an embodiment of the present application, wherein the component center is also called a Java Web service provider layer, located between a component builder and a component parser, and is used to implement the interaction between the component builder and the component parser.

[0144] Exemplarily, component builder 401 generates three ZIP component packages, specifically ZIP component package 1, ZIP component package 2, and ZIP component package 3, and sends them to component center 402. Component center 401 parses the ZIP component package, obtains configuration files and codes, stores the codes in a static resource library, and generates a code storage path. Specifically, ZIP component package 1 is parsed to obtain code component 1 and configuration file 1 in ZIP component package 1; ZIP component package 2 is parsed to obtain code component 2 and configuration file 2 in ZIP component package 2; ZIP component package 3 is parsed to obtain code component 3 and configuration file 3 in ZIP component package 3. Code component 1, code component 2, and code component 3 are stored in different locations of the static resource library, and different code storage paths are generated, for example, code component 1 corresponds to code storage path 1, code component 2 corresponds to code storage path 2, and code component 3 corresponds to code storage path 3. Generate component information by combining configuration information of configuration file 1 with code storage path 1, configuration information of configuration file 2 with code storage path 2, and configuration information of configuration file 3 with code storage path 1, and store the component information in the persistent repository for storage. The component information format is a format that can be recognized by the component parser, for example Figure 6As shown, the component information format may be in Json format. The component information includes code storage address and configuration information, and the component parser 403 is used to obtain and parse the component information.

[0145] It should be noted that, through the component center A402, the remote components in the memory can be deleted, added or adjusted.

[0146] For example, Figure 3 As shown, display page 300 is also called an interface of a component management system, which is used to manage different types of remote components, such as modifying component information of remote components in a memory.

[0147] The display page 300 also includes a plurality of buttons, such as an upload component button, a component download button and an all component download button. Each remote component corresponds to three buttons, namely, an edit button, a configuration button and a delete button.

[0148] Specifically, the user triggers the upload component button to send the new remote component to the component center A402 and display it on the display page 300. The user selects one or some remote components and triggers the component download button to download the selected remote components. The user triggers the all component download button to download all remote components.

[0149] If the user triggers the edit button of a remote component, the remote component's properties can be edited, and the modified properties are synchronized to the component information in the storage through the property interface. If the user triggers the delete button of a remote component, the remote component is deleted. If the user triggers the configure button of a remote component, the remote component's parameters can be modified, and the modified parameter information is synchronized to the component information in the storage through the property interface.

[0150] Component parser 402 parses component information, reads code based on the content of component information, and generates a front-end development framework and UI component library that are identical to those in the front-end builder based on the code and configuration files. Specifically, component parser 403 parses component information, obtains code storage addresses and configuration information in the component information, and based on the code storage addresses, component parser 403 can obtain code from a static resource library, and based on the code and configuration information, generates a front-end development framework and UI component library that are identical to those in the front-end builder.

[0151] For example, Figure 7A schematic diagram of a component parser provided in an embodiment of the present application. The component parser 403 is used to receive component information sent by the component center 402, parse the component information, obtain configuration information and store code paths. A configuration file of a business function component is generated based on the configuration information, and the code of the business component is obtained from a static resource library based on the code storage path to generate a code component of the business function component.

[0152] The component parser determines the version of the front-end development framework and UI component library required by the business component based on the business function component, then loads and initializes the front-end development framework and UI component library, registers the code into the front-end development framework, and obtains the same front-end development framework and UI component library as the component constructor 401.

[0153] For example, Figure 7 As shown, the registered component is the Vue Conponet component. Figure 4 The three applications shown correspond to three business function components. Each of the three business function components can be restored to the same front-end development framework and UI component library as the component builder 401 .

[0154] Component resolvers are set in different applications, such as Figure 4 It shows that the component parser is located in the Web application, HS application and third-party light application. The component parser can parse the component information, obtain the code and configuration file from the corresponding storage, and then apply it in different applications.

[0155] Furthermore, if a business component needs to be updated, the component builder completes the component optimization and repackages it and uploads it to the component library. At this time, the remote component will change, and the component center and application will also be refreshed at the same time to obtain the latest component immediately.

[0156] In summary, the remote component loading tool provided in the embodiment of the present application can realize that the same business component can be used by different Web applications. And different business components can be differentiated according to different configurations. And in the embodiment of the present application, when a component needs to be updated, it is only necessary to repackage the modified component in the component constructor and upload it through the component center, while the application side is not affected, and the application can be released without downtime and without user perception.

[0157] The embodiment of the present application also provides a computer program product including instructions. The computer program product may be a software or program product including instructions that can be run on a computing device or stored in any available medium. When the computer program product is run on a computing device, the computing device is caused to perform the above-mentioned data migration method. The embodiment of the present application also provides a computer-readable storage medium. The computer-readable storage medium may be any available medium that a computing device can store or a data storage device such as a data center containing one or more available media. The available medium may be a magnetic medium (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state hard disk), etc. The computer-readable storage medium includes instructions that instruct the computing device to perform the above-mentioned data migration method.

[0158] The descriptions of the processes or structures corresponding to the above-mentioned figures have different emphases. For parts that are not described in detail in a certain process or structure, please refer to the relevant descriptions of other processes or structures.

[0159] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any changes or substitutions within the technical scope disclosed in the present application should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A component loading method, characterized in that: The method comprises: Acquire a remote component corresponding to the business component, wherein the remote component includes a code component in a first format and a configuration file in a second format; the code component in the first format and the configuration file in the second format can be recognized by a remote application; The code components and component information in the first format are saved, wherein the component information includes the code storage path of the code components in the first format and the configuration information in the configuration file in the second format; the saved code components and component information in the first format can be acquired by the remote application.

2. The loading method according to claim 1, characterized in that: The business component is a component corresponding to the business function created based on the front-end development framework and / or the user interface UI component library; The service component includes a service code and configuration information, the service code corresponds to the code component in the first format, and the configuration information corresponds to the configuration file in the second format.

3. The loading method according to claim 1, characterized in that: The remote component is a component corresponding to the packaged business component, the code component in the first format in the remote component is a code component in JS format, and the configuration file in the second format is a configuration file in JavaScript Object Notation Json format.

4. The loading method according to claim 1, characterized in that: The remote component internally sets a property interface, and the method further comprises: Through the property interface, a property modification operation triggered on the property configuration area of ​​the component page is received to synchronously modify the saved remote component; the component page includes the business component and the property configuration area.

5. The remote loading method according to claim 4, characterized in that: The component page includes a plurality of the business components; the receiving of the attribute modification operation triggered on the attribute configuration area includes: Receive a function attribute configuration operation of a single business component or a configuration operation of relationship attributes of multiple components triggered by the attribute configuration area.

6. The loading method according to claim 1, characterized in that: The step of saving the code components and component information includes: The code component is stored in a first resource library, and the code storage path is generated; and the component information including the code storage path and the configuration information is stored in a second resource library.

7. The loading method according to claim 6, characterized in that: The first resource library is a static resource library, and the second resource library is a persistent storage resource library.

8. The loading method according to claim 1, characterized in that: The method further comprises: In response to receiving an acquisition request sent by the remote application, the component information is sent to the remote application, so that the remote application acquires the saved code component in the first format based on the code storage path in the component information, and registers the business component based on the code component in the first format and the configuration information in the component information.

9. The loading method according to claim 8, characterized in that: If the business component is created based on a front-end development framework and / or a user interface UI component library; The method further comprises: Based on the business components, create the front-end development framework and / or create the UI component library.

10. A computing device, characterized in that: The computing device includes a memory and a processor; The memory is coupled to the processor; The memory is used to store computer programs; the processor executes the loading method according to any one of claims 1 to 9 based on the programs stored in the memory.

Images