Front-end code generation method, system, device and medium based on BS architecture

Abstract

The application discloses a front-end code generation method, system, device and medium based on a BS architecture, and belongs to the technical field of computers. The technical problem to be solved by the application is how to reduce the dependence on professional developers in the front-end code generation process, reduce the labor cost, and improve the development efficiency. The technical scheme adopted is as follows: a database table is created; the database table is created in a synchronous manner by using an excel import mode, and database fields are filled with Chinese characters; initial front-end code is generated based on the database table by using a code generator; a list and initial code of a form containing all fields are generated by using a Handlebars code template and a Node.js script; the initial front-end page is modified by using a visual editor; the list and the form are edited by using a canvas, the order, position and page layout of elements are adjusted by using a drag-and-drop mode, and the configuration components, component attributes and component styles of the elements are modified by using pre-set configuration items; and front-end code is generated by using an interface and an interaction code generator.

Description

Technical Field

[0001] This invention relates to the field of computer technology, specifically to a front-end code generation method, system, device, and medium based on a B / S architecture. Background Technology

[0002] With the development of computer technology, the demand for website development is constantly increasing, and various enterprises have increasingly higher requirements for the diversity and customization of front-end page display effects. This necessitates developers to manually code for specific purposes, and the demands on development efficiency are constantly increasing. Currently, the mainstream front-end code generation modes are database table-driven and form-driven. Database table-driven code generation systems create database tables in two ways: using database table creation statements and adding them visually. Using database table creation statements requires developers to master database technology, while adding them visually is cumbersome, time-consuming, and inefficient. The front-end page styles and layouts generated by the database table-driven configuration method are relatively simple, requiring developers to edit them further to meet the needs of different clients. On the other hand, form-driven code generation systems provide intuitive layouts and UI components, allowing users to quickly build business forms through visual configuration and generate corresponding database tables and functional pages. The form-driven configuration method is suitable for building some simple business functions, but it is inadequate for complex business functions.

[0003] The lack of support from front-end code generation technology makes the development process dependent on professional developers, which greatly increases labor costs, reduces development efficiency, and makes it difficult to meet today's diverse front-end development needs.

[0004] Therefore, how to reduce the reliance on professional developers in the front-end code generation process, reduce labor costs, and improve development efficiency are urgent technical problems that need to be solved. Summary of the Invention

[0005] The technical objective of this invention is to provide a front-end code generation method, system, device, and medium based on a B / S architecture to address the issues of reducing reliance on professional developers, lowering labor costs, and improving development efficiency during the front-end code generation process.

[0006] The technical objective of this invention is achieved as follows: a front-end code generation method based on a B / S architecture, the specific method being as follows:

[0007] Create database tables: Create database tables synchronously using Excel import method, and fill in Chinese characters in the database fields;

[0008] Generate initial front-end code based on database tables using a code generator: Use Handlebars code templates and Node.js scripts to generate initial code for lists and forms containing all fields;

[0009] Modify the initial front-end page using a visual editor: Use the canvas editor to generate lists and forms, adjust the order, position and page layout of elements by dragging and dropping, and modify the configuration components, component properties and component styles of elements through pre-defined configuration items;

[0010] Generate front-end code through the interface and interaction code generator: The interface and interaction code generator receives and parses the component configuration in the canvas, and generates the front-end code after secondary editing. This allows for secondary development of the code using a visual page without developers having to manually write layout and style code.

[0011] As a preferred option, the database tables are created as follows:

[0012] The system pre-creates an Excel template for database tables. The Excel template is downloaded from the front-end page, and the system fills in the data according to the requirements of the Excel template to obtain the Excel spreadsheet and uploads it to the server. The data to be filled in according to the requirements of the Excel template includes table name, table description, Chinese fields, field length, field type, whether the field is required, and whether the field is a primary key.

[0013] The built-in translation dictionary table completes the English fields corresponding to Chinese fields in Excel spreadsheets; if the translation dictionary table does not have the corresponding field, it will add the corresponding Chinese and English translation data to the translation dictionary table, reducing manual translation time;

