CN116301753A - Webpage engineering file generation method and device, electronic equipment and storage medium - Google Patents

Abstract

The disclosure provides a webpage engineering file generation method, a webpage engineering file generation device, electronic equipment and a storage medium, and relates to the technical field of data processing, in particular to the field of Web front ends. The specific implementation scheme is as follows: calling a webpage engineering development framework, and creating a template file of a webpage engineering file; extracting first attribute information of a first webpage element from a webpage design draft file; determining a target component for realizing the webpage elements contained in the webpage engineering file to be generated from the packaged components based on the extracted first attribute information; setting information of the determined target component based on the extracted first attribute information; and embedding the target component after the information is set into the created template file to generate a webpage engineering file. By applying the scheme provided by the embodiment of the invention, the generation efficiency of the webpage engineering file can be improved.

Description

A method, device, electronic device and storage medium for generating web page engineering files

technical field

The present disclosure relates to the field of data processing technology, and in particular to the field of Web front-end technology.

Background technique

When developing a webpage, generally, the designer first provides the webpage design draft to the developer, and then the developer writes the code based on the webpage design draft to obtain the webpage project file.

Currently, the webpage design draft can be converted into an HTML (Hyper Text Markup Language, Hypertext Markup Language) document, and then developers write codes based on the HTML document to obtain a webpage project file. Although the above-mentioned HTML document contains annotation information related to the web page design draft, which can provide convenience for developers to write codes, it still requires developers to write a large amount of codes to obtain the web page project file.

Contents of the invention

The disclosure provides a method, device, electronic equipment and storage medium for generating a web page project file.

According to an aspect of the present disclosure, a method for generating a web page project file is provided, including:

Call the webpage project development framework to create a template file for the webpage project file;

Extracting the first attribute information of the first webpage element from the webpage design draft file;

Based on the extracted first attribute information, from the packaged components, determine a target component for realizing the webpage elements contained in the webpage project file to be generated;

performing information setting on the determined target component based on the extracted first attribute information;

Embed the target component after the information is set into the created template file to generate a webpage project file.

According to another aspect of the present disclosure, an apparatus for generating a webpage project file is provided, including:

The template file creation module is used to call the web page project development framework and create a template file of the web page project file;

The first attribute information extraction module is used to extract the first attribute information of the first webpage element from the webpage design draft file;

A target component determining module, configured to determine a target component for implementing the web page elements contained in the web page project file to be generated from the packaged components based on the extracted first attribute information;

An information setting module, configured to perform information setting on the determined target component based on the extracted first attribute information;

The file generation module is used to embed the target component after information setting into the created template file to generate the web page project file.

According to another aspect of the present disclosure, an electronic device is provided, including:

at least one processor; and

a memory communicatively coupled to the at least one processor; wherein,

The memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor, so that the at least one processor can execute the aforementioned method for generating a web page project file.

According to another aspect of the present disclosure, there is provided a non-transitory computer-readable storage medium storing computer instructions, wherein the computer instructions are used to make the computer execute the aforementioned method for generating a web page project file.

According to another aspect of the present disclosure, a computer program product is provided, including a computer program, and when the computer program is executed by a processor, the aforementioned method for generating a web page project file is implemented.

It can be seen from the above that when applying the solution provided by the embodiment of the present disclosure to generate a webpage project file, first extract the first attribute information of the first webpage element from the webpage design draft file, and then determine the packaged components based on the first attribute information. To realize the target component of the web page element contained in the web page project file to be generated, and, based on the extracted first attribute information, perform information setting on the determined target component, and then the target component after the information setting can be embedded into the created In the template file, the web page file is successfully generated.

It should be understood that what is described in this section is not intended to identify key or important features of the embodiments of the present disclosure, nor is it intended to limit the scope of the present disclosure. Other features of the present disclosure will be readily understood through the following description.

Description of drawings

The accompanying drawings are used to better understand the present solution, and do not constitute a limitation to the present disclosure. in:

FIG. 1 is a schematic diagram of a first type of webpage provided by an embodiment of the present disclosure;

FIG. 2 is a schematic diagram of a second type of webpage provided by an embodiment of the present disclosure;

FIG. 3 is a schematic flowchart of the first method for generating a webpage project file provided by an embodiment of the present disclosure;

FIG. 4 is a schematic diagram of a template file creation process provided by an embodiment of the present disclosure;

FIG. 5 is a schematic diagram of an information setting process provided by an embodiment of the present disclosure;

FIG. 6 is a schematic flowchart of a second method for generating a webpage project file provided by an embodiment of the present disclosure;

FIG. 7 is a schematic diagram of a web page engineering file generation process provided by an embodiment of the present disclosure;

FIG. 8 is a schematic structural diagram of a device for generating a webpage project file provided by an embodiment of the present disclosure;

Fig. 9 is a block diagram of an electronic device used to implement the method for generating a web page project file according to an embodiment of the present disclosure.

Detailed ways

Exemplary embodiments of the present disclosure are described below in conjunction with the accompanying drawings, which include various details of the embodiments of the present disclosure to facilitate understanding, and they should be regarded as exemplary only. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the disclosure. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.

Firstly, the executive body of the solution provided by the embodiment of the present disclosure will be described.

The subject of execution of the solutions provided by the embodiments of the present disclosure is: any electronic device with computing, storage and other functions.

The application scenarios of the solutions provided by the embodiments of the present disclosure will be described below.

The application scenario of the solution provided by the embodiment of the present disclosure is: a scenario of generating a webpage project file based on a webpage design draft file.

When developing a webpage, generally, the designer first provides the webpage design draft to the developer, and then the developer writes the code based on the webpage design draft to obtain the webpage project file.

Run the above webpage project file to get the webpage that restores the webpage design draft.

Referring to FIG. 1 and FIG. 2 , they are schematic diagrams of a first type of webpage and a second type of webpage provided by an embodiment of the present disclosure, respectively.

The webpage shown in FIG. 1 and FIG. 2 may be a webpage obtained by running the above-mentioned webpage project file and restoring the webpage design draft.

