Html template reuse method, device and equipment based on multi-scene framework

Abstract

The application discloses an html template reuse method, device and equipment based on a multi-scene framework. The method comprises the following steps: obtaining template configuration parameters of a first html template by analyzing a first json file; determining each module contained in the first html template based on the template configuration parameters of the first html template, creating a module file for each module in the html template file, and writing corresponding module configuration content in each module file, wherein the module configuration content comprises first configuration content and second configuration content other than the first configuration content; replacing the second configuration content in each module file with a handlebars variable based on a handlebars template engine, updating the html template file, and obtaining a target html template file of the first html template; and copying the target html template file to a site server and a file server, so that the site server returns html page resources to a front end based on the target html template file, and the file server returns html page resources to a back end based on the target html template file.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of Internet, in particular to the technical field of front-end page development, and particularly relates to an HTML template reuse method and device based on a multi-scene framework, equipment and medium. BACKGROUND

[0002] Currently, when facing a file with text as the main content, although the interaction demand is low, the content amount is large, the developer not only needs to process a large amount of text data, but also needs to ensure that these data are presented in a clear and readable manner on the static page, which usually involves complex layout design, style adjustment and possible text processing logic (such as paging, searching, highlighting, etc.). Therefore, due to the richness and diversity of text content, the developer needs to spend a lot of time for the development of static pages to ensure the readability and user experience of the static pages.

[0003] In the development process, the developer often needs to use the same page template under different projects or frameworks. However, due to the incompatibility between different frameworks and the difference of template languages, it is often necessary to rewrite or modify the template code, and when multiple projects use the same template but are independently modified, version conflicts and maintenance difficulties are easily generated.

[0004] Therefore, it can be seen that the repeated development of the same template under different frameworks in the related technology not only wastes resources, but also may cause the problem of asynchronous modification in the subsequent version update and iteration process, thereby causing maintenance difficulties and increasing labor costs. SUMMARY

[0005] Therefore, the embodiments of the present application provide an HTML template reuse method and device based on a multi-scene framework, equipment, medium and product, which can reuse the same set of HTML templates under different use scene frameworks, reduce the development workload and improve the maintenance convenience.

[0006] In a first aspect, the embodiments of the present application provide a method for html template reuse based on a multi-scene framework, which comprises: in the case that a template identifier of a first html template is obtained, creating a html template file corresponding to the first html template based on the template identifier; obtaining a first json file corresponding to the first html template, and obtaining template configuration parameters corresponding to the first html template by parsing the first json file; based on the template configuration parameters corresponding to the first html template, determining each module contained in the first html template, creating a module file for each module in the html template file, and writing corresponding module configuration content in each module file, wherein the module configuration content comprises first configuration content and second configuration content other than the first configuration content, and the first configuration content is common component content; replacing the second configuration content in each module file with a handlebars variable based on a handlebars template engine, updating the html template file, and obtaining a target html template file corresponding to the first html template; and copying the target html template file to a site server and a file server, so that the site server returns html page resources to a front end based on the target html template file, and the file server returns html page resources to a back end based on the target html template file.

[0007] In a second aspect, the embodiments of the present application provide an apparatus for html template reuse based on a multi-scene framework, which comprises: a creating module configured to, in the case that a template identifier of a first html template is obtained, create a html template file corresponding to the first html template based on the template identifier; a parsing module configured to obtain a first json file corresponding to the first html template, and obtain template configuration parameters corresponding to the first html template by parsing the first json file; the creating module is further configured to, based on the template configuration parameters corresponding to the first html template, determine each module contained in the first html template, create a module file for each module in the html template file, and write corresponding module configuration content in each module file, wherein the module configuration content comprises first configuration content and second configuration content other than the first configuration content, and the first configuration content is common component content; an updating module configured to replace the second configuration content in each module file with a handlebars variable based on a handlebars template engine, update the html template file, and obtain a target html template file corresponding to the first html template; and a copying module configured to copy the target html template file to a site server and a file server, so that the site server returns html page resources to a front end based on the target html template file, and the file server returns html page resources to a back end based on the target html template file.

[0008] In a third aspect, the embodiments of the present application provide an electronic device, comprising a processor and a memory having computer program instructions stored therein; the processor implements the steps of the method for html template reuse based on a multi-scene framework according to the first aspect when executing the computer program instructions.

[0009] In a fourth aspect, the embodiments of the present application provide a computer readable storage medium, having computer program instructions stored thereon; the computer program instructions are executed by a processor to implement the steps of the method for html template reuse based on a multi-scene framework according to the first aspect.

[0010] In a fifth aspect, the embodiments of the present application provide a computer program product stored in a non-volatile storage medium; the computer program product is executed by a processor to implement the steps of the method for html template reuse based on a multi-scene framework according to the first aspect.

[0011] In a sixth aspect, the embodiments of the present application provide a chip, comprising a processor and a communication interface, the communication interface and the processor are coupled, the processor is used to run programs or instructions to implement the steps of the method for html template reuse based on a multi-scene framework according to the first aspect.

