Front-end page display method and device, equipment, medium and program product

Abstract

The embodiment of the invention provides a front-end page display method and device, equipment, a medium and a program product. Acquiring a basic file set of the front-end project; adding the target library file and the bridging tool file into a basic file set; constructing a target component based on a target framework file in the target library file and a target component library file in the target library file; packaging the target component based on the bridging tool file to obtain a component instruction; the component instruction is an instruction which can be called by an initial framework file in the basic file set; transmitting configuration parameters to the component instruction to obtain a configured component instruction, and embedding the configured component instruction into the front-end webpage template; packaging the basic file set to obtain a packaging result, and sending the packaging result to the terminal equipment, so that the terminal equipment controls a browser to run the packaging result, and a front-end interface displays a front-end page corresponding to the packaging result; the front-end page comprises a rendering result corresponding to the target component. And the display efficiency of the front-end page is improved.

Description

Front-end page display methods, devices, equipment, media and program products Technical Field

[0001] This application relates to the field of computing device technology, and in particular to a method, apparatus, device, medium and program product for displaying a front-end page. Background Technology

[0002] A front-end page typically consists of three parts: JavaScript, a front-end web page template (a Hyper Text Markup Language (HTML) file), and Cascading Style Sheets (CSS).

[0003] In related technologies, front-end page development is typically based on AngularJS 1.x (framework) + Bootstrap 3 (component library). AngularJS 1.x encapsulates tools for building JavaScript, while Bootstrap 3 encapsulates pre-built components (components built based on front-end web page templates and CSS).

[0004] However, the versions of AngularJS 1.x (framework) and Bootstrap 3 (component library) are too old. When the front-end page needs to have complex components, developers need to manually write complex components, which leads to low development efficiency in the related technologies, and consequently, low display efficiency of the front-end page. Summary of the Invention

[0005] This application provides a method, apparatus, device, medium, and program product for displaying a front-end page, which improves the development efficiency of the target component and thus improves the display efficiency of the front-end page.

[0006] In a first aspect, embodiments of this application provide a method for displaying a front-end page, including:

[0007] Get the basic file set of the front-end project;

[0008] Add the acquired target library files and bridging tool files to the base file set; the target library files include target framework files and target component library files.

[0009] Based on the target framework file and the target component library file, construct the target component;

[0010] Based on the bridging tool file, the target component is wrapped to obtain component instructions; the component instructions are the instructions that can be called by the initial framework file in the basic file set;

[0011] The configuration parameters corresponding to the initial framework file are transmitted to the component instruction to obtain the configured component instruction, and the configured component instruction is embedded into the front-end web page template in the basic file collection;

[0012] The basic file set is packaged to obtain the packaged result, and the packaged result is sent to the terminal device so that the terminal device can control the browser to run the packaged result so that the front-end interface displays the front-end page corresponding to the packaged result; wherein, the front-end page includes the rendering result corresponding to the target component.

[0013] In one implementation, the base file set is packaged to obtain the packaged result, including:

[0014] The initial packaging tool corresponding to the initial framework file is run. Through the linker, the target packaging tool corresponding to the target framework file is called to package the first set of files in the basic file set to obtain the first packaging result. The linker is used to connect the initial packaging tool and the target packaging tool. The first set of files includes the configured component instructions, the target framework file, and the target component library file.

[0015] Run the initial packaging tool to package the second set of files in the basic file set, and obtain the second packaging result; the second set of files includes the initial frame file and the front-end web page template.

[0016] The packaging result includes the first packaging result and the second packaging result.

[0017] In one implementation, the acquired target library files and bridging tool files are added to the base file set, including:

[0018] Obtain the target library file;

[0019] Based on the initial framework file and the target framework file in the target library file, the bridging tool file is determined from multiple candidate bridging tool files; wherein the bridging tool file corresponds to the initial framework file and the target framework file;

[0020] Add the target library files and bridging tool files to the base file set.

[0021] In one implementation, the target component is wrapped based on the bridging tool file to obtain component instructions, including:

[0022] Retrieve the instruction wrapper function from the bridging tool file;

[0023] Call the instruction wrapper function to wrap the target component and obtain the component instruction.

[0024] In one implementation, configuration parameters corresponding to the initial framework file are transmitted to the component directive to obtain the configured component directive. The configured component directive is then embedded into the front-end webpage template within the base file set, including:

[0025] Transmit at least one configuration parameter corresponding to the initial framework file to the component instruction to obtain the configured component instruction;

[0026] Obtain the target embedding location;

[0027] Based on the target embedding location, the configured component instructions are embedded into the front-end web page template.

[0028] In one implementation, at least one configuration parameter includes at least one of the following:

[0029] Data model, mapping relationships, attribute mapping tables, and cloud resource information; mapping relationships indicate the relationships between field names and labels.

[0030] Secondly, embodiments of this application provide a display device for a front-end page, comprising:

[0031] The retrieval module is used to retrieve the basic file set of the front-end project;

[0032] The acquisition module is also used to add the acquired target library files and bridging tool files to the base file set; among which, the target library files include target framework files and target component library files;

[0033] The processing module is used to build the target component based on the target framework file and the target component library file;

