CN115268895A - Front-end code and template generation method thereof, electronic device and storage medium - Google Patents

Abstract

The present application discloses a front-end code generation method, a front-end code template generation method, an electronic device and a computer-readable storage medium. The method includes: forming an input page by using generation parameters, the generation parameters include component parameters and control parameters, the control parameters include business control variables, the business control variables include switch variables of each business function code, and the switch variables of the business function code represent whether the business function code is required; display the input page; receive the user's operation on the input page; modify the generation parameters according to the operation; determine the required business function code according to the switch variable; generate the front-end code file of the business page according to the required business function code and generation parameters. Through the above method, the writing efficiency of the front-end developers can be improved, and the influence of the writing habits of different front-end developers on the front-end code files can be avoided.

Description

Front-end code and its template generation method, electronic device and storage medium

technical field

The present application relates to the technical field of front-end development, in particular to a front-end code generation method, a front-end code template generation method, electronic equipment, and a computer-readable storage medium.

Background technique

With the rapid development of the Internet, more and more users prefer to use web browsing, and the software system platform tends to be more and more BS (Browser/Server, browser/server mode). However, there are a lot of repetitive work with similar rules in front-end development, which affects the writing efficiency of developers (users). Moreover, due to the different writing habits of different front-end developers, there are differences in the final front-end code files, resulting in high maintenance costs in the later stage.

Contents of the invention

The application provides a front-end code generation method, a front-end code template generation method, an electronic device, and a computer-readable storage medium, which can solve the problems of low writing efficiency and different writing habits of front-end developers affecting front-end code files.

In order to solve the above technical problems, a technical solution adopted by this application is to provide a front-end code generation method. The method includes: forming an input page by using generation parameters, the generation parameters include component parameters and control parameters, the control parameters include service control variables, the service control variables include switch variables of each service function code, and the switch variable of the service function code represents whether the service function code is required; display the input page; receive the user's operation on the input page; modify the generation parameters according to the operation; determine the required business function code according to the switch variable; generate the front-end code file of the business page according to the required business function code and generation parameters.

In order to solve the above technical problems, a technical solution adopted by this application is to provide a method for generating a front-end code template. The method includes: collecting page elements included in the business page, and encapsulating the page elements to obtain components and component parameters; collecting business functions included in the business page, and writing standard codes for each business function to obtain each business function code; combining the component parameters and The control parameters are packaged to obtain generation parameters. The control parameters include service control variables, and the service control variables include switch variables of each service function code. The switch variable of the service function code indicates whether the service function code is needed.

In order to solve the above technical problems, another technical solution adopted by the present application is to provide an electronic device, which includes a processor and a memory connected to the processor, wherein the memory stores program instructions; the processor is used to execute the memory storage program instructions to implement the above method.

In order to solve the above-mentioned technical problems, another technical solution adopted by the present application is to provide a computer-readable storage medium storing program instructions, which can realize the above-mentioned method when executed.

Through the above method, on the one hand, since the application has generated the front-end code template (business function code and generation parameters) in advance, when there is a need to generate the front-end code file of the business page, the user only needs to operate through the input page to modify the generation parameters , you can realize the generation of the front-end code file of the business page. Therefore, the user does not need to repeatedly write the front-end code every time there is a demand for the generation of the front-end code file, which can reduce the user's workload, improve the writing efficiency, and avoid the influence of different users' writing habits on the front-end code file. On the other hand, since the control parameters include the switch variables of the business function codes, the switch variables indicate whether the business function codes are needed, so the user can set the switch variables according to the needs to select the required function business codes. Therefore, the front-end code template can cater to different business function requirements of users, and has high versatility.

Description of drawings

Fig. 1 is a schematic flow chart of an embodiment of a method for generating a front-end code template of the present application;

Fig. 2 is a schematic diagram of a business page in the query list business scenario;

Fig. 3 is a schematic diagram of the service page corresponding to Fig. 2 for adding functions;

Fig. 4 is a schematic flow diagram of an embodiment of the front-end code generation method of the present application;