[0012] The application provides a multi-scene framework-based HTML template reuse method and device, equipment, medium and product. In the case that a template identifier of a first HTML template is acquired, an HTML template file corresponding to the first HTML template is created based on the template identifier; a first JSON file corresponding to the first HTML template is acquired, and template configuration parameters corresponding to the first HTML template are obtained by analyzing the first JSON file; based on the template configuration parameters corresponding to the first HTML template, each module contained in the first HTML template is determined, a module file is created for each module in the HTML template file, and corresponding module configuration content is written in each module file, wherein the module configuration content includes first configuration content and second configuration content other than the first configuration content, and the first configuration content is common component content; the second configuration content in each module file is replaced with a handlebars variable based on a handlebars template engine, the HTML template file is updated, and a target HTML template file corresponding to the first HTML template is obtained. In this way, the handlebars template engine is used to develop a highly reusable template, the underlying design of the template engine enables a set of templates to be executed in multiple development environments, realizes the universality of the same HTML template in different development environments (such as the back end and the front end), and makes the target HTML template file have compatibility. Based on this, after the target HTML template file with compatibility is copied to a site server and a file server, the site server can return HTML page resources to the front end based on the target HTML template file, and the file server can also return HTML page resources to the back end based on the target HTML template file, realizing effective reuse of the same set of HTML templates under different scene frameworks of the front end and the back end, thereby effectively reducing the workload of template repeated development, and ensuring the consistency of the same set of HTML templates in multiple development environments, reducing the modification asynchronization in the subsequent template version updating and iteration process, and thereby reducing the maintenance cost. BRIEF DESCRIPTION OF DRAWINGS

[0013] In order to more clearly illustrate the technical solutions of the embodiments of the application, the following briefly introduces the drawings in the embodiments of the application.

[0014] Figure 1 FIG. 1 is a flowchart of a multi-scene framework-based HTML template reuse method provided by an embodiment of the application;

[0015] Figure 2 FIG. 2 is an exemplary schematic diagram of a file structure of an HTML template file provided by an embodiment of the application;

[0016] Figure 3 FIG. 3 is a flowchart of a multi-scene framework-based HTML template reuse method provided by another embodiment of the application;

[0017] Figure 4 is a structural schematic diagram of an html template multiplexing device based on a multi-scene framework provided by an embodiment of the present application.

[0018] Figure 5 is a hardware structural schematic diagram of an electronic device provided by an embodiment of the present application. DETAILED DESCRIPTION

[0019] The principles and spirits of the present application will be described below with reference to a number of exemplary embodiments. It should be understood that the purpose of providing these embodiments is to make the principles and spirits of the present application clearer and more thorough, and to enable those skilled in the art to better understand and implement the principles and spirits of the present application. The exemplary embodiments provided herein are only a part of the embodiments of the present application, rather than all the embodiments. Based on the embodiments herein, all other embodiments obtained by those skilled in the art without creative labor are within the scope of protection of the present application.

[0020] In this document, terms such as first, second, third, etc. are used to distinguish one entity (or operation) from another entity (or operation), and do not imply or suggest any order or association between the entities (or operations).

[0021] The following briefly describes the concepts and technical terms that may be involved in the embodiments of the present application.

[0022] Hyper Text Markup Language (HTML) is a markup language that includes a series of tags, through which the formats of documents on the network can be unified, and scattered Internet resources can be connected into a logical whole. HTML is a basic technology, which is often used together with CSS and JavaScript by many websites to design the user interfaces of web pages, web page applications, and mobile applications. Web browsers can read HTML files and render them into visual web pages. HTML describes the structural semantics of a website with clues for presentation, making it a markup language rather than a programming language.

[0023] An HTML template file is a pre-designed HTML structure that contains placeholders or dynamic content insertion points. These placeholders allow developers to dynamically insert specific data or content into the template when building web pages, without having to write complete HTML code from scratch each time. HTML template files are widely used in web development, especially when using server-side programming languages (such as PHP, Python, Ruby, JavaScript, etc.) and front-end frameworks (such as React, Vue, Angular, etc.).

[0024] JavaScript Object Notation (JSON) is an open standard file format and data interchange format based on a subset of ECMAScript, which is easy for humans to read and write, and easy for machines to parse and generate. JSON is designed to be language-independent, and many programming languages support JSON format data exchange. JSON is a commonly used data format with multiple uses in electronic data exchange, including data exchange between web applications and servers.

[0025] vscode (Visual Studio Code) is a widely used open-source code editor known for its high degree of customizability and rich plugin ecosystem. "Open plugins" refers to the fact that vscode allows developers to create and publish their own plugins, which can extend the functionality of vscode to meet various programming needs.

[0026] Template engines allow developers to combine data with HTML using syntax to generate dynamic content. Take the Handlebars template engine as an example, Handlebars.js and Handlebars.java are different implementations of the same template engine, designed to allow the same template to be used and run in different programming language environments.

[0027] Large Language Model (LLM) is a deep learning-based natural language processing model, usually trained with a large number of parameters and data, capable of understanding and generating human language.

[0028] Git hooks are pre-defined scripts that automatically run when certain Git events occur (such as commit, push), used to perform custom operations such as code checking, testing, etc., to ensure that the submission meets the specification and quality requirements.

[0029] With reference to the accompanying drawings, the html template multiplexing method based on a multi-scene framework provided by the embodiments of the present application will be described in detail in combination with specific embodiments and application scenarios.

[0030] Figure 1 FIG. 1 is a flowchart of the html template multiplexing method based on a multi-scene framework provided by an embodiment of the present application. The execution subject of the html template multiplexing method based on a multi-scene framework can be a server in a business system, and the business system can further include a file server and a site server.

[0031] The html template multiplexing method based on a multi-scene framework provided by the present application will be described below by taking the server as an example. It should be noted that the above execution subject and application scenario do not constitute a limitation on the present application.

[0032] As shown in FIG. 2, the html template multiplexing method based on a multi-scene framework provided by an embodiment of the present application can include steps 110-150. Figure 1

[0033] Step 110, in the case where the template identifier of a first html template is acquired, creating an html template file corresponding to the first html template based on the template identifier;

[0034] Step 120, acquiring a first json file corresponding to the first html template, and obtaining template configuration parameters corresponding to the first html template by parsing the first json file;

