Method, device and readable storage medium for generating front-end code file

Abstract

The embodiment of the application provides a kind of front-end code file generation method, device, equipment and readable storage medium, obtain the table data in the data template of inputting preset, as target table data, obtain first front-end code template and second front-end code template, wherein, target table data includes the configuration value of first front-end configuration item and the configuration value of second front-end configuration item, since, first variable correspondence is used to indicate the corresponding relationship of first front-end configuration item and first template placeholder.Therefore, the configuration value of first front-end configuration item is imported into first front-end code template based on first variable correspondence, and first front-end code file is obtained, since, second variable correspondence is used to indicate the corresponding relationship of second front-end configuration item and second template placeholder.Therefore, the configuration value of second front-end configuration item is imported into second front-end code template based on second variable correspondence, and second front-end code file is obtained.

Description

Technical Field

[0001] This application relates to the field of data processing technology, and in particular to a method, apparatus, device, and readable storage medium for generating front-end code files. Background Technology

[0002] Forms are the primary method for daily data entry and retrieval on both PCs and mobile devices, and their application is becoming increasingly widespread. However, due to the different application requirements of forms on PCs and mobile devices, daily development work often requires developers to simultaneously develop PC-side form interfaces and mobile-side development needs. This often necessitates hard-coding separate front-end code for PC and mobile devices. Furthermore, as form component styles become increasingly complex to meet the requirements of different application scenarios, the difficulty of developing form interface components is also increasing. Summary of the Invention

[0003] This application provides a method, apparatus, device, and readable storage medium for generating front-end code files, as follows:

[0004] A method for generating front-end code files, including:

[0005] Obtain table data from the preset data template as target table data. The target table data includes the configuration values ​​of the first front-end configuration item and the configuration values ​​of the second front-end configuration item.

[0006] Obtain a first front-end code template and a second front-end code template, wherein the first front-end code template includes a first template placeholder and the second front-end code template includes a second template placeholder;

[0007] Based on the first variable correspondence, the configuration value of the first front-end configuration item is imported into the first front-end code template to obtain the first front-end code file. The first variable correspondence is used to indicate the correspondence between the first front-end configuration item and the first template placeholder.

[0008] Based on the second variable correspondence, the configuration value of the second front-end configuration item is imported into the second front-end code template to obtain the second front-end code file. The second variable correspondence is used to indicate the correspondence between the second front-end configuration item and the second template placeholder.

[0009] Optionally, the data template includes: a first page cut, a second page cut, and a third page cut;

[0010] The first page cut includes a form name configuration item, an application card name configuration item, and a preset first type of configuration item, which includes mobile configuration items and unified configuration items;

[0011] The second page segmentation includes a second type of configuration items generated based on the table data entered in the first page segmentation and the first configuration correspondence. The first configuration correspondence includes the correspondence between the first type of configuration items and preset configuration items.

[0012] The third page cut includes a third type of configuration item generated based on the table data entered in the second page cut and the second configuration correspondence. The second configuration correspondence includes the correspondence between the second type of configuration item and the preset configuration item.

[0013] Optionally, the first front-end configuration item includes: a unified configuration item in the first type of configuration item, and a second type of configuration item and a third type of configuration item corresponding to the unified configuration item; the second front-end configuration item includes the first type of configuration item, and a second type of configuration item and a third type of configuration item corresponding to the first type of configuration item.

[0014] Optionally, retrieve table data from a preset data template, including:

[0015] Obtain the table data of the first page segment, which includes the configuration value of the form name configuration item, the configuration value of the application card name configuration item, and the configuration values ​​of multiple first-type configuration items.

[0016] Based on the first configuration correspondence and the table data of the first page, a second type of configuration item is generated and displayed on the second page;

[0017] Obtain the table data of the second page, which includes the configuration values ​​of multiple configuration items of the second type;

[0018] Based on the second configuration correspondence and the table data of the second page, a third type of configuration item is generated and displayed on the third page;

[0019] Obtain the table data of the third page slice.

[0020] Optionally, after obtaining the table data from the preset data template, the method further includes:

[0021] Parse the target table data to obtain a first type of JSON object and a second type of JSON object. The first type of JSON object includes JSON objects converted from the configuration values ​​of the first front-end configuration items, and the second type of JSON object includes JSON objects converted from the configuration values ​​of the second front-end configuration items. Each JSON object includes a key name and a key value.

[0022] Optionally, the first variable correspondence includes the correspondence between key names and first template placeholders; the second variable correspondence includes the correspondence between key names and second template placeholders.

[0023] The step of importing the configuration value of the first front-end configuration item into the first front-end code template based on the first variable correspondence to obtain the first front-end code file includes:

[0024] Import the key-value pairs of the first type of JSON objects into the first template placeholders corresponding to the key names of the first type of JSON objects in the first front-end code template to generate the first front-end code file;

[0025] The step of importing the configuration values ​​of the second front-end configuration items into the second front-end code template based on the second variable correspondence to obtain the second front-end code file includes:

[0026] Import the key-value pairs of the second type of JSON object into the second template placeholders corresponding to the key names of the second type of JSON object in the second front-end code template to generate the second front-end code file.

[0027] A front-end code file generation device, comprising:

[0028] The table data acquisition unit is used to acquire table data from a preset data template as target table data. The target table data includes the configuration values ​​of the first front-end configuration item and the configuration values ​​of the second front-end configuration item.

[0029] The template acquisition unit is used to acquire a first front-end code template and a second front-end code template, wherein the first front-end code template includes a first template placeholder and the second front-end code template includes a second template placeholder.

[0030] The first code file acquisition unit is used to import the configuration value of the first front-end configuration item into the first front-end code template based on the first variable correspondence relationship to obtain the first front-end code file. The first variable correspondence relationship is used to indicate the correspondence between the first front-end configuration item and the first template placeholder.

[0031] The second code file acquisition unit is used to import the configuration value of the second front-end configuration item into the second front-end code template based on the second variable correspondence to obtain the second front-end code file. The second variable correspondence is used to indicate the correspondence between the second front-end configuration item and the second template placeholder.

