CN112182470A

CN112182470A - Webpage construction method, device and equipment

Info

Publication number: CN112182470A
Application number: CN202011177257.6A
Authority: CN
Inventors: 郑正东; 方启涵
Original assignee: WeBank Co Ltd
Current assignee: WeBank Co Ltd
Priority date: 2020-10-28
Filing date: 2020-10-28
Publication date: 2021-01-05

Abstract

The embodiment of the invention provides a webpage construction method, a webpage construction device and a webpage construction device, wherein the method comprises the following steps: receiving a construction command input by a user; according to a preset matching mode, matching the construction command with the configuration information of a plurality of groups configured in advance respectively to obtain a matching result corresponding to each group, wherein the matching result is used for judging whether the corresponding page element needs to be displayed or not; processing the html tags with the grouping identifiers in the written html files according to the matching results so as to delete the grouping identifier prefixes in the html tags corresponding to the page elements needing to be displayed and the html tags corresponding to the page elements not needing to be displayed; and constructing a webpage according to the processed html file. The webpage constructed by the scheme has no grouping logic code in the browser, so that the code safety is ensured, the packet size of the constructed result resource is reduced, the time loss of the resource in the network transmission process is reduced, and the operation efficiency is improved.

Description

Webpage construction method, device and equipment

Technical Field

The embodiment of the invention relates to the technical field of internet, in particular to a webpage construction method, a webpage construction device and webpage construction equipment.

Background

With the development of computer technology, more and more technologies are applied in the financial field, the traditional financial industry is gradually changing to financial technology (Finteh), and the web page construction technology is no exception, but higher requirements are also put forward on the technologies due to the requirements of the financial industry on safety and real-time performance.

In the related art, a website is composed of web pages, and a user reads the web pages in the website through a web browser. The web page is an html document containing html tags, the html tags contain page elements (such as characters, pictures and the like) displayed in the web page, and the web browser reads the html document and displays the page elements in the html tags in the web page. The common method for constructing the web page is a web componentization scheme, that is, different page elements are disassembled into components, all the components are combined into a component tree according to grouping logic among the components, and the page is constructed according to the generated component tree.

However, when constructing a web page through a componentization scheme, all components must be initialized and loaded at runtime, and thus grouping logic needs to be executed at code runtime to determine whether corresponding page elements need to be exposed. Therefore, the html document for constructing the webpage necessarily contains the grouping logic codes of the components, so that the grouping logic is easy to crack, the problem of code information leakage is caused, the final constructed resource packet is large, and the operation efficiency is reduced.

Disclosure of Invention

Embodiments of the present invention provide a method, an apparatus, and a device for constructing a web page, so as to solve the problems in the prior art that grouping logic is easy to crack and a final constructed resource package is large, which are caused by constructing a web page by a web componentization method, and reduce operation efficiency.

A first aspect of an embodiment of the present invention provides a method for constructing a web page, including:

receiving a construction command input by a user;

according to a preset matching mode, matching the construction command with the configuration information of a plurality of groups configured in advance respectively to obtain a matching result corresponding to each group, wherein the matching result is used for judging whether the corresponding page element needs to be displayed or not;

processing the html tags with the grouping identifiers in the written html files according to the matching results so as to delete the grouping identifier prefixes in the html tags corresponding to the page elements needing to be displayed and the html tags corresponding to the page elements not needing to be displayed;

and constructing a webpage according to the processed html file.

Optionally, the build command includes a target indication parameter, and the configuration information includes a group identifier and a corresponding indication parameter set;

the preset matching mode is used for matching the construction command with the configuration information of a plurality of groups configured in advance respectively to obtain a matching result corresponding to each group, and comprises the following steps:

and according to a preset matching mode, matching the target indication parameter with each indication parameter in the indication parameter set corresponding to each group identifier respectively to obtain a matching result corresponding to each group identifier.

Optionally, the matching, according to a preset matching mode, the target indication parameter is respectively matched with each indication parameter in the indication parameter set corresponding to each group identifier, so as to obtain a matching result corresponding to each group identifier, where the matching result includes:

detecting whether an indication parameter which is the same as the target indication parameter exists in an indication parameter set corresponding to the group identifier; if yes, the matching result corresponding to the group identification is successful; and if not, the matching result corresponding to the group identification is matching failure.

Optionally, the matching, according to a preset matching mode, the target indication parameter with each indication parameter in the indication parameter set corresponding to each group identifier respectively to obtain a matching result, where the matching includes:

comparing the content of the target indication parameter with the content of each indication parameter in each indication parameter set, wherein if the indication parameter set has an indication parameter completely consistent with the content of the target indication parameter, the matching result corresponding to the group identifier is successful; otherwise, the matching result corresponding to the group identification is matching failure.

comparing the content of the target indication parameter with the content of each indication parameter in each indication parameter set, wherein if the indication parameter set contains the content of the target indication parameter, the matching result corresponding to the corresponding group identifier is successful; otherwise, the matching result corresponding to the corresponding group identifier is matching failure.

detecting whether an indication parameter which is the same as the target indication parameter exists in an indication parameter set corresponding to the group identifier; if the group identifier exists, the matching result corresponding to the group identifier is matching failure; and if not, the matching result corresponding to the group identification is successful matching.

Optionally, the html tag includes a page element, and the processing of the html tag with the group identifier in the written html file according to the matching result includes:

judging whether page elements in html tags corresponding to the grouping identifiers in the html file need to be displayed in a webpage or not according to matching results corresponding to the grouping identifiers;

and deleting the grouping identification prefix in the html tag corresponding to the page element needing to be displayed and the html tag corresponding to the page element not needing to be displayed.

