Multi-scene framework-based html template multiplexing method, device and equipment

Abstract

The invention discloses an html template multiplexing method, device and equipment based on a multi-scene framework. Comprising the following steps: analyzing a first json file to obtain template configuration parameters of a first html template; based on the template configuration parameters of 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 comprising first configuration content and second configuration content except the first configuration content; on the basis of a handlebars template engine, replacing the second configuration content in each module file with a handlebars variable, and updating the html template file to obtain 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 rear end based on the target html template file.

Description

Technical Field

[0001] The present application relates to the field of Internet technology, in particular to the field of front-end page development technology, and in particular to a method, device, equipment and medium for reusing HTML templates based on a multi-scenario framework. Background Art

[0002] Currently, when faced with a document with text as the main content, although its interactive requirements are low, the content volume is large. Developers not only have to process a large amount of text data, but also ensure that this data is presented in a clear and readable way on the static page, which usually involves complex layout design, style adjustment, and possible text processing logic (such as paging, search, highlighting, etc.). Therefore, due to the richness and diversity of text content, developers need to spend a lot of time on the development of static pages to ensure the readability and user experience of static pages.

[0003] During the development process, developers often need to use the same page template in different projects or frameworks. However, due to the incompatibility between different frameworks and the differences in template languages, template codes often need to be rewritten or modified. When multiple projects use the same template but modify it independently, version conflicts and maintenance difficulties are likely to occur.

[0004] It can be seen from this that in related technologies, repeatedly developing the same template under different frameworks not only wastes resources, but may also cause problems of asynchronous modifications during subsequent version updates and iterations, which in turn causes maintenance difficulties and increases labor costs. Summary of the invention

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

[0006] In a first aspect, an embodiment of the present application provides an HTML template reuse method based on a multi-scenario framework, the method comprising: upon obtaining a template identifier of a first HTML template, creating an 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; after determining each module included in the first HTML template based on the template configuration parameters corresponding to 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 includes a first configuration content and a second configuration content other than the first configuration content, and the first configuration content is a common component content; based on a handlebars template engine, replacing the second configuration content in each module file with a handlebars variable, updating the HTML template file, and obtaining a target HTML template file corresponding to the first HTML template; 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, an embodiment of the present application provides an HTML template reuse device based on a multi-scenario framework, the device comprising: a creation module, for creating an HTML template file corresponding to the first HTML template based on the template identifier when a template identifier of the first HTML template 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, for determining the modules included in the first HTML template based on the template configuration parameters corresponding to 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 includes a first configuration content and a second configuration content other than the first configuration content, and the first configuration content is a common component content; an update module, for 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; a copy module, for copying the target HTML template file to a site server and a 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.

[0008] In a third aspect, an embodiment of the present application provides an electronic device, comprising: a processor and a memory storing computer program instructions; when the processor executes the computer program instructions, the steps of the HTML template reuse method based on a multi-scene framework as in the first aspect are implemented.

[0009] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium having computer program instructions stored thereon. When the computer program instructions are executed by a processor, the steps of the HTML template reuse method based on a multi-scenario framework as in the first aspect are implemented.

[0010] In a fifth aspect, an embodiment of the present application provides a computer program product, which is stored in a non-volatile storage medium. When the computer program product is executed by a processor, it implements the steps of the HTML template reuse method based on a multi-scenario framework as in the first aspect.

[0011] In a sixth aspect, an embodiment of the present application provides a chip, which includes a processor and a communication interface, wherein the communication interface and the processor are coupled, and the processor is used to run programs or instructions to implement the steps of the HTML template reuse method based on a multi-scenario framework as in the first aspect.