[0035] Step 130, based on the template configuration parameters corresponding to the first html template, determining each module contained in the first html template, creating a module file for each module in the html template file, and writing corresponding module configuration content in each module file, the module configuration content including first configuration content and second configuration content other than the first configuration content, the first configuration content being common component content;

[0036] Step 140, replacing the second configuration content in each module file with a handlebars variable based on a handlebars template engine, updating the html template file, and obtaining a target html template file corresponding to the first html template;

[0037] Step 150, copying the target html template file to the site server and the file server, so that the site server returns html page resources to the front end based on the target html template file, and the file server returns html page resources to the back end based on the target html template file.

[0038] ​The html template reuse method based on the multi-scene framework provided in the embodiments of the present application adopts the handlebars template engine to develop highly reusable templates, and the underlying design of the template engine enables a set of templates to be executed in multiple development environments, realizes the universality of the same html template in different development environments (such as the back end and the front end), and enables the resulting target html template file to have compatibility. Based on this, after copying the target html template file with compatibility to the site server and the file server, the site server can return html page resources to the front end based on the target html template file, and the file server can also return html page resources to the back end based on the target html template file, realizing the effective reuse of the same set of html templates under different scene frameworks of the front end and the back end, thereby effectively reducing the workload of template repeated development, and ensuring the consistency of the same set of html templates in multiple development environments, reducing the modification out of synchronization in the subsequent template version update and iteration process, thereby reducing the maintenance cost.

[0039] The specific implementation of the above steps will be described in detail below in combination with specific embodiments.

[0040] In step 110, the html template file corresponding to the first html template is created based on the template identifier in the case where the template identifier of the first html template is acquired.

[0041] In step 110, the template identifier is used to uniquely identify the first html template, and the template identifier is input by the user. The html template file of the first html template is used to render the html page corresponding to the to-be-displayed content, which may be, for example, a report file, and the product ID corresponding to the report file can be used as the template identifier.

[0042] In some embodiments of the present application, the step 110 of creating the html template file corresponding to the html template based on the template identifier can specifically include:

[0043] The showInputBox is invoked through the Generate Files command registered in the vscode plug-in to prompt the user to input the template identifier;

[0044] A folder containing the template identifier is created under the reportTemplate directory, and an html template file is generated in the folder.

[0045] In particular, the vscode plugin is used to generate the vscode extension of the file, and by calling the vscode plugin, a series of files and folder structures can be generated according to the template identifier (productId) input by the user. The Generate Files command is commonly used in programming and software development environments to automatically generate a set of files based on templates or configurations, which may include source code files, configuration files, test files, etc. showInputBox is a commonly used function or method in programming, which is mainly used to pop up an input box for the user to input some values.

[0046] The showInputBox is invoked by the Generate Files command registered in the vscode plugin to prompt the user to input the template identifier. It is checked whether the template identifier is empty or starts with's' or 't', and the path (solutions or tools) is determined according to the first letter. s and t respectively represent solutions and tools, and different rules can be customized according to the business. Under the reportTemplate directory, a corresponding folder is created according to the path string (solutions or tools), and an html template file is generated, which is used for front-end and back-end sharing.

[0047] As shown in Figure 2 , the template identifier is productId, and under the reportTemplate directory, a corresponding folder can be created according to the path string (solutions or tools), and an html template file "[productId].html" is generated, which is a handlebars.js syntax file shared by the front-end and back-end.

[0048] In this way, the showInputBox can be invoked by the Generate Files command registered in the vscode plugin, and the user can quickly create the html template file of the first html template by inputting the template identifier in the showInputBox.

[0049] In some embodiments of the present application, the method can further include: creating a folder containing the template identifier under the reportTemplate / html directory according to the template identifier, and generating a basic html file for front-end testing.

[0050] The basic html file is the most basic structure for creating a web page, which usually includes the following main parts: document type declaration (Doctype), root element, header element and body element.

[0051] As shown inFigure 2 As shown, according to the template identifier productId, a folder [productId] containing the template identifier is created under the reportTemplate / html directory, and a basic html file ([productId].html) is generated, which is an html file after handlebars.js is used in the front-end test stage.

[0052] Step 120 is related to obtaining a first json file corresponding to the first html template, and obtaining the template configuration parameters corresponding to the first html template by parsing the first json file.

[0053] In step 120, the first json file is a data.json file corresponding to the first html template. The data.json file is a file containing structured data, which can be read by JavaScript and used to dynamically render the first html template. The first json file is used to define configuration information related to the first html template, which contains data used to fill the first html template, i.e., template configuration parameters. Therefore, by parsing the first json file, the template configuration parameters corresponding to the first html template can be obtained.

[0054] Step 130 is related to creating a module file for each module in the html template file based on the template configuration parameters corresponding to the first html template, and writing the corresponding module configuration content in each module file.

[0055] In step 130, the template configuration parameters can include a first configuration parameter and a second configuration parameter. The first configuration parameter is used to agree on the module structure in the first html template. Therefore, by parsing the first configuration parameter, the modules included in the first html template can be determined, so that the first html template can be previewed after the modules are combined by js logic. The second configuration parameter is used to represent the correspondence between the module file and the module configuration content, and the module configuration content is used to fill into a single module to configure the preview page of the single module. By reading and processing the data.json file, the module file is generated, and according to the template configuration parameters in the data.json file, multiple module files are generated in the specified path and the corresponding module configuration content is written.

[0056] The module configuration content includes first configuration content and second configuration content other than the first configuration content. The first configuration content is public component content, which refers to HTML, CSS and JavaScript code snippets that can be reused in multiple pages or applications in web development. These components improve code reusability, maintainability and development efficiency. The second configuration content other than the first configuration content can be changeable component content, i.e., component content that cannot be commonly reused.