Optionally, the determining, according to the matching result corresponding to each group identifier, whether a page element in the html tag corresponding to each group identifier in the html file needs to be displayed in the web page includes:

if the matching result corresponding to the grouping identifier is successful, the page elements in the html tag corresponding to the grouping identifier in the html file need to be displayed in the webpage;

and if the matching result corresponding to the grouping identifier is matching failure, the page elements in the html tag corresponding to the grouping identifier in the html file do not need to be displayed in the webpage.

Optionally, the processing, according to the matching result, the html tag with the group identifier in the written html file includes:

generating an abstract syntax tree according to html tags in the html files, wherein each node in the abstract syntax tree corresponds to one html tag;

if the matching result corresponding to the grouping identifier is successful, traversing all first nodes with the grouping identifier in the abstract syntax tree in a depth-first mode, and deleting the grouping identifier prefix in the first nodes; if the matching result corresponding to the grouping identifier is matching failure, traversing all first nodes with the grouping identifier in the abstract syntax tree in a breadth-first mode, and deleting the first nodes;

and converting the obtained new abstract syntax tree into a new html file.

Optionally, the generating an abstract syntax tree according to the html tag in the html file includes:

extracting all html tags in the html file;

analyzing the extracted html tags to obtain parent-child relationships among all html tags;

determining the node attribute characteristics and parent-child node relation corresponding to each html label according to the parent-child relation among the html labels;

and generating the abstract syntax tree by taking the father node as a root node.

A second aspect of the embodiments of the present invention provides a web page constructing apparatus, including:

the receiving module is used for receiving a construction command input by a user;

the matching module is used for matching the construction command with the configuration information of a plurality of groups configured in advance respectively according to a preset matching mode to obtain a matching result corresponding to each group, and the matching result is used for judging whether the corresponding page element needs to be displayed or not;

the processing module is used for processing the html tag with the grouping identifier in the written html file according to the matching result so as to delete the grouping identifier prefix in the html tag corresponding to the page element needing to be displayed and the html tag corresponding to the page element not needing to be displayed;

and the construction module is used for constructing a webpage according to the processed html file.

A third aspect of an embodiment of the present invention provides a computer apparatus, including: at least one processor and memory;

the memory stores computer-executable instructions;

the at least one processor executes the computer-executable instructions stored in the memory, so that the at least one processor executes the web page construction method provided by the first aspect of the embodiment of the present invention.

A fourth aspect of the present invention provides a computer-readable storage medium, where computer-executable instructions are stored in the computer-readable storage medium, and when a processor executes the computer-executable instructions, the method for constructing a web page according to the first aspect of the present invention is implemented.

The embodiment of the invention provides a webpage construction method, a webpage construction device and webpage construction equipment, wherein the method comprises the steps of receiving a construction command input by a user; and according to a preset matching mode, matching the construction command with the configuration information of a plurality of groups configured in advance respectively to obtain a matching result corresponding to each group. The matching result is used for judging whether the corresponding page element needs to be displayed or not; therefore, the html tag with the grouping identifier in the written html file can be processed according to the matching result, that is, the grouping identifier prefix in the html tag corresponding to the page element needing to be displayed and the html tag corresponding to the page element not needing to be displayed are deleted, so that the processed html file does not contain the grouping identifier. The web page constructed by the scheme has no grouping logic code in the browser, so that the packet size of the constructed result resource is reduced, the time loss of the resource in the network transmission process is reduced, and the operation efficiency is improved.

Drawings

In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to these drawings without creative efforts.

FIG. 1 is a diagram illustrating an application scenario of a web page construction method according to an exemplary embodiment of the present invention;

FIG. 2 is a flowchart illustrating a web page construction method according to an exemplary embodiment of the invention;

FIG. 3 is a flow diagram illustrating a method of constructing an abstract syntax tree in accordance with an exemplary embodiment of the present invention;

FIG. 4 is a diagram illustrating the structure of an abstract syntax tree in accordance with an exemplary embodiment of the present invention;

FIG. 5 is a diagram illustrating the structure of an abstract syntax tree in accordance with another exemplary embodiment of the present invention;

fig. 6 is a schematic structural diagram of a web page building apparatus according to an exemplary embodiment of the present invention;

fig. 7 is a schematic structural diagram of a computer device according to an exemplary embodiment of the present invention.

Detailed Description

In order to make the objects, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.

The terms "first," "second," "third," "fourth," and the like in the description and in the claims, as well as in the drawings, if any, are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used is interchangeable under appropriate circumstances such that the embodiments of the invention described herein are, for example, capable of operation in sequences other than those illustrated or otherwise described herein. Furthermore, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.

At present, with the development of internet technology, more and more information is shared and interacted through the internet. The internet user can access various types of websites to obtain a large amount of information resources, and can also publish information which the user wants to disclose through the websites. The website is composed of web pages, and a user reads the web pages in the website through a web browser. The web page is an html document containing html tags, the html tags contain page elements (such as characters, pictures and the like) displayed in the web page, and the web browser reads the html document and displays the page elements in the html tags in the web page.

In the related art, a common method for constructing a web page is a web componentization scheme, that is, different page elements are disassembled into components, all the components are combined into a component tree according to grouping logic among the components, and a page is constructed according to the generated component tree. However, when constructing a web page through a componentization scheme, all components must be initialized and loaded at runtime, and thus grouping logic needs to be executed at code runtime to determine whether corresponding page elements need to be exposed. Therefore, the html document for constructing the webpage necessarily contains the grouping logic codes of the components, the Javascript language is executed when the browser runs, and the component codes can be easily obtained by a developer tool carried by the browser, so that the grouping logic in the codes is easy to break, and certain loss is easily caused. For example, some payment functions in a web page need to be processed differently according to different clients, and if the grouping logic in the code is cracked, clients who do not meet the conditions can use the functions, so that great loss is caused to corresponding items. And the final construction resource package is larger, and the operation efficiency is reduced.