[0034] The processing module is also used to wrap the target component based on the bridging tool file to obtain component instructions; the component instructions are the instructions that can be called by the initial framework file in the basic file set.

[0035] The processing module is also used to transmit the configuration parameters corresponding to the initial framework file to the component instructions, obtain the configured component instructions, and embed the configured component instructions into the front-end web page template in the basic file collection;

[0036] The control module is used to package the basic file set, obtain the packaged result, and send the packaged result to the terminal device so that the terminal device can control the browser to run the packaged result and display the front-end page corresponding to the packaged result; wherein, the front-end page includes the rendering result corresponding to the target component.

[0037] In one implementation, the processing module is specifically used for:

[0038] The initial packaging tool corresponding to the initial framework file is run. Through the linker, the target packaging tool corresponding to the target framework file is called to package the first set of files in the basic file set to obtain the first packaging result. The linker is used to connect the initial packaging tool and the target packaging tool. The first set of files includes the configured component instructions, the target framework file, and the target component library file.

[0039] Run the initial packaging tool to package the second set of files in the basic file set, and obtain the second packaging result; the second set of files includes the initial frame file and the front-end web page template.

[0040] The packaging result includes the first packaging result and the second packaging result.

[0041] In one implementation, the acquisition module is specifically used for:

[0042] Obtain the target library file;

[0043] Based on the initial framework file and the target framework file in the target library file, the bridging tool file is determined from multiple candidate bridging tool files; wherein the bridging tool file corresponds to the initial framework file and the target framework file;

[0044] Add the target library files and bridging tool files to the base file set.

[0045] In one implementation, the processing module is specifically used for:

[0046] Retrieve the instruction wrapper function from the bridging tool file;

[0047] Call the instruction wrapper function to wrap the target component and obtain the component instruction.

[0048] In one implementation, the processing module is specifically used for:

[0049] Transmit at least one configuration parameter corresponding to the initial framework file to the component instruction to obtain the configured component instruction;

[0050] Obtain the target embedding location;

[0051] Based on the target embedding location, the configured component instructions are embedded into the front-end web page template.

[0052] In one implementation, at least one configuration parameter includes at least one of the following:

[0053] Data model, mapping relationships, attribute mapping tables, and cloud resource information; mapping relationships indicate the relationships between field names and labels.

[0054] Thirdly, embodiments of this application provide a computing device, including: a processor, and a memory communicatively connected to the processor;

[0055] The memory stores instructions that the computer executes;

[0056] The processor executes computer-executable instructions stored in memory to implement the method as described in the first aspect.

[0057] Fourthly, embodiments of this application provide a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, are used to implement the method as described in the first aspect.

[0058] Fifthly, embodiments of this application provide a computer program product, including a computer program that, when executed by a processor, implements the method of the first aspect.

[0059] This application provides a method, apparatus, device, medium, and program product for displaying a front-end page. In this method, a computing device can acquire a set of basic files for a front-end project. The computing device can add the acquired target library files and bridging tool files to the set of basic files; wherein, the target library files include target framework files and target component library files. The computing device can construct target components based on the target framework files and target component library files. The computing device can package the target components based on the bridging tool files to obtain component instructions; the component instructions are instructions that can be called by the initial framework files in the set of basic files. The computing device can transmit the configuration parameters corresponding to the initial framework files to the component instructions to obtain the configured component instructions, and embed the configured component instructions into the front-end webpage template in the set of basic files. The computing device can package the set of basic files to obtain a packaging result, which is then used by a terminal device to control the browser to run the packaging result, so that the front-end interface displays the front-end page corresponding to the packaging result; wherein, the front-end page includes the rendering result corresponding to the target component. By employing the methods described above, the construction efficiency of complex target components (such as React components) is improved, thereby increasing the development efficiency of front-end pages and ultimately improving their display efficiency. Attached Figure Description

[0060] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0061] Figure 1 is a schematic diagram of a scenario for a front-end page display method provided in this application;

[0062] Figure 2a is a flowchart illustrating a front-end page display method according to an embodiment of this application.

[0063] Figure 2b is a schematic flowchart provided in an embodiment of this application;

[0064] Figure 2c is a schematic diagram of a front-end page provided in an embodiment of this application;

[0065] Figure 3 is a flowchart illustrating a second embodiment of a front-end page display method provided in this application.

[0066] Figure 4 is a flowchart illustrating a third embodiment of a front-end page display method provided in this application.

[0067] Figure 5 is a schematic diagram of the structure of a front-end page display device provided in an embodiment of this application;

[0068] Figure 6 is a structural diagram of a computing device provided in this application. Detailed Implementation

[0069] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of this application. All other embodiments made by those skilled in the art based on the embodiments of this application and inspired by them are within the scope of protection of this application.

[0070] The terms “first,” “second,” “third,” “fourth,” etc. (if present) in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a particular order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms “comprising” and “having,” and any variations thereof, are intended to cover a non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0071] A front-end page typically consists of three parts: JavaScript, a front-end web page template (a Hyper Text Markup Language (HTML) file), and Cascading Style Sheets (CSS).