[0014] Import the completed Excel spreadsheet; the backend server receives and parses the file content.

[0015] Based on the parsed file data, generate SQL statements to create database tables;

[0016] The generated SQL statement is sent to the database for execution, completing the creation of the database table.

[0017] As a preferred method, the initial front-end code is generated based on the database table using a code generator, as follows:

[0018] The code generator provides a preset Handlebars code template, which contains placeholders for inserting fields dynamically retrieved from the database model.

[0019] Write a script using Node.js to connect to the database and retrieve the database model fields. Then, generate form and table component code containing all fields based on the database model fields and synchronize them to the front-end code directory.

[0020] As a preferred option, the visual editor includes a canvas, a component library, a component property section, script events, and an operation bar;

[0021] The canvas is a limited space for arranging pages. During initialization, it displays the latest front-end page generated by the code generator. Users can adjust the order, position, and page layout of components by dragging and dropping. After selecting a component or table column, right-clicking will display copy and delete buttons. Clicking the copy button will add the copied component or table column to the canvas, and clicking the delete button will delete the component or table column from the canvas.

[0022] The component library provides the main elements that make up the page. Components can be added by selecting them and dragging them onto the canvas. You can also modify the type of the component to be edited by clicking on the canvas, selecting the component to be edited, and then clicking on the component in the component library. For example, you can change the input box to a select dropdown box.

[0023] The component properties section pre-configures all the properties of the component. Based on the component selected in the canvas, it displays the configurable properties of the corresponding component. By clicking on the selected property, such as read-only, disabled, or hidden properties of the input, the display status of the component in the canvas is updated in real time.

[0024] The script event presets all event configurations for the component. Based on the currently selected component in the canvas, it displays the configurable events for the corresponding component. For example, the process of adding the click event configuration for button 1 is as follows: select button 1, click click event configuration, a configuration window pops up, enter the JS statement, complete the click event handling code for button 1, and click button 1 in the canvas to test whether the script event has been added successfully.

[0025] The operation bar provides undo, redo, and save buttons. Clicking the undo button undoes the previous operation in the visual editor; clicking the redo button redoes the previous operation; and clicking the save button saves the component configuration in the visual editor canvas.

[0026] As a preferred option, the visual editor modifies the initial front-end code as follows:

[0027] The canvas that displays the page and drag-and-drop components;

[0028] Modify the type and properties of the components contained in the canvas based on the built-in component library and component properties;

[0029] Add reactive events to components within the canvas;

[0030] Save the component configuration in the canvas.

[0031] More specifically, the UI and interaction code generator generates the front-end code as follows:

[0032] The interface and interaction code generator receives component configurations from the visual editor canvas and follows a predefined Handlebars code template. The Handlebars code template contains placeholders for inserting component positions, types, attributes, and interaction data obtained from the canvas.

[0033] A script written in Node.js is used to generate a second-edited front-end code based on the data parsed from the canvas saved in the visual editor and the Handlebars code template, and synchronize it to the front-end code directory. The second-edited front-end code includes page layout, control styles and interactive effects.

[0034] A front-end code generation system based on a B / S architecture, the system comprising:

[0035] The database table creation module is used to generate database tables;

[0036] A code generator used to generate initialization front-end code;

[0037] A visual editor for editing front-end code through a visual interface;

[0038] Interface and interaction code generator, used to generate secondary code based on a visual editor.

[0039] Preferably, the database table creation module includes:

[0040] The file upload module is used to fill in data according to the requirements of an Excel template, obtain an Excel spreadsheet, and upload the Excel spreadsheet to the server. The data to be filled in according to the requirements of the Excel template includes table name, table description, Chinese fields, field length, field type, whether the field is required, and whether the field is a primary key. The Excel template is downloaded from the front-end page.

[0041] The data completion module is used to complete the English fields corresponding to Chinese fields in an Excel spreadsheet using a built-in translation dictionary table. If the corresponding field is not found in the translation dictionary table, the corresponding Chinese and English translation data will be added to the translation dictionary table, reducing manual translation time.