[0032] Optionally, the data template includes: a first page cut, a second page cut, and a third page cut;

[0033] The first page cut includes a form name configuration item, an application card name configuration item, and a preset first type of configuration item, which includes mobile configuration items and unified configuration items;

[0034] The second page segmentation includes a second type of configuration items generated based on the table data entered in the first page segmentation and the first configuration correspondence. The first configuration correspondence includes the correspondence between the first type of configuration items and preset configuration items.

[0035] The third page cut includes a third type of configuration item generated based on the table data entered in the second page cut and the second configuration correspondence. The second configuration correspondence includes the correspondence between the second type of configuration item and the preset configuration item.

[0036] A device for generating front-end code files includes: a memory and a processor;

[0037] The memory is used to store programs;

[0038] The processor is used to execute the program and implement each step of the method for generating front-end code files.

[0039] A readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of a method for generating a front-end code file.

[0040] As can be seen from the above technical solutions, the front-end code file generation method, apparatus, device, and readable storage medium provided in this application embodiment obtain table data from a preset data template as target table data, and obtain a first front-end code template and a second front-end code template. The target table data includes configuration values ​​of a first front-end configuration item and configuration values ​​of a second front-end configuration item. Since a first variable correspondence is used to indicate the correspondence between the first front-end configuration item and the first template placeholder, the configuration value of the first front-end configuration item is imported into the first front-end code template based on the first variable correspondence to obtain a first front-end code file. Similarly, since a second variable correspondence is used to indicate the correspondence between the second front-end configuration item and the second template placeholder, the configuration value of the second front-end configuration item is imported into the second front-end code template based on the second variable correspondence to obtain a second front-end code file. Therefore, by using the first and second front-end configuration items in the preset data template, after obtaining the configuration values ​​of different front-end configuration items, the configuration values ​​are imported into different front-end code templates, thereby achieving the generation of different front-end code files from a single input. Attached Figure Description

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

[0042] Figure 1 A flowchart illustrating a specific implementation of a method for generating front-end code files provided in this application embodiment;

[0043] Figure 2 An example of a table diagram for the first page cut is provided;

[0044] Figure 3 An example of a table diagram for a second page cut is provided;

[0045] Figure 4 This example illustrates a table with a third page cut.

[0046] Figure 5 A flowchart illustrating a method for generating front-end code files provided in an embodiment of this application;

[0047] Figure 6 A schematic diagram of a front-end code file generation device provided in an embodiment of this application;

[0048] Figure 7 This is a schematic diagram of the structure of a front-end code file generation device provided in an embodiment of this application. Detailed Implementation

[0049] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0050] Traditional methods for generating front-end code files generally include the following three:

[0051] The first method, based on data processing, for generating front-end code includes:

[0052] 1. Build framework templates and component libraries based on the front-end framework and component library, which are used to design front-end code templates.

[0053] 2. Develop a strategy for parsing configuration data (XML format) and a strategy for compositing front-end pages.

[0054] 3. Configure the front-end page framework template and component model data, and assign a unique ID to each component.

[0055] 4. Parse the configuration data into a collection of front-end page parameter objects according to the data parsing strategy.

[0056] 5. According to the page composition strategy, compare the frame template and component template to compose the collection of parameter objects in the front-end page into the front-end page code.

[0057] The second method, based on UI design drafts, includes:

[0058] 1. The sketch-based imgcook plugin generates initial UI style data from the original UI design.

[0059] 2. Convert the initial UI style data into second front-end data by using preset data parsing rules.

[0060] 3. Generate initial front-end code using the second front-end data according to the preset code conversion rules.

[0061] 4. Render to the user configuration interface, where users can personalize and modify the settings.

[0062] 5. Obtain the modified page content parameters and merge them with the generated second front-end data to update it into the latest second front-end data.

[0063] The third method, based on an SNF code generator, is a front-end code generation method that specifically includes:

[0064] 1. Create a data table and configure field types, controls used, whether to display them, whether they are required, column widths, default values, and other information.

[0065] 2. Generate code, including CRUD operations for data tables.

[0066] 3. Copy the generated code to the corresponding directory.

[0067] 4. Configure menu to run.

[0068] However, the aforementioned three front-end code generation methods each have their own technical drawbacks, as follows:

[0069] First, the front-end code generation method based on UI design mockups requires an additional UI design project during development. This project generates a second set of front-end code based on the UI design mockups, and then uses a data parsing strategy to parse this second set of code into the final front-end code. This method increases the complexity of front-end code generation and reduces its efficiency. For example, the generation of a large amount of repetitive code, coupled with minimal changes to the UI view, means that the increased view flexibility does not positively contribute to improving the overall efficiency of code development.

[0070] Secondly, SNF technology can generate front-end code for mobile devices, but with the widespread use of Vue technology, the code generated by SNF can no longer meet the current needs of mobile development. Moreover, the front-end code generated by SNF has a single style, and the fixed mobile style can no longer meet the needs of actual project development.

[0071] Third, in the traditional front-end code generation process, for the same form, the front-end code for mobile devices and the front-end code for PC devices need to be generated and deployed separately. This separate development and deployment method obviously increases the workload and maintenance cost of front-end code development. When using the same data source, two sets of static resources are deployed on PC and mobile devices respectively. If a resource is added, both mobile and PC devices need to be redeployed simultaneously, which impacts timeliness and ease of maintenance. Furthermore, redundancy in the use of static resources makes the front-end code bloated and complex. Differences in layout and style between mobile and PC also significantly degrade the user experience, making it difficult to switch between mobile and PC devices simultaneously.

[0072] In summary, improving the development efficiency of form front-end code, especially the efficiency of simultaneously generating PC and mobile front-end code for forms, is a problem that urgently needs to be solved by those skilled in the art.

[0073] The inventors of this application discovered through research that:

[0074] Vue is a progressive JavaScript framework for building user interfaces. Front-end developers are generally familiar with JavaScript development knowledge, and using JavaScript to parse corresponding data structures to generate front-end code can greatly improve development efficiency.

[0075] In some page development scenarios, business personnel typically provide Excel spreadsheet data. Using the js-xlsx pure front-end export plugin tool, the exported data can be effectively used in the Vue framework, making front-end development work more convenient and efficient. Furthermore, js-xlsx supports multiple formats.

[0076] JSON is a lightweight data interchange format that uses a completely language-independent text format. These characteristics make JSON lighter, easier to read and write, and easier for machines to parse and generate than XML.

[0077] Using the NPM component package management tool, you can complete any package-related operations such as publishing and downloading packages with simple commands. Publishing the front-end code generator as an NPM package can reduce a lot of repetitive work.

[0078] Based on the aforementioned technical background, embodiments of this application provide a method for generating front-end code files, specifically applied to generating PC-side and mobile-side front-end code for forms in form development and deployment scenarios. Specifically, the front-end code file generation method provided in this application, for the ElementUI and Vant component libraries, offers a method for generating front-end code files based on Excel data tables. This method imports and parses the Excel data table corresponding to the form, simultaneously generating both mobile-side and PC-side front-end code for the form.

[0079] Figure 1 The specific implementation flow of a front-end code file generation method provided in this application embodiment is as follows: Figure 1 As shown, this method specifically includes:

[0080] S101. Obtain the preset data template.

[0081] In this embodiment, the preset data template is an Excel template, which includes three pages, referred to as the first page, the second page, and the third page.

[0082] In this embodiment, the first page includes a form name configuration item, an application card name configuration item, and a preset first type of configuration item. Optionally, the first type of configuration item includes, but is not limited to, form field basic information items and form interface layout configuration items. The form interface layout configuration items include, but are not limited to, query area configuration items, table display area configuration items, and form input configuration items.

[0083] Specifically, the basic information items of the field include, but are not limited to, English name, Chinese name, whether it is a primary key, data category, data type, data length, and data precision.

[0084] The query area configuration options include mobile configuration options and unified configuration options. Mobile configuration options include the search display method, while unified configuration options include the display order of positions and whether the input is required.

[0085] The table display area configuration options include mobile configuration options and unified configuration options. Mobile configuration options include whether to display cards, while unified configuration options include whether to display details and whether to allow abbreviation.

[0086] The form input configuration items include mobile configuration items and unified configuration items. Mobile configuration items include whether to display, while unified configuration items include whether input is allowed, whether input is required, input method, and the name of the region.

[0087] It should be noted that the Excel template is configured to display mobile terminal configuration items and unified configuration items distinctively. Optionally, the distinctive display method includes filling the cells of the mobile terminal configuration items with a preset color or a preset background. In this embodiment, the cells of the mobile terminal configuration items are filled with blue.

[0088] It should be noted that the first tab further includes the configuration item type and entry prompt of the first type of configuration items, wherein the configuration item type is used to indicate the type of the first type of configuration items, the configuration item type includes at least one preset type option, and the Excel template is configured to display the type options in the corresponding cell in the form of drop-down box options, and in response to an operation of selecting any type option, fill the type option into the cell. The entry prompt is used to indicate the content of the first type of configuration items, and the entry prompt is displayed in the corresponding cell in the form of virtual characters.

[0089] Figure 2 shows a schematic diagram of a table of the first tab. As Figure 2 shown, the configuration item type of the English field name in the basic field information includes a string type. For example, if "stuNo" is entered as the English field name and "Student Code" is entered as the Chinese name, the information of "Student Code" will be displayed in the program, and it corresponds to the "stuNo" field in the code. It should be noted that Figure 2 the symbol "*" in indicates that the field is a mandatory input content.

[0090] In this embodiment, the second tab includes second-type configuration items generated according to the table data entered in the first tab and the first configuration correspondence, wherein the first configuration correspondence includes the correspondence between the first-type configuration items and preset configuration items. Specifically, the first configuration correspondence includes the correspondence between the mobile terminal configuration items in the first-type configuration items and the preset configuration items, and the correspondence between the unified configuration items in the first-type configuration items and the preset configuration items.

[0091] For example, the second-type configuration items include a card information item, which belongs to a mobile terminal configuration item. In that case, the first configuration correspondence includes the correspondence between at least one mobile terminal configuration item (denoted as a target mobile terminal configuration item) in the first-type configuration items and the card information item. After the configuration value of the target mobile terminal configuration item is acquired, the card information item is generated according to the target mobile terminal configuration item and the first configuration correspondence, and the card information item is correspondingly filled into the second tab. It should be noted that the card information item is used to indicate the content and style of the card component that needs to be displayed on the mobile terminal.

[0092] The card information items include preset information items used to define the card style on the mobile device. The card displayed on the mobile device is determined based on the table data in the first page. It should be noted that the second page also includes the configuration item types and input prompts for the second type of configuration items; please refer to the configuration of the configuration item types and input prompts for the first type of configuration items in the first page for details. Figure 3 An example of a table diagram for a second page is provided. Optionally, card information items include, but are not limited to, card name, whether to display an image, whether to display a title, number of columns to display, and card field color.

[0093] In this embodiment, the third page cut includes a third type of configuration item generated based on the table data entered in the second page cut and the second configuration correspondence. The second configuration correspondence includes the correspondence between the second type of configuration item and the preset configuration item. Specifically, the third type of configuration item includes the dictionary content of the drop-down selection field, so the second configuration correspondence includes the correspondence between the second type of configuration item and the drop-down selection field.

[0094] It should be noted that the third page also includes the configuration item type and input prompts for the third type of configuration items. For details, please refer to the configuration item type and input prompts for the first type of configuration items in the first page. Figure 4 An example of a table with a third page cut is provided. Optionally, the third type of configuration items includes the English name of the field value, the value code, and the Chinese name of the value.

[0095] In this embodiment, the code template also includes a fourth page, which includes test configuration items generated based on the test results.