When using the existing technology to develop webpage projects, on the one hand, although developers can write codes based on HTML documents converted from webpage design drafts, they still need to write more codes to obtain webpage project files; on the other hand, Many webpages contain the same type of components, for example, carousel image 1 and carousel image 2 in the webpage shown in Figure 1, form 1 in the webpage shown in Figure 1 and form 2 in the webpage shown in Figure 2, these Components of the same type have similar display effects, which leads to the situation of writing a large amount of repeated code or similar code when developers write the code for implementing the above components.

Combining the above two aspects, it can be seen that when the existing technology is used to generate the webpage project file, a large workload is required, resulting in low generation efficiency of the webpage project file.

In view of the foregoing, an embodiment of the present disclosure provides a method for generating a web page project file, so as to improve the generation efficiency of the web page project file.

The method for generating a webpage project file provided by the embodiment of the present disclosure will be described in detail below.

Referring to FIG. 3 , it is a schematic flowchart of the first method for generating a web page project file provided by the disclosed embodiment. The above method includes the following steps S301 - S305.

Step S301: calling the webpage project development framework to create a template file of the webpage project file.

The web page engineering development framework can also be called a web development framework, which can be flexibly selected by the staff according to the actual situation, which is not limited in the embodiments of the present disclosure.

For example, the above-mentioned webpage engineering development framework may be Vue.js+Node.js, Spring+Node.js, React.js+Deno.js, etc.

In this step, the created template file may include template files of various files needed to realize the web page, such as an entry file, a home page file, a configuration file, and a page routing file.

Specifically, the template file of the webpage project file can be created in the following manner.

In one embodiment, the electronic device may respond to the template file creation instruction input by the staff, call the webpage project development framework, and create the template file of the webpage project file under the preset default path.

In another implementation manner, the electronic device may obtain the path and the file name of the template file input by the staff, and then invoke the web page project development framework to create a template file of the web page project file based on the above path and file name. For specific implementation details, refer to subsequent embodiments, which will not be described in detail here.

It should be noted that the embodiment of the present disclosure does not strictly limit the execution timing of the above-mentioned step S301, specifically, the above-mentioned step S301 may be executed at any time before the execution of the step S305.

For example, the above step S301 may be performed before step S302-step S304, may also be performed after step S302-step S304, and may also be performed in parallel with step S302-step S304.

Step S302: Extract the first attribute information of the first webpage element from the webpage design draft file.

The webpage design draft file may also be called a webpage UI (User Interface, user interface) draft, a webpage prototype draft, and the like.

The embodiment of the present disclosure does not limit the file type of the web page design draft file, and the web page design draft file may be any file in which web page elements used to construct web pages and attribute information of the web page elements are recorded.

For example, the web design draft file may be a PSD (Photoshop Document, Photoshop document) file, an AI (Adobe Illustrator) file, a Sketch file, or the like.

The above-mentioned webpage elements can also be called webpage components, webpage components, etc., and can be specifically various elements needed to build webpages such as navigation bars, forms, carousels, search boxes, check boxes, drop-down boxes, lists, and page footers. .

According to the different file types of the web page design draft files, the presentation forms of the web page elements in the web page design draft files are different. In most cases, webpage elements are presented in the form of layers in the webpage design draft file, for example, one or more layers are used to represent one webpage element.

The attribute information of the webpage element may be various information related to the webpage element, such as the element identification, position, size, color, frame format, transparency, activation status, and displayed content of the webpage element.

In this step, the first attribute information of the first webpage element may be extracted from the webpage design draft file by using an existing webpage element extraction tool based on the file type of the webpage design draft file.

For example, if the web page design draft file is a PSD file, you can use tools such as PSD.rb to extract information from the PSD file, and obtain the layer information corresponding to each layer recorded in the PSD file as the first attribute of the first web page element information.

As another example, if the web page design draft file is a Sketch file, you can use plug-ins such as Sketch-to-html to extract information from the Sketch file, and obtain the layer information corresponding to each layer recorded in the Sketch file, as the first web page element. First attribute information.

Wherein, the first attribute information may be JSON (JavaScript Object Notation, JS Object Notation) data with a directory structure, wherein each node in the JSON data corresponds to the first attribute information of a first webpage element; of course, it may also be HTML and other formats, which are not limited in this disclosure.

When the webpage design draft file is another type of file, the method of extracting the first attribute information is similar to the above method, and no more examples are given here.

Step S303: Based on the extracted first attribute information, from the packaged components, determine a target component for realizing the webpage elements contained in the webpage project file to be generated.

The above-mentioned packaged components are pre-packaged components used to implement various web page elements.

It should be noted that, affected by the file type of the web page design draft file and the method of extracting information from the web page design draft file, the aforementioned first web page element does not necessarily correspond to the web page elements contained in the web page project file to be generated.

For example, one first webpage element may correspond to a webpage element contained in a webpage project file to be generated, or multiple first element elements may correspond to webpage elements contained in a webpage project file to be generated.

In view of the above situation, the following manner can be used to determine the target component used to realize the webpage elements contained in the webpage project file to be generated.

In one embodiment, in the case of a one-to-one correspondence between the first web page element and the web page elements contained in the web page project file to be generated, for each first web page element, the corresponding first attribute information contained in the The element identification, and then determine the target component corresponding to the above element identification from the encapsulated components, as the target component for realizing the web page elements contained in the web page project file to be generated.

Among the packaged components, the component whose component ID is the same as the above-mentioned element ID can be determined as the target component, or the target component corresponding to the above-mentioned element ID can be determined according to the correspondence between the pre-recorded element ID and the packaged component.

In another embodiment, when the first webpage element is not in one-to-one correspondence with the webpage elements contained in the webpage project file to be generated, the webpage project file to be generated can be determined first based on the extracted first attribute information The second webpage element contained in the second webpage element, and then based on the second attribute information of the second webpage element, determine the target component for realizing the second webpage element from the packaged components. For specific implementation details, refer to step S603-step S605 in the subsequent embodiment shown in FIG. 6 , which will not be described in detail here.

Step S304: Based on the extracted first attribute information, perform information setting on the determined target component.