[0057] For example, the first html template can include five modules: pageone, pagetwo, pagethree, pagefour and pagefive. As shown in Figure 2 The html template file can include the module files pageone.html, pagetwo.html, pagethree.html, pagefour.html and pagefive.html of the five modules.

[0058] In some embodiments of the present application, the above step 130 can be performed by calling a vscode plugin. Thus, the vscode plugin automatically generates the corresponding module file by parsing the data.json data, and the generated module file is pre-set with module configuration content and follows the pre-set folder structure and field naming rules. The developer only needs to focus on the implementation of the business logic and does not need to pay attention to the specific process of file generation, thereby simplifying and optimizing the creation process of the business template. The plugin is suitable for front-end and back-end developers, and only needs to install the corresponding IDE and plugin when used.

[0059] In some embodiments of the present application, the module configuration content can be pre-written in the vscode plugin by the developer. Thus, when creating a module file for each module by calling the vscode plugin, the module configuration content can be written into the corresponding module file based on the template configuration parameters.

[0060] In addition, after the above step 130 and before step 140, the developer can also adjust the module configuration content written in each module file according to specific business rules.

[0061] In some embodiments of the present application, the vscode plugin can be downloaded, and the above steps 110 to 130 can be performed by calling the vscode plugin to create the html template file.

[0062] Exemplarily, a command interface is called up by ctrl+shft+p, and input of Generate Files and enter calls up an operation of inputting a product ID. After the product ID is input and enter is pressed, an html template file can be generated. After all files and folders are created, a user is prompted by showInformationMessage that "file creation is successful".

[0063] The step 140 involves replacing the second configuration content in each module file with a handlebars variable based on a handlebars template engine, updating the html template file, and obtaining a target html template file corresponding to the first html template.

[0064] In the step 140, the second configuration content in the source code (html template file) is replaced with a structured data structure under the action of a Handlebars.js compiler. These data structures can be directly used for variable replacement in a Handlebars template.

[0065] Specifically, the html template file can be template-parsed based on a handlebars template engine, an abstract syntax tree (AST) is constructed, and in a transformer stage of converting the AST into a newAST, the second configuration content in each module file is identified by traversing the AST and is replaced with a handlebars variable.

[0066] Exemplarily, the original text content in the html template file can be replaced with handlebars data by the step 140, for example, from " Text content " to " {{Text content corresponds to the unique ID}} ". The "unique ID" is a handlebars variable, and the "text content" is stored in a second json file and referenced by the handlebars variable, for example, {{text content corresponding unique ID:text content}}.

[0067] In some embodiments of the present application, Figure 3 is a flowchart of a method for html template reuse based on a multi-scene framework provided by another embodiment of the present application. The step 140 of replacing the second configuration content in each module file with a handlebars variable based on a handlebars template engine can include Figure 3 steps 310-330 shown in the figure.

[0068] Step 310, for each module file, in the case of obtaining the abstract syntax tree corresponding to the module file by using the handlebars template engine, querying the first node with the node type of contentStatement from the AST;

[0069] Step 320, parsing the string corresponding to the first node by using the htmlparser2, screening the nodes with the node type of text in the first node, and obtaining the second node;

[0070] Step 330, determining that the string corresponding to the second node is the second configuration content.

[0071] Specifically, first, the handlebars template engine is used to perform template parsing on the html template file, parse the template string, identify the variable interpolation ({{variable}}), block helper (block helpers), partial (partials), and other structures therein, and construct an abstract syntax tree (AST). The abstract syntax tree is an abstract representation of the syntax structure of the source code, which represents the syntax structure of the programming language in a tree form, and each node on the tree represents a structure in the source code.

[0072] The nodes in the AST can involve different node types, such as contentStatement, unctionDefinition, variableDeclaration, etc. By traversing the AST, the nodes with the node type of contentStatement can be screened from all the nodes in the AST to obtain the first node.

[0073] The htmlparser2 is a Node.js library for parsing HTML, which does not directly work as a template engine, but can be used to parse HTML content. Therefore, the string corresponding to the first node can be parsed by the htmlparser2 template engine parser, the nodes with the node type of pure text text in the first node are screened, and the second node is obtained.

[0074] In the embodiments of the present application, for each module in the first html template, the second configuration content in the module file except the common component content is effectively extracted in combination with the handlebars template engine and the htmlparser2, the part of the changing component content in the html template file is directly replaced by the handlebars variable, the subsequent changing component content is presented in the form of referencing the second json file through the handlebars variable, and only the common component content which can be commonly reused is reserved in the target html template file. Subsequently, when the target html template file is reused, only the second json file needs to be modified accordingly, which facilitates the direct reuse of the common component content and the extraction and maintenance of the common module.

[0075] In some embodiments of the present application, the step 310 of querying the first node of the node type contentStatement from the AST can specifically include:

[0076] The first node of the node type contentStatement is queried from the AST by using the visitor mode of the AST.

[0077] Specifically, the AST is a tree-shaped data structure in which each node represents an element (such as a variable, an operator, a statement, etc.) in the source code, and the Handlebars template engine does not directly provide a visitor mode to traverse its internal AST. Therefore, by writing a visitor, the AST can be traversed and a specific operation can be performed on each node, so as to query the first node of the node type contentStatement.

[0078] In some embodiments of the present application, the html template file further includes the second json file corresponding to each module file. After determining that the string corresponding to the second node is the second configuration content in the step 330, the method can further include the following steps:

[0079] A handlebars variable is generated based on the string corresponding to the second node, and the second configuration content in the module file is replaced by the handlebars variable;

[0080] The second configuration content is stored in the second json file as the original data referenced by the handlebars variable.