[0072] In related technologies, front-end page development is typically based on AngularJS 1.x (framework) + Bootstrap 3 (component library). AngularJS 1.x encapsulates tools for building JavaScript, while Bootstrap 3 encapsulates pre-built components (components built based on front-end web page templates and CSS).

[0073] However, the versions of AngularJS 1.x (framework) and Bootstrap 3 (component library) are too old. When the front-end page needs to have complex components, developers need to manually write complex components, which leads to low development efficiency in the related technologies, and consequently, low display efficiency of the front-end page.

[0074] Based on the aforementioned technical problems, the technical concept of this application is as follows: A computing device can construct a target component based on a target framework file and a target component library file, and package the target component based on a bridging tool file to obtain component instructions that can be called by the initial framework file. The computing device can transmit the configuration parameters corresponding to the initial framework file to the component instructions to obtain the configured component instructions, and embed the configured component instructions into the front-end web page template. The computing device can package the basic file set (including the front-end web page template, the initial framework file, the target framework file, the target component library file, and the configured component instructions) to obtain a packaged result, which allows the terminal device to control the browser to run the packaged result, so that the front-end interface displays the front-end page corresponding to the packaged result; wherein, the front-end page includes the rendering result corresponding to the target component. Through the above method, the construction efficiency of complex target components (such as React components) is improved, thereby improving the development efficiency of the front-end page, and thus improving the display efficiency of the front-end page.

[0075] The following is a detailed description of the front-end page display method according to the embodiments of this application.

[0076] For example, Figure 1 is a schematic diagram of a scenario for displaying a front-end page according to this application. As shown in Figure 1, the scenario includes a computing device 10 and a terminal device 20.

[0077] The computing device 10 is communicatively connected to the terminal device 20.

[0078] In this application scenario:

[0079] The computing device 10 can obtain the basic file set of the front-end project.

[0080] The computing device 10 can add the acquired target library files and bridging tool files to the base file set. The target library files include target framework files and target component library files.

[0081] The computing device 10 can build target components based on target framework files and target component library files.

[0082] The computing device 10 can package the target component based on the bridging tool file to obtain component instructions; the component instructions are instructions that can be called by the initial framework file in the basic file set.

[0083] The computing device 10 can transmit the configuration parameters corresponding to the initial framework file to the component instruction, obtain the configured component instruction, and embed the configured component instruction into the front-end web page template in the basic file set.

[0084] The computing device 10 can package the basic file set, obtain the packaged result, and send the packaged result to the terminal device 20.

[0085] Terminal device 20 can control the browser to run the packaging results, so that the front-end interface displays the front-end page corresponding to the packaging results. The front-end page includes the rendering results corresponding to the target components.

[0086] It should be noted that the embodiments of this application do not limit the actual form of the various devices included in Figure 1, nor do they limit the interaction method between the devices in Figure 1. In the application of the solution, it can be set according to actual needs.

[0087] The technical solution of this application will now be described in detail through specific embodiments. It should be noted that the following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described again in some embodiments.

[0088] Figure 2a is a flowchart illustrating a front-end page display method according to an embodiment of this application. As shown in Figure 2a, the method includes the following steps:

[0089] S201: Get the basic file set of the front-end project.

[0090] In this embodiment, the computing device can obtain the basic file set of the front-end project.

[0091] The basic file set includes front-end web page templates and initial library files.

[0092] The initial library files include the initial framework files. Additionally, the initial library files may also include initial component library files. For example, the initial framework files could be AngularJS 1.x files, and the initial component library files could be Bootstrap 3 files.

[0093] S202: Add the acquired target library files and bridging tool files to the base file set.

[0094] In this embodiment, the computing device acquires the target library file and the bridging tool file.

[0095] The computing device can add target library files and bridging tool files to the base file set.

[0096] The target library files include the target framework files and the target component library files.

[0097] For example, Figure 2b is a schematic flowchart provided in an embodiment of this application. As shown in Figure 2b, the target framework file can be a React file, and the target component library file can be an Ant-design file.

[0098] S203: Build the target component based on the target framework file and the target component library file.

[0099] In this embodiment, the computing device can construct the target component based on the target framework file and the target component library file.

[0100] In one implementation, as shown in Figure 2b, when the target framework file is a React file and the target component library file is an Ant-design file, the computing device can build the target component (React component) based on the React file and the Ant-design file.

[0101] S204: Based on the bridging tool file, the target component is packaged to obtain the component instructions.

[0102] In this embodiment, the computing device can package the target component based on the bridging tool file to obtain component instructions.

[0103] It should be noted that component directives are directives that can be called by the initial framework file. In other words, component directives can be directives that the initial framework file can recognize.

[0104] In one implementation, where the target framework file is a React file and the initial framework file is an AngularJS 1.x file, the bridging tool file can be an ngReact.js file. The computing device can then wrap React components based on the ngReact.js file to obtain component directives.

[0105] S205: Transmit the configuration parameters corresponding to the initial framework file to the component instruction, obtain the configured component instruction, and embed the configured component instruction into the front-end web page template in the basic file set.

[0106] In this embodiment, the computing device can transmit the configuration parameters corresponding to the initial framework file to the component instruction to obtain the configured component instruction, and then embed the configured component instruction into the front-end web page template in the basic file set.

[0107] In one implementation:

[0108] The computing device can transmit at least one configuration parameter corresponding to the initial framework file to the component instructions to obtain the configured component instructions.

[0109] The computing device can obtain the target embedding location.

[0110] The computing device can embed the configured component instructions into the front-end web page template according to the target embedding location.

[0111] S206: Package the basic file set to obtain the packaged result, and send the packaged result to the terminal device.

[0112] In this embodiment, the computing device can package the basic file set to obtain a packaged result.

[0113] In one implementation:

[0114] The computing device can run the initial packaging tool corresponding to the initial framework file, and through the linker, call the target packaging tool corresponding to the target framework file to package the first set of files in the basic file set, obtaining the first packaging result; wherein, the linker is used to connect the initial packaging tool and the target packaging tool. The first file set includes the configured component instructions, the target framework file, and the target component library file.

[0115] The computing device can run an initial packaging tool to package the second set of files within the base file set, resulting in a second packaged result. This second file set includes the initial framework files and the front-end webpage template. Additionally, the second packaged result may also include initial component library files.

[0116] The computing device can determine that the packaging result includes a first packaging result and a second packaging result.

[0117] The computing device can send the packaged results to the terminal device.

[0118] The terminal device can control the browser to run the packaging results, so that the front-end interface displays the front-end page corresponding to the packaging results. For example, Figure 2c is a schematic diagram of a front-end page provided in an embodiment of this application.

[0119] It should be noted that the front-end page includes the rendering result corresponding to the target component.

[0120] The beneficial effects of this embodiment are as follows: The computing device can construct a target component based on the target framework file and the target component library file, and package the target component based on the bridging tool file to obtain component instructions that can be called by the initial framework file. The computing device can transmit the configuration parameters corresponding to the initial framework file to the component instructions to obtain the configured component instructions, and embed the configured component instructions into the front-end web page template. The computing device can package the basic file set (including the front-end web page template, the initial framework file, the initial component library file, the target framework file, the target component library file, and the configured component instructions) to obtain the packaging result, and send the packaging result to the terminal device so that the terminal device can control the browser to run the packaging result, so that the front-end interface displays the front-end page corresponding to the packaging result; wherein, the front-end page includes the rendering result corresponding to the target component. Through the above method, the construction efficiency of complex target components (such as React components) is improved, thereby improving the development efficiency of the front-end page, and thus improving the display efficiency of the front-end page.

[0121] Figure 3 is a flowchart illustrating a second embodiment of a front-end page display method provided in this application. As shown in Figure 3, the method includes the following steps:

[0122] S301: Get the basic file set of the front-end project.

[0123] In this embodiment, the computing device can obtain the basic file set of the front-end project.

[0124] The basic file set includes front-end web page templates and initial library files.

[0125] The initial library files include the initial framework files and the initial component library files. For example, the initial framework files could be AngularJS 1.x files, and the initial component library files could be Bootstrap 3 files.

[0126] S302: Add the acquired target library files and bridging tool files to the base file set.

[0127] In this embodiment, the computing device acquires the target library file and the bridging tool file.

[0128] The computing device can add target library files and bridging tool files to the base file set.

[0129] The target library files include the target framework files and the target component library files.

[0130] For example, the target framework file can be a React file. The target component library file can be an Ant-design file.

[0131] For example, the following is a code illustration of a computing device adding target library files and bridging tool files to a base file set.

[0132] <script type="text / javascript" src="libs / react / react.development.js">< / script>

[0133] <script type="text / javascript" src="libs / react / react-dom.development.js">< / script>

[0134] <script type="text / javascript" src="libs / react / ngReact.js">< / script>

[0135] <script src="libs / antd / antd-with-locales.min.js">< / script>

[0136] <script src="libs / antd / icons / index.umd.min.js">< / script>

[0137] S303: Build the target component based on the target framework file and the target component library file.

[0138] In this embodiment, the computing device can construct the target component based on the target framework file and the target component library file. For example, the target component can be a Real component.

[0139] In one implementation, the computing device can construct a target component based on a target framework file, a target component library file, and user-configured parameters. Understandably, the target component is a component that the target framework file can call. That is, the target component is a component that the target framework file can recognize. Understandably, this target component is a user interface (UI) component.

[0140] It should be noted that when the target framework file is a React file and the target component library file is an Ant-design file, a rich set of UI components can be built.

[0141] It should also be noted that the computing device can build at least one common component based on the target framework file and the target component library file. This common component can be added to the base file set of multiple front-end projects for reuse.

[0142] It should also be noted that the code for different target components built based on different needs is independent of each other. Therefore, different target components can be isolated from each other, so that modifications to one target component will not affect another target component.

[0143] S304: Based on the bridging tool file, the target component is packaged to obtain component instructions.

[0144] In this embodiment, the computing device can package the target component based on the bridging tool file to obtain component instructions.

[0145] It should be noted that component directives are directives that can be called by the initial framework file. In other words, component directives can be directives that the initial framework file can recognize.

[0146] For example, the following is code for a computing device to obtain component instructions.

[0147] import EciBaseConfig from '.. / components / react / Eci / BaseConfig / BaseConfig'

[0148] const app = angular.module('app')