From the perspective of the amount of information on which the target component is set, in this step, the target component can be set based on all the first attribute information extracted, or the target component can be set based on part of the extracted first attribute information. information settings.

It can be seen from the foregoing description that the first attribute information may include various information related to the first webpage element, and the information required for setting the target component may be only a part of the information, or may be all of the information.

For example, component A needs to use the position information and size information in the first attribute information to set information, and component B needs to use the frame format and transparency in the first attribute information to set information color, etc.

From the perspective of the type of information on which the target component is set, information can be set for the determined target component in the following manner.

In one embodiment, in the case of a one-to-one correspondence between the first webpage element and the webpage elements contained in the webpage project file to be generated, for each first webpage element, it may be based on the first Various types of information contained in the attribute information are used to set the information of the target component corresponding to the first webpage element.

In another embodiment, when the first webpage element is not in one-to-one correspondence with the webpage elements contained in the webpage project file to be generated, the webpage project to be generated can be determined first based on the extracted first attribute information. The second webpage element included in the file, and then perform information setting on the target component based on the determined second attribute information corresponding to the second webpage element. For specific implementation details, refer to the embodiment shown in FIG. 6 , which will not be described in detail here.

From the perspective of the flow of information setting for the target component, the information setting for the determined target component can be performed in the following manner.

Specifically, based on the order relationship between the first webpage elements, the first attribute information corresponding to each first webpage element may be traversed sequentially, and based on the traversed target attribute information, information may be set for the target component corresponding to the described webpage element , in the case that the web page element has sub-elements, determine the attribute information of the existing sub-elements as the new target attribute information, return the target attribute information based on the traversal, and set the information of the target component corresponding to the web page element described by it A step of.

Wherein, the above sequence relationship may be determined based on the order in which the first webpage elements are recorded in the webpage design draft file.

For the detailed process of this embodiment, refer to the subsequent embodiments, and will not be described in detail here.

Step S305: Embedding the target component after information setting into the created template file to generate a web page project file.

In this step, the following method can be used to embed the target component after information setting into the created template file to generate a webpage project file.

In one embodiment, the target template file for carrying the target component may be determined from the created template files, and the target component may be embedded in the target template file to generate a webpage project file.

In another embodiment, the first template file for carrying the first target component and the second template file for carrying the second target component may be determined from the created template files, and the first target component may be embedded into the second target component. In a template file, a first web page project file is generated, and the second target component is embedded into the second template file to generate a second web page project file.

Wherein, the first target component is: a target component for setting information based on the style information of the webpage element, and the second target component is: a target component for setting information based on the content information of the webpage element.

The above-mentioned style information may include the above-mentioned position, size, transparency, etc., and the above-mentioned content information may include the text to be displayed by the web page element, the picture address of the picture to be displayed, and the like.

The manner of determining the first template file and the second template file will be described below.

Specifically, it is possible to read the file type identifier contained in the created template file, determine the target file whose file type identifier matches the component identifier of the first target component, as the first template file, and determine the file type identifier and the second target component The component ID matches the target file, as the second template file.

In this way, template files for carrying different target components can be determined in an orderly manner based on the type of the target component, so that the target components can be embedded in the corresponding template files to generate different types of independent web page project files, which improves the efficiency of each individual web page project file. of reusability.

It can be seen from the above that when applying the solution provided by the embodiment of the present disclosure to generate a webpage project file, first extract the first attribute information of the first webpage element from the webpage design draft file, and then determine the packaged components based on the first attribute information. To realize the target component of the web page element contained in the web page project file to be generated, and, based on the extracted first attribute information, perform information setting on the determined target component, and then the target component after the information setting can be embedded into the created In the template file, the web page file is successfully generated.

Among them, the solution provided by the embodiment of the present disclosure is to generate the first webpage file based on the template file and the packaged components. Specifically, the components are set based on the information extracted from the webpage design draft file, and the template after the information is set Components are embedded in template files to generate web page files. In this way, the one-stop automatic conversion from the web design draft to the web project file is realized. Compared with the web project file obtained by the developer who writes the code based on the HTML document containing the markup, it saves the time spent on code writing and effectively reduces the The workload and development cost of generating the web page project file are reduced, and the generation efficiency of the web page project file is improved.

In an embodiment of the present disclosure, the above-mentioned webpage design draft file may be a file that records attribute information of webpage elements that can be realized by the packaged components.

This is beneficial to make the webpage elements recorded in the webpage design draft file have corresponding packaged components that can be realized, and prevent the occurrence of the mismatch between the packaged components and the webpage elements recorded in the webpage design draft file, resulting in failure to generate the webpage project file It improves the stability when generating web page project files when the web page elements are missing in the web page project files.

In an embodiment of the present disclosure, the above packaged components may be components packaged by users themselves. In this way, the types of packaged components can be enriched and varied, more webpage elements that need to be implemented in actual scenarios can be realized, and the versatility of the solution can be improved.

Another implementation manner of creating a template file in step S301 will be described below.

Specifically, the electronic device can obtain the path and the file name of the template file input by the staff, and then invoke the webpage project development framework to create a template file of the webpage project file based on the path and filename.

The template file creation process shown in this embodiment will be described below with reference to FIG. 4 .

Referring to FIG. 4 , it is a schematic diagram of a template file creation process provided by an embodiment of the present disclosure. The above process includes the following steps S401 - S405.

Step S401: Obtain the input path and name.

The above path and name are the path and the file name of the template file entered by the staff.

Step S402: Concatenate the paths to obtain the target path of the template file.

Specifically, the preset path prefix may be spliced with the obtained path and name to obtain the target path.

For example, the preset path prefix is server/action, and the obtained path and name are components and school respectively. Then, after path concatenation, the target path that can be obtained is: server/action/components/school.

Step S403: Create an empty file under the target path.

Step S404: Load the configuration file, and determine the template content corresponding to the target path.

The corresponding relationship between the template file and the path prefix can be recorded in the configuration (Config) file. Therefore, the path prefix in the target path can be determined, and then the template content corresponding to the target path can be determined based on the above-mentioned corresponding relationship recorded in the Config file.

Step S405: Load the template content, write the template content into the created empty file, and obtain the template file.

