Data processing method, device, terminal and storage medium based on front-end component

Abstract

The present application is applicable to the field of data processing technology, and provides a data processing method, device, terminal and storage medium based on front-end components, wherein the method includes: generating component data packets corresponding to each front-end component based on the front-end component code, determining the target component data packet based on the user's query operation, loading the target front-end component code corresponding to the target component data packet into the sandbox environment for operation and displaying the target front-end component generated after the operation on the user side, loading the target front-end component code into the sandbox environment for operation based on the modified target front-end component code and displaying the target front-end component generated after the operation until the user side obtains the user-triggered determination operation, and generating an updated target component data packet based on the modified target front-end component code and outputting it to the user side. This solution can improve the reuse degree and development efficiency of front-end components.

Description

Technical Field

[0001] The present application belongs to the field of data processing technology, and in particular, relates to a data processing method, device, terminal and storage medium based on a front-end component. Background Art

[0002] With the continuous increase in front-end personnel and the continuous growth of corporate business, various front-end components will need to be configured during the actual front-end project development process.

[0003] After the project is completed, you will encounter components with similar functions when working on other projects. Usually, different front-end developers can only redevelop components with similar functions based on the current development project, and cannot reuse components of projects developed by other front-end personnel. Or they can only find the original components from the original old projects to reuse components, which is also a time-consuming task. In addition, many excellent components are mostly mixed in the project and cannot be passed down, resulting in the inability to reuse front-end components and slow project development progress. Summary of the invention

[0004] The embodiments of the present application provide a data processing method, device, terminal and storage medium based on a front-end component to solve the problem in the prior art that the front-end components cannot be reused, resulting in slow project development progress.

[0005] A first aspect of an embodiment of the present application provides a data processing method based on a front-end component, comprising:

[0006] Generate component data packets corresponding to each front-end component based on the front-end component code;

[0007] When the user terminal receives a query operation on the component data packet from the user, the target component data packet matching the query operation is determined from the component data packet;

[0008] Loading the target front-end component code corresponding to the target component data packet into the sandbox environment for execution and displaying the target front-end component generated after the target front-end component code is executed in the sandbox environment on the user end;

[0009] When the user terminal receives a modification operation on the target front-end component code by the user, based on the modified target front-end component code, it returns to execute the step of loading the target front-end component code corresponding to the target component data packet into the sandbox environment for execution and displaying the effect of the target front-end component generated after the target front-end component code runs in the sandbox environment, until the user terminal obtains a confirmation operation triggered by the user;

[0010] In response to the determination operation, an updated target component data packet is generated based on the modified target front-end component code, and the updated target component data packet is output to the user end.

[0011] A second aspect of an embodiment of the present application provides a data processing device based on a front-end component, including:

[0012] A generation module, used to generate component data packets corresponding to each front-end component based on the front-end component code;

[0013] A query module, configured to determine a target component data packet matching the query operation from the component data packet when the user terminal receives a query operation on the component data packet from the user;

[0014] A display module, used for loading the target front-end component code corresponding to the target component data packet into a sandbox environment for execution and displaying the target front-end component generated after the target front-end component code is executed in the sandbox environment on the user end;

[0015] A modification module, which is used for returning to execute the steps of loading the target front-end component code corresponding to the target component data packet into the sandbox environment for execution and displaying the effect of the target front-end component generated after the target front-end component code runs in the sandbox environment, based on the modified target front-end component code, when the user terminal receives a modification operation on the target front-end component code from the user, until the user terminal obtains a confirmation operation triggered by the user;

[0016] The output module is used to generate an updated target component data packet in response to the determination operation based on the modified target front-end component code, and output the updated target component data packet to the user end.

[0017] A third aspect of an embodiment of the present application provides a terminal, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the method described in the first aspect when executing the computer program.

[0018] A fourth aspect of an embodiment of the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the method described in the first aspect are implemented.

[0019] A fifth aspect of the present application provides a computer program product, which, when executed on a terminal, enables the terminal to execute the steps of the method described in the first aspect.