[0012] The present application provides an html template reuse method, device, equipment, medium and product based on a multi-scenario framework. When a template identifier of a first html template is obtained, 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 obtained, and template configuration parameters corresponding to the first html template are obtained by parsing the first json file; after determining each module included 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 in the html template file, and corresponding module configuration content is written in each module file, wherein the module configuration content includes a first configuration content and a second configuration content other than the first configuration content, and the first configuration content is a common component content; based on the handlebars template engine, the second configuration content in each module file is replaced with a handlebars variable, and the html template file is updated to obtain a target html template file corresponding to the first html template. In this way, a highly reusable template is developed using the handlebars template engine, and the underlying design of the template engine enables a set of templates to be executed in multiple development environments, realizing the universality of the same html template in different development environments (such as the backend and the frontend), so that the obtained target html template file has compatibility. Based on this, after copying the compatible target html template file 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, thereby realizing the effective reuse of the same set of html templates in different scenario frameworks of the front and back ends, thereby effectively reducing the workload of repeated template development, and ensuring the consistency of the same set of html templates in multiple development environments, reducing the subsequent template version updates and modifications in the iterative process are out of sync, thereby reducing maintenance costs. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0014] Figure 1 It is a flowchart of a method for reusing HTML templates based on a multi-scenario framework provided in an embodiment of the present application;

[0015] Figure 2 This is an exemplary schematic diagram of the file structure of an html template file provided in an embodiment of the present application;

[0016] Figure 3 It is a flowchart of an HTML template reuse method based on a multi-scenario framework provided by another embodiment of the present application;

[0017] Figure 4 It is a structural schematic diagram of an HTML template reuse device based on a multi-scenario framework provided in an embodiment of the present application;

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

[0019] The principles and spirit of the present application will be described below with reference to several exemplary embodiments. It should be understood that the purpose of providing these embodiments is to make the principles and spirit of the present application clearer and more thorough, so that those skilled in the art can better understand and implement the principles and spirit of the present application. The exemplary embodiments provided herein are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments herein, all other embodiments obtained by ordinary technicians of the art without creative work are within the scope of protection of this application.

[0020] In this document, terms such as first, second, third, etc. are only used to distinguish one entity (or operation) from another entity (or operation), but not to require or imply any order or relationship between these entities (or operations).

[0021] The following is a brief description of 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 that can unify the format of documents on the Internet and connect scattered Internet resources into a logical whole. HTML is a basic technology that is often used by many websites together with CSS and JavaScript to design web pages, web applications, and mobile application user interfaces. Web browsers can read HTML files and render them into visual web pages. HTML describes the structural semantics of a website along with the presentation of clues, making it a markup language rather than a programming language.

[0023] An HTML template file is a pre-designed HTML structure that contains some placeholders or dynamic content insertion points. These placeholders allow developers to dynamically insert specific data or content into the template when building a web page without having to write the entire HTML code from scratch every 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 exchange format designed based on a subset of ECMAScript. It is easy for people to read and write, and easy for machines to parse and generate. JSON is independent of language design, and many programming languages ​​support data exchange in JSON format. JSON is a commonly used data format that has many 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 customizability and rich plugin ecosystem. The so-called "open plugin" means that VScode allows developers to create and publish their own plugins, which can extend the functionality of VScode to meet various programming needs.

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

[0027] A large language model (LLM) is a natural language processing model based on deep learning. It is usually trained with a large number of parameters and data and can understand and generate human language.

[0028] Git hooks are predefined scripts that run automatically when specific Git events (such as commit, push) occur. They are used to perform custom operations such as code inspection and testing to ensure that submissions meet specifications and quality requirements.

[0029] The following, in conjunction with the accompanying drawings, describes in detail the HTML template reuse method based on a multi-scenario framework provided by the embodiment of the present application through specific embodiments and their application scenarios.

[0030] Figure 1 It is a flow chart of an HTML template reuse method based on a multi-scenario framework provided in an embodiment of the present application. The execution subject of the HTML template reuse method based on a multi-scenario framework can be a server in a business system, and the business system can also include a file server and a site server.

[0031] The following takes the execution subject of the HTML template reuse method based on the multi-scenario framework as an example to illustrate the HTML template reuse method based on the multi-scenario framework of the present application. It should be noted that the above execution subjects and application scenarios do not constitute a limitation on the present application.

[0032] like Figure 1 As shown, the HTML template reuse method based on the multi-scenario framework provided in the embodiment of the present application may include steps 110 to 150.

[0033] Step 110, when the template identifier of the first HTML template is obtained, create an HTML template file corresponding to the first HTML template based on the template identifier;