Aiming at the defect, the technical concept of the technical scheme of the invention mainly comprises the following steps: firstly determining grouping configuration information, and when a webpage is constructed, firstly performing grouping logic judgment on a construction command input by a user according to the predetermined grouping configuration information, namely: and matching the content in the construction command with the content in each group according to a preset matching mode to obtain a matching result of the construction command and each group, wherein the matching result is used for judging whether the corresponding page element needs to be displayed. Writing an html file, wherein html tags in the html file are provided with grouping identifiers and page elements, and filtering the html tags in the html file according to a construction command and a matching result of each group, namely deleting the grouping identifiers in the html tags corresponding to the page elements needing to be displayed and the html tags corresponding to the page elements not needing to be displayed, so that only the tags corresponding to the page elements needing to be displayed exist in the finally generated html file, and no grouping identifiers exist. According to the scheme, the grouping logic of the tags is judged in the webpage code construction stage, whether the corresponding page elements need to be displayed is determined according to the judgment result, and html tags corresponding to the page elements which do not need to be displayed and grouping marks in the html tags corresponding to the page elements which need to be displayed are deleted before the webpage is generated, so that when the browser runs an html file to generate the webpage, no html tag grouping logic codes exist in the browser, and information safety is guaranteed. Meanwhile, because the finally generated html file does not include the grouping logic code, the packet size of the construction result resource is reduced, the time loss of the resource in the network transmission process is reduced, and the operation efficiency is improved.

Fig. 1 is an application scenario diagram illustrating a web page construction method according to an exemplary embodiment of the present invention.

As shown in fig. 1, the basic architecture of the application scenario provided by this embodiment mainly includes: an operation terminal 101, a server 102, and a display terminal 103; the display terminal can be any terminal with a display function, such as a mobile phone, a tablet, a computer and the like. An operator inputs a webpage construction code in the html file through the operation terminal, for example, the code input by the operator is < div > search </div >, when a user browses the webpage through a browser at the display terminal, the server reads the html file, and a 'search' two-character is displayed on the webpage displayed by the display terminal.

Fig. 2 is a flowchart illustrating a web page construction method according to an exemplary embodiment of the present invention, where an execution subject of the method provided in this embodiment may be a server in the embodiment illustrated in fig. 1, or may be a related construction tool in the server.

As shown in fig. 2, the method provided by the present embodiment may include the following steps.

S201, receiving a construction command input by a user.

Specifically, the developer inputs a corresponding building command through an information input tool (such as a hardware keyboard, a software keyboard, etc.) according to a page element to be displayed in the web page to be built.

It should be noted that the construction command may include a target indication parameter determined by a user, and the target indication parameter may be used for performing packet matching, and please refer to the description in the following related embodiments for a specific matching method.

In some embodiments, before receiving a build command input by a user, a command for accepting parameters and a parameter identifier are configured in the webpack front-end packaging tool, so that the webpack can receive the corresponding build command. For example, if the developer wants to input a build command including "abc", the developer needs to configure a command for receiving "abc" and a parameter abc in webpack, and when the developer inputs a corresponding build command, the webpack can receive the build command.

S202, according to a preset matching mode, the construction command is respectively matched with the preset configuration information of a plurality of groups to obtain a matching result corresponding to each group, and the matching result is used for judging whether the corresponding page elements need to be displayed or not.

The pre-configured configuration information of the plurality of groups may be a set of a plurality of command parameters or a set of a series of character strings, and the advanced configuration may be a set of feature values based on probability and statistics. In particular, the configuration information of the group can be determined according to the type of the web page that needs to be constructed actually.

Specifically, after the webpack receives the construction command, when the construction command is executed, the contents contained in the construction command are respectively matched with the configuration information of the plurality of pre-configured packets through the webpack-plugin according to a preset matching mode, so as to obtain a matching result corresponding to each packet, wherein the matching mode can be determined by a developer, the matching modes are different, and the matching result corresponding to each packet is also different. And finally, the obtained matching result corresponding to each group is used for judging whether the page elements in the html tag corresponding to each group need to be displayed. The webpack-plugin is a plugin provided by the scheme based on a webpack mechanism, and the plugin can be used for setting a construction environment in a user-defined mode.

Illustratively, if the matching mode is determined to contain the mode, comparing the content in the construction command with the configuration information of the first group and the configuration information of the second group, and if the configuration information of the first group contains the content in the construction command, successfully matching the construction command with the first group; if the configuration information of the second packet does not contain the content of the build command, the build command fails to match the second packet.

And S203, processing the html tag with the grouping identifier in the written html file according to the matching result so as to delete the grouping identifier in the html tag corresponding to the page element needing to be displayed and the html tag corresponding to the page element not needing to be displayed.

Specifically, developers write html files in advance, wherein the html files comprise html tags, and the html tags are provided with grouping identifiers. And judging whether the page elements in the html tags corresponding to each group need to be displayed or not by a filter tool webpack-loader pre-configured in the webpack according to the matching result of the construction command and the configuration information of each group.

Illustratively, if the matching between the building command and the first packet is successful, page elements in html tags with packet identifiers of the first packet in the html file need to be displayed, and then the packet identifiers in the html tags corresponding to all the first packets in the html file are deleted; and if the matching of the building command and the second grouping fails, page elements in html tags with grouping identifications of the second grouping in the html file do not need to be displayed, and then html tags corresponding to all the second grouping in the html file are deleted.