[0020] As can be seen from the above, in the embodiments of the present application, component data packets corresponding to each front-end component are generated based on the front-end component code, and based on the user's query operation, the target component data packet is determined, the target front-end component code corresponding to the target component data packet is loaded into the sandbox environment for execution and the target front-end component generated after the execution is displayed on the user side, and the target front-end component code corresponding to the target component data packet is loaded into the sandbox environment for execution based on the modified target front-end component code and the target front-end component generated after the execution is displayed on the user side until the user side obtains the confirmation operation triggered by the user, and based on the modified target front-end component code, an updated target component data packet is generated and output to the user side, thereby reducing a large number of repetitive front-end component development operations, and with the help of visualization of the effects of the development process, the reuse degree and development efficiency of the front-end components are improved. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0022] Figure 1 This is a process of a data processing method based on a front-end component provided in an embodiment of the present application. Figure 1 ;

[0023] Figure 2 This is a process of a data processing method based on a front-end component provided in an embodiment of the present application. Figure 2 ;

[0024] Figure 3 is a structural diagram of a data processing device based on a front-end component provided in an embodiment of the present application;

[0025] Figure 4 It is a structural diagram of a terminal provided in an embodiment of the present application. DETAILED DESCRIPTION

[0026] In the following description, specific details such as specific system structures, technologies, etc. are provided for the purpose of illustration rather than limitation, so as to provide a thorough understanding of the embodiments of the present application. However, it should be clear to those skilled in the art that the present application may also be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to prevent unnecessary details from obstructing the description of the present application.

[0027] It should be understood that when used in this specification and the appended claims, the term "comprising" indicates the presence of described features, integers, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, integers, steps, operations, elements, components and / or groups thereof.

[0028] It should also be understood that the terms used in this application specification are only for the purpose of describing specific embodiments and are not intended to limit the application. As used in this application specification and the appended claims, unless the context clearly indicates otherwise, the singular forms "a", "an" and "the" are intended to include plural forms.

[0029] It should be further understood that the term “and / or” used in the specification and appended claims refers to any combination and all possible combinations of one or more of the associated listed items, and includes these combinations.

[0030] As used in this specification and the appended claims, the term "if" may be interpreted as "when" or "upon" or "in response to determining" or "in response to detecting," depending on the context. Similarly, the phrases "if it is determined" or "if [described condition or event] is detected" may be interpreted as meaning "upon determination" or "in response to determining" or "upon detection of [described condition or event]" or "in response to detecting [described condition or event]," depending on the context.

[0031] In a specific implementation, the terminal described in the embodiments of the present application includes, but is not limited to, other portable devices such as mobile phones, laptop computers, or tablet computers with touch-sensitive surfaces (e.g., touch screen displays and / or touch pads). It should also be understood that in some embodiments, the device is not a portable communication device, but a desktop computer with a touch-sensitive surface (e.g., touch screen displays and / or touch pads).

[0032] In the following discussion, a terminal including a display and a touch-sensitive surface is described. However, it should be understood that the terminal may include one or more other physical user interface devices such as a physical keyboard, mouse and / or joystick.

[0033] The terminal supports various applications, such as one or more of the following: a drawing application, a presentation application, a word processing application, a website creation application, a disk burning application, a spreadsheet application, a game application, a telephone application, a video conferencing application, an email application, an instant messaging application, a workout support application, a photo management application, a digital camera application, a digital camcorder application, a web browsing application, a digital music player application, and / or a digital video player application.

[0034] Various applications that can be executed on the terminal can use at least one common physical user interface device such as a touch-sensitive surface. One or more functions of the touch-sensitive surface and corresponding information displayed on the terminal can be adjusted and / or changed between applications and / or within corresponding applications. In this way, the common physical architecture of the terminal (e.g., the touch-sensitive surface) can support various applications with user interfaces that are intuitive and transparent to the user.

[0035] It should be understood that the size of the serial numbers of the steps in this embodiment does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiment of the present application.

[0036] In order to illustrate the technical solution described in this application, a specific embodiment is provided below for illustration.

[0037] See also Figure 1 , Figure 1 This is a process of a data processing method based on a front-end component provided in an embodiment of the present application. Figure 1 .like Figure 1 As shown, a data processing method based on a front-end component comprises the following steps:

[0038] Step 101, generating component data packets corresponding to each front-end component based on the front-end component code.

[0039] Different front-end components correspond to component data packages, which are generated based on the front-end component code. The generation method can be to generate by encapsulating the front-end component code, or to generate by checking and correcting the code feasibility of the front-end component code according to the standardized template of the platform.

[0040] The component data code may be obtained from different platform user terminals, or may be generated based on the writing of platform users themselves.

[0041] Wherein, as an optional implementation, the component data packets corresponding to each front-end component are generated based on the front-end component code, including:

[0042] When the user terminal receives the user's selection operation on the front-end component template, the target front-end component template corresponding to the selection operation is displayed in the user terminal;

[0043] Obtain at least one set of front-end component codes written by a user on the user side based on a target front-end component template;

[0044] Code packaging is performed based on each front-end component code written by the user to obtain component data packets corresponding to different front-end components.

[0045] The platform provides users with front-end component templates, which are used to assist users in writing front-end component codes. The front-end component templates can include pre-set common fields and can also allow users to customize personalized fields.

[0046] Users can write code for different front-end components based on the front-end component template. After obtaining a set of front-end component codes written by users, the platform can encapsulate the front-end component codes and obtain a component data package.

[0047] In specific applications, the front-end component management function can be performed, and the component code can be provided to users according to the specified component templates such as the standard vue file format.

[0048] Furthermore, in an implementation process, code packaging is performed based on each front-end component code written by the user to obtain component data packets corresponding to different front-end components, including:

[0049] Get the writing rules of the programming language used by the front-end component template;

[0050] Based on the writing rules, compile each front-end component code written by the user to obtain executable code;

[0051] The executable code is encapsulated to obtain component data packets corresponding to different front-end components.

[0052] In this process, code writing for different front-end components is implemented based on the front-end component template. After obtaining a group of front-end component codes written by users, the platform can encapsulate the front-end component code and obtain a component data package, thereby ensuring the availability and validity of the encapsulated component data packages corresponding to different front-end components.

[0053] Further, as an optional implementation, after performing code encapsulation based on each front-end component code written by the user to obtain component data packets corresponding to different front-end components, it also includes:

[0054] Classify component data packets according to the corresponding front-end components;

[0055] The component data packets are stored separately according to the divided categories.

[0056] After the component data package is generated based on the written component code, the packaged component data package can also be stored in the component platform by category.

[0057] Specifically, component data packages can be categorized and stored in the component platform according to the company's actual business types. They can also be categorized according to component features such as the functions and visual display effects of the front-end components corresponding to the component data packages. For example, for the convenience of users, the categories can be divided into commonly used display front-end components such as pie charts, line charts, bar charts, topology, etc., and operations such as adding, deleting, modifying and querying component data packages can also be supported.

[0058] The component data package can also be named and feature information extracted according to component features to facilitate users' subsequent search operations on the component data package on the platform.

[0059] Step 102: When the user terminal receives a query operation on a component data packet from the user, a target component data packet matching the query operation is determined from the component data packets.

[0060] Users can operate on the user side to apply the platform functions.

[0061] The user can query the component data package on the user side by inputting the query keyword or performing component query and selection operation based on the classification list.

[0062] By centrally displaying component data packages, components of the component platform can be retrieved and displayed by category and keyword.

[0063] Step 103, loading the target front-end component code corresponding to the target component data packet into the sandbox environment for execution and displaying the target front-end component generated after the target front-end component code is executed in the sandbox environment on the user side.

[0064] After receiving the user's query operation on the component data package and determining the target component data package that matches the query operation from the component data package, the target front-end component code corresponding to the component data package on the component platform can be run and displayed in the code sandbox, and the component running effect can be seen in real time.

[0065] Specifically, in the application, a closed JavaScript sandbox environment can be set up. The JavaScript sandbox environment contains an encapsulated JavaScript environment that can directly run Vue files. The sandbox environment monitors the user's input through anti-shake and obtains the content string after the user's input. The user's input string is calculated into executable code through eval. The executable code entered by the user is dynamically mounted through Vue's functional programming render method. After mounting, the component running effect can be seen in real time on the right.

[0066] Step 104, determining whether the user terminal has received a modification operation of the target front-end component code by the user;

[0067] When it is determined that the user terminal receives the modification operation of the target front-end component code by the user, based on the modified target front-end component code, the process returns to step 103. That is, based on the modified target front-end component code, the target front-end component code corresponding to the target component data packet is loaded into the sandbox environment for execution, and the target front-end component generated after the target front-end component code is executed in the sandbox environment is displayed.

[0068] Implement modification operations on the target front-end component code based on user operations, and display the display effect of the target front-end component in real time, so as to reversely assist users in further personalized adjustments to the reusable target front-end component code in the platform, meet users' current development needs, reduce users' repetitive front-end component development operations, and improve the visualization of the development process and the real-time adjustment.

