Component rendering method and device, equipment and storage medium

Abstract

The embodiment of the invention discloses a component rendering method and device, equipment and a storage medium. The method comprises the steps of generating a first component based on a component template; converting the first component into a second component based on a preset converter; packaging the second component and the component information to obtain a component package; wherein the component information comprises component dependence and component resources; and rendering the component package by adopting a component container. The first component is converted into the second component by adopting the preset converter, the second component and the component information are packaged to obtain the component package, and the component package is rendered by adopting the component container, so that components of different technical stacks can be used in a cross-stack manner, and the development and maintenance cost is reduced.

Description

Technical Field

[0001] Embodiments of the present invention relate to the field of computer technology, and in particular to a component rendering method, device, equipment and storage medium. Background Art

[0002] There are currently many mainstream technology stacks in the front-end field, such as Vue, React, Angular, etc. Each technology stack defines its own component model, and there are barriers between components, which cannot be used across technology stacks.

[0003] For the Vue technology stack, its components encapsulate the component's HTML template, JavaScript logic, and CSS style through .vue files. For the React technology stack, components mix HTML and JavaScript through JSX syntax. The Angular technology stack is written in TypeScript and extends HTML through directives, services, etc.

[0004] In summary, existing component solutions are designed for specific technology stacks. Components can only be used in the corresponding technology stack and cannot be used across technology stacks. This results in the same component being used in different technology stacks, requiring the writing of multiple versions of components, increasing development and maintenance costs. Summary of the invention

[0005] The embodiments of the present invention provide a component rendering method, apparatus, device and storage medium, which can enable components of different technology stacks to be used across stacks, thereby reducing development and maintenance costs.

[0006] In a first aspect, an embodiment of the present invention provides a component rendering method, including:

[0007] Generate a first component based on the component template;

[0008] Converting the first component into a second component based on a preset converter;

[0009] Packaging the second component and component information to obtain a component package; wherein the component information includes component dependency and component resources;

[0010] The component package is rendered using a component container.

[0011] In a second aspect, an embodiment of the present invention further provides a component rendering device, the device comprising:

[0012] A component generation module, used to generate a first component based on a component template;

[0013] A component conversion module, used for converting the first component into a second component based on a preset converter;

[0014] A component package obtaining module, used to package the second component and component information to obtain a component package; wherein the component information includes component dependency and component resources;

[0015] The component rendering module is used to render the component package using a component container.

[0016] In a third aspect, an embodiment of the present invention further provides an electronic device, the electronic device comprising:

[0017] at least one processor; and

[0018] a memory communicatively connected to the at least one processor; wherein,

[0019] The memory stores a computer program that can be executed by the at least one processor. The computer program is executed by the at least one processor so that the at least one processor can execute the component rendering method described in the embodiment of the present invention.

[0020] In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium, wherein the computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a processor to implement the component rendering method described in the embodiment of the present invention when executed.

[0021] The embodiment of the present invention discloses a component rendering method, apparatus, device and storage medium, including: generating a first component based on a component template; converting the first component into a second component based on a preset converter; packaging the second component and component information to obtain a component package; wherein the component information includes component dependencies and component resources; and rendering the component package using a component container. The component rendering method provided by the embodiment of the present invention generates a first component based on a component template, converts the first component into a second component, packages the second component and component information, and renders the component package using a component container, which solves the problem that components can only be used in corresponding technology stacks and cannot be used across technology stacks, thereby reducing development and maintenance costs. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] Figure 1 is a flowchart of a component rendering method in Embodiment 1 of the present invention;

[0023] Figure 2 is a flowchart of a component rendering method in Embodiment 2 of the present invention;

[0024] Figure 3 is a flowchart of a component rendering method in Embodiment 3 of the present invention;

[0025] Figure 4 It is a structural schematic diagram of a rendering device of a component in Embodiment 4 of the present invention;

[0026] Figure 5 It is a structural schematic diagram of an electronic device in Embodiment 5 of the present invention. DETAILED DESCRIPTION

[0027] The present invention will be further described in detail below in conjunction with the accompanying drawings and embodiments. It is to be understood that the specific embodiments described herein are only used to explain the present invention, rather than to limit the present invention. It should also be noted that, for ease of description, only parts related to the present invention, rather than all structures, are shown in the accompanying drawings.