[0034] Step 120, 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;

[0035] Step 130, based on the template configuration parameters corresponding to the first HTML template, after determining the modules included 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, the module configuration content includes a first configuration content and a second configuration content other than the first configuration content, the first configuration content being a common component content;

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

[0037] Step 150, copy 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-scenario framework provided in the embodiment of the present application adopts the handlebars template engine to develop highly reusable templates. The underlying design of the template engine enables a set of templates to be executed in multiple development environments, realizing the universality of the same HTML template in different development environments (such as the back end and the front end), so that the target HTML template file obtained has compatibility. Based on this, after the compatible target HTML template file is copied 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 in different scenario frameworks of the front and back ends, thereby effectively reducing the workload of repeated template development, and ensuring the consistency of the same set of HTML templates in multiple development environments, reducing the asynchrony of modifications in subsequent template version updates and iterations, thereby reducing maintenance costs.

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

[0040] In step 110, when the template identifier of the first HTML template is obtained, an HTML template file corresponding to the first HTML template is created based on the template identifier.

[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 content to be displayed, and the content to be displayed may be a report file, for example, and the product ID corresponding to the report file may be used as the template identifier.

[0042] In some embodiments of the present application, the above step 110 creates an HTML template file corresponding to the HTML template based on the template identifier, which may specifically include:

[0043] The Generate Files command registered in the vscode plug-in invokes showInputBox to prompt the user to enter the template identifier;

[0044] Create a folder containing the template logo under the reportTemplate directory and generate an html template file in the folder.

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

[0046] The Generate Files command registered in the vscode plug-in invokes showInputBox to prompt the user to enter a template ID. Check whether the template ID is empty or starts with "s" or "t", and determine the path (solutions or tools) based on the first letter. s and t represent solutions and tools, respectively. Different rules can be customized according to your own business. In the reportTemplate directory, create a corresponding folder based on the path string (solutions or tools) and generate an html template file for sharing between the front-end and back-end.

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

[0048] In this way, the showInputBox can be called up through the Generate Files command registered in the vscode plug-in, and the user can quickly create an html template file of the first html template by entering a template identifier in the showInputBox.

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

[0050] Among them, 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] For example, Figure 2 As shown, according to the template identifier productId, a folder [productId] containing the template identifier is created in the reportTemplate / html directory, and a basic html file ([productId].html) is generated. This file is the html file after using handlebars.js in the front-end testing phase.

[0052] Involving step 120, a first json file corresponding to the first html template is obtained, and template configuration parameters corresponding to the first html template are obtained 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 in the first html template, that is, template configuration parameters. Therefore, by parsing the first json file, the template configuration parameters corresponding to the first html template can be obtained.

[0054] Involving step 130, based on the template configuration parameters corresponding to the first HTML template, after determining the modules included in the first HTML template, a module file is created for each module in the HTML template file, and the corresponding module configuration content is written in each module file.

[0055] In step 130, the template configuration parameter may 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 various modules included in the first html template can be determined, so that the first html template can be previewed after combining the various modules through js logic. The second configuration parameter is used to characterize the correspondence between the module file and the module configuration content. The module configuration content is used to fill in a single module to configure the preview page of the single module. By reading and processing the data.json file, a module file is generated. According to the template configuration parameters in the data.json file, multiple module files are generated under the specified path and the corresponding module configuration content is written.

[0056] The module configuration content includes the first configuration content and the second configuration content other than the first configuration content. The first configuration content is the common component content. The common component content in Web development refers to HTML, CSS and JavaScript code snippets that can be reused in multiple pages or applications. These components improve the reusability, maintainability and development efficiency of the code. The second configuration content other than the first configuration content can be the variable component content, that is, the component content that cannot be publicly reused.

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

[0058] In some embodiments of the present application, the above step 130 can be performed by calling the vscode plug-in. In this way, the vscode plug-in automatically generates the corresponding module file by parsing the data.json data. The generated module file pre-sets the module configuration content and follows the preset folder structure and field naming rules. Developers only need to focus on the implementation of business logic without paying attention to the specific process of file generation, thereby simplifying and optimizing the creation process of business templates. This plug-in is suitable for front-end and back-end developers, and only the corresponding IDE and plug-in need to be installed when using it.