And S204, constructing a webpage according to the processed html file.

Specifically, the server reads the processed html file, analyzes the html tag in the html file to obtain a page element, and displays the page element.

In the embodiment, a construction command input by a user is received; and according to a preset matching mode, matching the construction command with the configuration information of a plurality of groups configured in advance respectively to obtain a matching result corresponding to each group. The matching result is used for judging whether the corresponding page element needs to be displayed or not; therefore, the html tag with the grouping identifier in the written html file can be processed according to the matching result, that is, the grouping identifier in the html tag corresponding to the page element needing to be displayed and the html tag corresponding to the page element not needing to be displayed are deleted, so that the processed html file does not contain the grouping identifier. The web page constructed by the scheme has no grouping logic code in the browser, so that the packet size of the constructed result resource is reduced, the time loss of the resource in the network transmission process is reduced, and the operation efficiency is improved.

In some embodiments, the build command input by the user includes a target indication parameter, the pre-configured configuration information of the plurality of groups includes a group identifier of each group and an indication parameter set included in each group, the indication parameter set may be a set of the plurality of command parameters or a set of a series of character strings, and the advanced configuration may be a set of feature values based on probability and statistics. In particular, the configuration information of the group can be determined according to the type of the web page that needs to be constructed actually.

Illustratively, the configuration information of the packet is described by taking a character string as an example. Assuming that a developer configures two GROUPs in advance, wherein the GROUP identifiers are GROUP1 and GROUP2, respectively, the GROUP1 includes three character strings of black, white and red, the GROUP2 includes three character strings of good, bad and abc, and the configuration information of the two GROUPs is GROUP1 black, white and red, respectively; GROUP2 is good, bad, abc.

In a possible embodiment, the matching the construction command with the configuration information of the plurality of pre-configured packets respectively according to a preset matching mode to obtain a matching result corresponding to each packet includes: and according to a preset matching mode, matching the target indication parameter with each indication parameter in the indication parameter set corresponding to each group identifier respectively to obtain a matching result corresponding to each group identifier.

The matching mode can be determined by a developer, the matching mode is different, and the matching result corresponding to each group is also different.

For example, assuming that the matching pattern is a contained pattern, the construction command input by the user is npm run build-group red (the command is a command for executing the webpack construction, and the main function is to transmit the target indication parameter to the webpack), wherein "red" is the target indication parameter. The configuration information of the two GROUPs is GROUP1 black, white, red; GROUP2 is good, bad, abc. Matching the target indication parameter 'red' in the construction command with the indication parameters corresponding to the GROUP1 and the GROUP2 respectively, wherein the GROUP1 comprises the target indication parameter red, and the matching result corresponding to the GROUP1 is successful; if the GROUP2 does not include the target indication parameter red, it indicates that the matching result corresponding to the GROUP2 is a matching failure.

It should be noted that the matching mode may include, but is not limited to, five matching modes including a mode, a full matching mode, a partial matching mode, an exclusion mode, and a custom mode, and a developer may select the matching mode according to actual requirements, and the mode may be set when configuring the webpack-plug of the tool in webpack, and may set a plurality of matching modes in the webpack-plug at a time, and the webpack-plug performs grouping judgment on the target indication parameters in the input build command. The specific matching rules of these five matching patterns will be described in detail below.

In a possible embodiment, if the matching mode is an inclusion mode, the matching the target indication parameter with each indication parameter in the indication parameter set corresponding to each group identifier according to a preset matching mode to obtain a matching result corresponding to each group identifier includes: detecting whether an indication parameter which is the same as the target indication parameter exists in an indication parameter set corresponding to the group identifier; if yes, the matching result corresponding to the group identification is successful; and if not, the matching result corresponding to the group identification is matching failure.

Specifically, it is assumed that two packets are configured in advance, and the configuration information of the two packets is GROUP1 black, white, red; GROUP2 is good, bad, abc. The input construction command is npm run built-GROUP red, and the detection shows that the target indication parameter red in the construction command exists in the GROUP1, so that the matching result corresponding to the GROUP1 is successful; if the GROUP2 does not include the target indication parameter red, the matching result corresponding to the GROUP2 is a matching failure.

In one case of the present embodiment, matching results of the target indication parameter in the input build command and the indication parameter in the configuration information of each group are respectively tagged in the global environment variable in the configuration information of each group. In this embodiment, the grouping identifier is a global environment variable, the matching success is represented by true, and the matching failure is represented by false. For example, in the above example, if the matching result corresponding to the GROUP1 IS a successful match, and the matching result corresponding to the GROUP2 IS a failed match, the matching result IS labeled in the corresponding global environment variable, and the labeling result IS _ GROUP1 equal to true, and IS _ GROUP2 equal to false.

It should be noted that, when the matching packet includes a pattern, cases are not distinguished, that is, if the input build command is npm run build-GROUP Red or npm run build-GROUP Red, it is considered that the target indication parameter in the build command exists in the GROUP1, and the matching result corresponding to the GROUP1 is a successful matching.

In a possible embodiment, if the matching mode is a full matching mode, the matching the target indication parameter with each indication parameter in the indication parameter set corresponding to each group identifier according to a preset matching mode to obtain a matching result includes: comparing the content of the target indication parameter with the content of each indication parameter in each indication parameter set, wherein if the indication parameter set has an indication parameter completely consistent with the content of the target indication parameter, the matching result corresponding to the group identifier is successful; otherwise, the matching result corresponding to the group identification is matching failure.