[0028] Embodiment 1

[0029] Figure 1 This is a flowchart of a component rendering method provided in Embodiment 1 of the present invention. This embodiment is applicable to the case of rendering a component. The method can be executed by a component rendering device, which can be implemented in the form of software and / or hardware. Optionally, it can be implemented by an electronic device, which can be a mobile terminal, a PC or a server. Specifically, it includes the following steps:

[0030] S110. Generate a first component based on a component template.

[0031] The component template can be understood as a template of a program page, which is represented by program code. The page contains the structure and style of multiple component templates, and one of the component templates can be selected to generate the first component. The first component can be understood as a data object, which is a simple encapsulation of data and methods. For example, the browser task bar can be regarded as a component, the input box can be regarded as a component, or a button can be regarded as a component.

[0032] In this embodiment, the method of generating the first component based on the component template may be to obtain the component template; obtain the component code based on the component template; and run the component code to obtain the first component.

[0033] Exemplarily, taking a button component as an example, firstly, a button component template is obtained on the page, and a button component code can be obtained according to the button component template, and the component code is run to obtain the button component.

[0034] S120: Convert the first component into the second component based on a preset converter.

[0035] The preset converter is represented by program code.

[0036] The second component may be understood as a unified component, such as a web component.

[0037] In this embodiment, the first component can be converted into a unified component by using a preset converter. The purpose of converting the first component into a unified component is that the first component can only be used in the corresponding technology stack and cannot be used across technology stacks. After converting it into a unified component, the component can be used across technology stacks, thereby reducing the cost of development and maintenance.

[0038] Among them, the technology stack can be understood as a collection of various technologies and tools used in the software development process, including programming languages, development frameworks, databases, etc. For example, Vue technology stack, React technology stack, Angular technology stack.

[0039] Exemplarily, assuming that the first component is an input box component, a preset converter can be used to convert the input box component into a unified component, so that the input box component can be used under different technology stacks without having to write multiple versions of the input box component under different technology stacks.

[0040] S130: Pack the second component and the component information to obtain a component package.

[0041] The component information includes component dependencies and component resources.

[0042] Among them, component dependency can be understood as the processing method of the component, and component resources can be represented by program codes.

[0043] In this embodiment, a general construction tool is used to package the second component, component dependencies, and component resources.

[0044] The general construction tool may be webpack or other packaging tools, which are not limited here.

[0045] In this embodiment, after the second component and the component information are packaged to obtain the component package, the method further includes: sending the component package to the server, so that the user can download the component package from the server.

[0046] The server side may be understood as a third-party address, such as a content delivery network (CDN), or other third-party addresses, which are not limited here.

[0047] Exemplarily, after the component package is sent to the CDN, the user may download the component package from the CDN and then use the component package. For example, the user may render the component package using a component container.

[0048] S140. Use the component container to render the component package.

[0049] Among them, the component container can be understood as a wrapper, which contains multiple components. Rendering can be understood as the process of transforming a data object into a visual object. Rendering a component can be understood as the process of transforming the component into a visual object. Using a component container to render a component package can be simply understood as using a component container to run the component package.

[0050] In this embodiment, the method of using the component container to render the component package may be to obtain a component identifier; determine the component type of the second component in the component package according to the component identifier; and render the component package according to the component type.

[0051] The technical solution of this embodiment generates a first component based on a component template; converts the first component into a second component based on a preset converter; packages the second component and component information to obtain a component package; and renders the component package using a component container. The component rendering method provided by the embodiment of the present invention converts the first component into the second component using a preset converter, thereby realizing the cross-stack use of components and solving the problem that components can only be used in the corresponding technology stack and cannot be used across technology stacks, thereby reducing the cost of development and maintenance.

[0052] Embodiment 2

[0053] Figure 2 This is a flowchart of a component rendering method provided in Embodiment 2 of the present invention. Based on the above embodiment, the method includes the following steps:

[0054] S210: Generate a first component based on a component template.

[0055] S220: Convert the first component into the second component based on a preset converter.

[0056] In this embodiment, a preset converter is used to convert the first component into a unified component.

[0057] S230: Pack the second component and the component information to obtain a component package.

[0058] In this embodiment, a build tool is used to package the converted components, component dependencies, and component resources to obtain a component package.