[0096] S102. Obtain the table data in the data entry template as the target table data.

[0097] In this embodiment, the table data of the data template includes the table data of the first page (first table data), the table data of the second page (second table data), and the table data of the third page (third table data).

[0098] Specifically, the process of retrieving table data from the Excel template includes:

[0099] A1. Obtain the table data for the first page of input, i.e., the first table data. The first table data includes the configuration values ​​of the form name configuration item, the application card name configuration item, and the configuration values ​​of multiple first-category configuration items. The configuration values ​​are manually or automatically entered into the corresponding first-category configuration item's input cell based on the generation information of the form to be generated.

[0100] It should be noted that the multiple Category 1 configuration items in the first table are divided into mobile configuration items and unified configuration items. The mobile configuration items are specific to the front-end pages used for displaying mobile devices. See the steps described above for a detailed breakdown.

[0101] A2. Based on the first configuration correspondence and the data in the first table, generate and display the second type of configuration items on the second page.

[0102] Specifically, the preset configuration item corresponding to the first type of configuration item in the first table data is obtained as the second type of configuration item and displayed in the preset position of the second page.

[0103] A3. Obtain the table data for the second page, i.e., the second table data. The second table data includes the configuration values ​​of multiple second-category configuration items. The configuration values ​​are manually or automatically entered into the corresponding second-category configuration item's input cell based on the generation information of the form to be generated.

[0104] A4. Based on the second configuration correspondence and the data in the second table, generate and display the third type of configuration items on the third page.

[0105] Specifically, the preset configuration item corresponding to the second type of configuration item in the second table data is obtained as the third type of configuration item and displayed in the preset position of the third page.

[0106] A5. Obtain the table data of the third page, that is, the third table data. The third table data includes the configuration values ​​of multiple third-category configuration items. The configuration values ​​are manually or automatically entered into the corresponding third-category configuration item's input cell based on the generation information of the form to be generated.

[0107] It should be noted that the specific methods for generating and displaying configuration items are described in existing technologies.

[0108] As can be seen from the above steps, by using the preset configuration correspondence (including the first configuration correspondence and the second configuration correspondence), configuration items to be entered are generated based on the configuration items with already entered configuration values, and mobile configuration items and unified configuration items are distinguished. Therefore, the configuration items of each page are linked together, and page configuration items for displaying mobile or PC are automatically generated.

[0109] S103. Use the js-xlsx plugin to parse the target table data and generate the first type of JSON object and the second type of JSON object.

[0110] In this embodiment, the target data table is parsed by sequentially creating workbook objects, sheet objects, and cell objects to read the data from the first, second, and third tables, assembling the corresponding JSON format data, obtaining the JSON object corresponding to each table's data, and storing the JSON object in a preset JS file.

[0111] In this embodiment, the first type of JSON object includes JSON objects converted from the configuration values ​​of the first front-end configuration item, and the second type of JSON object includes JSON objects converted from the configuration values ​​of the second front-end configuration item. Any JSON object includes a key name and a key value.

[0112] The first front-end configuration item includes the unified configuration item in the first type of configuration item, as well as the second and third type configuration items corresponding to the unified configuration item. Specifically, the second type configuration item corresponding to the unified configuration item is a second type configuration item generated based on the correspondence between the unified configuration item and the first configuration (denoted as the first corresponding configuration item). The third type configuration item corresponding to the unified configuration item is a third type configuration item generated based on the correspondence between the first corresponding configuration item and the second configuration. That is, the first front-end configuration item includes the unified configuration item and configuration items that have a preset correspondence with the unified configuration item.

[0113] Similarly, the second front-end configuration item includes a mobile configuration item and configuration items that have a preset correspondence with the mobile configuration item, as well as the first front-end configuration item.

[0114] S104. Obtain the first front-end code template and the second front-end code template.

[0115] In this embodiment, the first front-end code template includes a first template placeholder, and the second front-end code template includes a second template placeholder. Specifically, the first front-end code template (also known as the PC-side code template) includes template files for input forms, display tables, and new / edit pop-ups. The second front-end code template (also known as the mobile-side code template) includes template files for search area pages, card lists, detail pages, and form entry pages; the creation method is described in existing technologies.

[0116] The PC-side code template is pre-created based on the Element framework file, and the mobile-side code template is pre-created based on the VantUI framework file. For specific methods of creating arbitrary template files, please refer to existing technologies. For example, obtain manually uploaded code templates and store them with corresponding identifiers, or automatically generate a first front-end code template based on historical code files used to display the PC-side form interface, and automatically generate a second front-end code template based on historical code files used to display the mobile-side form interface.

[0117] S105. Based on the key names of the first type of JSON objects and the preset correspondence between the first type of variables, import the key values ​​of the first type of JSON objects into the first front-end code template to obtain the first front-end code file.

[0118] Specifically, the key-value pairs of the first type of JSON object are imported into the first template placeholder corresponding to the key name of the first type of JSON object in the first front-end code template to generate the first front-end code file.

[0119] S106. Based on the key names of the second type of JSON objects and the preset correspondence between the second type of variables, import the key values ​​of the second type of JSON objects into the second front-end code template to obtain the second front-end code file.

[0120] Specifically, the key-value pairs of the second type of JSON object are imported into the second template placeholders corresponding to the key names of the second type of JSON object in the second front-end code template to generate the second front-end code file.

[0121] As can be seen from the above technical solutions, the embodiments of this application provide a method for generating front-end code files based on Excel data tables, which can at least achieve the following beneficial effects:

[0122] First, it can achieve a single data entry and simultaneously generate front-end code for generating the front-end page on the PC (i.e., the first front-end code file) and front-end code for generating the front-end page on the mobile device (i.e., the second front-end code file). This ensures the consistency of data displayed on different terminals of the same system and improves the scalability and efficiency of system development.

[0123] Secondly, this method first parses the table data into a JSON object and stores it in a JS file, then imports the JSON object into the corresponding front-end code template to generate a code file, and finally renders the front-end page based on the code file. As you can see, the process of generating the data object (JSON object) from Excel and the process of rendering the Vue page are decoupled and independent, and can be maintained separately without affecting each other.