Specifically, in the embodiment, in the full matching mode, each character in the target indication parameter needs to be compared with each character of each indication parameter in the configuration information, and when the characters are completely consistent, it is determined that the matching is successful.

For example, it is assumed that two packets are configured in advance, and the configuration information of the two packets is GROUP1 black, white, red; GROUP2 is good, bad, abc. And if the input construction command is npm run built-GROUP red, the matching result corresponding to the GROUP1 is successful, and the matching result corresponding to the GROUP2 is failed. If the input construction command is npm run built-GROUP RED, matching is performed in a full matching mode, and the target indication parameter RED in the construction command is not completely consistent with the indication parameter RED in the GROUP1, the matching result corresponding to the GROUP1 is matching failure, and the matching result corresponding to the GROUP2 is matching failure.

In one case of this embodiment, matching results of the target indication parameter in the input build command and the indication parameter in each group configuration information are respectively marked in the global environment variable in the configuration information of the corresponding group. For example, in the above example, if the matching result corresponding to the GROUP1 IS a matching failure, and the matching result corresponding to the GROUP2 IS a matching failure, the matching result IS labeled in the corresponding global environment variable, and the labeling result IS _ GROUP1 ═ false, and IS _ GROUP2 ═ false.

In a possible embodiment, if the matching mode is a partial matching mode, the matching the target indication parameter with each indication parameter in the indication parameter set corresponding to each group identifier according to a preset matching mode to obtain a matching result includes: comparing the content of the target indication parameter with the content of each indication parameter in each indication parameter set, wherein if the indication parameter set contains the content of the target indication parameter, the matching result corresponding to the corresponding group identifier is successful; otherwise, the matching result corresponding to the corresponding group identifier is matching failure.

For example, it is assumed that two packets are configured in advance, and the configuration information of the two packets is GROUP1 black, white, red; GROUP2 is good, bad, abc. If the input construction command is npm run built-GROUP d, comparing the letter d with the letters of each indicated parameter in the GROUP1 and the GROUP2, and according to the comparison, red in the GROUP1 and good and bad in the GROUP2 both contain the letter d, the matching result corresponding to the GROUP1 is successful, and the matching result corresponding to the GROUP2 is successful.

In one case of this embodiment, matching results of the target indication parameter in the input build command and the indication parameter in each group configuration information are respectively marked in the global environment variable in the configuration information of the corresponding group. For example, in the above example, if the matching result corresponding to the GROUP1 IS successful, and the matching result corresponding to the GROUP2 IS successful, the matching result IS labeled in the corresponding global environment variable, and the labeling result IS _ GROUP1 equal to true, and IS _ GROUP2 equal to true.

In a possible embodiment, if the matching mode is an exclusion mode, the matching the target indication parameter with each indication parameter in the indication parameter set corresponding to each group identifier according to a preset matching mode to obtain a matching result includes: detecting whether an indication parameter which is the same as the target indication parameter exists in an indication parameter set corresponding to the group identifier; if the group identifier exists, the matching result corresponding to the group identifier is matching failure; and if not, the matching result corresponding to the group identification is successful matching.

Specifically, the exclusion mode is the reverse of the inclusion mode described above. For example, the configuration information of the two packets is GROUP1 black, white, red; GROUP2 is good, bad, abc. And if the input construction command is npm run built-GROUP red, matching red with each indication parameter in GROUP1 and GROUP2, according to the matching, the GROUP1 contains red, the GROUP2 does not contain red, the matching result corresponding to the GROUP1 is matching failure, and the matching result corresponding to the GROUP2 is matching success.

In one case of this embodiment, matching results of the target indication parameter in the input build command and the indication parameter in each group configuration information are respectively marked in the global environment variable in the configuration information of the corresponding group. For example, in the above example, if the matching result corresponding to the GROUP1 IS a successful match, and the matching result corresponding to the GROUP2 IS a successful match, the matching result IS labeled in the corresponding global environment variable, and the labeling result IS _ GROUP1 ═ false, and IS _ GROUP2 ═ true.

In one possible embodiment, the custom schema is an advanced schema, which is mainly used to make custom complex logical groupings. When the mode is applied, the corresponding logic function needs to be transmitted into the condition parameter of the webpack-plugin. And when the building command is executed, obtaining a matching result corresponding to each group identifier according to the operation result of the condition parameters, wherein the webpack-plugin is a plug-in mechanism provided by the webpack and can be used for setting the building environment in a self-defined manner. The mode mainly applies the scene of complex conditional logic or computation based on a complex statistical model as a precondition for displaying special display logic.

In some embodiments, webpack-loader for custom tag filtering is introduced into a webpack configuration file, tag filtering is performed before other webpack-loaders execute, meanwhile, a packet identification prefix in each html tag in an html file is transmitted into the webpack-loader, a packet judgment result obtained from the above webpack-plug is transmitted into the webpack-loader, and the webpack-loader performs filtering processing on the html tag with the packet identification in the html file according to the packet judgment result. The implementation mode of the method for filtering the html tag with the grouping identification in the written html file according to the matching result of the construction command and each grouping is as follows:

firstly, screening out html tags with grouping identifications in an html file according to matching results, and then judging whether page elements in the html tags corresponding to the grouping identifications in the html file need to be displayed in a webpage or not according to the matching results corresponding to the grouping identifications; and deleting the grouping identification in the html tag corresponding to the page element needing to be displayed and the html tag corresponding to the page element not needing to be displayed.