[0059] S240: Obtain component identification.

[0060] In this embodiment, the component identifier is used to characterize the component type of the component. For example, the component identifier can be used to determine whether the component is an external component or an internal component.

[0061] S250: Determine the component type of the second component in the component package according to the component identifier.

[0062] Among them, component types include external components and internal components.

[0063] In this embodiment, it can be determined whether the component is an external component or an internal component according to the component identification of the second component.

[0064] Exemplarily, the component identifier of the external component may be recorded as "1", and the component identifier of the internal component may be recorded as "2".

[0065] S260: Render the component package according to the component type.

[0066] In this embodiment, the method of rendering the component package according to the component type can be that if the component type is an external component, the component package is loaded into a specific framework using a component container and the component package is rendered under the specific framework; if the component type is an internal component, the component package is directly rendered using a component container.

[0067] The specific frame may be an iframe frame or other frames, which is not limited here.

[0068] Exemplarily, if the component type of the component is an external component, the component package is first loaded into the iframe frame using a component container, and then the component package is rendered in the iframe frame, that is, the component package is run in the iframe frame; if the component type of the component is an internal component, the component package is directly rendered using a component container without loading it into the iframe frame and then rendering it.

[0069] Among them, for external components, the component package is loaded into the iframe framework and rendered in the iframe framework, so that the component can be sandboxed. Sandboxing can be understood as components not interfering with each other. For example, if a component has a problem during operation, it will not affect other components.

[0070] The technical solution of this embodiment generates a first component based on a component template; converts the first component into a second component based on a preset converter; packages the second component and component information to obtain a component package; obtains a component identifier; determines the component type of the second component in the component package based on the component identifier; and renders the component package based on the component type. The component rendering method provided in the embodiment of the present invention converts a first component into a second component, packages the second component and component information, determines the component type of the second component in the component package based on the component identifier, and then renders the component package based on the component type. The component package can be rendered in different situations according to different component types, and components of different technology stacks can be used across stacks, thereby realizing the rendering of components across technology stacks, reducing development and maintenance costs.

[0071] Embodiment 3

[0072] Figure 3This is a flowchart of a component rendering method provided in Embodiment 3 of the present invention. Based on the above embodiment, the method includes the following steps:

[0073] S310: Generate a first component based on a component template.

[0074] S320: Convert the first component into the second component based on a preset converter.

[0075] S330: Package the second component and the component information to obtain a component package.

[0076] S340. Use the component container to render the component package.

[0077] In this embodiment, the method of using a component container to render a component package can be to obtain the component identifier of the component, and determine whether the second component in the component package is an external component or an internal component based on the component identifier. If it is an external component, the component container is used to load the component package into a specific framework and render the component package under the specific framework; if it is an internal component, the component container is used to directly render the component package.

[0078] S350: The component container monitors the status of the component package.

[0079] The status of the component package includes updated and not updated.

[0080] In this embodiment, after rendering the component package, the component container also needs to monitor whether the component package needs to be updated.

[0081] S360: If the status of the component package is updating, update the component package according to the component type.

[0082] In this embodiment, the method for updating the component package according to the component type is that if the component type is an external component, the component package is reloaded into a specific framework using a component container to update the component package; if the component type is an internal component, the component package is re-rendered using a component container to update the component package.

[0083] For example, assume that the specific frame is an iframe frame. When the component container detects that the component package needs to be updated, the component package is updated according to the component type. If the component type is an external component, the component container is used to reload the component package into the iframe frame, and the component package is updated. If the component type is an internal component, the component container is used to re-render the component package, that is, re-run the component package, thereby updating the component package.

[0084] The technical solution of this embodiment generates a first component based on a component template; converts the first component into a second component based on a preset converter; packages the second component and component information to obtain a component package; uses a component container to render the component package; the component container monitors the status of the component package; if the status of the component package is updated, the component package is updated according to the component type. The component rendering method provided by the embodiment of the present invention uses a component container to render the component package, and uses a component container to monitor the status of the component package. If the status of the component package is updated, the component package is updated according to the component type. This embodiment uses a preset converter to convert the first component into the second component, and uses different methods to update the component package according to different component types, so that components of different technology stacks can be used across stacks, thereby realizing the update of components across technology stacks.

[0085] Embodiment 4