[0124] Third, we designed front-end template pages suitable for mobile devices, including basic mobile operation pages such as input, display, and query. The card display template in the search area can specifically display the same content on mobile devices, effectively solving the style layout difficulties in mobile implementation.

[0125] Figure 1 This application only illustrates the specific implementation process of a method for generating front-end code files provided in an embodiment of the present application. The present application also includes other specific implementation methods.

[0126] For example, the data template in S101 is only one optional specific template, and each configuration item in it can be updated according to the actual application.

[0127] For example, this method also includes executing a first front-end code file to render a first form display interface, and executing a second front-end code file to render a second form display interface. It can be understood that the first front-end code file is filled with unified configuration items and their corresponding configuration items; therefore, the first form display interface obtained by executing the first front-end code file is the form interface displayed on the PC. The second front-end code file is filled with mobile configuration items and their corresponding configuration items; therefore, the first form display interface obtained by executing the second front-end code file is the form interface displayed on the mobile device. It is evident that, unlike existing front-end code generation methods, which are mostly applicable to the PC, this method can generate corresponding front-end code for the mobile device using a preset code template and entered table data. That is, this method abstracts the basic components of Vant and ElementUI into configurable tables (code templates), eliminating the need for developers to hard-code the front-end display interface for different styles. In summary, this method configures data (table data) once and can simultaneously generate front-end code for both mobile and PC, ensuring data consistency while significantly improving development efficiency. In summary, the front-end code file generation method provided in this application embodiment can be summarized as follows: Figure 5 The process shown is as follows: Figure 5 As shown, this method includes:

[0128] S501. Obtain the table data from the preset data template and use it as the target table data.

[0129] In this embodiment, the target table data includes the configuration values ​​of the first front-end configuration item and the configuration values ​​of the second front-end configuration item.

[0130] Optionally, the data template includes: a first page cut, a second page cut, and a third page cut.

[0131] The first page includes configuration items for form name, application card name, and preset first-category configuration items. The first-category configuration items include mobile-specific configuration items and unified configuration items. The mobile-specific configuration items include those specific to the mobile form interface. The unified configuration items include those common to both the mobile and PC form interfaces.

[0132] The second page cut includes a second type of configuration items generated based on the table data entered in the first page cut and the first configuration correspondence. The first configuration correspondence includes the correspondence between the first type of configuration items and the preset configuration items.

[0133] The third page cut includes a third type of configuration item generated based on the table data entered in the second page cut and the second configuration correspondence. The second configuration correspondence includes the correspondence between the second type of configuration item and the preset configuration item.

[0134] Optionally, the first front-end configuration item includes: the unified configuration item in the first type of configuration item, and the second and third type of configuration items corresponding to the unified configuration item. The second front-end configuration item includes the mobile configuration item in the first type of configuration item, and the second and third type of configuration items corresponding to the mobile configuration item. The second front-end configuration item also includes the unified configuration item in the first type of configuration item, and the second and third type of configuration items corresponding to the unified configuration item.

[0135] It should be noted that a specific data template can be found in the above embodiments.

[0136] S502, Obtain the first front-end code template and the second front-end code template.

[0137] In this embodiment, the first front-end code template includes a first template placeholder, and the second front-end code template includes a second template placeholder.

[0138] S503. Based on the first variable correspondence, import the configuration value of the first front-end configuration item into the first front-end code template to obtain the first front-end code file.

[0139] In this embodiment, the first variable correspondence is used to indicate the correspondence between the first front-end configuration item and the first template placeholder.

[0140] Specifically, the first variable mapping relationship includes the mapping relationship between key names and first template placeholders. An optional method for importing the configuration values ​​of the first front-end configuration items into the first front-end code template based on the first variable mapping relationship to obtain the first front-end code file includes:

[0141] The key-value pairs of the first type of JSON object are imported into the first template placeholder corresponding to the key name of the first type of JSON object in the first front-end code template to generate the first front-end code file. The method for obtaining the first type of JSON object is as follows:

[0142] Parse the target table data to obtain the first type of JSON object, which includes the JSON object converted from the configuration value of the first front-end configuration item.

[0143] S504. Based on the correspondence of the second variable, import the configuration value of the second front-end configuration item into the second front-end code template to obtain the second front-end code file.

[0144] In this embodiment, the second variable correspondence is used to indicate the correspondence between the second front-end configuration item and the second template placeholder. Optionally, the first variable correspondence includes the correspondence between the key name and the second template placeholder.

[0145] An optional method for importing the configuration value of the second front-end configuration item into the second front-end code template based on the second variable correspondence to obtain the second front-end code file includes:

[0146] The key-value pairs of the second type of JSON object are imported into the second template placeholders corresponding to the key names of the second type of JSON object in the second front-end code template, generating the second front-end code file. The method for obtaining the second type of JSON object is as follows:

[0147] Parse the target table data to obtain a second type of JSON object, which includes JSON objects converted from the configuration values ​​of the second front-end configuration items.

[0148] It should be noted that any JSON object includes both key names and key values. For methods of parsing JSON objects, please refer to existing technologies.

[0149] As can be seen from the above technical solutions, the front-end code file generation method provided in this application involves obtaining table data from a preset data template as target table data, and obtaining a first front-end code template and a second front-end code template. The target table data includes configuration values ​​for a first front-end configuration item and a second front-end configuration item. Since a first variable correspondence is used to indicate the correspondence between the first front-end configuration item and the first template placeholder, the configuration value of the first front-end configuration item is imported into the first front-end code template based on the first variable correspondence to obtain a first front-end code file. Similarly, since a second variable correspondence is used to indicate the correspondence between the second front-end configuration item and the second template placeholder, the configuration value of the second front-end configuration item is imported into the second front-end code template based on the second variable correspondence to obtain a second front-end code file. Therefore, by using the first and second front-end configuration items in the preset data template, after obtaining the configuration values ​​of different front-end configuration items, the configuration values ​​are imported into different front-end code templates, thereby achieving the generation of different front-end code files from a single input.