[0059] In some embodiments of the present application, the module configuration content can be pre-written in the vscode plug-in by the developer, so that when the module file is created for each module by calling the vscode plug-in, the module configuration content can be synchronously written to the corresponding module file based on the template configuration parameters.

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

[0061] In some embodiments of the present application, a vscode plug-in may be downloaded, and the above steps 110 to 130 may be executed by calling the vscode plug-in to create an html template file.

[0062] For example, by pressing ctrl+shft+p to call out the command interface, inputting Generate Files and pressing Enter will prompt the operation of inputting the product ID. After inputting the product ID, pressing Enter will generate the html template file. After all files and folders are created, the user will be prompted with showInformationMessage that "files were created successfully".

[0063] Involving step 140, based on the handlebars template engine, the second configuration content in each module file is replaced with the handlebars variable, the html template file is updated, and the target html template file corresponding to the first html template is obtained.

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

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

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

[0067] In some embodiments of the present application, Figure 3 is a flow chart of an HTML template reuse method based on a multi-scenario framework provided by another embodiment of the present application. In the above step 140, the second configuration content in each module file is replaced with a handlebars variable based on the handlebars template engine, which may include Figure 3 Steps 310 to 330 are shown.

[0068] Step 310, for each module file, in the case of using the handlebars template engine to obtain the abstract syntax tree corresponding to the module file, query the first node whose node type is contentStatement from the AST;

[0069] Step 320, using htmlparser2 to parse the string corresponding to the first node, filtering out nodes whose node type is text in the first node, and obtaining a second node;

[0070] Step 330: Determine that the character string corresponding to the second node is the second configuration content.

[0071] Specifically, the handlebars template engine is first used to parse the HTML template file, parse the template string, identify the variable interpolation ({{variable}}), block helpers, partials and other structures, and build an abstract syntax tree (AST). The abstract syntax tree is an abstract representation of the syntax structure of the source code. It 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 AST may involve different node types, such as contentStatement, unctionDefinition, variableDeclaration, etc. By traversing AST, nodes with a node type of contentStatement may be filtered out from all nodes in AST to obtain the first node.

[0073] htmlparser2 is a Node.js library for parsing HTML. It does not work directly as a template engine, but can be used to parse HTML content. Therefore, the string corresponding to the first node can be parsed through the htmlparser2 template engine parser, and the nodes with the node type of plain text in the first node can be filtered to obtain the second node.

[0074] In an embodiment of the present application, for each module in the first html template, the handlebars template engine and htmlparser2 are combined to effectively extract the second configuration content other than the common component content in the module file, and directly replace this part of the changed component content in the html template file with the handlebars variable. The subsequent changed component content is presented in the form of a second json file referenced by the handlebars variable. Only the publicly reusable common component content is retained in the target html template file. When the target html template file is reused later, 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 modules.

[0075] In some embodiments of the present application, querying the first node whose node type is contentStatement from the AST in the above step 310 may specifically include:

[0076] Using the AST's Visitor pattern, query the AST for the first node whose node type is contentStatement.

[0077] Specifically, AST is a tree data structure in which each node represents an element in the source code (such as a variable, operator, statement, etc.), and the Handlebars template engine itself does not directly provide a visitor pattern to traverse its internal AST. Therefore, by writing a visitor, you can traverse the AST and perform specific operations on each node, thereby querying the first node with a node type of contentStatement.

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

[0079] 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;

[0080] Store the second configuration contents in the second json file as raw data referenced by handlebars variables.

[0081] Specifically, based on the string corresponding to the second node, an identifier generation algorithm can be used to generate an identifier as a handlebars variable. For example, any one of a universally unique identifier (UUID) or a globally unique identifier (GUID) generated based on the string corresponding to the second node can be used as a handlebars variable. This application does not specifically limit the identifier generation algorithm. In the second json file, the handlebars variable (key) and the second configuration content (value) are stored 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 The "data.json" shown.

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