Fig. 5 is a schematic flow chart of another embodiment of the front-end code generation method of the present application;

Fig. 6 is a schematic diagram of the input page A of the public parameters corresponding to the business page shown in Fig. 2;

Fig. 7 is a schematic diagram of the input page B corresponding to the generated parameters of the business page shown in Fig. 2;

Fig. 8 is a schematic diagram of an input page C corresponding to the generated parameters of the business page shown in Fig. 3;

Fig. 9 is a schematic diagram of the final preview result of the service page shown in Fig. 2;

Fig. 10 is a schematic diagram of the final preview result corresponding to the business page shown in Fig. 3;

Fig. 11 is a schematic diagram of data records in the database;

Fig. 12 is a schematic diagram of a front-end code file generation device;

Fig. 13 is a schematic diagram of menus and data records corresponding to the target product;

FIG. 14 is a schematic structural diagram of an embodiment of the electronic device of the present application;

Fig. 15 is a schematic structural diagram of an embodiment of a computer-readable storage medium of the present application;

Detailed ways

The following will clearly and completely describe the technical solutions in the embodiments of the present application with reference to the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of them. Based on the embodiments in this application, all other embodiments obtained by persons of ordinary skill in the art without making creative efforts belong to the scope of protection of this application.

The terms "first", "second", and "third" in this application are used for descriptive purposes only, and cannot be understood as indicating or implying relative importance or implicitly specifying the quantity of indicated technical features. Thus, features defined as "first", "second", and "third" may explicitly or implicitly include at least one of these features. In the description of the present application, "plurality" means at least two, such as two, three, etc., unless otherwise specifically defined.

Reference herein to an "embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment can be included in at least one embodiment of the present application. The occurrences of this phrase in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. It is understood explicitly and implicitly by those skilled in the art that the embodiments described herein can be combined with other embodiments in the absence of conflict.

The front-end code generating method of the present application is divided into two stages, one is the stage of generating the front-end code template, and the other is the stage of generating the front-end code file by applying the front-end code template. In the application stage, the prepared front-end code template can be applied to generate the front-end code file.

The front-end code template generation phase is first introduced as follows:

FIG. 1 is a schematic flowchart of an embodiment of a method for generating a front-end code template of the present application. It should be noted that this embodiment is not limited to the flow sequence shown in FIG. 1 if substantially the same result is obtained. As shown in Figure 1, this embodiment may include:

S11: Collect page elements included in the business page, and encapsulate the page elements to obtain components and component parameters.

S12: Collect the business functions included in the business page, write standard codes for each business function, and obtain the codes of each business function.

S13: Packing component parameters and control parameters to obtain generation parameters.

The control parameters include service control variables, and the service control variables include switch variables of each service function code, and the switch variables of the service function code represent whether the service function code is needed.

In the above S11-S13, the business page may include business functions such as adding, deleting, modifying, viewing, and querying functions. A business page may include all types of business functions in a business scenario, so as to be applicable to the business scenario. Alternatively, a business page may include all types of business functions in multiple business scenarios, so as to be applicable to multiple business scenarios. The business function code is the code required to realize the business function logic.

Generation parameters may include component parameters and control parameters. Component parameters are parameters of components included in the business page. The components included in the business page can be list, form, text, picture, audio, video, etc. The parameters of the same attribute in different components have the same name, and the parameters and numbers of different components can be different. Refer to Figure 2 and Figure 3 together to illustrate the list component parameters and form component parameters:

FIG. 2 is a schematic diagram of a service page in the query list business scenario. As shown in FIG. 2 , in the query list business scenario, the business page includes adding, viewing, and query functions. FIG. 3 is a schematic diagram of a service page for adding functions corresponding to FIG. 2 .

The business page in Figure 2 is divided into a query area and a list area, and the business page in Figure 3 mainly has an input area for adding functions. Business pages can include list components and form components.

List component parameters: background interface url of the query function, column data parameters (Columns) and query condition parameters (formList), column data parameters include title, data field name returned by the background, list display width, query condition parameters include type, display The title on the left side of the query condition input area, and the field name of the background interface entry parameter. The details can be seen in Table 1 as follows:

Table 1

Both the query condition input area in Figure 2 and the added function input area in Figure 3 use form components. Based on this, the form component parameters can be specified in Table 2 as follows:

Table 2

Control parameters may include service control variables and page control variables.

The service control variable may include a switch variable of each service function code, and the switch variable of the service function code represents whether the service function code is needed. If the switch variable of the business function code is Yes, it means that the business function code is required, and the business page includes the business function; if the switch variable of the business function code is No, it means that the business function code is not needed, and the business page includes the business function .

It can be understood that, since a business page may include all business functions in an applicable business scenario, not all business pages in the business scenario need to include all business functions. Set switch variables for each business function code, which can be used in the application stage for users to select the required business function code according to their needs. For example, the log page includes the view function, but does not include the add, edit, delete and query functions. In the application stage, the user can set the switch variable of the view function to Yes, and set the add, edit, delete and query functions to No. Thus, the writing efficiency of the user is improved.

In addition to the switch variables of the business function codes, the business control variables may also include the variables needed to realize the business function logic, that is, the variables needed to realize the operation of the business function codes of the business function logic.

The control variables and business function codes needed to realize the business function logic are illustrated as follows:

Query function: The interactive process is to automatically request the background interface after entering the query condition in the query condition input area, and fill the data returned by the background into the business page. Therefore, to implement the query function, a character variable is required to store the address of the background interface, and two array variables are required to store the column data parameter Columns of the list component and the query condition parameter formList respectively. That is, the query function control variables include a character variable and two array variables. The query function code is the code that realizes the logic of the interaction process.

Add function: The interaction process is to click the Add button, and a new window will pop up to display the interaction of the form components. After clicking Confirm, check the filling specifications of the page data fields. If the check fails, an error message will be displayed. operate. The added function code is the code for realizing the logic of the interaction process.

Edit function: The interactive process is to click the edit icon in the list operation bar, call the same window as the add function, call the background interface of the view function, and then fill the border with data. The editing function code is the code implementing the logic of the interaction process.

View function: The interactive process is to click the view icon in the list operation bar, call the same window as the add function, and call the background interface of the view function to fill in the data. Since it is a viewing function, the original form component will not be displayed, and the corresponding data viewing function will be directly displayed (realized by the parameter control of the form component). View function code is the code that implements the logic of the interaction process.

Delete function: The interactive process is to click the delete icon in the list operation bar or the batch delete button, and a second prompt confirmation box will appear. After the user clicks the confirm button, the background interface that calls the delete function will be successfully deleted, close the confirmation prompt box, and refresh the page; After the user clicks the Cancel button, the confirmation prompt box is directly closed. The deletion function code is the code implementing the logic of the interaction process.

The page control variables may include layout mode control variables, query mode control variables, view mode control variables, etc. of different areas in the business page. For example, the business page shown in FIG. 1 includes layout mode control variables of the query area and the list area, and the control variables are used to indicate that the query area and the list area are arranged vertically or horizontally. The query mode control variable can be used to indicate whether the query mode is an automatic query or a manual query. The view mode control variable is used to indicate whether the view mode is table mode or card mode.

In some embodiments, the control parameters may also include component control variables, which are used to control the layout mode of different parameters of the component. For example, two columns per row, one column per row, field width, and so on.

In some embodiments, the generation parameters may also include naming information of the front-end code file of the business page, and the naming information may include Chinese names and English names.

The naming information of the front-end code file of the business page in the generation parameters, the background interface of each business function (such as the background interface of the new function, the background interface of the deletion function, the background interface of the viewing function, the background interface of the editing function, and the background interface of the deletion function interface, etc.), switch variables can be collectively referred to as the public parameters of the business page. The format of the public parameters can be specified in Table 3 as follows:

table 3

parameter name type example illustrate name string trialRoomAllot English name modalName string "Case Circumstances" Chinese name url string /***/***/*** The background interface of the query function submitUrl string ***/*** detailUrl string ***/***/*** deleteUrl string … This module has no delete function ...