[0042] The data parsing module is used to import completed Excel spreadsheets, and the backend server receives and parses the file content.

[0043] The SQL statement generation module is used to generate SQL statements for creating database tables based on the parsed file data.

[0044] The database operation module is used to send the generated SQL statements to the database for execution, thereby creating the database tables.

[0045] The code generator includes:

[0046] Handlebars code template module one is used to generate initial front-end code based on Handlebars code templates; Handlebars code template module one includes:

[0047] Fixed Module 1 is the part of the template that will not change and will not change with the data. It is used to provide fixed HTML code for generating the Handlebars code template structure.

[0048] Placeholder module one is used to insert dynamically obtained fields;

[0049] The second Node.js script module is used to retrieve database fields and generate initial front-end code;

[0050] The visualization editor includes:

[0051] The canvas module is used to display the page and allow drag-and-drop operations on page components.

[0052] The component library module provides the main elements that make up a page;

[0053] The component properties module is used to configure and modify the properties of a component;

[0054] The script event module is used to edit the response events of components;

[0055] The operation bar is used for undoing, redoing, and saving operations on the canvas;

[0056] The interface and interaction code generator includes:

[0057] Handlebars code template module two is used to generate front-end code that has been edited based on the Handlebars code template;

[0058] The second Node.js script module is used to retrieve the data parsed from the canvas module of the visual editor and generate the front-end code;

[0059] The Handlebars code template module two includes:

[0060] Fixed Module 2 is the part of the template that will not change and will not change with the data. It is used to provide fixed HTML code for generating the Handlebars code template structure.

[0061] Placeholder module two is used to insert dynamically obtained fields.

[0062] An electronic device includes: a memory and at least one processor;

[0063] The memory contains computer programs;

[0064] The at least one processor executes the computer program stored in the memory, causing the at least one processor to perform the front-end code generation method based on the B / S architecture as described above.

[0065] A computer-readable storage medium storing a computer program that can be executed by a processor to implement the front-end code generation method based on a B / S architecture as described above.

[0066] The front-end code generation method, system, device, and medium based on the B / S architecture of the present invention have the following advantages:

[0067] (i) This invention synchronously creates database tables by importing data from Excel, generates default configuration list and form initial code using Handlebars code templates and Node.js scripts, and changes the default configuration by dragging and dropping and modifying optional items on the canvas. Then, the interface and interaction code generator receives and parses the component configuration in the canvas to generate the front-end code after secondary editing. This enables the development of list pages and form pages without developers having to write layout and style code by hand, simplifies the front-end code development process, reduces development difficulty and technical threshold, reduces reliance on professional developers, reduces labor costs, and improves development efficiency.

[0068] (ii) This invention uses Excel import to synchronously create database tables. Chinese characters are filled in the database fields, and English fields are obtained or added by the built-in translation dictionary table based on the Chinese fields, reducing manual translation time.

[0069] (III) The present invention presets dynamic routing for generating code. Clicking the edit button in the row of the imported database table will take you to the visual editor page, which provides a graphical interface and template design. Users can modify the type and attributes of components by simply dragging and clicking. Attached Figure Description

[0070] The invention will be further described below with reference to the accompanying drawings.

[0071] Appendix Figure 1 This is a flowchart illustrating the front-end code generation method based on a B / S architecture. Detailed Implementation

[0072] The following detailed description of the front-end code generation method, system, device, and medium based on the BS architecture of the present invention is provided with reference to the accompanying drawings and specific embodiments.

[0073] Example 1:

[0074] As attached Figure 1 As shown in the figure, this embodiment provides a front-end code generation method based on a B / S architecture, which is as follows:

[0075] S1. Create database table: Create database table synchronously using Excel import method, and fill in Chinese characters in the database fields;

[0076] S2. Generate initial front-end code based on database tables using a code generator: Use Handlebars code templates and Node.js scripts to generate initial code for lists and forms containing all fields;