[0083] Based on this, in the scenario where vue is used in the front end and Spring Boot is used in the back end, after finding the second node, a handlebars variable is generated based on the string corresponding to the second node, and by replacing the second configuration content in the module file with the handlebars variable, the updated target html template file can support both vue and Spring Boot. Therefore, both the site server and the file server can reuse the same set of target html template files to return the page resources corresponding to the first html template to the front and back ends respectively. In this way, for each html template, developers only need to develop a set of corresponding target html template files, without having to develop two different sets of html template files for the front end and the back end. Through template reuse, duplicate code can be significantly reduced, development efficiency can be improved, and the development cycle can be shortened.

[0084] As a specific example, the above step 140 may specifically include: using the AST visitor of the handlebars template engine to find the contentStatement node (containing text content and other content), using the htmlparser2 template engine parser to process the value of the contentStatement node, and using a custom transformer method to filter out nodes with a node type of text from the contentStatement node for processing, with the purpose of generating a unique ID as a handlebars variable based on the node content, and using the handlebars variable to replace the original node value (second configuration content). At this time, newAST has been generated, and on this basis, 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 second configuration content may include dynamic content related to the 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.

[0086] Involving 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 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.

[0087] In step 150, after the target HTML template file is copied to the site server and the file server, the site server can return the 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 the HTML page resources corresponding to the first HTML template to the back end based on the target HTML template file, so that the front and back ends render consistent HTML pages based on the same HTML page resources.

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

[0089] By utilizing 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, it automatically detects and copies the specified file in the Git repository to the predefined target path. The specified file is the target HTML template file. The script defines two target paths, namely the file server shared folder and the site server shared folder, and dynamically creates the target directory structure based on the relative path of the file. For each changed file, the script creates the corresponding directory structure in the target path and copies the file to the target location.

[0091] In the embodiment of the present application, Git's Hooks function is a built-in mechanism of Git, which allows developers to automatically execute custom scripts when Git executes specific events (such as commit, push, etc.). In back-end development, the required files are obtained through the file server, and the front-end is directly accessed through the site. Based on this, using Git's hooks function, after the developer commits or pushes, the relevant 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, automated file copying can be achieved by writing a Shell script. The script uses the Git command git diff --name-only HEAD~1HEAD to obtain the file change list of the most recent submission based on specific submission information conditions (such as the COPY_FILES keyword).

[0093] This way, you can identify exactly which files have changed in this commit, ensuring that only relevant files are copied.

[0094] In some embodiments of the present application, in the above step 150, the script parses the commit information of the most recent commit (for example, using git log-1 --pretty=%B) to determine whether the specified keyword (such as COPY_FILES) is included.

[0095] In this way, only submissions that meet the conditions will trigger the file copy operation, thus avoiding unnecessary file operations.

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

[0097] In this way, files that do not need to be copied can be effectively filtered out, improving the execution efficiency and accuracy of the script.

[0098] In some embodiments of the present application, in the above step 150, the script includes 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] This can help users quickly locate problems and ensure the transparency and traceability of replication operations.

[0100] In some embodiments of the present application, after obtaining the target HTML template file corresponding to the first HTML template in step 140, the following steps may also be included:

[0101] Based on 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. On this basis, based on the template configuration parameters corresponding to the second html template, the module file contained in the target html template file is adjusted, and the second configuration content in the module file is updated to obtain the target html template file corresponding to the second html template. The first configuration content (common component content) in the module file can be directly reused, which reduces the amount of code development and improves the efficiency of static page development.

[0103] In some embodiments of the present application, a static language file (such as {productId}_language_ZH.json) can be created in the reportTemplate / tools / language directory, and the initial content is an empty JSON object. When the compiler performs lexical and grammatical analysis, the Babel plug-in will synchronously parse the syntax tree. When the plug-in detects a multilingual identifier (such as static), the corresponding processing logic will be triggered. Fixed language content extraction and storage: In the transform stage, the plug-in will name the parsed fixed language content according to a predefined structural format (such as {module name: {pinyin (10)_md5 (5)}}, Pinyin (10)_md5 (5) is a module name format, which includes a pinyin part of no more than 10 characters in length and a hash value part of the first 5 characters generated by the MD5 algorithm, connected by underscores), and write these contents into the corresponding JSON file.