Taking the first attribute information as JSON data as an example, the setting process of information setting for the target component mentioned in step S304 in the embodiment shown in FIG. 3 will be described below with reference to FIG. 5 .

Referring to FIG. 5 , it is a schematic diagram of an information setting process provided by an embodiment of the present disclosure. The above process includes the following steps S501 - S508.

Step S501: Set the current node as the root node in the JSON data.

JSON data is a tree structure, in which each node corresponds to a first web page element, therefore, setting the current node as the root node, through the subsequent loop traversal, is equivalent to pre-order traversal of the JSON data, thus traversing to The first webpage element corresponding to each node.

Step S502: Read the first attribute information corresponding to the current node.

In this step, the first attribute information corresponding to the current node is the first attribute information of the first webpage element corresponding to the current node.

In one case, when reading the first attribute information corresponding to the current node from the JSON data, the current node may be converted into an object first, so that it is convenient to read the first attribute information corresponding to the node by using the operation on the object.

Step S503: Perform information setting on the target component based on the first attribute information.

After the first attribute information is obtained, information can be set for the target component corresponding to the first web page element described by it.

Specifically, the node identifier (name) of the node can be matched with the component identifier (name) of the target component, and the component whose corresponding component identifier is the same as the node identifier of the current node is determined as the target component corresponding to the current node, and then The default value of each filling item in the template in the component is replaced with the first attribute information corresponding to the current node.

Among them, for the position (position relationship) filling item in the template, its default value can be set to relative (relative position), if the first attribute information corresponding to the node contains the size and position information of the first web page element, then you can set The above default value is replaced with absolute (absolute position).

Step S504: Determine whether the current node has child nodes, if yes, execute step S505, if no, end the process.

When the current node has sub-nodes, it means that the first webpage element corresponding to the current node has sub-elements. Therefore, subsequent steps may be performed to set information on the target component corresponding to the sub-elements.

Step S505: Set i=0.

Step S506: Determine whether i is less than the number of child nodes, if yes, execute step S507, if no, end the process.

This step is used to ensure that each child node is successfully traversed.

Step S507: Set the current node as a child node, execute step S508, and return to execute step S502.

In this step, the current node is set as a sub-node, and the execution returns to step S502. For the sub-node, the attribute information corresponding to the sub-node can be obtained, and the information is set for the target component corresponding to the sub-node.

Step S508: set i=i+1, return to step S506.

It can be seen that the above process can perform information setting on the target component corresponding to each node in the JSON data through node loop traversal, that is, information setting can be performed on the target component corresponding to each first webpage element.

On the basis of the embodiment shown in Figure 3, when determining the target component based on the extracted first attribute information, if the first webpage element is not in one-to-one correspondence with the webpage elements contained in the webpage project file to be generated, then it can be based on The extracted first attribute information is used to determine the second webpage element contained in the webpage project file to be generated, and then based on the second attribute information of the second webpage element, it is determined from the packaged components to realize the goal of the second webpage element components. In view of the foregoing, the embodiment of the present disclosure provides a second method for generating a web page project file.

Referring to FIG. 6 , it is a schematic flowchart of a second method for generating a webpage project file provided by the disclosed embodiment. The above method includes the following steps S601 - S607.

Step S601: calling the webpage project development framework to create a template file of the webpage project file.

Step S602: Extract the first attribute information of the first webpage element from the webpage design draft file.

The above step S601-step S602 is the same as step S301-step S302 in the embodiment shown in FIG. 3 above, and will not be repeated here.

Step S603: Based on the extracted first attribute information, determine the second web page element contained in the web page project file to be generated.

In one embodiment, the corresponding first webpage elements with the same element ID in the first attribute information may be merged, and then the merged first webpage element is determined to be the second webpage element included in the webpage project file to be generated.

If the element identifiers in the first attribute information corresponding to several first webpage elements are the same, it can be considered that these first webpage elements correspond to the same webpage element in the actual webpage, and therefore, these first webpage elements can be merged.

It can be seen from the above that by merging the first webpage elements with the same element identifier in the corresponding first attribute information into the second webpage element, the first webpage element corresponding to the same webpage element in the actual webpage can be accurately determined as the second webpage element. The second webpage element helps to avoid repeated redundant target components being determined for the first webpage element with the same element identifier, and improves the rationality of subsequently determining the target component.

In another implementation manner, the first webpage elements satisfying the preset standard may be eliminated from the first webpage elements, and then the eliminated first webpage elements are determined to be the second webpage elements included in the webpage project file to be generated.

The above preset standard may be that the first attribute information corresponding to the first webpage element is empty, the first attribute information corresponding to the first webpage element lacks position and/or size information, and the first attribute information corresponding to the first webpage element contains Position and/or size information exceeds maximum thresholds, etc.

In this way, the first webpage elements that cannot be rendered in the webpage or have a poor rendering effect in the webpage can be eliminated, so that the second webpage elements determined after the elimination process can be normally rendered in the webpage, which is beneficial to make the generated, including The webpage project file of the second webpage element can run normally.

Step S604: Obtain second attribute information of the determined second webpage element.

Wherein, the second attribute information includes: element identifier, style information, content information, and element information of sub-elements of the second web page element.

It can be understood that, for a second webpage element corresponding to only one first webpage element, its second attribute information is the same as the first attribute information of its corresponding first webpage element.

Therefore, the following describes how to obtain various information contained in the second attribute information of the second webpage elements corresponding to the second webpage elements corresponding to the plurality of first webpage elements.

1. Element identification

The element identifier of the second webpage element may be the element identifier of each first webpage element corresponding thereto.

2. Style information

Specifically, the content information of the second web page element can be obtained through the following steps A-C:

Step A: Obtain the area information of the web page area of each first web page element corresponding to the second web page element.

Wherein, the embodiment of the present disclosure does not limit the specific content of the area information, and the area information may be any information used to characterize the position and size of the web page area of the first web page element.

For example, the area information may be the coordinates of two diagonal points of the above-mentioned web page area, the coordinates of all vertices of the above-mentioned web page area, the center point coordinates and the length and width of the above-mentioned web page area, or the coordinates of the above-mentioned web page area. The distance between each side and the border of the page, etc.