[0081] Specifically, the identifier can be generated as a handlebars variable based on the string corresponding to the second node by using an identifier generation algorithm, for example, any one of a Universally Unique Identifier (UUID), a Globally Unique Identifier (GUID) and the like generated based on the string corresponding to the second node is taken as the handlebars variable, and the identifier generation algorithm is not limited in the present application. The handlebars variable (key) and the second configuration content (value) are stored in the second json file in the form of a key-value pair. The second json file is a data.json file used to store the second configuration content of each module file, for example Figure 2 as shown in the "data.json".

[0082] In the embodiments of the present application, the handlebars variable can support multiple development language environments and scene frameworks, such as Web front-end development, Backbone.js, Ember.js, micro-service architecture, vue, and front-end and back-end separation projects, etc. In the front-end and back-end separation project, Handlebars can be used as a front-end template engine and seamlessly integrated with the Spring Boot application of the back-end to provide efficient front-end rendering capability.

[0083] Based on this, in the scene where vue is used in the front-end and Spring Boot is used in the back-end, after the second node is found, the handlebars variable is generated based on the string corresponding to the second node, and the second configuration content in the module file is replaced with the handlebars variable, so that the updated target html template file can support vue and Spring Boot at the same time, and therefore the same set of target html template file can be reused by the site server and the file server to return the page resource corresponding to the first html template to the front-end and the back-end respectively. In this way, for each html template, the developer only needs to develop one set of corresponding target html template file, and does not need to develop two different sets of html template files for the front-end and the back-end, and through template reuse, the amount of repeated code can be significantly reduced, the development efficiency can be improved, and the development cycle can be shortened.

[0084] As a specific example, the above step 140 can specifically include: finding the contentStatement node (containing text content and other content) by using the visitor traverser of the AST of the handlebars template engine, processing the value of the contentStatement node by using the htmlparser2 template engine parser, filtering out the nodes of the node type text from the contentStatement node by using the custom transformer method, and the purpose is to generate a unique ID as a handlebars variable according to the node content, and replace the original node value (the second configuration content) by using the handlebars variable. At this time, the newAST has been generated, and on this basis, the newAST needs to be converted into the data form of the original contentStatement. At this time, by traversing the nodes, the corresponding node data is returned according to the node type.

[0085] In some embodiments of the present application, the above-mentioned second configuration content can contain dynamic content related to business logic and fixed content other than dynamic content, and the dynamic content and the fixed content are stored separately in different second json files.

[0086] Regarding step 150, the target html template file is copied to the site server and the file server, so that the site server returns html page resources corresponding to the target html template file to the front end, and the file server returns html page resources corresponding to the target html template file to the back end.

[0087] In step 150, after copying the target html template file to the site server and the file server, the site server can return html page resources corresponding to the first html template to the front end based on the target html template file, and the file server can return html page resources corresponding to the first html template to the back end based on the target html template file, so that the front end and the back end render consistent html pages based on the same html page resources.

[0088] In some embodiments of the present application, the above-mentioned step 150 of copying the target html template file to the site server and the file server can specifically include:

[0089] By using the hooks function of Git, after detecting the commit or push operation of the developer, the target html template file is automatically copied to the file server and the site server.

[0090] Specifically, the specified file in the Git repository, i.e., the target html template file, is automatically detected and copied to a predefined target path, and the script defines two target paths, namely a file server shared folder and a site server shared folder, and dynamically creates a target directory structure according to the relative path of the file. For each changed file, the script creates a corresponding directory structure in the target path and copies the file to the target location.

[0091] In the embodiments of the present application, the Hooks function of Git is a mechanism built into Git, which allows developers to automatically execute custom scripts when Git performs certain events (such as commit, push, etc.). In backend development, the required files are obtained through a file server, and the front end is accessed directly through a site. Based on this, by using the hooks function of Git, after the commit or push operation of the developer, the related files are automatically copied to the file server and the site server, thereby improving the efficiency of development and testing and ensuring the convenience of the development process.

[0092] In some embodiments of the present application, in the above step 150, the Shell script can be written to realize automatic file copying. The script uses the Git command git diff--name-only HEAD~1HEAD to obtain the file change list of the last commit according to the specific commit information condition (such as the COPY_FILES keyword).

[0093] In this way, it can be accurately identified which files have changed in this commit, thereby ensuring that only related files are copied.

[0094] In some embodiments of the present application, in the above step 150, the script judges whether the commit information of the last commit (for example, using git log-1--pretty=%B) contains a specified keyword (such as COPY_FILES) by parsing the commit information.

[0095] In this way, only the commits that meet the conditions will trigger the file copying operation, thereby avoiding unnecessary file operations.

[0096] In some embodiments of the present application, in the above step 150, in order to ensure that only the files in a specific directory are copied, the script uses a conditional judgment statement (such as [["FILE"==reportTemplate / *]]), which only processes files located in a specific folder such as the reportTemplate directory and its subdirectories.

[0097] In this way, unnecessary files can be effectively filtered out, thereby improving the execution efficiency and accuracy of the script.

[0098] In some embodiments of the present application, in the above step 150, the script contains error handling logic (such as checking whether a file exists) during execution, and prints relevant log information (such as Copying FILE to TARGET_DIR_1) before copying the file.

[0099] In this way, it can help users quickly locate the problem and ensure the transparency and traceability of the copy operation.

[0100] In some embodiments of the present application, after obtaining the target html template file corresponding to the first html template in the above step 140, the following step can be further included:

[0101] On the basis of the target html template file corresponding to the first html template, each module file contained in the target html template file is updated based on the template configuration parameters corresponding to the second html template, and the second configuration content in the module file is updated, to obtain the target html template file corresponding to the second html template.