[0104] In some embodiments of the present application, the zhipu big model is called by using the vscode plug-in, and the prompt of the star model structure (the STAR model is a structured method for answering behavioral interview questions) is injected, so that the big model reads the generated Chinese json file and translates the corresponding json value into the selected language, and creates and writes it into a file with the agreed file name.

[0105] Prompt example:

[0106] Please read the following Chinese JSON file and translate each key-value pair in the file into the target language according to the language selected by the user (such as English, French, Spanish, etc.). Then, generate a new JSON file with the file name agreed by the user (for example: 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] If the language selected by the user is English, the content of the generated new JSON file should be:

[0110]

[0111] Please ensure that the translation result is accurate and save it to the specified file.

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

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

[0114] Figure 4 Schematic diagram of a structure of an HTML template reuse device for a multi-scenario framework provided by an embodiment of the present application. Figure 4 As shown, the HTML template reuse device 400 for a multi-scenario framework may include: a creation module 410, a parsing module 420, an update module 430 and a copy module 440.

[0115] Among them, the creation module 410 is used to create an html template file corresponding to the first html template based on the template identifier when the template identifier of the first html template is obtained; the parsing module 420 is used to obtain the first json file corresponding to the first html template, and obtain the template configuration parameters corresponding to the first html template by parsing the first json file; the creation module 410 is also used to determine the modules 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 html template file, and write the corresponding module configuration content in each module file, wherein the module configuration content includes the first configuration content and the second configuration content other than the first configuration content, and the first configuration content is the common component content; the update module 430 is used to replace the second configuration content in each module file with the handlebars variable based on the handlebars template engine, update the html template file, and obtain the target html template file corresponding to the first html template; the copy module 440 is used to copy the target html template file to the site server and the file server, so that the site server returns the 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.

[0116] The HTML template reuse device for a multi-scenario framework provided in the embodiment of the present application, when the template identifier of the first HTML template is obtained, creates an HTML template file corresponding to the first HTML template based on the template identifier; obtains the first JSON file corresponding to the first HTML template, and obtains the template configuration parameters corresponding to the first HTML template by parsing the first JSON file; after determining the various modules contained 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 the corresponding module configuration content in each module file, wherein the module configuration content includes the first configuration content and the second configuration content other than the first configuration content, and the first configuration content is the common component content; based on the handlebars template engine, replaces the second configuration content in each module file with the handlebars variable, updates the HTML template file, and obtains the target HTML template file corresponding to the first HTML template. In this way, a highly reusable template is developed using the handlebars template engine, and the underlying design of the template engine enables a set of templates to be executed in multiple development environments, realizing the universality of the same HTML template in different development environments (such as the backend and the frontend), so that the obtained target HTML template file has compatibility. Based on this, after copying the compatible target html template file 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, thereby realizing the effective reuse of the same set of html templates in different scenario frameworks of the front and back ends, thereby effectively reducing the workload of repeated template development, and ensuring the consistency of the same set of html templates in multiple development environments, reducing the subsequent template version updates and modifications in the iterative process are out of sync, thereby reducing maintenance costs.

[0117] In some embodiments of the present application, the update module includes: a query unit, which is used to query the first node whose node type is contentStatement from the abstract syntax tree AST corresponding to the module file for each module file using the handlebars template engine; a filtering unit, which is used to parse the string corresponding to the first node using htmlparser2, and filter the nodes whose node type is text in the first node to obtain the second node; and a determination unit, which is used 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 used to: utilize the visitor pattern of AST to query the first node whose node type is contentStatement from AST.

[0119] In some embodiments of the present application, the html template file also includes a second json file corresponding to each module file, and also includes: a replacement module, which is used to generate a handlebars variable based on the string corresponding to the second node after determining that the string corresponding to the second node is the second configuration content, and replace the second configuration content in the module file with the handlebars variable; a storage module, which is used to store the second configuration content as the 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 the 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, it also includes: based on the target HTML template file corresponding to the first HTML template, updating each module file contained in the target HTML template file based on the template configuration parameters 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, an html template file corresponding to an html template is created based on a template identifier, including: invoking showInputBox through a GenerateFiles command registered in a vscode plug-in to prompt a user to enter a template identifier; creating a folder containing a template identifier under a reportTemplate directory, and generating an html template file in the folder.