[0077] S3. Modify the initial front-end page using a visual editor: Use the canvas editor to generate lists and forms, adjust the order, position and page layout of elements by dragging and dropping, and modify the configuration components, component properties and component styles of elements through pre-set configuration items;

[0078] S4. Generate front-end code through the interface and interaction code generator: The interface and interaction code generator receives and parses the component configuration in the canvas, generates the front-end code after secondary editing, and realizes the secondary development of the code using a visual page without the need for developers to manually write layout and style code.

[0079] The specific steps for creating the database table in step S1 of this embodiment are as follows:

[0080] S101. A preset Excel template for creating database tables is downloaded from the front-end page. Data is filled in according to the requirements of the Excel template to obtain the Excel table and then uploaded to the server. The data to be filled in according to the requirements of the Excel template includes table name, table description, Chinese fields, field length, field type, whether the field is required, and whether the field is a primary key.

[0081] S102. The built-in translation dictionary table completes the English fields corresponding to Chinese fields in Excel spreadsheets; if the translation dictionary table does not have the corresponding field, the corresponding Chinese and English translation data will be added to the translation dictionary table to reduce manual translation time.

[0082] S103. Import the completed Excel spreadsheet; the backend server receives and parses the file content.

[0083] S104. Generate SQL statements to create database tables based on the parsed file data;

[0084] S105. Send the generated SQL statement to the database for execution to complete the creation of the database table.

[0085] In this embodiment, step S2, which involves generating the initial front-end code based on the database table using a code generator, is as follows:

[0086] S201. The code generator presets a Handlebars code template. The Handlebars code template contains placeholders for inserting fields dynamically obtained from the database model.

[0087] S202. Use Node.js to write a script, connect to the database and obtain the database model fields, generate form component and table component code containing all fields based on the database model fields, and synchronize them to the front-end code directory.

[0088] The visual editor in step S3 of this embodiment includes a canvas, a component library, a component property section, script events, and an operation bar.

[0089] The canvas is a limited space for arranging pages. During initialization, it displays the latest front-end page generated by the code generator. Users can adjust the order, position, and page layout of components by dragging and dropping. After selecting a component or table column, right-clicking will display copy and delete buttons. Clicking the copy button will add the copied component or table column to the canvas, and clicking the delete button will delete the component or table column from the canvas.

[0090] The component library provides the main elements that make up the page. Components can be added by selecting them and dragging them onto the canvas. You can also modify the type of the component to be edited by clicking on the canvas, selecting the component to be edited, and then clicking on the component in the component library. For example, you can change the input box to a select dropdown box.

[0091] The component properties section pre-configures all the properties of the component. Based on the component selected in the canvas, it displays the configurable properties of the corresponding component. By clicking on the selected property, such as read-only, disabled, or hidden properties of the input, the display status of the component in the canvas is updated in real time.

[0092] The script event presets all event configurations for the component. Based on the currently selected component in the canvas, it displays the configurable events for the corresponding component. For example, the process of adding the click event configuration for button 1 is as follows: select button 1, click click event configuration, a configuration window pops up, enter the JS statement, complete the click event handling code for button 1, and click button 1 in the canvas to test whether the script event has been added successfully.

[0093] The operation bar provides undo, redo, and save buttons. Clicking the undo button undoes the previous operation in the visual editor; clicking the redo button redoes the previous operation; and clicking the save button saves the component configuration in the visual editor canvas.

[0094] The specific modifications to the initial front-end code in the visual editor during step S3 of this embodiment are as follows:

[0095] S301, the canvas for displaying the page and drag-and-drop components;

[0096] S302. Modify the type and properties of components contained in the canvas based on the built-in component library and component properties;

[0097] S303. Add response events to components within the canvas;

[0098] S304. Save the component configuration in the canvas.

[0099] In this embodiment, step S4, the interface and interaction code generator generates the front-end code as follows:

[0100] S401, The interface and interaction code generator receives the component configuration in the visual editor canvas and follows the predefined Handlebars code template. The Handlebars code template contains placeholders for inserting the component position, type, attributes and interaction data obtained from the canvas.

[0101] S402. Use Node.js to write a script that generates a second-edited front-end code based on the data parsed from the canvas saved in the visual editor and the Handlebars code template, and synchronizes it to the front-end code directory; the second-edited front-end code includes page layout, control styles and interactive effects.

[0102] Example 2:

[0103] This embodiment provides a front-end code generation system based on a B / S architecture, the system comprising:

[0104] The database table creation module is used to generate database tables;

[0105] A code generator used to generate initialization front-end code;

[0106] A visual editor for editing front-end code through a visual interface;

[0107] Interface and interaction code generator, used to generate secondary code based on a visual editor.

[0108] The database table creation module in this embodiment includes:

[0109] The file upload module is used to fill in data according to the requirements of an Excel template, obtain an Excel spreadsheet, and upload the Excel spreadsheet to the server. The data to be filled in according to the requirements of the Excel template includes table name, table description, Chinese fields, field length, field type, whether the field is required, and whether the field is a primary key. The Excel template is downloaded from the front-end page.

[0110] The data completion module is used to complete the English fields corresponding to Chinese fields in an Excel spreadsheet using a built-in translation dictionary table. If the corresponding field is not found in the translation dictionary table, the corresponding Chinese and English translation data will be added to the translation dictionary table, reducing manual translation time.

[0111] The data parsing module is used to import completed Excel spreadsheets, and the backend server receives and parses the file content.

[0112] The SQL statement generation module is used to generate SQL statements for creating database tables based on the parsed file data.

[0113] The database operation module is used to send the generated SQL statements to the database for execution, thereby creating the database tables.

[0114] The code generator in this embodiment includes:

[0115] Handlebars code template module one is used to generate initial front-end code based on Handlebars code templates; Handlebars code template module one includes:

[0116] Fixed Module 1 is the part of the template that will not change and will not change with the data. It is used to provide fixed HTML code for generating the Handlebars code template structure.

[0117] Placeholder module one is used to insert dynamically obtained fields;

[0118] The second Node.js script module is used to retrieve database fields and generate initial front-end code.

[0119] The visual editor in this embodiment includes:

[0120] The canvas module is used to display the page and allow drag-and-drop operations on page components.

[0121] The component library module provides the main elements that make up a page;

[0122] The component properties module is used to configure and modify the properties of a component;

[0123] The script event module is used to edit the response events of components;

[0124] The operation bar is used to perform undo, redo, and save operations on the canvas.

[0125] The interface and interaction code generator in this embodiment includes:

[0126] Handlebars code template module two is used to generate front-end code that has been edited based on the Handlebars code template;

[0127] The second Node.js script module is used to retrieve the data parsed from the canvas module of the visual editor and generate the front-end code;

[0128] The Handlebars code template module two includes:

[0129] Fixed Module 2 is the part of the template that will not change and will not change with the data. It is used to provide fixed HTML code for generating the Handlebars code template structure.

[0130] Placeholder module two is used to insert dynamically obtained fields.

[0131] Example 3:

[0132] This embodiment also provides an electronic device, including: a memory and a processor;

[0133] The memory stores the instructions executed by the computer.

[0134] The processor executes computer execution instructions stored in the memory, causing the processor to execute the front-end code generation method based on the B / S architecture in any embodiment of the present invention.

[0135] The processor can be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), off-the-shelf programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The processor can be a microprocessor or any conventional processor.

[0136] Memory is used to store computer programs and / or modules. The processor implements various functions of the electronic device by running or executing the computer programs and / or modules stored in the memory, and by accessing data stored in the memory. Memory can mainly include a program storage area and a data storage area. The program storage area can store the operating system, at least one application program required for a function, etc.; the data storage area can store data created based on the use of the terminal, etc. In addition, memory can also include high-speed random access memory, and can also include non-volatile memory, such as hard disks, RAM, plug-in hard disks, smart memory cards (SMC), secure digital cards (SD cards), flash memory cards, at least one disk storage device, flash memory devices, or other volatile solid-state storage devices.