[0102] In this way, the target html template file corresponding to the first html template can be directly reused, and on this basis, the module file contained in the target html template file is adjusted based on the template configuration parameters corresponding to the second html template, and the second configuration content in the module file is updated, to obtain the target html template file corresponding to the second html template, while the first configuration content (common component content) in the module file can be directly reused, reducing the code development amount and improving the static page development efficiency.

[0103] In some embodiments of the present application, a static language file (such as {productId}_language_ZH.json) can be created under the reportTemplate / tools / language directory, and the initial content is an empty JSON object. When the compiler performs lexical and syntax analysis, the Babel plugin will perform syntax tree parsing at the same time. When the plugin detects the multi-language identifier (such as static), it will trigger the corresponding processing logic. Fixed language content extraction and storage: the plugin will name the parsed fixed language content according to the predefined structure format (such as {module name:{pinyin(10)_md5(5)}}) in the transform phase, and write these contents into the corresponding JSON file.

[0104] In some embodiments of the present application, the zhipu large model is called by the vscode plug-in, the prompt of the star model structure (STAR model is a structured method for answering behavioral interview questions) is injected, the large model reads the generated Chinese json file and translates the corresponding json value into the selected language, and a new file with a conventional file name is created and written.

[0105] The prompt is as follows:

[0106] Please read the following Chinese JSON file and translate each key-value pair in the file into the target language (e.g. English, French, Spanish, etc.) according to the user's selection. Then, generate a new JSON file with a file name agreed by the user (e.g. translations.json). The new JSON file should have the same structure as the original file, except that the key-value pairs are translated into the target language.

[0107] For example, if the original JSON file content is as follows:

[0108]

[0109] And the user's selected language is English, then the generated new JSON file content should be:

[0110]

[0111] Please ensure that the translation result is accurate and saved to the designated file.

[0112] In this way, the target HTML template file of the present application also supports internationalization translation function based on large model technology, which can automatically translate text into multiple languages to meet the needs of globalization.

[0113] Corresponding to the method embodiments of the present application, the present application also provides an HTML template reuse device for a multi-scene framework.

[0114] Figure 4 is a structural schematic diagram of an HTML template reuse device for a multi-scene framework provided by an embodiment of the present application. As shown in Figure 4 The HTML template reuse device 400 for a multi-scene framework can include a creation module 410, a parsing module 420, an update module 430, and a copying module 440.

[0115] The creating module 410 is configured to create an html template file corresponding to the first html template based on the template identifier in a case where the template identifier of the first html template is acquired; the parsing module 420 is configured to acquire a first json file corresponding to the first html template, and obtain template configuration parameters corresponding to the first html template by parsing the first json file; the creating module 410 is further configured to determine each module contained in the first html template based on the template configuration parameters corresponding to the first html template, create a module file for each module in the html template file, and write corresponding module configuration content in each module file, wherein the module configuration content includes first configuration content and second configuration content other than the first configuration content, and the first configuration content is common component content; the updating module 430 is configured to replace the second configuration content in each module file with a handlebars variable based on a handlebars template engine, update the html template file, and obtain a target html template file corresponding to the first html template; and the copying module 440 is configured to copy the target html template file to a site server and a file server, so that the site server returns html page resources to a front end based on the target html template file, and the file server returns html page resources to a back end based on the target html template file.

[0116] The device for HTML template multiplexing in a multi-scene framework provided in the embodiments of the present application creates an html template file corresponding to a first html template based on a template identifier of the first html template when the template identifier is acquired; acquires a first json file corresponding to the first html template and obtains template configuration parameters corresponding to the first html template by parsing the first json file; determines each module included in the first html template based on the template configuration parameters corresponding to the first html template, creates a module file for each module in the html template file, and writes corresponding module configuration content in each module file, wherein the module configuration content includes first configuration content and second configuration content other than the first configuration content, and the first configuration content is common component content; replaces the second configuration content in each module file with a handlebars variable based on a handlebars template engine, updates the html template file, and obtains a target html template file corresponding to the first html template. In this way, a handlebars template engine is used to develop a highly reusable template, the underlying design of the template engine enables a set of templates to be executed in multiple development environments, the universality of the same html template in different development environments (such as the back end and the front end) is achieved, and the obtained target html template file has compatibility. Based on this, after the target html template file with compatibility is copied to a site server and a file server, the site server can return html page resources to the front end based on the target html template file, and the file server can also return html page resources to the back end based on the target html template file, effectively multiplexing the same set of html templates in different scene frameworks of the front end and the back end, thereby effectively reducing the workload of template repeated development, and ensuring the consistency of the same set of html templates in multiple development environments, reducing the modification asynchronization in the subsequent template version update and iteration process, and thereby reducing the maintenance cost.

[0117] In some embodiments of the present application, the updating module includes: a query unit, configured to, for each module file, query a first node with a node type of contentStatement from an abstract syntax tree (AST) corresponding to the module file by using a handlebars template engine; a screening unit, configured to parse a string corresponding to the first node by using htmlparser2, screen a node with a node type of text in the first node, and obtain a second node; and a determination unit, configured to determine that the string corresponding to the second node is the second configuration content.

[0118] In some embodiments of the present application, the query unit is specifically configured to query the first node with the node type of contentStatement from the AST by using a visitor mode of the AST.

[0119] In some embodiments of the present application, the html template file further includes a second json file corresponding to each module file, and further includes: a replacing module, configured to, after determining that the string corresponding to the second node is the second configuration content, generate a handlebars variable based on the string corresponding to the second node, and replace the second configuration content in the module file with the handlebars variable; and a storage module, configured to store the second configuration content as original data referenced by the handlebars variable in the second json file.

[0120] In some embodiments of the present application, the second configuration content includes dynamic content related to business logic, and fixed content other than the dynamic content, and the dynamic content and the fixed content are stored separately in different second json files.