[0149] .directive('eciBaseConfig', (reactDirective) => {

[0150] return reactDirective(EciBaseConfig)

[0151] })

[0152] It should be noted that reactDirective is an instruction wrapper function in the bridging tool file. The computing device calls the instruction wrapper function to wrap the target component and obtain the component instructions.

[0153] S305: Transmit the configuration parameters corresponding to the initial framework file to the component instruction, obtain the configured component instruction, and embed the configured component instruction into the front-end web page template in the base file set.

[0154] In this embodiment, the computing device can transmit the configuration parameters corresponding to the initial framework file to the component instructions to obtain the configured component instructions.

[0155] The following section describes the process by which the computing device transmits the configuration parameters corresponding to the initial framework file to the component instructions.

[0156] In one implementation:

[0157] The computing device can obtain at least one configuration parameter corresponding to the initial framework file.

[0158] A computing device can transmit at least one configuration parameter corresponding to the initial framework file to a component instruction, thereby obtaining the configured component instruction. In one implementation, the computing device can transmit at least one configuration parameter corresponding to the initial framework file to the component instruction via props, thus obtaining the configured component instruction. It should be noted that transmitting via props means using the "props parameter container" defined in the target framework file as a channel to map the configuration parameters in the controller corresponding to the initial framework file to the props object of the target component (such as a React component), allowing the target component (such as a React component) to read the configuration parameters.

[0159] In one implementation, at least one configuration parameter may include a data model, mapping relationships, an attribute mapping table, and cloud resource information. The mapping relationship indicates the relationship between field names and labels.

[0160] For example, the following is the code for a computing device to obtain configured component instructions.

[0161] <step-content step="0">

[0162] <ecd-base-config

[0163] id="ecdBaseConfig"

[0164] model="model"

[0165] name_label_map="nameLabelMap"

[0166] attr_map="attrMap"

[0167] yun_resource="yunResource"

[0168] >

[0169]

[0170] It should be noted that "model" refers to the data model, "nameLabelMap" refers to the mapping relationship, "attrMap" refers to the attribute mapping table, and "yunResource" refers to cloud resource information.

[0171] It should be noted that the configuration parameters transmitted by the computing device to the component instructions can also be other configuration parameters, and this application embodiment does not limit this.

[0172] After receiving the configured component instructions, the computing device can embed the configured component instructions into the front-end web page template.

[0173] The following section explains the process by which the computing device embeds the configured component instructions into the front-end web page template.

[0174] In one implementation:

[0175] The computing device can obtain the target embedding location.

[0176] The computing device can embed the configured component instructions into the front-end web page template according to the target embedding location.

[0177] S306: Run the initial packaging tool corresponding to the initial framework file, and through the linker, call the target packaging tool corresponding to the target framework file to package the first set of files in the basic file set to obtain the first packaging result.

[0178] In this embodiment, the computing device can run the initial packaging tool corresponding to the initial framework file, and through the connector (also known as the adapter plugin or bridging plugin), call the target packaging tool corresponding to the target framework file to package the first set of files in the basic file set to obtain the first packaging result.

[0179] The connector (also known as an adapter plugin or bridging plugin) is used to connect the initial packaging tool and the target packaging tool, so that the initial packaging tool can call the target packaging tool.

[0180] For example, the initial packaging tool could be Gulp, and the target packaging tool could be Webpack.

[0181] It should be noted that when the initial bundling tool is Gulp and the target bundling tool is Webpack, the linker can be Gulp-Webpack.

[0182] It should be noted that the first set of files includes the configured component instructions, the target framework file, and the target component library file.

[0183] S307: Run the initial packaging tool to package the second set of files in the basic file set and obtain the second packaging result.

[0184] In this embodiment, the computing device can run an initial packaging tool to package the second set of files in the basic file set to obtain a second packaging result.

[0185] For example, the initial packaging tool could be the gulp tool.

[0186] The second set of files includes the initial framework file, the initial component library file, and the front-end web page template.

[0187] S308: Determine that the packaging result includes the first packaging result and the second packaging result, and send the packaging result to the terminal device.

[0188] In this embodiment, the computing device can determine that the packaging result includes a first packaging result and a second packaging result.

[0189] The computing device can send the packaged results to the terminal device.

[0190] Once the terminal device receives the packaging result, it can control the browser to run the packaging result so that the front-end interface displays the front-end page corresponding to the packaging result.

[0191] It should be noted that the front-end page includes the rendering result corresponding to the target component.

[0192] The beneficial effects of this embodiment are as follows: The computing device can construct a target component based on the target framework file and the target component library file, and package the target component based on the bridging tool file to obtain component instructions that can be called by the initial framework file. The computing device can transmit the configuration parameters corresponding to the initial framework file to the component instructions to obtain the configured component instructions, and embed the configured component instructions into the front-end web page template. The computing device can run the initial packaging tool corresponding to the initial framework file, and through the connector, call the target packaging tool corresponding to the target framework file to package the first file set in the basic file set to obtain a first packaging result. The connector is used to connect the initial packaging tool and the target packaging tool; the first file set includes the configured component instructions, the target framework file, and the target component library file. The computing device can run the initial packaging tool to package the second file set in the basic file set to obtain a second packaging result. The second file set includes the initial framework file, the initial component library file, and the front-end web page template. The computing device can determine that the packaging result includes both the first and second packaging results. The computing device can send the packaging results to the terminal device. Once the terminal device receives the packaged result, it can control the browser to run the packaged result, so that the front-end interface displays the corresponding front-end page; the front-end page includes the rendering result of the target component. Different file sets have significantly different code types and syntax rules. By using the target packaging tool corresponding to the target framework file to package the first file set, and using the initial packaging tool corresponding to the initial framework file to package the second file set, the packaged result can be run correctly by the terminal device's browser, avoiding runtime errors and improving the display efficiency of the front-end page.

