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

Abstract

The invention discloses a front-end code generation method, system and device based on a BS architecture and a medium, belongs to the technical field of computers, and aims to solve the technical problems of how to reduce the dependence on professional developers in the front-end code generation process, reduce the labor cost and improve the development efficiency. According to the technical scheme, the method comprises the steps that a database table is created, wherein the database table is synchronously created in an excel import mode, and Chinese characters are filled in database fields; generating an initial front-end code based on the database table through a code generator; generating a list containing all fields and a form initial code by using a Handlebars code template and a Node.js script; modifying an initial front-end page through a visual editor: editing the generated list and form by using a canvas, adjusting the sequence, the position and the page layout of the elements in a dragging manner, and modifying the configuration components, the component attributes and the component styles of the elements through preset configuration items; and generating a front-end code through an interface and interaction code generator.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a front-end code generation method, system, device and medium based on BS architecture. Background Art

[0002] With the development of computer technology, the demand for various website development is increasing. Various enterprises have increasing demands for the diversity and customization of front-end page display effects. Developers are required to perform manual coding in a targeted manner, and the requirements for developers' development efficiency are constantly increasing. At present, the mainstream front-end code generation modes are based on library table drive and form drive. The library table drive-based code generation system creates database tables in two ways: using database table creation statements and adding visual pages. Using database table creation statements requires developers to master database technology. The operation of adding visual pages is time-consuming and inefficient. The front-end page style and layout generated by the library table configuration method are relatively simple, and developers need to edit them twice to meet the needs of different customers. The form-driven code generation system provides intuitive layout and UI components, allowing users to quickly build business forms through visual configuration and generate corresponding database tables and function pages. The form-oriented configuration method is suitable for building some simple business functions, but it is powerless for complex business functions.

[0003] The lack of technical support for front-end code generation makes the development process dependent on professional developers, greatly increasing labor costs and low development efficiency, making it difficult to meet today's diverse front-end development needs.

[0004] Therefore, how to reduce the dependence on professional developers in the front-end code generation process, reduce labor costs, and improve development efficiency is a technical problem that needs to be solved urgently. Summary of the invention

[0005] The technical task of the present invention is to provide a front-end code generation method, system, device and medium based on BS architecture to solve the problem of how to reduce the dependence on professional developers in the front-end code generation process, reduce labor costs and improve development efficiency.

[0006] The technical task of the present invention is achieved in the following way: a front-end code generation method based on BS architecture, the method is as follows:

[0007] Create database table: Use Excel import method to create database table synchronously, and fill in Chinese characters in database fields;

[0008] Generate initial front-end code based on database tables through code generator: Use Handlebars code templates and Node.js scripts to generate initial list and form code containing all fields;

[0009] Modify the initial front-end page through the visual editor: use the canvas to edit the generated 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;