[0121] In some embodiments of the present application, after obtaining the target html template file corresponding to the first html template, the method further includes: updating each module file contained in the target html template file based on the template configuration parameter corresponding to the second html template, and updating the second configuration content in the module file, to obtain the target html template file corresponding to the second html template.

[0122] In some embodiments of the present application, the method for creating an html template file corresponding to an html template based on a template identifier includes: invoking showInputBox through the GenerateFiles command registered in the vscode plug-in to prompt the user to input the template identifier; and creating a folder containing the template identifier under the reportTemplate directory, and generating an html template file in the folder.

[0123] In some embodiments of the present application, the method for copying the target html template file to the site server and the file server includes: utilizing the hooks function of Git to automatically copy the target html template file to the file server and the site server after detecting the commit or push operation of the developer.

[0124] The html template reuse device based on the multi-scene framework provided by the embodiments of the present application can implement Figures 1-3 the processes implemented by the service platform in the method embodiments, and can achieve the same technical effects. To avoid repetition, details are not described here.

[0125] Figure 5 is a schematic diagram of a hardware structure of an electronic device provided by an embodiment of the present application.

[0126] As Figure 5 shown, the electronic device 500 includes a memory 501, a processor 502, and a computer program stored on the memory 501 and executable on the processor 502.

[0127] In one example, the processor 502 described above can include a central processing unit (CPU), or an application specific integrated circuit (ASIC), or can be configured to implement one or more integrated circuits that embody one or more embodiments of the present application.

[0128] The memory 501 can include a read-only memory (ROM), a random access memory (RAM), a disk storage medium device, an optical storage medium device, a flash memory device, an electrical, optical, or other physical / tangible memory storage device. Thus, generally, the memory includes one or more tangible (non-transitory) computer-readable storage media (e.g., memory devices) encoded with software comprising computer-executable instructions that, when executed (e.g., by one or more processors), are operable to perform the operations described with reference to the method of reusing HTML templates based on a multi-scenario framework in accordance with embodiments of the first aspect of the present application.

[0129] The processor 502 runs a computer program corresponding to the executable program code stored in the memory 501 to implement the method of reusing HTML templates based on a multi-scenario framework in embodiments of the first aspect described above, by reading the executable program code.

[0130] In some examples, the electronic device 500 can further include a communication interface 503 and a bus 510. As Figure 5 shown, the memory 501, the processor 502, and the communication interface 503 are connected through the bus 510 and complete communication among each other.

[0131] The communication interface 503 is mainly used to realize the communication between various modules, devices, units, and / or equipment in embodiments of the present application. Input devices and / or output devices can also be accessed through the communication interface 503.

[0132] Bus 510 includes hardware, software, or both, to couple components of electronic device 500 to each other and to couple electronic device 500 to other systems or devices. While Fig. 1 shows bus 510 as a single component, bus 510 can include multiple busses or other interconnection media that each couple components to each other and to other systems or devices. For example, bus 510 can include an Accelerated Graphics Port (AGP) or other graphics bus, an Enhanced Industry Standard Architecture (EISA) bus, a Front Side Bus (FSB), a Hyper Transport (HT) interconnect, an Industry Standard Architecture (ISA) bus, an InfiniBand interconnect, a Low Pin Count (LPC) bus, a memory bus, a Micro Channel Architecture (MCA) bus, a Peripheral Component Interconnect (PCI) bus, a PCI-Express (PCI-E) bus, a Serial Advanced Technology Attachment (SATA) bus, a Video Electronics Standards Association Local (VLB) bus, or another suitable bus or interconnect in other embodiments. Bus 510 can include one or more buses, where appropriate. Although this application describes and shows a particular bus, this application contemplates any suitable bus or interconnect.

[0133] The electronic device provided by the embodiments of the present application can realize Figures 1-3 The method embodiments of the present application can realize the various processes realized by the electronic device, and can realize the same technical effects. To avoid repetition, the details are not described here.

[0134] In combination with the method for multiplexing html templates based on a multi-scene framework in the above embodiments, the embodiments of the present application can provide a computer storage medium to realize. The computer storage medium has computer program instructions stored thereon; the computer program instructions are executed by a processor to realize the steps of any one of the methods for multiplexing html templates based on a multi-scene framework in the above embodiments.

[0135] In combination with the above-described html template reuse method based on the multi-scenario framework in the embodiments, a computer program product can be provided to implement the method. The (computer) program product is stored in a non-volatile storage medium, and when executed by at least one processor, the program product implements the steps of any of the above-described html template reuse method based on the multi-scenario framework.

[0136] The embodiments of the present application further provide a chip including a processor and a communication interface, the communication interface being coupled to the processor, the processor being configured to execute programs or instructions to implement the processes of the above-described html template reuse method based on the multi-scenario framework, and achieve the same technical effects. To avoid repetition, details are not described herein.

[0137] It should be understood that the chip mentioned in the embodiments of the present application can also be referred to as a system-level chip, a system chip, a chip system, or a system-on-chip, etc.

[0138] It should be noted that the present application is not limited to the specific configurations and processes described above and shown in the drawings. For the sake of brevity, detailed descriptions of well-known methods are omitted herein. In the above-described embodiments, several specific steps are described and shown as examples. However, the processes of the present application are not limited to the specific steps described and shown, and those skilled in the art can make various changes, modifications, and additions, or change the order of the steps, after understanding the spirit of the present application.