Through the implementation of this embodiment, a front-end code template (service function code and generation parameters) can be generated for subsequent users to apply when they need to generate a front-end code file. Wherein, since the generation parameter includes switch variables of each service function code, the switch variable represents whether the service function code is needed. Therefore, in the application stage of the front-end code template, you can set switch variables for each business function code according to requirements, so as to select the required business function code.

The application phase of the front-end code template is introduced as follows:

Fig. 4 is a schematic flowchart of an embodiment of a front-end code generation method of the present application. It should be noted that this embodiment is not limited to the flow sequence shown in FIG. 4 if substantially the same result is obtained.

As shown in Figure 4, this embodiment may include:

S21: Form an input page by using generation parameters.

The generation parameters include component parameters and control parameters. The control parameters include service control variables. The service control variables include switch variables of each service function code. The switch variable of the service function code indicates whether the service function code is needed.

The initial generation parameters may be obtained by collecting page elements included in the business page, encapsulating the page elements to obtain components and component parameters, and packaging component parameters and control parameters.

The business function code can be obtained by collecting the business functions included in the business page and writing standard codes for the business functions.

S22: Display an input page.

S23: Receive the user's operation on the input page.

S24: Modify the generation parameters according to the operation.

S25: Determine the required service function code according to the switch variable.

S26: Generate a front-end code file of the business page according to the required business function code and generation parameters.

In some embodiments, all generation parameters are displayed in the menu bar of generation parameters, and the user can select a certain part of the generation parameters by clicking, dragging, etc. After receiving the user's selection instruction for the part, use the generation parameters of this part Form an input page, display the input page, and the user can operate the input page according to the requirement; modify the generation parameters of this part according to the user's operation.

In some embodiments, the input pages of different parts of the generation parameters can be displayed sequentially in the form of navigation, and after receiving the user's operation on the current input page, the next input page is displayed, and so on... to modify the generated parameters according to the user's operation parameter.

For other detailed descriptions of this embodiment, please refer to the previous embodiments, and details are not repeated here.

Through the implementation of this embodiment, on the one hand, since the application has generated the front-end code template (business function code and generation parameters) in advance, when there is a need to generate the front-end code file of the business page, the user only needs to operate through the input page to By modifying the generation parameters, the generation of the front-end code file of the business page can be realized. Therefore, the user does not need to repeatedly write the front-end code every time there is a demand for the generation of the front-end code file, which can reduce the user's workload, improve the writing efficiency, and avoid the influence of different users' writing habits on the front-end code file. On the other hand, since the control parameters include the switch variables of the business function codes, the switch variables indicate whether the business function codes are needed, so the user can set the switch variables according to the needs to select the required function business codes. Therefore, the front-end code template can cater to different business function requirements of users, so it has high versatility.

Fig. 5 is a schematic flowchart of another embodiment of the front-end code generation method of the present application. It should be noted that this embodiment is not limited to the flow sequence shown in FIG. 5 if substantially the same result is obtained. This embodiment is a step that may be included after S23 to realize the preview of the service page. As shown in Figure 5, this embodiment may include:

S31: Generate simulation data according to at least some component parameters.

S32: Generate and display a preview result of the business page according to the simulated data and generation parameters.

For example, simulated data corresponding to columns in the list component can be generated according to the parameters of the list component, and a preview result of the business page can be formed and displayed according to the simulated data and generated parameters.

Through the implementation of this embodiment, after receiving the user's operation on the input page, the application can display the preview result of the service page related to the operation in real time.

The application stage of this application is described in the form of an example in conjunction with Figures 6-8 as follows:

FIG. 6 is a schematic diagram of an input page A of public parameters corresponding to the service page shown in FIG. 2 . As shown in Figure 6, the input page A includes the naming information of the front-end code file, the switch variable of the business function code and the background interface of the business function. The naming information includes the English name and Chinese name of the front-end code file. Switch variables of business function codes, including query function codes, add function codes, view function codes, delete function codes, edit function code switch variables (yes or no) and background interfaces, business function background interfaces include query functions, add functions , View the function code, delete the function code, edit the background interface of the function code.