[0069] Step 105: determine whether the user terminal obtains a confirmation operation triggered by the user.

[0070] The confirmation operation may be to set a completion button, a download button, etc. on the user-side interface, and when the user triggers a click operation on these buttons, it is determined that the confirmation operation triggered by the user is obtained.

[0071] Step 106, when a confirmation operation triggered by a user is obtained, in response to the confirmation operation, an updated target component data packet is generated based on the modified target front-end component code, and the updated target component data packet is output to the user end.

[0072] In the above process, when the user end receives the user's modification operation on the target front-end component code, it returns to execute the steps of loading the target front-end component code corresponding to the target component data packet into the sandbox environment for execution and displaying the effect of the target front-end component generated after the target front-end component code runs in the sandbox environment based on the modified target front-end component code, until the user end obtains the confirmation operation triggered by the user.

[0073] In this process, an updated target component data packet is generated based on the target front-end component code modified by the user, and the data packet is output to the user end, so that the user can download and use the personalized adjusted data packet.

[0074] Among them, the updated target component data packet can be synchronously updated with the original target component data packet on the platform to achieve adjustment and optimization of the original target component data packet on the platform, or the updated target component data packet is only used for feedback to the user end for use, without synchronously updating the content of the original target component data packet in the platform, to ensure the universality of the component data packet in the platform.

[0075] Finally, front-end developers can choose components suitable for their own projects during this process. Finally, they can directly download the components to the local computer and import them into the current project for use, thereby improving development efficiency and the degree of reuse of front-end components.

[0076] In an embodiment of the present application, a component data packet corresponding to each front-end component is generated based on the front-end component code, a target component data packet is determined based on the user's query operation, the target front-end component code corresponding to the target component data packet is loaded into the sandbox environment for execution, and the target front-end component generated after the execution is displayed on the user side, the target front-end component code corresponding to the target component data packet is loaded into the sandbox environment for execution based on the modified target front-end component code, and the target front-end component generated after the execution is displayed on the user side, until the user side obtains the confirmation operation triggered by the user, and based on the modified target front-end component code, an updated target component data packet is generated and output to the user side, thereby reducing a large number of repetitive front-end component development operations, and with the help of visualization of the effects of the development process, the reuse degree and development efficiency of the front-end components are improved.

[0077] The embodiments of the present application also provide different implementations of the data processing method based on the front-end component.

[0078] See also Figure 2 , Figure 2 This is a process of a data processing method based on a front-end component provided in an embodiment of the present application. Figure 2 .like Figure 2 As shown, a data processing method based on a front-end component comprises the following steps:

[0079] Step 201, generating component data packets corresponding to each front-end component based on the front-end component code;

[0080] The implementation process of this step is the same as the implementation process of step 101 in the aforementioned embodiment, and will not be repeated here.

[0081] Step 202, when the user terminal receives a query operation on a component data packet from the user, a target component data packet matching the query operation is determined from the component data packets;

[0082] The implementation process of this step is the same as the implementation process of step 102 in the aforementioned embodiment, and will not be repeated here.

[0083] Step 203, displaying the target front-end component code corresponding to the target component data packet in the first area of ​​the user terminal;

[0084] The first area realizes the display of the target component data package and provides the user with the function of modifying the target component data package.

[0085] Step 204, when the user terminal receives the code execution operation triggered by the user, the target front-end component code corresponding to the target component data packet is loaded into the sandbox environment for execution;

[0086] Step 205, the target front-end component generated after the target front-end component code is run in the sandbox environment is displayed in the second area of ​​the user terminal.

[0087] Specifically, in the application, the display interface of the user end can be divided into two areas. The left side is the code display and editing area, which is equivalent to a closed JavaScript sandbox environment, and the right side is the actual running effect of the component. The JavaScript sandbox environment is an encapsulated JavaScript environment that can directly run vue files. In the left area, users can modify the target front-end component code in real time. The sandbox environment monitors the user's input through anti-shake and obtains the content string after the user enters. It calculates the user's input string into executable code through eval, and dynamically mounts the user's input executable code through vue's functional programming render method. After mounting, the component running effect can be seen in real time on the right.

[0088] In one embodiment, the target front-end component generated after the target front-end component code is run in the sandbox environment is displayed in the second area of ​​the user terminal, including:

[0089] Obtain the component size of the target front-end component generated after the target front-end component code is loaded into the sandbox environment and run;