Specifically, if the matching result corresponding to the group identifier is that the matching is successful, the page element in the html tag corresponding to the group identifier in the html file needs to be displayed in the web page; and if the matching result corresponding to the grouping identifier is matching failure, the page elements in the html tag corresponding to the grouping identifier in the html file do not need to be displayed in the webpage.

In one case of this embodiment, it IS determined whether the condition IS _ GROUP IS satisfied, and if so, it indicates that the target indication parameter in the build command IS successfully matched with the packet GROUP. If not, the matching is failed. If IS _ GROUP IS equal to true, this condition IS satisfied, and if IS _ GROUP IS equal to false, this condition IS not satisfied.

Illustratively, the configuration information of the two predetermined packets is GROUP1 black, white, red; GROUP2 ═ good, bad, abc, the input build command is npm run build-GROUP red, and the code contained in the written html file is as follows:

<div>

<group1-div>BAT</group1-div>

<group2-div>MTP</group2-div>

</div>

wherein, "< group1-div > BAT </group1-div >" and "< group2-div > MTP </group2-div >" are two html tags, BAT and MTP are page elements in the two html tags, and group1 and group2 are group identifications of the two groups.

If the input construction command is matched with the two groups, the adopted mode is the inclusion mode, and the result of the group matching is as follows: the matching result corresponding to the GROUP1 IS a successful matching (i.e., IS _ GROUP1 IS true), and the matching result corresponding to the GROUP2 IS a failed matching (i.e., IS _ GROUP2 IS false). According to the matching result, in two html tags in the html file, BAT in < group1-div BAT </group1-div > is a page element which needs to be shown in a webpage, and MTP is a page element which does not need to be shown in the webpage, so that the group identification prefixes "group 1-" and < group2-div > MTP </group2-div > in < group1-div BAT </group1-div > need to be deleted. The resulting code contained in the processed html file is as follows:

<div>

</div>

therefore, the code in the html file after processing has no grouping logic code at all.

In a possible case of this embodiment, if the developer wants to display the page element in the web page instead of the MTP but instead of the BAT, the developer only needs to change the target indication parameter in the build command from red to the indication parameter in the GROUP2, which may be any one or more of good, bad and abc, or change the configuration information of the packet, for example, increase the indication parameter in the GROUP2 by red.

It should be noted that if the input build command matches the two packets, and other matching modes are adopted, there may be other situations in the html file finally formed. For example, if the exclusion mode is adopted, the packet matching result is: the matching result corresponding to the GROUP1 IS a failure in matching (i.e., IS _ GROUP1 IS false), and the matching result corresponding to the GROUP2 IS a success in matching (i.e., IS _ GROUP2 IS true), so the GROUP identification prefix "GROUP 2" in the GROUP1-div BAT 1-div and the GROUP2-div MTP 2-div IS deleted. The resulting code contained in the processed html file is as follows:

<div>

</div>

it should be noted that, no matter which of the above six matching modes is adopted in the packet matching, the process of processing the html tag with the packet identifier in the written html file according to the matching result is similar to the above process, and is not illustrated here.

Further, the specific implementation manner of filtering the html tag in the html file is as follows: after extracting html tags with grouping identifications in the html file according to the grouping matching result, converting the html tags in the html file into Abstract Syntax Trees (AST), wherein each html tag in the html file corresponds to one node in the Abstract Syntax trees, filtering the nodes in the Abstract Syntax trees according to the grouping matching result, and converting the processed Abstract Syntax trees into the html file. Specifically, referring to fig. 3, the method may include the following steps.

S301, extracting all html tags in the html file.

Specifically, all html tags in the html file are provided with grouping identifiers, and all html tags with the grouping identifiers in the html file can be extracted according to matching results corresponding to the grouping identifiers.

S302, analyzing the extracted html tags to obtain the parent-child relationship among all the html tags.

And S303, determining the node attribute characteristics and the parent-child node relationship corresponding to each html tag according to the parent-child relationship among the html tags.

Specifically, the corresponding parent-child relationships of all the tags are decomposed by using an xml parsing tool, and corresponding AST attribute characteristics and parent-child node relationships are labeled on each tag according to the relationships.

For example, it can be obtained through the xml parsing tool that a parent-child relationship exists between the first tag and the second tag, the first tag is a parent tag, the second tag is a child tag, the first node corresponding to the first tag and the second node corresponding to the second tag are in a parent-child relationship, the first node is a parent node, and the second node corresponding to the second tag is a child node.

And S304, generating an abstract syntax tree by taking the father node as a root node.

For example, it is assumed that a written html file contains five html tags, where five letters A, B, C, D and E are used to respectively represent page elements contained in the five html tags, and the specific codes are as follows:

<div>

<group1-div>A</group1-div>

<group2-div>B</group2-div>

<group3-div>C</group1-div>

<group4-div>D</group2-div>

<group5-div>E</group1-div>

</div>

for convenience of description, html tags corresponding to the five group identifiers (group 1-group 5) are referred to as a first tag, a second tag, a third tag, a fourth tag and a fifth tag, respectively. Then, suppose the corresponding parent-child relationships of the five tags decomposed using the xml parsing tool are: the first label is in a parent-child relationship with the second label and the third label, and the first label is a parent label of the second label and the third label; the second tag and the fourth tag have a parent-child relationship with the fifth tag, and the second tag is a parent tag of the fourth tag and the fifth tag. Then, labeling the corresponding AST attribute feature on each label according to the relationship, and obtaining a parent-child node relationship, where a first node corresponding to the first label is in a parent-child node relationship with a second node corresponding to the second label and a third node corresponding to the third label, and the first node is a parent node of the second node and the third node, that is, the second node and the third node are child nodes of the first node; the second node is a parent node of a fourth node corresponding to the fourth label and a fifth node corresponding to the fifth label, and the fourth node and the fifth node are child nodes of the second node. The abstract syntax tree finally generated with the parent node as the root node is shown in fig. 4.