FIG. 7 is a schematic diagram of an input page B of generating parameters corresponding to the service page shown in FIG. 2 .

Among them, B1 is the input area for page control variables. Users can operate B1, select the layout mode whether it is a top-down layout or left-right layout, select the query mode whether it is automatic query or manual query, and select the view mode whether it is a table mode or a card mode. B2 is the input area for list and query form component parameters. Users can operate B2 and input required list component parameters and form component parameters; B3 is the preview result display area of the business page.

FIG. 8 is a schematic diagram of an input page C of generating parameters corresponding to the service page shown in FIG. 3 .

Among them, C1 is the menu bar. Users can operate C1, input required component control variables, and select form component parameters to be set. After selection, they will be displayed on C3. C3 is the input area for form component parameters. Users can operate C3 and input Required form component parameters. C2 is the preview result display area of the business page.

After the modification of the generation parameters of the user requirements is completed, the simulation data can be generated, and the final preview result of the business page can be generated according to the simulation data and the generation parameters. FIG. 9 is a schematic diagram of the final preview result of the service page shown in FIG. 2 . FIG. 10 is a schematic diagram of the final preview result corresponding to the business page shown in FIG. 3 .

Further, the framework of the front-end code file of the business page can be Vue, react, angular, ejs, Jade, Jst, etc. Under the framework of Vue, the front-end code files can be divided into view layer (template), data layer (data), logic interaction layer (method) and interface processing layer. The view layer can include page control variables and component control variables, the data layer can include component parameters and business control variables, the logic interaction layer can include business function codes; the interface processing layer includes interface parameters of business functions, including interface type, interface address, etc. .

Further, in some embodiments, the generation parameters and simulation data corresponding to a business page can be stored as a data record in the database for subsequent reuse. During subsequent use, the database supports functions such as editing, copying, downloading, deleting, and online preview of data records. Fig. 11 is a schematic diagram of data records in the database. The names of the data records in Fig. 11 are the Chinese and English names of the front-end code files to which they belong.

Further, FIG. 12 is a schematic diagram of a device for generating a front-end code file. As shown in Figure 12, the device may include an application layer and a service layer. The application layer displays the input page and receives user operations; the service layer is used to display the input page for generating parameters, and after receiving the user's operation on the input page, modify the generated parameter, the service layer randomly generates simulation data and sends it to the application layer; the application layer displays the preview result of the business page, receives the user's operation on the preview result, and stores the generated parameter and simulation data of the business page as a data record in the database. The database can be used for data storage and reading, which facilitates the re-use of subsequent business page corresponding generation parameters and simulation data.

Further, in some embodiments, the data records related to the target product can be organized into several levels of menus, one data record corresponds to one level of menu items; based on the data records under the several levels of menus, the target product The front-end code file. Fig. 13 is a schematic diagram of menus and data records corresponding to the target product. The area P1 in FIG. 13 is the menu bar, and the area P2 is the data record under the menu item "History Record".

FIG. 14 is a schematic structural diagram of an embodiment of an electronic device of the present application. As shown in FIG. 14 , the electronic device includes a processor 21 and a memory 22 coupled to the processor 21 .

Wherein, the memory 22 stores program instructions for implementing the method of any of the above embodiments; the processor 21 is configured to execute the program instructions stored in the memory 22 to implement the steps of the above method embodiments. Wherein, the processor 21 may also be referred to as a CPU (Central Processing Unit, central processing unit). The processor 21 may be an integrated circuit chip with signal processing capabilities. The processor 21 can also be a general-purpose processor, a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field programmable gate array (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components . A general-purpose processor may be a microprocessor, or the processor may be any conventional processor, or the like.

FIG. 15 is a schematic structural diagram of an embodiment of a computer-readable storage medium of the present application. As shown in FIG. 15 , the computer-readable storage medium 30 of the embodiment of the present application stores program instructions 31 , and when the program instructions 31 are executed, the methods provided by the above-mentioned embodiments of the present application are implemented. Wherein, the program instruction 31 may form a program file and be stored in the computer-readable storage medium 30 in the form of a software product, so that a computer device (which may be a personal computer, a server, or a network device, etc.) or a processor (processor) ) Execute all or part of the steps of the method in each embodiment of the present application. The aforementioned computer-readable storage medium 30 includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), magnetic disk or optical disk, etc. The medium of the program code, or terminal devices such as computers, servers, mobile phones, and tablets.