[0086] Figure 4 A schematic diagram of a component rendering device provided in a fourth embodiment of the present invention is shown in FIG. Figure 4 As shown, the device comprises:

[0087] A component generation module 410, configured to generate a first component based on a component template;

[0088] A component conversion module 420, configured to convert a first component into a second component based on a preset converter;

[0089] The component package obtaining module 430 is used to package the second component and the component information to obtain a component package; wherein the component information includes component dependency and component resources;

[0090] The component rendering module 440 is used to render the component package using the component container.

[0091] Optionally, the component generation module 410 is further configured to:

[0092] Obtain a component template; obtain component code based on the component template; and run the component code to obtain a first component.

[0093] Optionally, the component rendering module 440 is further used for:

[0094] Obtain a component identifier; determine a component type of a second component in the component package according to the component identifier; and render the component package according to the component type.

[0095] Among them, component types include external components and internal components.

[0096] The component package is rendered according to the component type, including: if the component type is an external component, the component package is loaded into a specific framework using a component container, and the component package is rendered under the specific framework; if the component type is an internal component, the component package is directly rendered using the component container.

[0097] Optionally, a component package sending module is also included, which is used to:

[0098] The component package is sent to the server so that the user can download the component package from the server.

[0099] Optionally, it also includes a component package update module for:

[0100] The component container monitors the status of the component package; if the status of the component package is updated, the component package is updated according to the component type.

[0101] The status of the component package includes updated and not updated.

[0102] Among them, updating the component package according to the component type includes: if the component type is an external component, using the component container to reload the component package into a specific framework to achieve the update of the component package; if the component type is an internal component, using the component container to re-render the component package to achieve the update of the component package.

[0103] The above device can execute the methods provided by all the above embodiments of the present invention, and has the corresponding functional modules and beneficial effects of executing the above methods. For technical details not described in detail in this embodiment, please refer to the methods provided by all the above embodiments of the present invention.

[0104] Embodiment 5

[0105] Figure 5 A schematic diagram of the structure of an electronic device 10 that can be used to implement an embodiment of the present invention is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices (such as helmets, glasses, watches, etc.) and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present invention described and / or required herein.

[0106] like Figure 5As shown, the electronic device 10 includes at least one processor 11, and a memory connected to the at least one processor 11, such as a read-only memory (ROM) 12, a random access memory (RAM) 13, etc., wherein the memory stores a computer program that can be executed by at least one processor, and the processor 11 can perform various appropriate actions and processes according to the computer program stored in the read-only memory (ROM) 12 or the computer program loaded from the storage unit 18 to the random access memory (RAM) 13. In the RAM 13, various programs and data required for the operation of the electronic device 10 can also be stored. The processor 11, the ROM 12, and the RAM 13 are connected to each other through a bus 14. An input / output (I / O) interface 15 is also connected to the bus 14.

[0107] A number of components in the electronic device 10 are connected to the I / O interface 15, including: an input unit 16, such as a keyboard, a mouse, etc.; an output unit 17, such as various types of displays, speakers, etc.; a storage unit 18, such as a disk, an optical disk, etc.; and a communication unit 19, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 19 allows the electronic device 10 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks.

[0108] The processor 11 may be a variety of general and / or special processing components with processing and computing capabilities. Some examples of the processor 11 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special artificial intelligence (AI) computing chips, various processors running machine learning model algorithms, a digital signal processor (DSP), and any appropriate processor, controller, microcontroller, etc. The processor 11 executes the various methods and processes described above, such as the rendering method of the component.

[0109] In some embodiments, the rendering method of the component may be implemented as a computer program, which is tangibly contained in a computer-readable storage medium, such as a storage unit 18. In some embodiments, part or all of the computer program may be loaded and / or installed on the electronic device 10 via the ROM 12 and / or the communication unit 19. When the computer program is loaded into the RAM 13 and executed by the processor 11, one or more steps of the rendering method of the component described above may be performed. Alternatively, in other embodiments, the processor 11 may be configured to execute the rendering method of the component in any other appropriate manner (e.g., by means of firmware).

[0110] Various implementations of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chips (SOCs), load programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various implementations can include: being implemented in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which can be a special purpose or general purpose programmable processor that can receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device.