[0150] Figure 6 This illustration shows a schematic diagram of a front-end code file generation device provided in an embodiment of this application, such as... Figure 6 As shown, the device may include:

[0151] The table data acquisition unit 601 is used to acquire table data from a preset data template as target table data. The target table data includes the configuration values ​​of the first front-end configuration item and the configuration values ​​of the second front-end configuration item.

[0152] The template acquisition unit 602 is used to acquire a first front-end code template and a second front-end code template, wherein the first front-end code template includes a first template placeholder and the second front-end code template includes a second template placeholder.

[0153] The first code file acquisition unit 603 is used to import the configuration value of the first front-end configuration item into the first front-end code template based on the first variable correspondence relationship to obtain the first front-end code file. The first variable correspondence relationship is used to indicate the correspondence between the first front-end configuration item and the first template placeholder.

[0154] The second code file acquisition unit 604 is used to import the configuration value of the second front-end configuration item into the second front-end code template based on the second variable correspondence to obtain the second front-end code file. The second variable correspondence is used to indicate the correspondence between the second front-end configuration item and the second template placeholder.

[0155] Optionally, the data template includes: a first page cut, a second page cut, and a third page cut;

[0156] The first page cut includes a form name configuration item, an application card name configuration item, and a preset first type of configuration item, which includes mobile configuration items and unified configuration items;

[0157] The second page segmentation includes a second type of configuration items generated based on the table data entered in the first page segmentation and the first configuration correspondence. The first configuration correspondence includes the correspondence between the first type of configuration items and preset configuration items.

[0158] The third page cut includes a third type of configuration item generated based on the table data entered in the second page cut and the second configuration correspondence. The second configuration correspondence includes the correspondence between the second type of configuration item and the preset configuration item.

[0159] Optionally, the first front-end configuration item includes: a unified configuration item in the first type of configuration item, and a second type of configuration item and a third type of configuration item corresponding to the unified configuration item; the second front-end configuration item includes the first type of configuration item, and a second type of configuration item and a third type of configuration item corresponding to the first type of configuration item.

[0160] Optionally, the table data acquisition unit is used to acquire table data from a preset data template, including: the table data acquisition unit is specifically used for:

[0161] Obtain the table data of the first page segment, which includes the configuration value of the form name configuration item, the configuration value of the application card name configuration item, and the configuration values ​​of multiple first-type configuration items.

[0162] Based on the first configuration correspondence and the table data of the first page, a second type of configuration item is generated and displayed on the second page;

[0163] Obtain the table data of the second page, which includes the configuration values ​​of multiple configuration items of the second type;

[0164] Based on the second configuration correspondence and the table data of the second page, a third type of configuration item is generated and displayed on the third page;

[0165] Obtain the table data of the third page slice.

[0166] Optionally, after obtaining the table data from the preset data template, the method further includes:

[0167] Parse the target table data to obtain a first type of JSON object and a second type of JSON object. The first type of JSON object includes JSON objects converted from the configuration values ​​of the first front-end configuration items, and the second type of JSON object includes JSON objects converted from the configuration values ​​of the second front-end configuration items. Each JSON object includes a key name and a key value.

[0168] Optionally, the first variable correspondence includes the correspondence between key names and first template placeholders; the second variable correspondence includes the correspondence between key names and second template placeholders.

[0169] The first code file acquisition unit is used to import the configuration value of the first front-end configuration item into the first front-end code template based on the first variable correspondence to obtain the first front-end code file, including: The first code file acquisition unit is specifically used for:

[0170] Import the key-value pairs of the first type of JSON objects into the first template placeholders corresponding to the key names of the first type of JSON objects in the first front-end code template to generate the first front-end code file;

[0171] The second code file acquisition unit is used to import the configuration values ​​of the second front-end configuration items into the second front-end code template based on the second variable correspondence, thereby obtaining the second front-end code file. Specifically, the second code file acquisition unit is used for:

[0172] Import the key-value pairs of the second type of JSON object into the second template placeholders corresponding to the key names of the second type of JSON object in the second front-end code template to generate the second front-end code file.

[0173] Figure 7 A schematic diagram of the structure of the device for generating the front-end code file is shown. The device may include: at least one processor 701, at least one communication interface 702, at least one memory 703, and at least one communication bus 704.

[0174] In this embodiment of the application, the number of processor 701, communication interface 702, memory 703 and communication bus 704 is at least one, and processor 701, communication interface 702 and memory 703 communicate with each other through communication bus 704.

[0175] The processor 701 may be a central processing unit (CPU), an application-specific integrated circuit (ASIC), or one or more integrated circuits configured to implement embodiments of the present invention.

[0176] The memory 703 may include high-speed RAM, and may also include non-volatile memory, such as at least one disk storage device;

[0177] The memory stores a program, and the processor can execute the program stored in the memory to implement the various steps of the front-end code file generation method provided in this application embodiment, as follows:

[0178] Obtain table data from the preset data template as target table data. The target table data includes the configuration values ​​of the first front-end configuration item and the configuration values ​​of the second front-end configuration item.

[0179] Obtain a first front-end code template and a second front-end code template, wherein the first front-end code template includes a first template placeholder and the second front-end code template includes a second template placeholder;

[0180] Based on the first variable correspondence, the configuration value of the first front-end configuration item is imported into the first front-end code template to obtain the first front-end code file. The first variable correspondence is used to indicate the correspondence between the first front-end configuration item and the first template placeholder.

[0181] Based on the second variable correspondence, the configuration value of the second front-end configuration item is imported into the second front-end code template to obtain the second front-end code file. The second variable correspondence is used to indicate the correspondence between the second front-end configuration item and the second template placeholder.

[0182] Optionally, the data template includes: a first page cut, a second page cut, and a third page cut;

[0183] The first page cut includes a form name configuration item, an application card name configuration item, and a preset first type of configuration item, which includes mobile configuration items and unified configuration items;