Further, after the establishment of the abstract syntax tree corresponding to the html file is completed, filtering the nodes in the abstract syntax tree, which specifically includes: if the matching result corresponding to the grouping identifier is successful, traversing all first nodes with the grouping identifier in the abstract syntax tree in a depth-first mode, and deleting the grouping identifier prefix in the first nodes; and if the matching result corresponding to the grouping identifier is matching failure, traversing all the first nodes with the grouping identifier in the abstract syntax tree in a breadth-first mode, and deleting the first nodes.

In a case of this embodiment, it IS determined whether the condition IS _ GROUP IS satisfied, and if so, it indicates that the target indication parameter in the construction command IS successfully matched with the GROUP, and then the abstract syntax tree IS traversed with depth first through all nodes with the GROUP identifier. If the mapping is not established, the matching is failed, and the breadth is preferentially traversed through all the nodes with the grouping identifications in the abstract syntax tree.

Specifically, if IS _ GROUP5 IS true (IS _ GROUP5 IS true), that IS, the matching result corresponding to GROUP5 IS a successful match, then depth-first traverses all html nodes with prefixes of GROUP5-, and removes the prefixes of the corresponding html nodes, so that the < GROUP5-div > E </GROUP5-div > IS converted into a tag that can be recognized by a browser, such as < div > E </div >. If IS _ GROUP5 ═ false, then breadth first traverses all html nodes of GROUP5 and removes the node directly in the abstract syntax tree.

For example, assume that the packet matching result obtained after packet matching is: matching results corresponding to group1, group2, group3 and group4 are all successful in matching, and matching results corresponding to group5 are failed in matching, and the abstract syntax tree after filtering is shown in fig. 5.

Further, the obtained new abstract syntax tree is converted into a new html file.

Specifically, the new abstract syntax tree (as shown in fig. 5) after filtering is converted into a new html file, and the new html file contains the following contents:

<div>

</div>

it should be noted that, in this embodiment, the html file filtering process is completed in the webpack-loader, and after a new html file is obtained after processing, the new html file is returned to the webpack.

In this embodiment, the purpose of using depth-first traversal when matching is successful is that when there are multiple matching conditions, a logic relationship of nesting of parent and child nodes occurs, and then all leaf nodes and child nodes of the branch need to be retrieved during retrieval. This has the advantage that all preset conditions can be guaranteed to be met and the correctness of the output structure is guaranteed.

For example, < group1-div > < group2-div > </gourp2-div > < group1-div >, when the matching result corresponding to the group1 is successful, the child node group2 can not be guaranteed to meet the filtering condition, so that the child node group needs to be searched downwards, if the matching result corresponding to the group2 is successful, the group2 node is reserved, and if the matching result of the group2 is failed, the group2 node is removed.

In this embodiment, the purpose of performing breadth-first traversal when matching fails is to be described, that is, when a node that fails to be matched is matched, the node needs to be deleted, and since the inclusion relationship of the xml language determines that child nodes do not need to be retained, it is not necessary to continue traversing the node state. This has the advantage of improving retrieval efficiency and reducing unnecessary overhead.

In the embodiment, since the processing logic of the packet tag in the html file is completely completed at the time of code construction, the following advantages are provided compared with the existing web componentization scheme.

Firstly, the operating efficiency is improved. The conventional web componentization scheme needs to execute grouping operation logic to determine whether page elements need to be displayed or not when codes run, and the function can be completed by adopting the scheme without grouping logic codes in the browser, so that the running efficiency is improved, the packet size of the constructed result resources is reduced, and the time loss of the resources in the network transmission process is reduced.

Second, safety risks are reduced. Since the browser executes the Javascript script language during operation, and the code can be easily acquired by a developer tool carried by the browser. If there is grouping logic in the source code and the source code is cracked (if some payment functions need to be processed differently according to different clients, if the function is cracked, clients which do not satisfy the condition can also use the function), unpredictable loss can be caused to the project. By using the method and the system for constructing the webpage, the grouping logic cannot exist in the browser, and cannot be analyzed from the acquired codes, so that intellectual property is protected to a certain extent.

And thirdly, the runtime logic is creatively advanced to the construction time, so that the front-end project of the webpage is more engineered. By using the conventional web componentization scheme, javascript patches need to be printed everywhere in the source code, so that the maintenance is not easy and the readability is poor. By using the scheme of the patent, the display of the page elements is completely completed by the construction tools (webpack, webpack-plugin and webpack-loader), developers only need to adjust the grouping configuration information and the target indication parameters in the construction command to change the display of the page elements, and the readability and maintainability of the code are improved.

Fig. 6 is a schematic structural diagram of a web page building apparatus according to an exemplary embodiment of the present invention.

As shown in fig. 6, the web page constructing apparatus provided in this embodiment includes: a receiving module 601, a matching module 602, a processing module 603 and a constructing module 604; the receiving module 601 is configured to receive a build command input by a user; a matching module 602, configured to match the building command with configuration information of a plurality of groups configured in advance respectively according to a preset matching mode, so as to obtain a matching result corresponding to each group, where the matching result is used to determine whether a corresponding page element needs to be displayed; the processing module 603 is configured to process the html tag with the group identifier in the written html file according to the matching result, so as to delete the group identifier prefix in the html tag corresponding to the page element that needs to be displayed and the html tag corresponding to the page element that does not need to be displayed; and the constructing module 604 is configured to construct a webpage according to the processed html file.