[0111] Computer programs for implementing the methods of the present invention may be written in any combination of one or more programming languages. These computer programs may be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device, so that when the computer program is executed by the processor, the functions / operations specified in the flow chart and / or block diagram are implemented. The computer program may be executed entirely on the machine, partially on the machine, partially on the machine and partially on a remote machine as a stand-alone software package, or entirely on a remote machine or server.

[0112] In the context of the present invention, a computer-readable storage medium may be a tangible medium that may contain or store a computer program for use by or in combination with an instruction execution system, device or equipment. A computer-readable storage medium may include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices or equipment, or any suitable combination of the foregoing. Alternatively, a computer-readable storage medium may be a machine-readable signal medium. A more specific example of a machine-readable storage medium may include an electrical connection based on one or more lines, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0113] To provide interaction with a user, the systems and techniques described herein may be implemented on an electronic device having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and a pointing device (e.g., a mouse or trackball) through which the user can provide input to the electronic device. Other types of devices may also be used to provide interaction with the user; for example, the feedback provided to the user may be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user may be received in any form (including acoustic input, voice input, or tactile input).

[0114] The systems and techniques described herein may be implemented in a computing system that includes backend components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes frontend components (e.g., a user computer with a graphical user interface or a web browser through which a user can interact with implementations of the systems and techniques described herein), or a computing system that includes any combination of such backend components, middleware components, or frontend components. The components of the system may be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: a local area network (LAN), a wide area network (WAN), a blockchain network, and the Internet.

[0115] A computing system may include a client and a server. The client and the server are generally remote from each other and usually interact through a communication network. The client and server relationship is generated by computer programs running on the corresponding computers and having a client-server relationship with each other. The server may be a cloud server, also known as a cloud computing server or cloud host, which is a host product in the cloud computing service system to solve the defects of difficult management and weak business scalability in traditional physical hosts and VPS services.

[0116] It should be understood that the various forms of processes shown above can be used to reorder, add or delete steps. For example, the steps described in the present invention can be executed in parallel, sequentially or in different orders, as long as the desired results of the technical solution of the present invention can be achieved, and this document does not limit this.

[0117] The above specific implementations do not constitute a limitation on the protection scope of the present invention. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions can be made according to design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. A component rendering method, characterized in that: include: Generate a first component based on the component template; Converting the first component into a second component based on a preset converter; Packaging the second component and component information to obtain a component package; wherein the component information includes component dependency and component resources; The component package is rendered using a component container.

2. The method according to claim 1, characterized in that Generate a first component based on the component template, including: Get the component template; Obtaining component code based on the component template; The component code is executed to obtain the first component.

3. The method according to claim 1, characterized in that: The component package is rendered using a component container, including: Get component ID; Determining a component type of a second component in the component package according to the component identifier; wherein the component type includes an external component and an internal component; Render the component bundle according to the component type.

4. The method according to claim 3, characterized in that Rendering the component package according to the component type includes: If the component type is an external component, a component container is used to load the component package into a specific framework, and the component package is rendered in the specific framework; If the component type is an internal component, the component package is directly rendered using the component container.

5. The method according to claim 1, characterized in that: After packaging the second component and the component information to obtain a component package, the method further includes: The component package is sent to a server, so that a user can download the component package from the server.

6. The method according to claim 3, characterized in that After the component package is rendered using the component container, the following is further included: The component container monitors the status of the component package; wherein the status of the component package includes updated and not updated; If the status of the component package is update, the component package is updated according to the component type.

7. The method according to claim 6, characterized in that Updating the component package according to the component type includes: If the component type is an external component, the component package is reloaded into a specific framework using a component container to implement an update of the component package; If the component type is an internal component, the component package is re-rendered using a component container to implement an update of the component package.

8. A component rendering device, characterized in that: include: A component generation module, used to generate a first component based on a component template; A component conversion module, used for converting the first component into a second component based on a preset converter; A component package obtaining module, used to package the second component and component information to obtain a component package; wherein the component information includes component dependency and component resources; The component rendering module is used to render the component package using a component container.

9. An electronic device, characterized in that: The electronic device comprises: at least one processor; and a memory communicatively connected to the at least one processor; wherein, The memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor so that the at least one processor can execute the rendering method of the component according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a processor to implement the rendering method of the component according to any one of claims 1 to 7 when executed.

Images