Step B: Based on the obtained area information, determine target area information covering the web page areas of all first web page elements corresponding to the second web page element.

Likewise, the embodiment of the present disclosure also does not limit the manner of determining the target area information based on the obtained area information, which will be described below by using an example.

First, based on the obtained area information, the position and size of the web page area of each first web page element can be easily determined. For example, if the area information is vertex coordinates, the length and position of each side can be calculated based on the vertex coordinates. Depending on the content of the area information, the above determination methods are slightly different, and will not be described in detail here.

Then, based on the position and size of the webpage area of each first webpage element, the distance between each side of the above-mentioned webpage area and the border of the webpage can be determined, and then from each side, select the corresponding target side with the smallest distance. At this time, each target The area surrounded by the edge extension lines is the web page area that covers all the first web page elements corresponding to the second web page element. At this time, the coordinates of the intersection points of each side can be obtained as target area information.

Step C: Obtain the style information of the second webpage element according to the target area information.

After obtaining the target area information, the target area information can be directly used as the style information of the second web page element. Of course, if the target area information does not include the side length of the web page area, the target area information can also be used to first calculate the width of the web page area. side length, and then use the target area information and the calculated side length of the web page area together as the style information of the second web page element.

It can be seen that, in the case where the second webpage element corresponds to multiple first webpage elements, by applying the solutions provided by the embodiments of the present disclosure, it is possible to determine the goal of covering the webpage area of all the first webpage elements corresponding to the second webpage element The area information, and further according to the target area information, can accurately obtain the style information of the second web page element, ensuring that the merged second web page element can be normally displayed in the web page.

3. Content information

Specifically, the content information of the second webpage element can be obtained through the following steps D-F:

Step D: extracting the image address from the first attribute information describing the first webpage elements corresponding to the second webpage element.

The above picture address may point to the file storage directory, which is used to indicate the storage location of the picture.

Step E: Obtain the picture description information of the picture corresponding to the extracted picture address.

The above image description information can be obtained in the following ways:

In the first manner, the picture corresponding to the extracted picture address may be determined, and then text recognition is performed on the determined picture to obtain the text in the picture as the picture description information.

Wherein, the text recognition of the picture may be performed based on any OCR (Optical Character Recognition, optical character recognition) algorithm, or the text in the picture may be recognized based on a pre-trained picture text recognition model.

In the second manner, the picture corresponding to the extracted picture address may be determined, and then the picture description information corresponding to the determined picture may be obtained according to the pre-stored correspondence between the picture and the picture description information.

The third way is to determine the picture corresponding to the address of the extracted picture, then perform text recognition on the above picture to obtain the text in the picture, and then perform keyword extraction on the obtained text, and fill the extracted keywords into the existing The image description information is obtained from the description information template.

Among them, keywords in the text can be identified based on any NLP (Natural Language Processing) algorithm, and keywords in the text can also be identified based on a pre-trained keyword extraction model.

Step F: Obtain the content information of the second webpage element based on the extracted image address and the obtained image description information.

In one embodiment, the extracted picture address and the obtained picture description information can be directly used as the content information of the second webpage element.

In another embodiment, in addition to the extracted picture address and the obtained picture description information, configuration information input by the staff can also be obtained, and the picture address, picture description information and configuration information can be used together as the second webpage element content information.

Wherein, the above configuration information can be added by the staff according to the actual situation, so that the second webpage element can be applied to different landing scenarios.

It can be seen that, in the case where the second webpage element corresponds to multiple first webpage elements, by applying the solutions provided by the embodiments of the present disclosure, it is possible to comprehensively obtain the corresponding pictures and corresponding images of each first webpage element corresponding to the second webpage element. Image description information, so that the content information of the first web page element can be combined to accurately obtain the content information of the second web page element.

4. Element information of child elements

Specifically, the element information of the sub-elements contained in each first web page element corresponding to the second web page element may be obtained, and the obtained sub-element information may be used as the element information of the sub-elements of the second web page element.

Step S605: Based on the obtained second attribute information, determine a target component for implementing the second web page element from the packaged components.

In this step, for each second web page element, the element identification contained in its corresponding second attribute information can be read, and then the target component corresponding to the above element identification can be determined from the packaged components as a method for realizing the second web page The element's target component.

Step S606: Based on the obtained second attribute information, perform information setting on the determined target component.

In this step, for each second webpage element, the target component corresponding to the second webpage element can be performed based on the style information, content information and sub-element information contained in the first attribute information describing the first webpage element respectively. information settings.

The specific flow of information setting for the target component can be obtained on the basis of the information setting flow introduced above, the only difference is that the attribute information corresponding to the web page element is different from that of the web page element, and will not be repeated here.

Step S607: Embedding the target component after information setting into the created template file to generate a webpage project file.

The above step S607 is the same as the step S305 in the aforementioned embodiment shown in FIG. 3 , and will not be repeated here.

It can be seen from the above that when applying the solution provided by the embodiments of the present disclosure to generate a webpage project file, after extracting the first attribute information of the first webpage element from the webpage design draft file, it is also determined based on the extracted first attribute information to determine the The second webpage element included in the webpage project file, and then obtain the second attribute information of the second webpage element, perform component selection and component information setting based on the second attribute information, and finally generate the webpage project file.

Wherein, when selecting the target component, it is selected according to the second attribute information of the second web page element, which can make the target component correspond to the second web page element contained in the web page project file to be generated, which is conducive to comprehensive and accurate determination The target components for realizing each second web page element are obtained, and then based on the determined target components, it is beneficial to generate a web page project file containing the target components for realizing each second element, and improve the accuracy of the generated web page project file .

The process of generating a web page project file provided by an embodiment of the present disclosure will be described below with reference to FIG. 7 .

Referring to FIG. 7 , it is a schematic diagram of a process for generating a webpage project file provided by an embodiment of the present disclosure.