[0193] Figure 4 is a flowchart illustrating a third embodiment of a front-end page display method provided in this application. As shown in Figure 4, the method includes the following steps:

[0194] S401: Get the basic file set of the front-end project.

[0195] In this embodiment, the computing device can obtain the basic file set of the front-end project.

[0196] The basic file set includes front-end web page templates and initial library files.

[0197] The initial library files include the initial framework files and the initial component library files. For example, the initial framework files could be AngularJS 1.x files, and the initial component library files could be Bootstrap 3 files.

[0198] S402: Obtain the target library file.

[0199] In this embodiment, the computing device can obtain the target library file.

[0200] The target library files include the target framework files and the target component library files.

[0201] For example, the target framework file can be a React file. The target component library file can be an Ant-design file.

[0202] S403: Based on the initial framework file and the target framework file in the target library file, determine the bridging tool file from multiple candidate bridging tool files.

[0203] In this embodiment, the computing device can determine the bridging tool file from a plurality of candidate bridging tool files based on the target framework file and the initial framework file in the target library file.

[0204] The bridging tool file corresponds to the initial framework file and the target framework file.

[0205] In one implementation, the computing device can store the correspondence between the target framework file, the initial framework file, and the candidate bridging tool files. The computing device can query this correspondence based on the target framework file and the initial framework file to determine the bridging tool file from among the multiple candidate bridging tool files.

[0206] For example, multiple candidate bridging tool files may include the ngReact.js file and the jQuery ReactBridge file.

[0207] For example, if the target framework file is a React file and the initial framework file is an AngularJS 1.x file, the bridging tool file can be an ngReact.js file.

[0208] For another example, if the target framework file is a React file and the initial framework file is a jQuery file, the bridging tool file can be a jQuery React Bridge file.

[0209] S404: Add the target library file and bridging tool file to the base file set.

[0210] In this embodiment, the computing device can add (import) the target library file and the bridging tool file to the base file set.

[0211] S405: Build the target component based on the target framework file and the target component library file.

[0212] In this embodiment, the computing device can construct the target component based on the target framework file and the target component library file.

[0213] S406: Based on the bridging tool file, the target component is wrapped to obtain the component instructions.

[0214] In this embodiment, the computing device can package the target component based on the bridging tool file to obtain component instructions.

[0215] It should be noted that component directives are directives that can be called by the initial framework file. In other words, component directives can be directives that the initial framework file can recognize.

[0216] The following section explains the process by which a computing device packages a target component based on a bridging tool file to obtain component instructions.

[0217] In one implementation:

[0218] The computing device can access instruction wrapper functions from the bridging tool file. In one implementation, the instruction wrapper function can be a reactDirective function.

[0219] Computing devices can call instruction wrapping functions to wrap target components and obtain component instructions.

[0220] S407: Transmit the configuration parameters corresponding to the initial framework file to the component instruction, obtain the configured component instruction, and embed the configured component instruction into the front-end web page template in the base file set.

[0221] In this embodiment, the computing device can transmit the configuration parameters corresponding to the initial framework file to the component instruction to obtain the configured component instruction, and then embed the configured component instruction into the front-end web page template in the basic file set.

[0222] In essence, when a computing device embeds the configured component instructions into a front-end webpage template, it means that the computing device embeds the configured component instructions into the front-end webpage template according to the obtained target embedding location. In one implementation, the target embedding location can be pre-configured by the user.

[0223] It should be noted that when a computing device embeds the configured component instructions into a front-end web page template according to the target embedding location, it means that the computing device can write the tags corresponding to the configured component instructions into the front-end web page template according to the target embedding location.

[0224] S408: Package the basic file set to obtain the packaged result, and send the packaged result to the terminal device.

[0225] In this embodiment, the computing device can package the basic file set to obtain a packaged result.

[0226] The computing device can send the packaged results to the terminal device.

[0227] Terminal devices can control the browser to run the packaging results so that the front-end interface displays the front-end page corresponding to the packaging results.

[0228] It should be noted that the front-end page includes the rendering result corresponding to the target component.