[0139] The functional blocks shown in the structural block diagrams described above can be implemented as hardware, software, firmware, or a combination thereof. When implemented in hardware, it can be, for example, an electronic circuit, an application specific integrated circuit (ASIC), appropriate firmware, a plug-in, a functional card, etc. When implemented in software, the elements of the present application are program or code segments used to perform the required tasks. The program or code segments can be stored in a machine-readable medium or transmitted through a data signal carried in a carrier wave over a transmission medium or communication link. The "machine-readable medium" can include any medium capable of storing or transmitting information. Examples of the machine-readable medium include electronic circuits, semiconductor memory devices, ROM, flash memory, erasable ROM (EROM), floppy disks, CD-ROMs, optical disks, hard disks, optical fiber media, radio frequency (RF) links, etc. The code segments can be downloaded via a computer network such as the Internet, an intranet, etc.

[0140] It is also need to be explained that the example embodiments mentioned in the present application describe some methods or systems based on a series of steps or devices. However, the present application is not limited to the order of the above steps, that is, the steps can be performed in the order mentioned in the embodiments, can be different from the order in the embodiments, or several steps are performed simultaneously.

[0141] The computer program instructions can also be loaded onto a computer, other programmable data processing apparatus, or other processing device to cause a series of operational steps to be performed on the computer, other programmable apparatus or other processing device to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide processes for implementing the functions / acts specified in the flowchart and / or block diagram block or blocks.

[0142] The above only specifically describes the embodiments of the present application, and those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the above-mentioned system, module and unit can refer to the corresponding process in the foregoing method embodiments, which will not be described herein. It should be understood that the protection scope of the present application is not limited to this, and any person skilled in the art can easily think of various equivalent modifications or replacements within the technical range disclosed in the present application, and these modifications or replacements shall be covered within the protection scope of the present application.

Claims

1. A method for html template reuse based on multi-scenario framework, characterized in that, The method comprises the following steps: In the case that the template identifier of the first HTML template is acquired, an HTML template file corresponding to the first HTML template is created based on the template identifier; A first JSON file corresponding to the first HTML template is acquired, and template configuration parameters corresponding to the first HTML template are obtained by parsing the first JSON file; After determining each module contained in the first HTML template based on the template configuration parameters corresponding to the first HTML template, a module file is created for each module under the same directory of the HTML template file, and corresponding module configuration content is written in each module file, wherein the same directory is solutions / or tools / , and the module configuration content comprises first configuration content and second configuration content other than the first configuration content, and the first configuration content is common component content; The second configuration content in the module files is replaced with a handlebars variable based on a handlebars template engine, and the HTML template file is updated to obtain a target HTML template file corresponding to the first HTML template; The target HTML template file is copied to a site server and a file server, so that the site server returns an HTML page resource to a front end based on the target HTML template file, and the file server returns the HTML page resource to a back end based on the target HTML template file.

2. The method of claim 1, wherein, The second configuration content in the module files is replaced with a handlebars variable based on a handlebars template engine, comprising: For each module file, in the case that an abstract syntax tree (AST) corresponding to the module file is acquired by using a handlebars template engine, a first node with a node type of contentStatement is queried from the AST; A string corresponding to the first node is parsed by using htmlparser2, and a second node with a node type of text is screened from the first node to obtain the second node; It is determined that the string corresponding to the second node is the second configuration content.

3. The method of claim 2, wherein, The first node with the node type of contentStatement is queried from the AST, comprising: The first node with the node type of contentStatement is queried from the AST by using a visitor mode of the AST.

4. The method of claim 2, wherein, The same directory further comprises a second JSON file corresponding to the module files, and after it is determined that the string corresponding to the second node is the second configuration content, the method further comprises: A handlebars variable is generated based on the string corresponding to the second node, and the second configuration content in the module file is replaced with the handlebars variable; The second configuration content is stored in the second JSON file as original data referenced by the handlebars variable.

5. The method of claim 4, wherein, The second configuration content includes dynamic content related to business logic and fixed content other than the dynamic content, and the dynamic content and the fixed content are stored separately in different second json files.

6. The method of claim 1, wherein, After obtaining the target html template file corresponding to the first html template, further comprising: Based on the target html template file corresponding to the first html template, based on the template configuration parameters corresponding to the second html template, each module file located in the same directory as the target html template file is updated, and the second configuration content in the module file is updated.

7. The method of claim 1, wherein, Creating an html template file corresponding to the html template based on the template identifier, comprising: Prompt the user to input the template identifier by invoking showInputBox through the Generate Files command registered in the vscode plug-in; Create a folder containing a template identifier under the reportTemplate directory, and generate an html template file in the folder.

8. The method of claim 1, wherein, Copying the target html template file to the site server and the file server, comprising: Using the hooks function of Git, after detecting the commit or push operation of the developer, automatically copying the target html template file to the file server and the site server.

9. A device for html template reuse based on multi-scenario framework, characterized in that, Comprising: A creation module for creating an html template file corresponding to the first html template based on the template identifier of the first html template when the template identifier is obtained; A parsing module for obtaining a first json file corresponding to the first html template, and obtaining template configuration parameters corresponding to the first html template by parsing the first json file; The creation module is further configured to determine each module included in the first html template based on the template configuration parameters corresponding to the first html template, create a module file for each module in the same directory as the html template file, and write corresponding module configuration content in each module file, wherein the same directory is solutions / or tools / , and the module configuration content includes first configuration content and second configuration content other than the first configuration content, and the first configuration content is common component content; An update module for replacing the second configuration content in the module file with a handlebars variable based on the handlebars template engine to update the html template file and obtain a target html template file corresponding to the first html template; A copy module for copying the target html template file to the site server and the file server, so that the site server returns html page resources to the front end based on the target html template file, and the file server returns the html page resources to the back end based on the target html template file.

10. An electronic device, comprising: The electronic device comprises a processor and a memory storing computer program instructions; the electronic device implements the method according to any one of claims 1-8 when executing the computer program instructions.

Images