[0123] In some embodiments of the present application, the target html template file is copied to the site server and the file server, including: 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 developer's commit or push operation.

[0124] The HTML template reuse device based on the multi-scenario framework provided in the embodiment of the present application can realize Figure 1-3 The various processes implemented by the service platform in the method embodiment can achieve the same technical effect. To avoid repetition, they will not be described here.

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

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

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

[0128] The memory 501 may 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. Therefore, generally, the memory includes one or more tangible (non-transitory) computer-readable storage media (e.g., a memory device) encoded with software including computer executable instructions, and when the software is executed (e.g., by one or more processors), it is operable to perform the operations described with reference to the html template reuse method based on a multi-scenario framework in the embodiment of the first aspect of the present application.

[0129] The processor 502 runs a computer program corresponding to the executable program code by reading the executable program code stored in the memory 501, so as to implement the HTML template reuse method based on the multi-scenario framework in the embodiment of the first aspect mentioned above.

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

[0131] The communication interface 503 is mainly used to realize the communication between the modules, devices, units and / or equipment in the embodiment of the present application. The communication interface 503 can also be used to access input devices and / or output devices.

[0132] The bus 510 includes hardware, software, or both, coupling the components of the electronic device 500 to each other. By way of example and not limitation, the bus 510 may 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 Bus (VLB) bus, or other suitable buses or a combination of two or more of these. Where appropriate, the bus 510 may include one or more buses. Although embodiments of the present application describe and illustrate a particular bus, the present application contemplates any suitable bus or interconnect.

[0133] The electronic device provided in the embodiment of the present application can realize Figure 1-3 The various processes implemented by the electronic device in the method embodiment can achieve the same technical effect, and to avoid repetition, they will not be described here.

[0134] In combination with the HTML template reuse method based on a multi-scenario framework in the above embodiment, the present application embodiment can provide a computer storage medium for implementation. The computer storage medium stores computer program instructions; when the computer program instructions are executed by a processor, the steps of any one of the HTML template reuse methods based on a multi-scenario framework in the above embodiment are implemented.

[0135] In combination with the HTML template reuse method based on a multi-scenario framework in the above embodiment, the present application embodiment can provide a computer program product for implementation. The (computer) program product is stored in a non-volatile storage medium, and when the program product is executed by at least one processor, it implements the steps of any one of the HTML template reuse methods based on a multi-scenario framework in the above embodiment.

[0136] An embodiment of the present application further provides a chip, which includes a processor and a communication interface. The communication interface and the processor are coupled, and the processor is used to run programs or instructions to implement the various processes of the above-mentioned embodiment of the HTML template reuse method based on a multi-scenario framework, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

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

[0138] It should be clear that the present application is not limited to the specific configuration and processing described above and shown in the figures. For the sake of simplicity, a detailed description of the known method is omitted here. In the above embodiments, several specific steps are described and shown as examples. However, the method process of the present application is 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 between the steps after understanding the spirit of the present application.

[0139] The functional blocks shown in the above-described block diagram 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 (Application Specific Integrated Circuit, ASIC), appropriate firmware, plug-in, function card, etc. When implemented in software, the elements of the present application are programs or code segments used to perform the required tasks. The program or code segment can be stored in a machine-readable medium, or transmitted on a transmission medium or a communication link by a data signal carried in a carrier. "Machine-readable medium" can include any medium capable of storing or transmitting information. Examples of machine-readable media 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 segment can be downloaded via a computer network such as the Internet, an intranet, etc.

[0140] It should also be noted that the exemplary embodiments mentioned in this application describe some methods or systems based on a series of steps or devices. However, this application is not limited to the order of the above steps, that is, the steps can be performed in the order mentioned in the embodiment, or in a different order from the embodiment, or several steps can be performed simultaneously.