[0090] Get the area size of the second area;

[0091] Based on the component size and the area size, the target front-end component is displayed in the second area according to the set display ratio.

[0092] The effect display area of ​​the target front-end component can be set, that is, the size of the second area can be adjusted. In the application process, the actual size of the second area interface is obtained through window.getComputedStyle, and the resize method is triggered to dynamically calculate and reset the display size of the component in the second area.

[0093] Step 206, determining whether the user terminal has received a modification operation of the target front-end component code by the user;

[0094] When it is determined that the user terminal receives the modification operation of the target front-end component code by the user, based on the modified target front-end component code, the process returns to step 203. That is, based on the modified target front-end component code, the target front-end component code corresponding to the target component data package is loaded into the sandbox environment for execution, and the target front-end component generated after the target front-end component code is executed in the sandbox environment is displayed;

[0095] The implementation process of this step is the same as the implementation process of step 104 in the aforementioned embodiment, and will not be repeated here.

[0096] Step 207, determining whether the user terminal obtains a confirmation operation triggered by the user;

[0097] The implementation process of this step is the same as the implementation process of step 105 in the aforementioned embodiment, and will not be repeated here.

[0098] Step 208, when a confirmation operation triggered by the user is obtained, in response to the confirmation operation, an updated target component data packet is generated based on the modified target front-end component code, and the updated target component data packet is output to the user end.

[0099] That is, when the user end receives the user's modification operation on the target front-end component code, it returns to execute the steps of loading the target front-end component code corresponding to the target component data packet into the sandbox environment for execution and displaying the effect of the target front-end component generated after the target front-end component code runs in the sandbox environment based on the modified target front-end component code, until the user end obtains the confirmation operation triggered by the user.

[0100] The implementation process of this step is the same as the implementation process of step 106 in the aforementioned embodiment, and will not be repeated here.

[0101] In an embodiment of the present application, a component data packet corresponding to each front-end component is generated based on the front-end component code, a target component data packet is determined based on the user's query operation, the target front-end component code corresponding to the target component data packet is loaded into the sandbox environment for execution, and the target front-end component generated after the execution is displayed on the user side, the target front-end component code corresponding to the target component data packet is loaded into the sandbox environment for execution based on the modified target front-end component code, and the target front-end component generated after the execution is displayed on the user side, until the user side obtains the confirmation operation triggered by the user, and based on the modified target front-end component code, an updated target component data packet is generated and output to the user side, thereby reducing a large number of repetitive front-end component development operations, and with the help of visualization of the effects of the development process, the reuse degree and development efficiency of the front-end components are improved.

[0102] See also Figure 3 , Figure 3 This is a structural diagram of a data processing device based on a front-end component provided in an embodiment of the present application. For the sake of convenience of explanation, only the parts related to the embodiment of the present application are shown.

[0103] The data processing device 300 based on the front-end component includes:

[0104] A generating module 301 is used to generate component data packets corresponding to each front-end component based on the front-end component code;

[0105] The query module 302 is used to determine a target component data packet matching the query operation from the component data packet when the user terminal receives a query operation on the component data packet from the user;

[0106] A display module 303 is used to load the target front-end component code corresponding to the target component data packet into a sandbox environment for execution and to display the target front-end component generated after the target front-end component code is executed in the sandbox environment on the user end;

[0107] The modification module 304 is used for returning to execute the step of loading the target front-end component code corresponding to the target component data packet into the sandbox environment for execution and displaying the effect of the target front-end component generated after the target front-end component code is executed in the sandbox environment, based on the modified target front-end component code, when the user terminal receives the user's modification operation on the target front-end component code, until the user terminal obtains the confirmation operation triggered by the user;

[0108] The output module 305 is used to generate an updated target component data packet in response to the determination operation based on the modified target front-end component code, and output the updated target component data packet to the user end.

[0109] The display module 303 is specifically used for:

[0110] Displaying the target front-end component code corresponding to the target component data packet in the first area of ​​the user terminal;

[0111] When the user terminal receives a code execution operation triggered by a user, the target front-end component code corresponding to the target component data packet is loaded into the sandbox environment for execution;

[0112] The target front-end component generated after the target front-end component code is run in the sandbox environment is displayed in the second area of ​​the user terminal.

[0113] The display module 303 is more specifically used for:

[0114] Obtaining a component size of the target front-end component generated after the target front-end component code is loaded into the sandbox environment and executed;