[0229] The beneficial effects of this embodiment are as follows: In this embodiment, the computing device can obtain a set of basic files for the front-end project; wherein, the set of basic files includes a front-end web page template and an initial library file; the initial library file includes an initial framework file and an initial component library file. The computing device can obtain a target library file. The computing device can determine a bridging tool file from multiple candidate bridging tool files based on the target framework file and the initial framework file in the target library file; wherein, the bridging tool file corresponds to the initial framework file and the target framework file. The computing device can add the target library file and the bridging tool file to the set of basic files; wherein, the target library file includes a target framework file and a target component library file. The computing device can construct a target component based on the target framework file and the target component library file, and package the target component based on the bridging tool file to obtain component instructions that can be called by the initial framework file. The computing device can transmit the configuration parameters corresponding to the initial framework file to the component instructions to obtain the configured component instructions, and embed the configured component instructions into the front-end web page template. The computing device can package a set of basic files (including front-end web page templates, initial framework files, initial component library files, target framework files, target component library files, and configured component instructions) to obtain a packaged result. This packaged result is then sent to the terminal device, allowing the terminal device to control the browser to run the packaged result, thus displaying the corresponding front-end page. The front-end page includes the rendering result corresponding to the target component. By selecting bridging tool files corresponding to the initial and target library files to package the target component, the target component built based on the target library file can be matched with the initial library file, enabling the target component to be called by the initial framework file within the initial library file. This reduces the difficulty of developing complex target components within the initial library file environment, improves the construction efficiency of complex target components (such as React components), and consequently improves the development and display efficiency of the front-end page.

[0230] Figure 5 is a schematic diagram of the structure of a front-end page display device provided in an embodiment of this application. As shown in Figure 5, the front-end page display device 50 includes: an acquisition module 51, a processing module 52, and a control module 53.

[0231] Module 51 is used to retrieve the basic file set of the front-end project;

[0232] The acquisition module 51 is also used to add the acquired target library files and bridging tool files to the base file set; wherein, the target library files include target framework files and target component library files;

[0233] Processing module 52 is used to construct the target component based on the target framework file and the target component library file;

[0234] Processing module 52 is also used to package the target component based on the bridging tool file to obtain component instructions; the component instructions are instructions that can be called by the initial framework file in the basic file set;

[0235] The processing module 52 is also used to transmit the configuration parameters corresponding to the initial framework file to the component instruction, obtain the configured component instruction, and embed the configured component instruction into the front-end web page template in the basic file set;

[0236] The control module 53 is used to package the basic file set, obtain the packaging result, and send the packaging result to the terminal device so that the terminal device can control the browser to run the packaging result so that the front-end interface displays the front-end page corresponding to the packaging result; wherein, the front-end page includes the rendering result corresponding to the target component.

[0237] The front-end page display device provided in this application embodiment can execute the technical solution shown in the above method embodiment. Its implementation principle and beneficial effects are similar, and will not be repeated here.

[0238] In one implementation, the processing module 52 is specifically used for:

[0239] The initial packaging tool corresponding to the initial framework file is run. Through the linker, the target packaging tool corresponding to the target framework file is called to package the first set of files in the basic file set to obtain the first packaging result. The linker is used to connect the initial packaging tool and the target packaging tool. The first set of files includes the configured component instructions, the target framework file, and the target component library file.

[0240] Run the initial packaging tool to package the second set of files in the basic file set, and obtain the second packaging result; the second set of files includes the initial frame file and the front-end web page template.

[0241] The packaging result includes the first packaging result and the second packaging result.

[0242] The front-end page display device provided in this application embodiment can execute the technical solution shown in the above method embodiment. Its implementation principle and beneficial effects are similar, and will not be repeated here.

[0243] In one implementation, module 51 is specifically used for:

[0244] Obtain the target library file;

[0245] Based on the initial framework file and the target framework file in the target library file, the bridging tool file is determined from multiple candidate bridging tool files; wherein the bridging tool file corresponds to the initial framework file and the target framework file;

[0246] Add the target library files and bridging tool files to the base file set.

[0247] The front-end page display device provided in this application embodiment can execute the technical solution shown in the above method embodiment. Its implementation principle and beneficial effects are similar, and will not be repeated here.

[0248] In one implementation, the processing module 52 is specifically used for:

[0249] Retrieve the instruction wrapper function from the bridging tool file;

[0250] Call the instruction wrapper function to wrap the target component and obtain the component instruction.

[0251] The front-end page display device provided in this application embodiment can execute the technical solution shown in the above method embodiment. Its implementation principle and beneficial effects are similar, and will not be repeated here.

[0252] In one implementation, the processing module 52 is specifically used for:

[0253] Transmit at least one configuration parameter corresponding to the initial framework file to the component instruction to obtain the configured component instruction;

[0254] Obtain the target embedding location;

[0255] Based on the target embedding location, the configured component instructions are embedded into the front-end web page template.

[0256] The front-end page display device provided in this application embodiment can execute the technical solution shown in the above method embodiment. Its implementation principle and beneficial effects are similar, and will not be repeated here.

[0257] In one implementation, at least one configuration parameter includes at least one of the following:

[0258] Data model, mapping relationships, attribute mapping tables, and cloud resource information; mapping relationships indicate the relationships between field names and labels.

[0259] The front-end page display device provided in this application embodiment can execute the technical solution shown in the above method embodiment. Its implementation principle and beneficial effects are similar, and will not be repeated here.

[0260] This application also provides a computing device. Figure 6 is a structural diagram of a computing device provided in this application.