[0184] The second page segmentation includes a second type of configuration items generated based on the table data entered in the first page segmentation and the first configuration correspondence. The first configuration correspondence includes the correspondence between the first type of configuration items and preset configuration items.

[0185] The third page cut includes a third type of configuration item generated based on the table data entered in the second page cut and the second configuration correspondence. The second configuration correspondence includes the correspondence between the second type of configuration item and the preset configuration item.

[0186] Optionally, the first front-end configuration item includes: a unified configuration item in the first type of configuration item, and a second type of configuration item and a third type of configuration item corresponding to the unified configuration item; the second front-end configuration item includes the first type of configuration item, and a second type of configuration item and a third type of configuration item corresponding to the first type of configuration item.

[0187] Optionally, retrieve table data from a preset data template, including:

[0188] Obtain the table data of the first page segment, which includes the configuration value of the form name configuration item, the configuration value of the application card name configuration item, and the configuration values ​​of multiple first-type configuration items.

[0189] Based on the first configuration correspondence and the table data of the first page, a second type of configuration item is generated and displayed on the second page;

[0190] Obtain the table data of the second page, which includes the configuration values ​​of multiple configuration items of the second type;

[0191] Based on the second configuration correspondence and the table data of the second page, a third type of configuration item is generated and displayed on the third page;

[0192] Obtain the table data of the third page slice.

[0193] Optionally, after obtaining the table data from the preset data template, the method further includes:

[0194] Parse the target table data to obtain a first type of JSON object and a second type of JSON object. The first type of JSON object includes JSON objects converted from the configuration values ​​of the first front-end configuration items, and the second type of JSON object includes JSON objects converted from the configuration values ​​of the second front-end configuration items. Each JSON object includes a key name and a key value.

[0195] Optionally, the first variable correspondence includes the correspondence between key names and first template placeholders; the second variable correspondence includes the correspondence between key names and second template placeholders.

[0196] The step of importing the configuration value of the first front-end configuration item into the first front-end code template based on the first variable correspondence to obtain the first front-end code file includes:

[0197] Import the key-value pairs of the first type of JSON objects into the first template placeholders corresponding to the key names of the first type of JSON objects in the first front-end code template to generate the first front-end code file;

[0198] The step of importing the configuration values ​​of the second front-end configuration items into the second front-end code template based on the second variable correspondence to obtain the second front-end code file includes:

[0199] Import the key-value pairs of the second type of JSON object into the second template placeholders corresponding to the key names of the second type of JSON object in the second front-end code template to generate the second front-end code file.

[0200] This application also provides a readable storage medium that can store a computer program suitable for processor execution. When the computer program is executed by the processor, it implements the various steps of the front-end code file generation method provided in this application, as follows:

[0201] Obtain table data from the preset data template as target table data. The target table data includes the configuration values ​​of the first front-end configuration item and the configuration values ​​of the second front-end configuration item.

[0202] Obtain a first front-end code template and a second front-end code template, wherein the first front-end code template includes a first template placeholder and the second front-end code template includes a second template placeholder;

[0203] Based on the first variable correspondence, the configuration value of the first front-end configuration item is imported into the first front-end code template to obtain the first front-end code file. The first variable correspondence is used to indicate the correspondence between the first front-end configuration item and the first template placeholder.

[0204] Based on the second variable correspondence, the configuration value of the second front-end configuration item is imported into the second front-end code template to obtain the second front-end code file. The second variable correspondence is used to indicate the correspondence between the second front-end configuration item and the second template placeholder.

[0205] Optionally, the data template includes: a first page cut, a second page cut, and a third page cut;

[0206] The first page cut includes a form name configuration item, an application card name configuration item, and a preset first type of configuration item, which includes mobile configuration items and unified configuration items;

[0207] The second page segmentation includes a second type of configuration items generated based on the table data entered in the first page segmentation and the first configuration correspondence. The first configuration correspondence includes the correspondence between the first type of configuration items and preset configuration items.

[0208] The third page cut includes a third type of configuration item generated based on the table data entered in the second page cut and the second configuration correspondence. The second configuration correspondence includes the correspondence between the second type of configuration item and the preset configuration item.

[0209] Optionally, the first front-end configuration item includes: a unified configuration item in the first type of configuration item, and a second type of configuration item and a third type of configuration item corresponding to the unified configuration item; the second front-end configuration item includes the first type of configuration item, and a second type of configuration item and a third type of configuration item corresponding to the first type of configuration item.

[0210] Optionally, retrieve table data from a preset data template, including:

[0211] Obtain the table data of the first page segment, which includes the configuration value of the form name configuration item, the configuration value of the application card name configuration item, and the configuration values ​​of multiple first-type configuration items.

[0212] Based on the first configuration correspondence and the table data of the first page, a second type of configuration item is generated and displayed on the second page;

[0213] Obtain the table data of the second page, which includes the configuration values ​​of multiple configuration items of the second type;

[0214] Based on the second configuration correspondence and the table data of the second page, a third type of configuration item is generated and displayed on the third page;

[0215] Obtain the table data of the third page slice.

[0216] Optionally, after obtaining the table data from the preset data template, the method further includes:

[0217] Parse the target table data to obtain a first type of JSON object and a second type of JSON object. The first type of JSON object includes JSON objects converted from the configuration values ​​of the first front-end configuration items, and the second type of JSON object includes JSON objects converted from the configuration values ​​of the second front-end configuration items. Each JSON object includes a key name and a key value.

[0218] Optionally, the first variable correspondence includes the correspondence between key names and first template placeholders; the second variable correspondence includes the correspondence between key names and second template placeholders.

[0219] The step of importing the configuration value of the first front-end configuration item into the first front-end code template based on the first variable correspondence to obtain the first front-end code file includes:

[0220] Import the key-value pairs of the first type of JSON objects into the first template placeholders corresponding to the key names of the first type of JSON objects in the first front-end code template to generate the first front-end code file;