[0115] Acquire the area size of the second area;

[0116] Based on the component size and the area size, the target front-end component is effectively displayed in the second area according to a set display ratio.

[0117] Wherein, the generating module 301 is specifically used for:

[0118] When the user terminal receives a selection operation of a front-end component template by the user, a target front-end component template corresponding to the selection operation is displayed in the user terminal;

[0119] Acquire at least one set of front-end component codes written by a user on the user side based on the target front-end component template;

[0120] Code packaging is performed based on each of the front-end component codes written by the user to obtain the component data packets corresponding to different front-end components.

[0121] The generating module 301 is more specifically used for:

[0122] Obtaining the writing rules of the programming language adopted by the front-end component template;

[0123] Based on the writing rules, compile each of the front-end component codes written by the user to obtain executable code;

[0124] The executable code is encapsulated to obtain the component data packets corresponding to different front-end components.

[0125] The device further includes a storage module, which is used to:

[0126] Classify the component data packets according to the corresponding front-end components;

[0127] The component data packets are stored separately according to the divided categories.

[0128] The data processing device based on the front-end component provided in the embodiment of the present application can implement the various processes of the embodiment of the above-mentioned data processing method based on the front-end component, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0129] Figure 4 4 is a structural diagram of a terminal provided in an embodiment of the present application. As shown in the figure, the terminal 4 of this embodiment includes: at least one processor 40 ( Figure 4 Only one is shown in the figure), a memory 41, and a computer program 42 stored in the memory 41 and executable on the at least one processor 40, wherein the processor 40 implements the steps of any of the above-mentioned method embodiments when executing the computer program 42.

[0130] The terminal 4 may be a computing device such as a desktop computer, a notebook, a PDA, or a cloud server. The terminal 4 may include, but is not limited to, a processor 40 and a memory 41. Those skilled in the art will appreciate that Figure 4 It is only an example of terminal 4 and does not constitute a limitation on terminal 4. It may include more or fewer components than shown in the figure, or a combination of certain components, or different components. For example, the terminal may also include input and output devices, network access devices, buses, etc.

[0131] The processor 40 may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor may be a microprocessor or any conventional processor, etc.

[0132] The memory 41 may be an internal storage unit of the terminal 4, such as a hard disk or memory of the terminal 4. The memory 41 may also be an external storage device of the terminal 4, such as a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc. equipped on the terminal 4. Further, the memory 41 may also include both an internal storage unit and an external storage device of the terminal 4. The memory 41 is used to store the computer program and other programs and data required by the terminal. The memory 41 may also be used to temporarily store data that has been output or is to be output.

[0133] The technicians in the relevant field can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example for illustration. In practical applications, the above-mentioned function allocation can be completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiment can be integrated in a processing unit, or each unit can exist physically separately, or two or more units can be integrated in one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units. In addition, the specific names of the functional units and modules are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of this application. The specific working process of the units and modules in the above-mentioned system can refer to the corresponding process in the aforementioned method embodiment, which will not be repeated here.

[0134] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described or recorded in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0135] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0136] In the embodiments provided in the present application, it should be understood that the disclosed devices / terminals and methods can be implemented in other ways. For example, the device / terminal embodiments described above are only schematic. For example, the division of the modules or units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0137] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0138] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0139] If the integrated module / unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the present application implements all or part of the processes in the above-mentioned embodiment method, and can also be completed by instructing the relevant hardware through a computer program. The computer program can be stored in a computer-readable storage medium, and the computer program can implement the steps of the above-mentioned various method embodiments when executed by the processor. Among them, the computer program includes computer program code, and the computer program code can be in source code form, object code form, executable file or some intermediate form. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, U disk, mobile hard disk, disk, optical disk, computer memory, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), electric carrier signal, telecommunication signal and software distribution medium. It should be noted that the content contained in the computer-readable medium can be appropriately increased or decreased according to the requirements of legislation and patent practice in the jurisdiction. For example, in some jurisdictions, according to legislation and patent practice, computer-readable media do not include electric carrier signals and telecommunication signals.

[0140] The present application implements all or part of the processes in the above-mentioned embodiment method, and may also be implemented through a computer program product. When the computer program product runs on a terminal, the terminal can implement the steps in the above-mentioned method embodiments when executing the computer program product.

[0141] The embodiments described above are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, a person skilled in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features may be replaced by equivalents. Such modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application, and should all be included in the protection scope of the present application.