It can be seen from Figure 7 that, firstly, on the basis of the packaged components, the PSD file generation rules can be obtained according to the component information, and then the PSD file generation rule document can be obtained, so that the PSD file can be generated according to the rule document, and then the information can be extracted from the PSD file , obtain the PSDJSON data, and further optimize the PSDJSON data to obtain the OJSON data containing detailed information, then set the information of the target component in the packaged component based on the OJSON data, and finally generate the page template file and the target component based on the information setting page data file.

Corresponding to the method for generating a web page project file, an embodiment of the present disclosure further provides a device for generating a web page project file.

Referring to FIG. 8 , it is a schematic structural diagram of an apparatus for generating a webpage project file provided by an embodiment of the present disclosure. The above apparatus includes the following modules 801 - 805 .

Template file creation module 801, used to call the web page project development framework to create a template file of the web page project file;

The first attribute information extraction module 802 is used to extract the first attribute information of the first webpage element from the webpage design draft file;

A target component determining module 803, configured to determine a target component for implementing the web page elements contained in the web page project file to be generated from the packaged components based on the extracted first attribute information;

An information setting module 804, configured to perform information setting on the determined target component based on the extracted first attribute information;

The file generating module 805 is configured to embed the target component after information setting into the created template file to generate a webpage project file.

It can be seen from the above that when applying the solution provided by the embodiment of the present disclosure to generate a webpage project file, first extract the first attribute information of the first webpage element from the webpage design draft file, and then determine the packaged components based on the first attribute information. To realize the target component of the web page element contained in the web page project file to be generated, and, based on the extracted first attribute information, perform information setting on the determined target component, and then the target component after the information setting can be embedded into the created In the template file, the web page file is successfully generated.

Among them, the solution provided by the embodiment of the present disclosure is to generate the first webpage file based on the template file and the packaged components. Specifically, the components are set based on the information extracted from the webpage design draft file, and the template after the information is set Components are embedded in template files to generate web page files. In this way, the one-stop automatic conversion from the web design draft to the web project file is realized. Compared with the web project file obtained by the developer who writes the code based on the HTML document containing the markup, it saves the time spent on code writing and effectively reduces the The workload and development cost of generating the web page project file are reduced, and the generation efficiency of the web page project file is improved.

In one embodiment of the present disclosure, the target component determining module 803 includes:

The second webpage element determination submodule is used to determine the second webpage element contained in the webpage project file to be generated based on the extracted first attribute information;

The second attribute information obtaining sub-module is used to obtain the determined second attribute information of the second webpage element, wherein the second attribute information includes: element identification, style information, content information and sub-elements of the second webpage element element information;

A target component determining submodule, configured to determine a target component for realizing the second webpage element from the packaged components based on the obtained second attribute information;

The information setting module is specifically configured to perform information setting on the determined target component based on the obtained second attribute information.

It can be seen from the above that when applying the solution provided by the embodiments of the present disclosure to generate a webpage project file, after extracting the first attribute information of the first webpage element from the webpage design draft file, it is also determined based on the extracted first attribute information to determine the The second webpage element included in the webpage project file, and then obtain the second attribute information of the second webpage element, perform component selection and component information setting based on the second attribute information, and finally generate the webpage project file.

Wherein, when selecting the target component, it is selected according to the second attribute information of the second web page element, which can make the target component correspond to the second web page element contained in the web page project file to be generated, which is conducive to comprehensive and accurate determination The target components for realizing each second web page element are obtained, and then based on the determined target components, it is beneficial to generate a web page project file containing the target components for realizing each second element, and improve the accuracy of the generated web page project file .

In an embodiment of the present disclosure, the second webpage element determining submodule is specifically configured to merge the first webpage elements with the same element identifier in the corresponding first attribute information; determine that the merged first webpage element is to be The second web page element included in the generated web page project file.

It can be seen from the above that by merging the first webpage elements with the same element identifier in the corresponding first attribute information into the second webpage element, the first webpage element corresponding to the same webpage element in the actual webpage can be accurately determined as the second webpage element. The second webpage element helps to avoid repeated redundant target components being determined for the first webpage element with the same element identifier, and improves the rationality of subsequently determining the target component.

In one embodiment of the present disclosure, when the second webpage element corresponds to multiple first webpage elements, the style information of the second webpage element is obtained in the following manner:

Obtain the area information of the web page area of each first web page element corresponding to the second web page element; based on the obtained area information, determine the target area information covering the web page area of all the first web page elements corresponding to the second web page element; The target area information is to obtain the style information of the second webpage element.

It can be seen that, in the case where the second webpage element corresponds to multiple first webpage elements, by applying the solutions provided by the embodiments of the present disclosure, it is possible to determine the goal of covering the webpage area of all the first webpage elements corresponding to the second webpage element The area information, and further according to the target area information, can accurately obtain the style information of the second web page element, ensuring that the merged second web page element can be normally displayed in the web page.

In one embodiment of the present disclosure, when the second webpage element corresponds to multiple first webpage elements, the content information of the second webpage element is obtained in the following manner:

Extracting the picture address from the first attribute information describing the first webpage elements corresponding to the second webpage element; obtaining the picture description information of the picture corresponding to the extracted picture address; based on the extracted picture address and the obtained picture description information , to obtain the content information of the second web page element.

It can be seen that, in the case where the second webpage element corresponds to multiple first webpage elements, by applying the solutions provided by the embodiments of the present disclosure, it is possible to comprehensively obtain the corresponding pictures and corresponding images of each first webpage element corresponding to the second webpage element. Image description information, so that the content information of the first web page element can be combined to accurately obtain the content information of the second web page element.

In an embodiment of the present disclosure, the file generating module 805 is specifically configured to determine, from the created template files, the first template file for carrying the first target component and the second template file for carrying the second target component. Template file, wherein the first target component is: a target component for setting information based on the style information of webpage elements, and the second target component is: a target component for setting information based on the content information of webpage elements; Embedding the first target component into the first template file to generate a first web page project file, and embedding the second target component into a second template file to generate a second web page project file.

In this way, template files for carrying different target components can be determined in an orderly manner based on the type of the target component, so that the target components can be embedded in the corresponding template files to generate different types of independent web page project files, which improves the efficiency of each individual web page project file. of reusability.