Further, the build command includes a target indication parameter, and the configuration information includes a group identifier and a corresponding indication parameter set; the matching pattern is specifically configured to:

Further, the matching pattern is specifically configured to:

Further, the matching pattern is further configured to:

Further, the html tag includes a page element, and the processing module is specifically configured to:

Further, the processing module is specifically configured to:

and converting the obtained new abstract syntax tree into a new html file.

Further, the processing module is specifically configured to:

extracting all html tags in the html file;

For detailed functional description of each module in this embodiment, reference is made to the description of the embodiment of the method, and the detailed description is not provided herein.

It is understood that the same or similar parts in the above embodiments may be mutually referred to, and the same or similar parts in other embodiments may be referred to for the content which is not described in detail in some embodiments.

Fig. 7 is a schematic hardware structure diagram of a computer device according to an embodiment of the present invention. As shown in fig. 7, the present embodiment provides a computer apparatus 700 including: at least one processor 701 and a memory 702. The processor 701 and the memory 702 are connected by a bus 703.

In a specific implementation process, the at least one processor 701 executes the computer-executable instructions stored in the memory 702, so that the at least one processor 701 executes the web page building method in the foregoing method embodiment.

For a specific implementation process of the processor 701, reference may be made to the above method embodiments, which implement principles and technical effects similar to each other, and details of this embodiment are not described herein again.

In the embodiment shown in fig. 7, it should be understood that the Processor may be a Central Processing Unit (CPU), other general purpose processors, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), etc. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like. The steps of a method disclosed in connection with the present invention may be embodied directly in a hardware processor, or in a combination of the hardware and software modules within the processor.

The memory may comprise high speed RAM memory and may also include non-volatile storage NVM, such as at least one disk memory.

The bus may be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, an Extended ISA (EISA) bus, or the like. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of illustration, the buses in the figures of the present application are not limited to only one bus or one type of bus.

Another embodiment of the present application provides a computer-readable storage medium, in which computer-executable instructions are stored, and when a processor executes the computer-executable instructions, the method for constructing a web page in the above method embodiment is implemented.

The computer-readable storage medium may be implemented by any type of volatile or non-volatile memory device or combination thereof, such as Static Random Access Memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic or optical disk. Readable storage media can be any available media that can be accessed by a general purpose or special purpose computer.

An exemplary readable storage medium is coupled to the processor such the processor can read information from, and write information to, the readable storage medium. Of course, the readable storage medium may also be an integral part of the processor. The processor and the readable storage medium may reside in an Application Specific Integrated Circuits (ASIC). Of course, the processor and the readable storage medium may also reside as discrete components in the apparatus.

Those of ordinary skill in the art will understand that: all or a portion of the steps of implementing the above-described method embodiments may be performed by hardware associated with program instructions. The program may be stored in a computer-readable storage medium. When executed, the program performs steps comprising the method embodiments described above; and the aforementioned storage medium includes: various media that can store program codes, such as ROM, RAM, magnetic or optical disks.

Finally, it should be noted that: the above embodiments are only used to illustrate the technical solution of the present invention, and not to limit the same; while the invention has been described in detail and with reference to the foregoing embodiments, it will be understood by those skilled in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some or all of the technical features may be equivalently replaced; and the modifications or the substitutions do not make the essence of the corresponding technical solutions depart from the scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for constructing a web page, comprising:

receiving a construction command input by a user;

and constructing a webpage according to the processed html file.

2. The method of claim 1, wherein the build command contains a target indication parameter, and wherein the configuration information comprises a group identifier and a corresponding set of indication parameters;

the matching the construction command with the configuration information of the plurality of groups configured in advance respectively according to the preset matching mode to obtain the matching result corresponding to each group includes:

3. The method according to claim 2, wherein the matching the target indication parameter with each indication parameter in the indication parameter set corresponding to each group identifier according to a preset matching mode to obtain a matching result corresponding to each group identifier comprises:

4. The method according to claim 2, wherein the matching the target indication parameter with each indication parameter in the indication parameter set corresponding to each group identifier according to a preset matching mode to obtain a matching result comprises:

5. The method according to claim 2, wherein the matching the target indication parameter with each indication parameter in the indication parameter set corresponding to each group identifier according to a preset matching mode to obtain a matching result comprises:

6. The method according to claim 2, wherein the matching the target indication parameter with each indication parameter in the indication parameter set corresponding to each group identifier according to a preset matching mode to obtain a matching result comprises:

7. The method according to any one of claims 2 to 6, wherein the html tag contains page elements, and the processing of the html tag with the group identifier in the html file after the completion of the matching according to the matching result comprises:

8. The method according to claim 7, wherein the determining whether the page element in the html tag corresponding to each group identifier in the html file needs to be displayed in the web page according to the matching result corresponding to each group identifier comprises:

9. The method according to any one of claims 2 to 6, wherein the processing the html tag with the group identifier in the written html file according to the matching result comprises:

and converting the obtained new abstract syntax tree into a new html file.

10. The method according to claim 9, wherein generating an abstract syntax tree from html tags in the html file comprises:

extracting all html tags in the html file;

11. A web page constructing apparatus, comprising:

12. A computer device, comprising: at least one processor and memory;

the memory stores computer-executable instructions;

the at least one processor executing the memory-stored computer-executable instructions cause the at least one processor to perform the web page building method of any one of claims 1-10.

13. A computer-readable storage medium having stored thereon computer-executable instructions which, when executed by a processor, implement the web page building method of any one of claims 1-10.