Claims

1. A data processing method based on a front-end component, characterized in that: include: Generate component data packets corresponding to each front-end component based on the front-end component code; When the user terminal receives a query operation on the component data packet from the user, the target component data packet matching the query operation is determined from the component data packet; Loading the target front-end component code corresponding to the target component data packet into the sandbox environment for execution and displaying the target front-end component generated after the target front-end component code is executed in the sandbox environment on the user end; When the user terminal receives a modification operation on the target front-end component code by the user, based on the modified target front-end component code, it returns to execute the step of loading the target front-end component code corresponding to the target component data packet into the sandbox environment for execution and displaying the effect of the target front-end component generated after the target front-end component code runs in the sandbox environment, until the user terminal obtains a confirmation operation triggered by the user; In response to the determination operation, an updated target component data packet is generated based on the modified target front-end component code, and the updated target component data packet is output to the user end.

2. The method according to claim 1, characterized in that The step of loading the target front-end component code corresponding to the target component data packet into a sandbox environment for execution and displaying the target front-end component generated after the target front-end component code is executed in the sandbox environment on the user end includes: Displaying the target front-end component code corresponding to the target component data packet in the first area of ​​the user terminal; When the user terminal receives a code execution operation triggered by a user, the target front-end component code corresponding to the target component data packet is loaded into the sandbox environment for execution; The target front-end component generated after the target front-end component code is run in the sandbox environment is displayed in the second area of ​​the user terminal.

3. The method according to claim 2, characterized in that The target front-end component generated by running the target front-end component code in the sandbox environment is displayed in the second area of ​​the user terminal, including: Obtaining a component size of the target front-end component generated after the target front-end component code is loaded into the sandbox environment and executed; Acquire the area size of the second area; Based on the component size and the area size, the target front-end component is effectively displayed in the second area according to a set display ratio.

4. The method according to claim 1, characterized in that The generating component data packets corresponding to each front-end component based on the front-end component code includes: When the user terminal receives a selection operation of a front-end component template by the user, a target front-end component template corresponding to the selection operation is displayed in the user terminal; Acquire at least one set of front-end component codes written by a user on the user side based on the target front-end component template; Code packaging is performed based on each of the front-end component codes written by the user to obtain the component data packets corresponding to different front-end components.

5. The method according to claim 4, characterized in that The code packaging is performed based on each of the front-end component codes written by the user to obtain the component data packets corresponding to different front-end components, including: Obtaining the writing rules of the programming language adopted by the front-end component template; Based on the writing rules, compile each of the front-end component codes written by the user to obtain executable code; The executable code is encapsulated to obtain the component data packets corresponding to different front-end components.

6. The method according to claim 1, characterized in that After the code packaging is performed based on each of the front-end component codes written by the user to obtain the component data packets corresponding to different front-end components, the method further includes: Classify the component data packets according to the corresponding front-end components; The component data packets are stored separately according to the divided categories.

7. A data processing device based on a front-end component, characterized in that: include: A generation module, used to generate component data packets corresponding to each front-end component based on the front-end component code; A query module, configured to determine a target component data packet matching the query operation from the component data packet when the user terminal receives a query operation on the component data packet from the user; A display module, used for loading the target front-end component code corresponding to the target component data packet into a sandbox environment for execution and displaying the target front-end component generated after the target front-end component code is executed in the sandbox environment on the user end; A modification module, which is used for returning to execute the steps of loading the target front-end component code corresponding to the target component data packet into the sandbox environment for execution and displaying the effect of the target front-end component generated after the target front-end component code runs in the sandbox environment, based on the modified target front-end component code, when the user terminal receives a modification operation on the target front-end component code from the user, until the user terminal obtains a confirmation operation triggered by the user; The output module is used to generate an updated target component data packet in response to the determination operation based on the modified target front-end component code, and output the updated target component data packet to the user end.

8. The device according to claim 7, characterized in that The display module is specifically used for: Displaying the target front-end component code corresponding to the target component data packet in the first area of ​​the user terminal; When the user terminal receives a code execution operation triggered by a user, the target front-end component code corresponding to the target component data packet is loaded into the sandbox environment for execution; The target front-end component generated after the target front-end component code is run in the sandbox environment is displayed in the second area of ​​the user terminal.

9. A terminal comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 6 are implemented.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 6 are implemented.

Images