In an embodiment of the present disclosure, the webpage design draft file is: a file recording attribute information of webpage elements that can be implemented by the packaged component.

This is beneficial to make the webpage elements recorded in the webpage design draft file have corresponding packaged components that can be realized, and prevent the occurrence of the mismatch between the packaged components and the webpage elements recorded in the webpage design draft file, resulting in failure to generate the webpage project file It improves the stability when generating web page project files when the web page elements are missing in the web page project files.

According to the embodiments of the present disclosure, the present disclosure also provides an electronic device, a readable storage medium, and a computer program product.

In one embodiment of the present disclosure, an electronic device is provided, including:

at least one processor; and

a memory communicatively coupled to the at least one processor; wherein,

The memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor, so that the at least one processor can execute the aforementioned method for generating a web page project file.

In one embodiment of the present disclosure, a non-transitory computer-readable storage medium storing computer instructions is provided, wherein the computer instructions are used to cause the computer to execute the aforementioned method for generating a web page project file.

In one embodiment of the present disclosure, a computer program product is provided, including a computer program, and when the computer program is executed by a processor, the aforementioned method for generating a web page project file is implemented.

FIG. 9 shows a schematic block diagram of an example electronic device 900 that may be used to implement embodiments of the present disclosure. Electronic device is intended to represent various forms of digital computers, such as laptops, desktops, workstations, personal digital assistants, servers, blade servers, mainframes, and other suitable computers. Electronic devices may also represent various forms of mobile devices, such as personal digital processing, cellular telephones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are by way of example only, and are not intended to limit implementations of the disclosure described and/or claimed herein.

As shown in FIG. 9 , the device 900 includes a computing unit 901 that can execute according to a computer program stored in a read-only memory (ROM) 902 or loaded from a storage unit 908 into a random-access memory (RAM) 903. Various appropriate actions and treatments. In the RAM 903, various programs and data necessary for the operation of the device 900 can also be stored. The computing unit 901 , ROM 902 , and RAM 903 are connected to each other through a bus 904 . An input/output (I/O) interface 905 is also connected to the bus 904 .

Multiple components in the device 900 are connected to the I/O interface 905, including: an input unit 906, such as a keyboard, a mouse, etc.; an output unit 907, such as various types of displays, speakers, etc.; a storage unit 908, such as a magnetic disk, an optical disk, etc. ; and a communication unit 909, such as a network card, a modem, a wireless communication transceiver, and the like. The communication unit 909 allows the device 900 to exchange information/data with other devices over a computer network such as the Internet and/or various telecommunication networks.

The computing unit 901 may be various general-purpose and/or special-purpose processing components having processing and computing capabilities. Some examples of computing units 901 include, but are not limited to, central processing units (CPUs), graphics processing units (GPUs), various dedicated artificial intelligence (AI) computing chips, various computing units that run machine learning model algorithms, digital signal processing processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 901 executes the various methods and processes described above, such as the aforementioned method for generating a webpage project file. For example, in some embodiments, the aforementioned method for generating a web page project file can be implemented as a computer software program, which is tangibly contained in a machine-readable medium, such as the storage unit 908 . In some embodiments, part or all of the computer program may be loaded and/or installed onto the device 900 via the ROM 902 and/or the communication unit 909 . When the computer program is loaded into the RAM 903 and executed by the computing unit 901, one or more steps of the method for generating the webpage project file described above can be executed. Alternatively, in other embodiments, the computing unit 901 may be configured in any other appropriate way (for example, by means of firmware) to execute the aforementioned method for generating a web page project file.

Various implementations of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chips Implemented in a system of systems (SOC), complex programmable logic device (CPLD), computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include being implemented in one or more computer programs executable and/or interpreted on a programmable system including at least one programmable processor, the programmable processor Can be special-purpose or general-purpose programmable processor, can receive data and instruction from storage system, at least one input device, and at least one output device, and transmit data and instruction to this storage system, this at least one input device, and this at least one output device an output device.

Program codes for implementing the methods of the present disclosure may be written in any combination of one or more programming languages. These program codes may be provided to a processor or controller of a general-purpose computer, a special purpose computer, or other programmable data processing devices, so that the program codes, when executed by the processor or controller, make the functions/functions specified in the flow diagrams and/or block diagrams Action is implemented. The program code may execute entirely on the machine, partly on the machine, as a stand-alone software package partly on the machine and partly on a remote machine or entirely on the remote machine or server.

In the context of the present disclosure, a machine-readable medium may be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media would include one or more wire-based electrical connections, portable computer discs, hard drives, random access memory (RAM), read only memory (ROM), erasable programmable read only memory (EPROM or flash memory), optical fiber, compact disk read only memory (CD-ROM), optical storage, magnetic storage, or any suitable combination of the foregoing.

To provide for interaction with the user, the systems and techniques described herein can be implemented on a computer having a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user. ); and a keyboard and pointing device (eg, a mouse or a trackball) through which a user can provide input to the computer. Other kinds of devices can also be used to provide interaction with the user; for example, the feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and can be in any form (including Acoustic input, speech input or, tactile input) to receive input from the user.

The systems and techniques described herein can be implemented in a computing system that includes back-end components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes front-end components (e.g., as a a user computer having a graphical user interface or web browser through which a user can interact with embodiments of the systems and techniques described herein), or including such backend components, middleware components, Or any combination of front-end components in a computing system. The components of the system can be interconnected by any form or medium of digital data communication, eg, a communication network. Examples of communication networks include: Local Area Network (LAN), Wide Area Network (WAN) and the Internet.

A computer system may include clients and servers. Clients and servers are generally remote from each other and typically interact through a communication network. The relationship of client and server arises by computer programs running on the respective computers and having a client-server relationship to each other. The server can be a cloud server, a server of a distributed system, or a server combined with a blockchain.

It should be understood that steps may be reordered, added or deleted using the various forms of flow shown above. For example, each step described in the present disclosure may be executed in parallel, sequentially, or in a different order, as long as the desired result of the technical solution disclosed in the present disclosure can be achieved, no limitation is imposed herein.