In the several embodiments provided in this application, it should be understood that the disclosed system, device and method can be implemented in other ways. For example, the device embodiments described above are only illustrative. For example, the division of units is only a logical function division. In actual implementation, there may be other division methods. For example, multiple units or components can be combined or integrated. to another system, or some features may be ignored, or not implemented. In another point, the mutual coupling or direct coupling or communication connection shown or discussed may be through some interfaces, and the indirect coupling or communication connection of devices or units may be in electrical, mechanical or other forms.

In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, each unit may exist separately physically, or two or more units may be integrated into one unit. The above-mentioned integrated units can be implemented in the form of hardware or in the form of software functional units. The above is only the implementation mode of this application, and does not limit the scope of patents of this application. Any equivalent structure or equivalent process conversion made by using the contents of this application specification and drawings, or directly or indirectly used in other related technical fields, All are included in the scope of patent protection of the present application in the same way.

Claims (10)

1. A front-end code generation method, characterized in that, comprising: The input page is formed by using generation parameters, the generation parameters include component parameters and control parameters, the control parameters include business control variables, the business control variables include switch variables of each business function code, and the switch variables of the business function code represent Whether the business function code is required; displaying said input page; receiving user operations on the input page; Modifying the generation parameters according to the operation; determining the required service function code according to the switch variable; The front-end code file of the business page is generated according to the required business function code and the generation parameters. 2. The method according to claim 1, characterized in that, after the generation parameters are modified according to the operation, the method further comprises: generating simulated data based on at least some of the component parameters; generating and displaying a preview result of the service page according to the simulation data and the generating parameters. 3. The method according to claim 2, characterized in that, after receiving the user's operation on the input page, the method further comprises: The generation parameters and the simulation data are stored as a data record in a database. 4. The method according to claim 3, wherein the method further comprises: Organizing the data records related to the target product into several levels of menus, one data record corresponding to one level of menu items; Based on the data records under the several levels of menus, the front-end code file of the target product is generated. 5. The method according to claim 1, wherein the business function code is obtained by collecting business functions included in the business page and writing standard codes for the business functions; and/or The initial generation parameters are obtained by collecting page elements included in the business page, packaging the page elements to obtain components and the component parameters, and packaging the component parameters and the control parameters. 6. The method according to claim 1, wherein the control parameters further include page control variables and component control variables. 7. The method according to claim 6, wherein the front-end code file includes a view layer, a data layer, a logic interaction layer and an interface processing layer, and the view layer includes the page control variables and the component control variables, the data layer includes the component parameters and the service control variables, the logic interaction layer includes the service function codes, and the interface processing layer includes interface information of each service function. 8. A method for generating a front-end code template, comprising: Collecting page elements included in the business page, and encapsulating the page elements to obtain components and component parameters; Collecting the business functions included in the business page, and writing standard codes for each of the business functions, to obtain the codes of each business function; Packing the component parameters and control parameters to obtain generation parameters, the control parameters include service control variables, the service control variables include switch variables of each of the service function codes, and the switch variables of the service function codes represent the service Whether the function code is required. 9. An electronic device, characterized in that it comprises a processor and a memory connected to the processor, wherein, the memory stores program instructions; The processor is configured to execute the program instructions stored in the memory to implement the method according to any one of claims 1-8. 10. A computer-readable storage medium, characterized in that, the computer-readable storage medium stores program instructions, the program instructions can be executed by a processor, and when executed, implement any one of claims 1-8. described method.

Images