[0137] Example 4:

[0138] This embodiment also provides a computer-readable storage medium storing multiple instructions, which are loaded by a processor to cause the processor to execute the front-end code generation method based on a B / S architecture according to any embodiment of the present invention. Specifically, a system or apparatus equipped with a storage medium may be provided, on which software program code implementing the functions of any of the above embodiments is stored, and the computer (or CPU or MPU) of the system or apparatus may read and execute the program code stored in the storage medium.

[0139] In this case, the program code read from the storage medium can itself implement the function of any of the above embodiments, and therefore the program code and the storage medium storing the program code constitute part of the present invention.

[0140] Storage media embodiments for providing program code include floppy disks, hard disks, magneto-optical disks, optical disks (such as CD-ROM, CD-R, CD-RW, DVD-ROM, DVD-RYM, DVD-RW, DVD+RW), magnetic tapes, non-volatile memory cards, and ROMs. Alternatively, program code can be downloaded from a server computer via a communication network.

[0141] Furthermore, it should be clear that not only can the program code read by the computer be executed, but also the operating system or other components operating on the computer can be instructed based on the program code to perform some or all of the actual operations, thereby realizing the function of any of the embodiments described above.

[0142] Furthermore, it is understood that the program code read from the storage medium is written to the memory set in the expansion board inserted into the computer or to the memory set in the expansion unit connected to the computer. Then, based on the instructions of the program code, the CPU or other components installed on the expansion board or expansion unit execute some and all of the actual operations, thereby realizing the function of any of the embodiments described above.

[0143] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, and not to limit them; although the present invention 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; and 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 the present invention.

Claims

1. A front-end code generation method based on a B / S architecture, characterized in that, The method is as follows: Create database tables: Create database tables synchronously using Excel import method, and fill in Chinese characters in the database fields; Generate initial front-end code based on database tables using a code generator: Use Handlebars code templates and Node.js scripts to generate initial code for lists and forms containing all fields; Modify the initial front-end page using a visual editor: Use the canvas editor to generate lists and forms, adjust the order, position and page layout of elements by dragging and dropping, and modify the configuration components, component properties and component styles of elements through pre-defined configuration items; Generate front-end code through the interface and interaction code generator: The interface and interaction code generator receives and parses the component configuration in the canvas to generate the front-end code after secondary editing, so that the code can be secondary developed using a visual page without developers having to write layout and style code by hand. The specific steps for creating a database table are as follows: The system pre-creates an Excel template for database tables. The Excel template is downloaded from the front-end page, and the system fills in the data according to the requirements of the Excel template to obtain the Excel spreadsheet and uploads it to the server. The data to be filled in according to the requirements of the Excel template includes table name, table description, Chinese fields, field length, field type, whether the field is required, and whether the field is a primary key. The built-in translation dictionary table completes the English fields corresponding to Chinese fields in an Excel spreadsheet; if the translation dictionary table does not have a corresponding field, it will add the corresponding Chinese and English translation data to the translation dictionary table. Import the completed Excel spreadsheet; the backend server receives and parses the file content. Based on the parsed file data, generate SQL statements to create database tables; The generated SQL statement is sent to the database for execution to complete the creation of the database table; The initial front-end code is generated based on the database table using the code generator as follows: The code generator provides a preset Handlebars code template, which contains placeholders for inserting fields dynamically retrieved from the database model. Write a script using Node.js to connect to the database and retrieve the database model fields. Generate form and table component code containing all fields based on the database model fields and synchronize it to the front-end code directory. The visual editor includes a canvas, component library, component properties section, script events, and operation bar; The canvas is a limited space for arranging pages. During initialization, it displays the latest front-end page generated by the code generator. Users can adjust the order, position, and page layout of components by dragging and dropping. After selecting a component or table column, right-clicking will display copy and delete buttons. Clicking the copy button will add the copied component or table column to the canvas, and clicking the delete button will delete the component or table column from the canvas. The component library provides the main elements that make up the page. Components can be added by selecting them and dragging them onto the canvas; and the type of the component to be edited can be modified by clicking on the canvas to select the component to be edited, and then clicking on the component in the component library. The component properties section has all the preset property configurations for the component. Based on the component selected in the canvas, the configurable properties of the corresponding component are displayed. By clicking on the selected property, the display status of the component in the canvas is updated in real time. The script events pre-configure all event settings for the component, and display the configurable events for the corresponding component based on the currently selected component in the canvas; The operation bar provides undo, redo, and save buttons. Clicking the undo button undoes the previous operation in the visual editor; clicking the redo button redoes the previous operation; and clicking the save button saves the component configuration in the visual editor canvas. The specific modifications to the initial front-end code using the visual editor are as follows: The canvas that displays the page and drag-and-drop components; Modify the type and properties of the components contained in the canvas based on the built-in component library and component properties; Add reactive events to components within the canvas; Save the component configuration in the canvas; The UI and interaction code generator generates the following front-end code: The interface and interaction code generator receives component configurations from the visual editor canvas and follows a predefined Handlebars code template. The Handlebars code template contains placeholders for inserting component positions, types, attributes, and interaction data obtained from the canvas. A script written in Node.js is used to generate a second-edited front-end code based on the data parsed from the canvas saved in the visual editor and the Handlebars code template, and synchronize it to the front-end code directory. The second-edited front-end code includes page layout, control styles and interactive effects.