[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, generates the front-end code after secondary editing, and realizes the secondary development of the code by using the visual page without the need for developers to hand-write layout and style codes.

[0011] As a preferred method, create a database table as follows:

[0012] An Excel template for creating a database table is preset. The Excel template is downloaded from the front-end page, and the Excel table is obtained by filling in data according to the requirements of the Excel template and uploading the Excel table to the server; the data filled in according to the requirements of the Excel template include table name, table description, Chinese field, 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 the Chinese fields in the Excel table; if there is no corresponding field in the translation dictionary table, the Chinese and English translation data corresponding to the corresponding field will be added to the translation dictionary table to reduce manual translation time;

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

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

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

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

[0018] The code generator presets the Handlebars code template, which contains placeholders for inserting fields dynamically obtained from the database model;

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

[0020] Preferably, the visual editor includes a canvas, a component library, a component property section, a script event, and an operation bar;

[0021] The canvas is a limited space for arranging pages. When initialized, 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-click to display the Copy and Delete buttons. Click the Copy button to add the copied component or table column to the canvas. Click the Delete button to delete the component or table column from the canvas.

[0022] The component library provides the main elements that make up the page. You can add components by selecting a component and dragging it to the canvas. You can also click on the canvas to select the component you want to edit, and then click on the component in the component library to change the type of the currently edited component, such as changing from an input box to a select drop-down box.

[0023] The component properties section presets all the property configurations of the component. According to the component selected in the canvas, the configurable properties of the corresponding component are displayed. By clicking on the selected property, such as read-only, disabled, hidden, etc. 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 of the component. According to the currently selected component in the canvas, the configurable events of the corresponding component are displayed. For example, the configuration process of adding the click event of button 1 is as follows: select button 1, click the click event configuration, a configuration window pops up, enter the js statement, complete the button 1 click event processing code, and click button 1 in the canvas to test whether the script event is added successfully;

[0025] The operation bar provides undo, redo, and save operation buttons. Click the undo button to undo the previous operation of the visual editor; click the redo button to redo the previous operation that was undone; click the save button to save the component configuration in the visual editor canvas.

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

[0027] A canvas for displaying pages and dragging components;

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

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

[0030] Saves the component configuration in the canvas.

[0031] Preferably, the interface and interaction code generator generates the front-end code as follows:

[0032] 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, properties and interaction data obtained from the canvas.

[0033] Use Node.js to write a script, generate the second-edited front-end code based on the Handlebars code template according to the data parsed in the canvas saved by the visual editor, and synchronize it to the front-end code directory; the second-edited front-end code includes page layout, control style and interactive effects.

[0034] A front-end code generation system based on BS architecture, the system comprising:

[0035] Database table creation module, used to generate database tables;

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

[0037] Visual editor, used to edit front-end code through visual pages;

[0038] Interface and interaction code generator, used to generate secondary code based on the 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 the Excel template to obtain the Excel table and upload the Excel table to the server; the data filled in according to the requirements of the Excel template includes the table name, table description, Chinese field, field length, field type, whether the field is required and whether the field is the 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 the Chinese fields in the Excel table through the built-in translation dictionary table; if there is no corresponding field in the translation dictionary table, the Chinese and English translation data corresponding to the corresponding field will be added to the translation dictionary table to reduce manual translation time;

[0042] The data parsing module is used to import the completed Excel spreadsheet, and the back-end server receives and parses the file content;

[0043] SQL statement generation module, 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 and complete the creation of the database table;

[0045] The code generator comprises:

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

[0047] Fixed module 1 is the part of the template that does not change with data changes. It is used to provide the Handlebars code template structure to generate fixed HTML code;

[0048] Placeholder module 1, used to insert dynamically obtained fields;

[0049] Node.js script module 2, used to obtain database fields and generate initial front-end code;

[0050] The visual editor includes:

[0051] The canvas module is used to display pages and drag and drop page components;

[0052] The component library module is used to provide the main elements that make up the page;

[0053] Component property module, used to configure and modify component properties;

[0054] Script event module, used to edit component response events;

[0055] The operation bar is used to undo, restore, and save the canvas;

[0056] The interface and interaction code generator include:

[0057] Handlebars code template module 2, used to generate the front-end code after secondary editing based on Handlebars code template;

[0058] Node.js script module 2, used to obtain the parsed data in the canvas module of the visual editor and generate front-end code;

[0059] Among them, Handlebars code template module 2 includes:

[0060] Fixed module 2 is the part of the template that does not change with data changes. It is used to provide the Handlebars code template structure to generate fixed HTML code;

[0061] Placeholder module 2, used to insert dynamically obtained fields.

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

[0063] Wherein, the memory stores a computer program;

[0064] The at least one processor executes the computer program stored in the memory, so that the at least one processor executes the front-end code generation method based on the BS architecture as described above.

[0065] A computer-readable storage medium stores a computer program, and the computer program can be executed by a processor to implement the front-end code generation method based on the BS architecture as described above.

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

[0067] (1) The present invention synchronously creates a database table by importing from Excel, uses Handlebars code templates and Node.js scripts to generate default configuration list and form initial codes, and completes the change of default configuration by dragging and modifying optional items through the canvas; then receives and parses the component configuration in the canvas through the interface and interactive code generator, generates the front-end code after secondary editing, and realizes the development of list pages and form pages without the need for developers to handwrite layout and style codes, simplifies the front-end code development process, reduces development difficulty and technical threshold, reduces dependence on professional developers, reduces labor costs, and improves development efficiency;

[0068] (ii) The present invention uses Excel import to synchronously create a database table, and Chinese characters are filled in the database fields. English fields are retrieved or added by the built-in translation dictionary table according to the Chinese fields, thereby reducing manual translation time;

[0069] (III) The present invention presets a dynamic route for generating code. Clicking the edit button of the row where the imported database table is located enters the visual editor page, which provides a graphical interface and templated design. Users can modify the type and properties of components by simply dragging and clicking configurations. BRIEF DESCRIPTION OF THE DRAWINGS

[0070] The present invention is further described below in conjunction with the accompanying drawings.

[0071] Attached Figure 1 This is a flowchart of the front-end code generation method based on the BS architecture. DETAILED DESCRIPTION

[0072] The front-end code generation method, system, device and medium based on BS architecture of the present invention are described in detail below with reference to the drawings and specific embodiments of the specification.

[0073] Embodiment 1:

[0074] As attached Figure 1 As shown, this embodiment provides a front-end code generation method based on BS architecture, and the method is specifically as follows:

[0075] S1. Create a database table: Use Excel import to create a database table synchronously, and fill in Chinese characters in the database fields;

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

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

[0078] S4. Generate front-end code through interface and interaction code generator: Receive and parse the component configuration in the canvas through the interface and interaction code generator, generate the front-end code after secondary editing, and realize the secondary development of the code by using the visual page without the need for developers to hand-write layout and style codes.

[0079] The creation of the database table in step S1 of this embodiment is as follows:

[0080] S101, preset an Excel template for creating a database table, the Excel template is downloaded from the front-end page, and data is filled in according to the requirements of the Excel template to obtain an Excel table and upload the Excel table to the server; wherein the data filled in according to the requirements of the Excel template include table name, table description, Chinese field, 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 field corresponding to the Chinese field in the Excel table; if there is no corresponding field in the translation dictionary table, the Chinese and English translation data corresponding to the corresponding field is added to the translation dictionary table to reduce manual translation time;

[0082] S103, import the completed Excel form, and the back-end server receives and parses the file content;

[0083] S104, generating an SQL statement for creating a database table according to the parsed file data;

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

[0085] In step S2 of this embodiment, the initial front-end code is generated based on the database table by the code generator as follows:

[0086] S201. The code generator presets a Handlebars code template, which 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 codes containing all fields according to 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 part, a script event, and an operation bar;

[0089] The canvas is a limited space for arranging pages. When initialized, 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-click to display the Copy and Delete buttons. Click the Copy button to add the copied component or table column to the canvas. Click the Delete button to delete the component or table column from the canvas.

[0090] The component library provides the main elements that make up the page. You can add components by selecting a component and dragging it to the canvas. You can also click on the canvas to select the component you want to edit, and then click on the component in the component library to change the type of the currently edited component, such as changing from an input box to a select drop-down box.

[0091] The component properties section presets all the property configurations of the component. According to the component selected in the canvas, the configurable properties of the corresponding component are displayed. By clicking on the selected property, such as read-only, disabled, hidden, etc. 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 of the component. According to the currently selected component in the canvas, the configurable events of the corresponding component are displayed. For example, the configuration process of adding the click event of button 1 is as follows: select button 1, click the click event configuration, a configuration window pops up, enter the js statement, complete the button 1 click event processing code, and click button 1 in the canvas to test whether the script event is added successfully;

[0093] The operation bar provides undo, redo, and save operation buttons. Click the undo button to undo the previous operation of the visual editor; click the redo button to redo the previous operation that was undone; click the save button to save the component configuration in the visual editor canvas.

[0094] The visual editor in step S3 of this embodiment modifies the initial front-end code as follows:

[0095] S301, displaying a page and a canvas of drag operation components;

[0096] S302, modifying the types and properties of components contained in the canvas based on the built-in component library and component properties;

[0097] S303, adding response events to components in the canvas;

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

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

[0100] S401, the interface and interaction code generator receives the component configuration in the visual editor canvas according to the predefined Handlebars code template, the Handlebars code template includes a placeholder for inserting the component position, type, property and interaction data obtained from the canvas;

[0101] S402. Use Node.js to write a script, generate the front-end code after secondary editing based on the Handlebars code template according to the data parsed in the canvas saved by the visual editor, and synchronize it to the front-end code directory; wherein, the front-end code after secondary editing includes page layout, control style and interactive effects.

[0102] Embodiment 2:

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

[0104] Database table creation module, used to generate database tables;

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

[0106] Visual editor, used to edit front-end code through visual pages;

[0107] Interface and interaction code generator, used to generate secondary code based on the 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 the Excel template to obtain the Excel table and upload the Excel table to the server; the data filled in according to the requirements of the Excel template includes the table name, table description, Chinese field, field length, field type, whether the field is required and whether the field is the 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 the Chinese fields in the Excel table through the built-in translation dictionary table; if there is no corresponding field in the translation dictionary table, the Chinese and English translation data corresponding to the corresponding field will be added to the translation dictionary table to reduce manual translation time;

[0111] The data parsing module is used to import the completed Excel spreadsheet, and the back-end server receives and parses the file content;

[0112] SQL statement generation module, 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 and complete the creation of the database table.

[0114] The code generator in this embodiment includes:

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

[0116] Fixed module 1 is the part of the template that does not change with data changes. It is used to provide the Handlebars code template structure to generate fixed HTML code;

[0117] Placeholder module 1, used to insert dynamically obtained fields;

[0118] Node.js script module 2, used to obtain database fields and generate initial front-end code.

[0119] The visual editor in this embodiment includes:

[0120] The canvas module is used to display pages and drag and drop page components;

[0121] The component library module is used to provide the main elements that make up the page;

[0122] Component property module, used to configure and modify component properties;

[0123] Script event module, used to edit component response events;

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

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

[0126] Handlebars code template module 2, used to generate the front-end code after secondary editing based on Handlebars code template;

[0127] Node.js script module 2, used to obtain the parsed data in the canvas module of the visual editor and generate front-end code;

[0128] Among them, Handlebars code template module 2 includes:

[0129] Fixed module 2 is the part of the template that does not change with data changes. It is used to provide the Handlebars code template structure to generate fixed HTML code;

[0130] Placeholder module 2, used to insert dynamically obtained fields.

[0131] Embodiment 3:

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

[0133] Wherein, the memory stores computer-executable instructions;

[0134] The processor executes the computer-executable instructions stored in the memory, so that the processor executes the front-end code generation method based on the BS architecture in any embodiment of the present invention.

[0135] The processor 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. The processor may be a microprocessor or any conventional processor, etc.

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

[0137] Embodiment 4:

[0138] This embodiment also provides a computer-readable storage medium, in which a plurality of instructions are stored, and the instructions are loaded by a processor, so that the processor executes the front-end code generation method based on the BS architecture in any embodiment of the present invention. Specifically, a system or device equipped with a storage medium can be provided, on which a software program code that implements the functions of any of the above embodiments is stored, and a computer (or CPU or MPU) of the system or device reads and executes the program code stored in the storage medium.

[0139] In this case, the program code itself read from the storage medium can realize the function of any one of the above-mentioned embodiments, and thus the program code and the storage medium storing the program code constitute a part of the present invention.

[0140] The storage medium embodiments for providing the program code include a floppy disk, a hard disk, a magneto-optical disk, an optical disk (such as CD-ROM, CD-R, CD-RW, DVD-ROM, DVD-RYM, DVD-RW, DVD+RW), a magnetic tape, a non-volatile memory card, and a ROM. Alternatively, the program code can be downloaded from a server computer via a communication network.

[0141] In addition, it should be clear that the functions of any of the above embodiments can be implemented not only by executing the program code read by the computer, but also by enabling an operating system operating on the computer to complete part or all of the actual operations based on instructions from the program code.

[0142] In addition, it can be understood that the program code read from the storage medium is written to a memory provided in an expansion board inserted into the computer or written to a memory provided in an expansion unit connected to the computer, and then based on the instructions of the program code, a CPU installed on the expansion board or the expansion unit is enabled to perform part or all of the actual operations, thereby realizing the functions of any of the above-mentioned embodiments.

[0143] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or replace some or all of the technical features therein with equivalents. However, these modifications or replacements 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 BS architecture, characterized in that: The method is as follows: Create database table: Use Excel import method to create database table synchronously, and fill in Chinese characters in database fields; Generate initial front-end code based on database tables through code generator: Use Handlebars code templates and Node.js scripts to generate initial list and form code containing all fields; Modify the initial front-end page through the visual editor: use the canvas to edit the generated 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; 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 by using the visual page without the need for developers to hand-write layout and style codes.

2. The front-end code generation method based on BS architecture according to claim 1 is characterized in that: Create the database table as follows: An Excel template for creating a database table is preset. The Excel template is downloaded from the front-end page, and the Excel table is obtained by filling in data according to the requirements of the Excel template and uploading the Excel table to the server; the data filled in according to the requirements of the Excel template include table name, table description, Chinese field, 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 the Chinese fields in the Excel table; if there is no corresponding field in the translation dictionary table, the Chinese and English translation data corresponding to the corresponding field will be added to the translation dictionary table; Import the completed Excel spreadsheet, and the backend server receives and parses the file content; Generate SQL statements to create database tables based on the parsed file data; Send the generated SQL statement to the database for execution to complete the creation of the database table.

3. The front-end code generation method based on BS architecture according to claim 1 is characterized in that: The initial front-end code generated by the code generator based on the database table is as follows: The code generator presets the Handlebars code template, which contains placeholders for inserting fields dynamically obtained from the database model; Use Node.js to write scripts, connect to the database and obtain the database model fields, generate form component and table component codes containing all fields based on the database model fields, and synchronize them to the front-end code directory.

4. The front-end code generation method based on BS architecture according to claim 1 is characterized in that: The visual editor includes a canvas, a component library, a component properties section, script events, and an action bar; The canvas is a limited space for arranging pages. When initialized, 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-click to display the Copy and Delete buttons. Click the Copy button to add the copied component or table column to the canvas. Click the Delete button to delete the component or table column from the canvas. The component library provides the main elements that make up the page. You can add components by selecting a component and dragging it to the canvas. You can also select the component you want to edit by clicking on the canvas, and then click on the component in the component library to change the type of the currently edited component. The component properties section presets all the property configurations of the component. According to the component selected in the canvas, the configurable properties of the corresponding component are displayed. By clicking the selected property, the display status of the component in the canvas is updated in real time. The script event presets all event configurations of the component, and displays the configurable events of the corresponding component according to the currently selected component in the canvas; The operation bar provides undo, redo, and save operation buttons. Click the undo button to undo the previous operation of the visual editor; click the redo button to redo the previous operation that was undone; click the save button to save the component configuration in the visual editor canvas.

5. The front-end code generation method based on BS architecture according to claim 1, characterized in that: The visual editor modifies the initial front-end code as follows: A canvas for displaying pages and dragging components; Modify the types and properties of components contained in the canvas based on the built-in component library and component properties; Add response events to components within the canvas; Saves the component configuration in the canvas.

6. The front-end code generation method based on BS architecture according to any one of claims 1 to 5, characterized in that: The interface and interaction code generator generates the front-end code as follows: 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, properties and interaction data obtained from the canvas. Use Node.js to write a script, generate the second-edited front-end code based on the Handlebars code template according to the data parsed in the canvas saved by the visual editor, and synchronize it to the front-end code directory; the second-edited front-end code includes page layout, control style and interactive effects.

7. A front-end code generation system based on BS architecture, characterized in that: The system includes: Database table creation module, used to generate database tables; Code generator, used to generate initialization front-end code; Visual editor, used to edit front-end code through visual pages; Interface and interaction code generator, used to generate secondary code based on the visual editor.

8. The front-end code generation system based on BS architecture according to claim 7, characterized in that: The database table creation module includes: The file upload module is used to fill in data according to the requirements of the Excel template to obtain the Excel table and upload the Excel table to the server; the data filled in according to the requirements of the Excel template includes the table name, table description, Chinese field, field length, field type, whether the field is required and whether the field is the 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 the Chinese fields in the Excel table through the built-in translation dictionary table; if there is no corresponding field in the translation dictionary table, the Chinese and English translation data corresponding to the corresponding field will be added to the translation dictionary table; The data parsing module is used to import the completed Excel spreadsheet, and the back-end server receives and parses the file content; SQL statement generation module, 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 and complete the creation of the database table; The code generator comprises: Handlebars code template module 1 is used to generate initial front-end code based on Handlebars code template; wherein, Handlebars code template module 1 includes: Fixed module 1 is used to provide Handlebars code template structure to generate fixed HTML code; Placeholder module 1, used to insert dynamically obtained fields; Node.js script module 2, used to obtain database fields and generate initial front-end code; The visual editor includes: The canvas module is used to display pages and drag and drop page components; The component library module is used to provide the main elements that make up the page; Component property module, used to configure and modify component properties; Script event module, used to edit component response events; The operation bar is used to undo, restore, and save the canvas; The interface and interaction code generator include: Handlebars code template module 2, used to generate the front-end code after secondary editing based on Handlebars code template; Node.js script module 2, used to obtain the parsed data in the canvas module of the visual editor and generate front-end code; Among them, Handlebars code template module 2 includes: Fixed module 2 is used to provide Handlebars code template structure to generate fixed HTML code; Placeholder module 2, used to insert dynamically obtained fields.

9. An electronic device, characterized in that: include: memory and at least one processor; Wherein, the memory stores a computer program; The at least one processor executes the computer program stored in the memory, so that the at least one processor executes the front-end code generation method based on the BS architecture as described in any one of claims 1 to 6.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, which can be executed by a processor to implement the front-end code generation method based on the BS architecture as described in any one of claims 1 to 6.

Images