[0261] As shown in Figure 6, the computing device 60 includes a processor 61 and a memory 62. The processor 61 is communicatively connected to the memory 62, which stores computer execution instructions. The processor 61 is configured to execute the technical solutions in any of the aforementioned method embodiments by executing the computer execution instructions stored in the memory 62.

[0262] Optionally, the memory 62 can be either standalone or integrated with the processor 61. Optionally, when the memory 62 is a device independent of the processor 61, the computing device 60 may further include a bus for connecting the aforementioned devices.

[0263] The computing device is used to execute the technical solutions provided in any of the foregoing method embodiments. Its implementation principle and technical effect are similar, and will not be described again here.

[0264] This application also provides a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, are used to implement the technical solutions provided in any of the foregoing method embodiments.

[0265] This application also provides a computer program product, including a computer program that, when executed by a processor, implements the technical solutions provided in any of the foregoing method embodiments.

[0266] Those skilled in the art will understand that all or part of the steps of the above-described method embodiments can be implemented by hardware related to program instructions. The aforementioned program can be stored in a computer-readable storage medium. When executed, the program performs the steps of the above-described method embodiments; and the aforementioned storage medium includes various media capable of storing program code, such as ROM, RAM, magnetic disks, or optical disks.

[0267] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of this application, and not to limit them. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some or all of the technical features. These modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of this application.

Claims

1. A method for displaying a front-end page, characterized in that, include: Obtain the basic file set of the front-end project; add the obtained target library files and bridging tool files to the basic file set; wherein, the target library files include target framework files and target component library files; construct the target component based on the target framework files and the target component library files; based on the bridging tool files, package the target component to obtain component instructions; the component instructions are instructions that can be called by the initial framework file in the basic file set; transmit the configuration parameters corresponding to the initial framework file to the component instructions to obtain the configured component instructions, and embed the configured component instructions into the front-end web page template in the basic file set; package the basic file set to obtain the packaged result, and send the packaged result to the terminal device so that the terminal device controls the browser to run the packaged result so that the front-end interface displays the front-end page corresponding to the packaged result; wherein, the front-end page includes the rendering result corresponding to the target component.

2. The method according to claim 1, characterized in that, The step of packaging the basic file set to obtain a packaging result includes: running the initial packaging tool corresponding to the initial framework file; calling the target packaging tool corresponding to the target framework file through a connector to package the first file set in the basic file set to obtain a first packaging result; wherein, the connector is used to connect the initial packaging tool and the target packaging tool; the first file set includes the configured component instructions, the target framework file, and the target component library file; running the initial packaging tool to package the second file set in the basic file set to obtain a second packaging result; wherein, the second file set includes the initial framework file and the front-end web page template; and determining that the packaging result includes the first packaging result and the second packaging result.

3. The method according to claim 1 or 2, characterized in that, Adding the acquired target library file and bridging tool file to the base file set includes: acquiring the target library file; determining the bridging tool file from multiple candidate bridging tool files based on the initial framework file and the target framework file in the target library file; wherein the bridging tool file corresponds to the initial framework file and the target framework file; and adding the target library file and the bridging tool file to the base file set.

4. The method according to claim 3, characterized in that, The step of packaging the target component based on the bridging tool file to obtain component instructions includes: obtaining the instruction packaging function in the bridging tool file; and calling the instruction packaging function to package the target component to obtain the component instructions.

5. The method according to claim 1, characterized in that, The step of transmitting configuration parameters corresponding to the initial framework file to the component instruction to obtain the configured component instruction, and embedding the configured component instruction into the front-end web page template in the basic file set, includes: transmitting at least one configuration parameter corresponding to the initial framework file to the component instruction to obtain the configured component instruction; obtaining a target embedding position; and embedding the configured component instruction into the front-end web page template according to the target embedding position.

6. The method according to claim 5, characterized in that, The at least one configuration parameter includes at least one of the following: data model, mapping relationship, attribute mapping table, and cloud resource information; the mapping relationship indicates the relationship between field names and labels.

7. A display device for a front-end page, characterized in that, include: An acquisition module is used to acquire a set of basic files for a front-end project. This acquisition module is also used to add the acquired target library files and bridging tool files to the set of basic files. The target library files include target framework files and target component library files. A processing module is used to construct a target component based on the target framework files and the target component library files. The processing module is also used to package the target component based on the bridging tool files to obtain component instructions. The component instructions are instructions that can be called by the initial framework file in the set of basic files. The processing module is also used to transmit the configuration parameters corresponding to the initial framework file to the component instructions to obtain configured component instructions, and to embed the configured component instructions into the front-end webpage template in the set of basic files. A control module is used to package the set of basic files to obtain a packaging result, and to send the packaging result to a terminal device so that the terminal device can control the browser to run the packaging result, thereby displaying the front-end page corresponding to the packaging result. The front-end page includes the rendering result corresponding to the target component.

8. A computing device, characterized in that, include: A processor, and a memory communicatively connected to the processor; The memory stores computer-executable instructions; the processor executes the computer-executable instructions stored in the memory to implement the method as described in any one of claims 1-6.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when executed by a processor, are used to implement the method as described in any one of claims 1-6.

10. A computer program product, characterized in that, Includes a computer program that, when executed by a processor, implements the method described in any one of claims 1-6.

Images