2. A front-end code generation system based on a B / S architecture, characterized in that, The system includes: The database table creation module is used to generate database tables; A code generator used to generate initialization front-end code; A visual editor for editing front-end code through a visual interface; Interface and interaction code generator, used to generate secondary code based on a visual editor; The database table creation module includes: The file upload module is used to fill in data according to the requirements of an Excel template, obtain an Excel spreadsheet, and upload the Excel spreadsheet to the server. The data to be filled in according to the requirements of the Excel template includes table name, table description, Chinese fields, field length, field type, whether the field is required, and whether the field is a primary key. The Excel template is downloaded from the front-end page. The data completion module is used to complete the English fields corresponding to Chinese fields in an Excel spreadsheet using a built-in translation dictionary table; if the corresponding field is not found in the translation dictionary table, the corresponding Chinese and English translation data will be added to the translation dictionary table. The data parsing module is used to import completed Excel spreadsheets, and the backend server receives and parses the file content. The SQL statement generation module is used to generate SQL statements for creating database tables based on the parsed file data. The database operation module is used to send the generated SQL statements to the database for execution, thereby creating the database tables. The code generator includes: Handlebars code template module one is used to generate initial front-end code based on Handlebars code templates; Handlebars code template module one includes: Fixed Module 1 is used to provide a fixed HTML code template structure for Handlebars. Placeholder module one is used to insert dynamically obtained fields; The second Node.js script module is used to retrieve database fields and generate initial front-end code; The visualization editor includes: The canvas module is used to display the page and allow drag-and-drop operations on page components. The component library module provides the main elements that make up a page; The component properties module is used to configure and modify the properties of a component; The script event module is used to edit the response events of components; The operation bar is used for undoing, redoing, and saving operations on the canvas; The interface and interaction code generator includes: Handlebars code template module two is used to generate front-end code that has been edited based on the Handlebars code template; The second Node.js script module is used to retrieve the data parsed from the canvas module of the visual editor and generate the front-end code; The Handlebars code template module two includes: Fixed Module 2 is used to provide a fixed HTML code template structure for Handlebars. Placeholder module two is used to insert dynamically obtained fields.

3. An electronic device, characterized in that, include: Memory and at least one processor; The memory contains computer programs; The at least one processor executes the computer program stored in the memory, causing the at least one processor to perform the front-end code generation method based on the B / S architecture as described in claim 1.

4. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that can be executed by a processor to implement the front-end code generation method based on the B / S architecture as described in claim 1.

Images