[0141] Aspects of the present disclosure are described above with reference to the flowchart and / or block diagram of the method, device (system) and computer program product according to the embodiment of the present disclosure. It should be understood that each box in the flowchart and / or block diagram and the combination of each box in the flowchart and / or block diagram can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device to produce a machine so that these instructions executed by the processor of the computer or other programmable data processing device enable the implementation of the function / action specified in one or more boxes of the flowchart and / or block diagram. Such a processor can be, but is not limited to, a general-purpose processor, a special-purpose processor, a special application processor, or a field programmable logic circuit. It can also be understood that each box in the block diagram and / or flowchart and the combination of boxes in the block diagram and / or flowchart can also be implemented by dedicated hardware that performs a specified function or action, or can be implemented by a combination of dedicated hardware and computer instructions.

[0142] The above is only a specific implementation of the present application. Those skilled in the art can clearly understand that for the convenience and simplicity of description, the specific working processes of the systems, modules and units described above can refer to the corresponding processes in the aforementioned method embodiments, and will not be repeated here. It should be understood that the protection scope of the present application is not limited to this. Any technician familiar with the technical field can easily think of various equivalent modifications or replacements within the technical scope disclosed in this application, and these modifications or replacements should be included in the protection scope of this application.

Claims

1. A method for reusing HTML templates based on a multi-scenario framework, characterized in that: include: When the template identifier of the first HTML template is obtained, creating an HTML template file corresponding to the first HTML template based on the template identifier; 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; After determining the modules 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 html template file, and write corresponding module configuration content in each module file, wherein the module configuration content includes a first configuration content and a second configuration content other than the first configuration content, and the first configuration content is a common component content; Based on the handlebars template engine, the second configuration content in each module file is replaced with a handlebars variable, 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 the site server and the file server, so that the site server returns the html page resource to the front end based on the target html template file, and the file server returns the html page resource to the back end based on the target html template file.

2. The method according to claim 1, characterized in that: Based on the handlebars template engine, the second configuration content in each module file is replaced with a handlebars variable, including: For each module file, when the handlebars template engine is used to obtain the abstract syntax tree AST corresponding to the module file, the first node whose node type is contentStatement is searched from the AST; Parsing the string corresponding to the first node using htmlparser2, filtering out nodes whose node type is text in the first node, and obtaining a second node; It is determined that the character string corresponding to the second node is the second configuration content.

3. The method according to claim 2, characterized in that Query the first node of contentStatement from the AST, including: Using the AST's Visitor pattern, query the AST for the first node whose node type is contentStatement.

4. The method according to claim 2, characterized in that: The html template file also includes a second json file corresponding to each module file, and after determining that the string corresponding to the second node is the second configuration content, further includes: 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; The second configuration content is stored in the second JSON file as the raw data referenced by the handlebars variable.

5. The method according to claim 4, characterized in that The second configuration content includes dynamic content related to the business logic and fixed content other than the dynamic content. The dynamic content and the fixed content are stored separately in different second JSON files.

6. The method according to claim 1, characterized in that After obtaining the target HTML template file corresponding to the first HTML template, the method further includes: 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.

7. The method according to claim 1, characterized in that Creating an HTML template file corresponding to the HTML template based on the template identifier includes: The Generate Files command registered in the vscode plug-in invokes showInputBox to prompt the user to enter the template identifier; Create a folder containing the template logo under the reportTemplate directory and generate an html template file in the folder.

8. The method according to claim 1, characterized in that Copy the target html template files to the site server and file server, including: By utilizing 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.

9. A html template reuse device based on a multi-scenario framework, characterized in that: include: A creation module, configured to, when a template identifier of a first HTML template is obtained, create an HTML template file corresponding to the first HTML template based on the template identifier; A parsing module, used 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 creation module is further used to, after determining 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 HTML template file, and write corresponding module configuration content in each module file, wherein the module configuration content includes a first configuration content and a second configuration content other than the first configuration content, and the first configuration content is a common component content; An updating module, used for 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; The copy module is used to copy 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, characterized in that: The electronic device comprises: a processor and a memory storing computer program instructions; when the electronic device executes the computer program instructions, the method according to any one of claims 1 to 8 is implemented.

Images