The specific implementation manners described above do not limit the protection scope of the present disclosure. It should be apparent to those skilled in the art that various modifications, combinations, sub-combinations and substitutions may be made depending on design requirements and other factors. Any modifications, equivalent replacements and improvements made within the spirit and principles of the present disclosure shall be included within the protection scope of the present disclosure.

Claims (17)

1. A webpage engineering file generation method comprises the following steps:

calling a webpage engineering development framework, and creating a template file of a webpage engineering file;

extracting first attribute information of a first webpage element from a webpage design draft file;

determining a target component for realizing the webpage elements contained in the webpage engineering file to be generated from the packaged components based on the extracted first attribute information;

setting information of the determined target component based on the extracted first attribute information;

And embedding the target component after the information is set into the created template file to generate a webpage engineering file.

2. The method of claim 1, wherein the determining, from the packaged components, a target component for implementing the web page element included in the web page project file to be generated based on the extracted first attribute information, includes:

determining a second webpage element contained in the webpage engineering file to be generated based on the extracted first attribute information;

obtaining second attribute information of the determined second webpage element, wherein the second attribute information comprises: element identification, style information, content information and element information of sub-elements of the second webpage element;

determining a target component for realizing the second webpage element from the packaged components based on the obtained second attribute information;

the information setting of the determined target component based on the extracted first attribute information includes:

and setting information of the determined target component based on the obtained second attribute information.

3. The method of claim 2, wherein the determining, based on the extracted first attribute information, the second web page element included in the web page project file to be generated includes:

Merging the first webpage elements with the same element identification in the corresponding first attribute information;

and determining the first webpage element after the merging processing as a second webpage element contained in the webpage engineering file to be generated.

4. The method of claim 2, wherein, in case that the second web page element corresponds to a plurality of first web page elements, style information of the second web page element is obtained as follows:

obtaining the area information of the webpage area of each first webpage element corresponding to the second webpage element;

determining target area information of the webpage area covering all the first webpage elements corresponding to the second webpage element based on the obtained area information;

and obtaining style information of the second webpage element according to the target area information.

5. The method of claim 2, wherein in the case that the second web page element corresponds to a plurality of first web page elements, the content information of the second web page element is obtained as follows:

extracting picture addresses from first attribute information describing each first webpage element corresponding to the second webpage element;

obtaining picture description information of a picture corresponding to the extracted picture address;

And obtaining the content information of the second webpage element based on the extracted picture address and the obtained picture description information.

6. The method of any of claims 1-5, wherein the embedding the set-up information target component in the created template file generates a web page engineering file, comprising:

determining a first template file for bearing a first target component and a second template file for bearing a second target component from the created template files, wherein the first target component is: the target component for setting information based on style information of the webpage element, wherein the second target component is as follows: a target component for setting information based on the content information of the webpage element;

embedding the first target component into the first template file to generate a first webpage engineering file, and embedding the second target component into a second template file to generate a second webpage engineering file.

7. The method according to any one of claims 1-5, wherein,

the webpage design draft file is as follows: and recording the file of the attribute information of the webpage element which can be realized by the packaged component.

8. A web page engineering file generating device, comprising:

The template file creating module is used for calling the webpage engineering development framework and creating a template file of the webpage engineering file;

the first attribute information extraction module is used for extracting first attribute information of a first webpage element from the webpage design draft file;

the target component determining module is used for determining a target component for realizing the webpage elements contained in the webpage engineering file to be generated from the packaged components based on the extracted first attribute information;

an information setting module for setting information of the determined target component based on the extracted first attribute information;

the file generation module is used for embedding the target component after the setting information into the created template file to generate the webpage engineering file.

9. The apparatus of claim 8, wherein the target component determination module comprises:

the second webpage element determining submodule is used for determining second webpage elements contained in the webpage engineering file to be generated based on the extracted first attribute information;

a second attribute information obtaining sub-module, configured to obtain the determined second attribute information of the second web page element, where the second attribute information includes: element identification, style information, content information and element information of sub-elements of the second webpage element;

A target component determining sub-module for determining a target component for implementing the second web page element from the packaged components based on the obtained second attribute information;

the information setting module is specifically configured to set information on the determined target component based on the obtained second attribute information.

10. The apparatus of claim 9, wherein,

the second webpage element determining submodule is specifically configured to combine first webpage elements with identical element identifiers in the corresponding first attribute information; and determining the first webpage element after the merging processing as a second webpage element contained in the webpage engineering file to be generated.

11. The apparatus of claim 9, wherein, in case that the second web page element corresponds to the plurality of first web page elements, style information of the second web page element is obtained as follows:

obtaining the area information of the webpage area of each first webpage element corresponding to the second webpage element;

determining target area information of the webpage area covering all the first webpage elements corresponding to the second webpage element based on the obtained area information;

and obtaining style information of the second webpage element according to the target area information.

12. The apparatus of claim 9, wherein in case that the second web page element corresponds to a plurality of first web page elements, the content information of the second web page element is obtained as follows:

extracting picture addresses from first attribute information describing each first webpage element corresponding to the second webpage element;

obtaining picture description information of a picture corresponding to the extracted picture address;

and obtaining the content information of the second webpage element based on the extracted picture address and the obtained picture description information.

13. The device according to any one of claims 8-12, wherein,

the file generation module is specifically configured to determine, from the created template files, a first template file for carrying a first target component and a second template file for carrying a second target component, where the first target component is: the target component for setting information based on style information of the webpage element, wherein the second target component is as follows: a target component for setting information based on the content information of the webpage element; embedding the first target component into the first template file to generate a first webpage engineering file, and embedding the second target component into a second template file to generate a second webpage engineering file.

14. The device according to any one of claims 8-12, wherein,

the webpage design draft file is as follows: and recording the file of the attribute information of the webpage element which can be realized by the packaged component.

15. An electronic device, comprising:

at least one processor; and

a memory communicatively coupled to the at least one processor; wherein,,

the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-7.

16. A non-transitory computer readable storage medium storing computer instructions for causing the computer to perform the method of any one of claims 1-7.

17. A computer program product comprising a computer program which, when executed by a processor, implements the method according to any of claims 1-7.

Images