[0221] The step of importing the configuration values ​​of the second front-end configuration items into the second front-end code template based on the second variable correspondence to obtain the second front-end code file includes:

[0222] Import the key-value pairs of the second type of JSON object into the second template placeholders corresponding to the key names of the second type of JSON object in the second front-end code template to generate the second front-end code file.

[0223] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0224] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. The same or similar parts between the various embodiments can be referred to each other.

[0225] The above description of the disclosed embodiments enables those skilled in the art to make or use this application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this application. Therefore, this application is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for generating front-end code files, characterized in that, include: Obtain table data from the preset data template as target table data. The target table data includes the configuration values ​​of the first front-end configuration item and the configuration values ​​of the second front-end configuration item. Obtain a first front-end code template and a second front-end code template, wherein the first front-end code template includes a first template placeholder and the second front-end code template includes a second template placeholder; Based on the first variable correspondence, the configuration value of the first front-end configuration item is imported into the first front-end code template to obtain the first front-end code file. The first variable correspondence is used to indicate the correspondence between the first front-end configuration item and the first template placeholder. Based on the second variable correspondence, the configuration value of the second front-end configuration item is imported into the second front-end code template to obtain the second front-end code file. The second variable correspondence is used to indicate the correspondence between the second front-end configuration item and the second template placeholder. The data template includes: a first page cut, a second page cut, and a third page cut; The first page cut includes a form name configuration item, an application card name configuration item, and a preset first type of configuration item, which includes mobile configuration items and unified configuration items; The second page segmentation includes a second type of configuration items generated based on the table data entered in the first page segmentation and the first configuration correspondence. The first configuration correspondence includes the correspondence between the first type of configuration items and preset configuration items. The third page cut includes a third type of configuration item generated based on the table data entered in the second page cut and the second configuration correspondence. The second configuration correspondence includes the correspondence between the second type of configuration item and the preset configuration item. The first front-end configuration item includes: a unified configuration item in the first type of configuration item, and a second type of configuration item and a third type of configuration item corresponding to the unified configuration item; the second front-end configuration item includes the first type of configuration item, and a second type of configuration item and a third type of configuration item corresponding to the first type of configuration item.

2. The method according to claim 1, characterized in that, The step of obtaining and inputting table data from a preset data template includes: Obtain the table data of the first page segment, which includes the configuration value of the form name configuration item, the configuration value of the application card name configuration item, and the configuration values ​​of multiple first-type configuration items. Based on the first configuration correspondence and the table data of the first page, a second type of configuration item is generated and displayed on the second page; Obtain the table data of the second page, which includes the configuration values ​​of multiple configuration items of the second type; Based on the second configuration correspondence and the table data of the second page, a third type of configuration item is generated and displayed on the third page; Obtain the table data of the third page slice.

3. The method according to claim 2, characterized in that, After obtaining and inputting table data from the preset data template, the process further includes: Parse the target table data to obtain a first type of JSON object and a second type of JSON object. The first type of JSON object includes JSON objects converted from the configuration values ​​of the first front-end configuration items, and the second type of JSON object includes JSON objects converted from the configuration values ​​of the second front-end configuration items. Each JSON object includes a key name and a key value.

4. The method according to claim 3, characterized in that, The first variable correspondence includes the correspondence between key names and the first template placeholder; the second variable correspondence includes the correspondence between key names and the second template placeholder. The step of importing the configuration value of the first front-end configuration item into the first front-end code template based on the first variable correspondence to obtain the first front-end code file includes: Import the key-value pairs of the first type of JSON objects into the first template placeholders corresponding to the key names of the first type of JSON objects in the first front-end code template to generate the first front-end code file; The step of importing the configuration values ​​of the second front-end configuration items into the second front-end code template based on the second variable correspondence to obtain the second front-end code file includes: Import the key-value pairs of the second type of JSON object into the second template placeholders corresponding to the key names of the second type of JSON object in the second front-end code template to generate the second front-end code file.

5. A device for generating front-end code files, characterized in that, include: The table data acquisition unit is used to acquire table data from a preset data template as target table data. The target table data includes the configuration values ​​of the first front-end configuration item and the configuration values ​​of the second front-end configuration item. The template acquisition unit is used to acquire a first front-end code template and a second front-end code template, wherein the first front-end code template includes a first template placeholder and the second front-end code template includes a second template placeholder. The first code file acquisition unit is used to import the configuration value of the first front-end configuration item into the first front-end code template based on the first variable correspondence relationship to obtain the first front-end code file. The first variable correspondence relationship is used to indicate the correspondence between the first front-end configuration item and the first template placeholder. The second code file acquisition unit is used to import the configuration value of the second front-end configuration item into the second front-end code template based on the second variable correspondence to obtain the second front-end code file. The second variable correspondence is used to indicate the correspondence between the second front-end configuration item and the second template placeholder. The data template includes: a first page cut, a second page cut, and a third page cut; The first page cut includes a form name configuration item, an application card name configuration item, and a preset first type of configuration item, which includes mobile configuration items and unified configuration items; The second page segmentation includes a second type of configuration items generated based on the table data entered in the first page segmentation and the first configuration correspondence. The first configuration correspondence includes the correspondence between the first type of configuration items and preset configuration items. The third page cut includes a third type of configuration item generated based on the table data entered in the second page cut and the second configuration correspondence. The second configuration correspondence includes the correspondence between the second type of configuration item and the preset configuration item. The first front-end configuration item includes: a unified configuration item in the first type of configuration item, and a second type of configuration item and a third type of configuration item corresponding to the unified configuration item; the second front-end configuration item includes the first type of configuration item, and a second type of configuration item and a third type of configuration item corresponding to the first type of configuration item.

6. A device for generating front-end code files, characterized in that, include: Memory and processor; The memory is used to store programs; The processor is used to execute the program to implement each step of the method for generating front-end code files as described in any one of claims 1 to 4.

7. A readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements each step of the method for generating a front-end code file as described in any one of claims 1 to 4.

Images