CN116048500A

CN116048500A - WEB page layout method and device, electronic equipment and storage medium

Info

Publication number: CN116048500A
Application number: CN202211364206.3A
Authority: CN
Inventors: 梁瑞成; 许洪波
Original assignee: Beijing Topsec Technology Co Ltd; Beijing Topsec Network Security Technology Co Ltd; Beijing Topsec Software Co Ltd
Current assignee: Beijing Topsec Technology Co Ltd; Beijing Topsec Network Security Technology Co Ltd; Beijing Topsec Software Co Ltd
Priority date: 2022-11-02
Filing date: 2022-11-02
Publication date: 2023-05-02

Abstract

The embodiment of the application provides a WEB page layout method, a device, electronic equipment and a storage medium, wherein the method comprises the following steps: acquiring a configuration file of a WEB page; creating a basic layout of a layout container according to the configuration file; dividing the layout container after the basic layout is established to obtain a combined container; adjusting the configuration file according to the WEB page and the combined container to obtain an adjusted configuration file; and transmitting the adjusted configuration file to the combined container to obtain the WEB page layout. By implementing the embodiment of the application, the manufacturing flow of the page layout can be simplified, the performance loss caused by excessive monitoring events is avoided, the manufacturing of large-scale projects is facilitated, the page components are convenient to realize self-nesting, and the page layout efficiency is improved.

Description

WEB page layout method and device, electronic equipment and storage medium

Technical Field

The present invention relates to the field of front-end technologies, and in particular, to a method and an apparatus for WEB page layout, an electronic device, and a computer storage medium.

Background

When the front end designs the page layout, the functions of rapidly switching among multiple interfaces and reserving interface contents or refreshing the interface contents are realized by monitoring events, judging whether the currently displayed container is the container corresponding to the clicked label key, and the like to display the container or refreshing the content of the container.

However, in the prior art, when designing a page layout, there are many problems, for example, excessive performance overhead is caused by monitoring too many events, so that the method cannot adapt to large projects, or concepts are old, analysis dom is generated by using an AST grammar tree, large performance loss exists, self-nesting cannot be realized, and complicated or difficult realization is faced to complex layout.

Disclosure of Invention

An object of the embodiments of the present application is to provide a method, an apparatus, an electronic device, and a storage medium for WEB page layout, which can simplify a manufacturing flow of page layout, avoid performance loss caused by excessive monitoring events, facilitate manufacturing of large-scale projects, facilitate self-nesting of page components, and improve page layout efficiency.

In a first aspect, an embodiment of the present application provides a WEB page layout method, where the method includes:

acquiring a configuration file of a WEB page;

creating a basic layout of a layout container according to the configuration file;

dividing the layout container after the basic layout is established to obtain a combined container;

adjusting the configuration file according to the WEB page and the combined container to obtain an adjusted configuration file;

and transmitting the adjusted configuration file to the combined container to obtain the WEB page layout.

In the implementation process, the basic layout of the layout container is created, and then the layout container is partitioned and then is configured, so that the manufacturing flow of the page layout can be simplified, the performance loss caused by excessive monitoring events is avoided, the manufacturing of large-scale projects is facilitated, the page components are convenient to realize self-nesting, and the page layout efficiency is improved.

Further, the step of creating the base layout of the layout container according to the configuration file includes:

adding maximum width information in the configuration file;

and transmitting the configuration file added with the maximum width information to the layout container to obtain the basic layout of the layout container.

In the implementation process, the basic layout of the layout container is carried out according to the maximum width information added in the configuration file, so that the obtained basic layout of the layout container is more easily adapted to various component arrangements, and the flexibility is higher and the efficiency is higher.

Further, the step of dividing the layout container after creating the basic layout to obtain a combined container includes:

acquiring block attributes;

dividing the layout container after creating the basic layout according to the block attribute to obtain a plurality of independent blocks;

and configuring the plurality of independent blocks to obtain the combined container.

In the implementation process, the layout container after the basic layout is created is divided according to the block attributes, and then the independent blocks are configured, so that the efficiency of the page layout can be improved, the manufacturing and nesting processes are simplified, and the page layout is more flexible.

Further, after the step of obtaining the block attribute, the method further includes:

and setting the main axis attribute and the minimum width information in the row at the level of the block attribute.

In the implementation process, the main axis attribute and the minimum width information in the row are set at the level of the block attribute, so that the problem that the block attribute cannot be added in the layout container is avoided, the use efficiency of the block attribute is improved, and the combination container can be diversified.

Further, the step of configuring the plurality of independent blocks to obtain the combined container includes:

acquiring width information of the plurality of independent blocks;

and arranging the independent blocks according to the width information and the maximum width information of the independent blocks to obtain the combined container.

In the implementation process, the independent blocks are arranged according to the width information and the maximum width information of the independent blocks, so that the situation that the layout container cannot bear the attributes of the blocks is avoided, the use efficiency of the combined container is improved, and the combined container can adapt to more page layouts.

Further, the step of adjusting the configuration file according to the WEB page and the combined container to obtain an adjusted configuration file includes:

acquiring current width information of the WEB page;

obtaining a width occupation ratio value according to the width information of the independent blocks in the combined container and the current width information;

and adjusting the configuration file according to the width ratio to obtain the adjusted configuration file.

In the implementation process, the configuration file is adjusted according to the current width information of the WEB page and the width information of the independent blocks, so that the configuration file can be adaptively adjusted according to different WEB pages, the occupation of space is reduced, and the layout efficiency is improved.

In a second aspect, an embodiment of the present application further provides a WEB page layout device, where the device includes:

the acquisition module is used for acquiring the configuration file of the WEB page;

the creation module is used for creating the basic layout of the layout container according to the configuration file;

the segmentation module is used for segmenting the layout container after the basic layout is created to obtain a combined container;

the adjusting module is used for adjusting the configuration file according to the WEB page and the combined container to obtain an adjusted configuration file;

and the layout module is used for transmitting the adjusted configuration file to the combined container to obtain the WEB page layout.

Further, the creation module is further configured to:

adding maximum width information in the configuration file;

In a third aspect, an electronic device provided in an embodiment of the present application includes: a memory, a processor and a computer program stored in the memory and executable on the processor, the processor implementing the steps of the method according to any one of the first aspects when the computer program is executed.

In a fourth aspect, embodiments of the present application provide a computer-readable storage medium having stored thereon instructions that, when executed on a computer, cause the computer to perform the method according to any of the first aspects.

In a fifth aspect, embodiments of the present application provide a computer program product, which when run on a computer, causes the computer to perform the method according to any one of the first aspects.

Additional features and advantages of the disclosure will be set forth in the description which follows, or in part will be obvious from the description, or may be learned by practice of the techniques of the disclosure.

And may be practiced in accordance with the disclosure as hereinafter described in detail with reference to the preferred embodiments of the present application.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are needed in the embodiments of the present application will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present application and should not be considered as limiting the scope values, and other related drawings may be obtained according to these drawings without inventive effort for a person of ordinary skill in the art.

Fig. 1 is a schematic flow chart of a WEB page layout method provided in an embodiment of the present application;

FIG. 2 is a schematic diagram of a multiple block property rule layout provided in an embodiment of the present application;

fig. 3 is a schematic structural diagram of a WEB page layout device according to an embodiment of the present application;

fig. 4 is a schematic structural diagram of an electronic device according to an embodiment of the present application.

Detailed Description

The technical solutions in the embodiments of the present application will be described below with reference to the drawings in the embodiments of the present application.

It should be noted that: like reference numerals and letters denote like items in the following figures, and thus once an item is defined in one figure, no further definition or explanation thereof is necessary in the following figures. Meanwhile, in the description of the present application, the terms "first", "second", and the like are used only to distinguish the description, and are not to be construed as indicating or implying relative importance.

The detailed description of the present application is further described in detail below with reference to the drawings and examples. The following examples are illustrative of the present application but are not intended to limit the scope of the values of the present application.

Example 1

Fig. 1 is a flow chart of a WEB page layout method provided in an embodiment of the present application, as shown in fig. 1, where the method includes:

s1, acquiring a configuration file of a WEB page;

s2, creating a basic layout of the layout container according to the configuration file;

s3, dividing the layout container after the basic layout is established to obtain a combined container;

s4, adjusting the configuration file according to the WEB page and the combined container to obtain an adjusted configuration file;

and S5, transmitting the adjusted configuration file to a combined container to obtain the WEB page layout.

A Web page is made up of a number of hypertext markup language (HyperText Markup Language, HTML) elements (i.e., document object models (Document Object Model, dom)), each of which has a physical size when exposed in a browser, by default in pixels (px) and can be in percentages, rem or em (the embodiments of the present application are primarily described in px and percentages).

The physical size refers to setting the width or height of a fixed pixel to an HTML element; the percentage size refers to the width and height of the percentage set for the HTML element; the physical size is a fixed size, the value set by the fixed size does not change, and the percentage size also changes correspondingly when the size of the browser changes.

The HTML elements mark the various parts of the web page to be displayed by markup symbols. By adding the marker in the text file corresponding to the webpage file, the browser can be told how to display the content (such as how to process the text, how to arrange the picture, how to display the picture, etc.). The browser reads the web page files in sequence and then interprets and displays the marked content according to the markers, and for different browsers, the same marker may not be interpreted identically, and thus different display effects may be achieved.

In order to make the page layout no longer limited to the existing limitation that the layout can be performed according to the size (fixed size or percentage size) or the structure (a scheme can only adapt to a layout structure), a method that is no longer limited to the size, the structure and the scene and can flexibly perform layout removal according to the requirement is needed.

The embodiment of the application is a method capable of flexibly carrying out Web page layout, and the embodiment of the application can provide a Web page layout container which is convenient to use singly or matched with a frame.

Compared with the prior art, the method and the device have the greatest advantages that AST grammar tree generation is abandoned, a large amount of performance consumption is caused when the AST grammar tree is generated, in order to enable the component performance to be faster and more efficient, a mode of manually writing virtual dom is adopted, the performance consumption of AST is saved, meanwhile, a monitoring processing mode of MVC (one software component mode) and MVVM (one software component mode after being improved on the MVC basis) is abandoned, the dom modification process is smoother, and redundant comparison operation cannot be carried out.

Further, S2 includes:

adding maximum width information in the configuration file;

and transmitting the configuration file added with the maximum width information to a layout container to obtain the basic layout of the layout container.

The layout container acquires a configuration file through a first-level page, adds maximum width information in the configuration file, and then transmits the configuration file downwards until the layout container is called, and the layout container creates a basic layout dom through a createVdom method.

Further, S3 includes:

acquiring block attributes;

dividing a layout container after creating the basic layout according to the block attribute to obtain a plurality of independent blocks;

and configuring a plurality of independent blocks to obtain a combined container.

By configuring the layout container with different json (JavaScript object notation), the layout container is divided into blocks, rows, columns, and the lowest layer component calls item, block, row, column, item can each set a width (width as a percentage), spacing between each element or component.

The layout container is divided into a plurality of independent blocks through the block attribute block, each independent block is not affected mutually, and the percentage of each independent block to the whole layout container is calculated according to the width allocated to the block attribute. Meanwhile, the arrangement mode of the block attributes can be configured through the main axis direction, and the alternative mode is transverse (row) and longitudinal (column).

Further, the step of obtaining the block attribute further includes:

An intra-row spindle attribute (direction) is set in an element level of the block attribute and is used for controlling row arrangement, and meanwhile, a typesetting mode attribute (vertical) can be set to control a spindle alignment mode, which can be selected from left alignment (left), right alignment (right), centering alignment (center), left-right average alignment (space-around) and average left-right gap alignment (space-between) five alignment modes. The vertical alignment mode can be configured through the typesetting mode attribute, and meanwhile, the min-width can be set to configure the minimum width information, so that the page is prevented from collapsing.

Further, the step of configuring the plurality of independent blocks to obtain a combined container includes:

acquiring width information of a plurality of independent blocks;

A padding attribute (padding), a border attribute (border), etc. may be set separately in each row to control whether each row layout is left-aligned, right-aligned, or centered for presentation.

Other components can be referenced under each column, each column can only reference one component, and maximum width information needs to be transmitted to the referenced component.

Further, S4 includes:

acquiring current width information of a WEB page;

obtaining a width occupation ratio according to the width information and the current width information of a plurality of independent blocks in the combined container;

and adjusting the configuration file according to the width occupation ratio to obtain an adjusted configuration file.

The method comprises the steps of obtaining current width information of a first-level page, namely a WEB page, then transmitting the current width information layer by layer downwards, and finally reaching a combined container, wherein in the combined container, the width finally transmitted to a reference component is calculated according to the size occupied by each block attribute and whether the attributes such as filling and frames exist or not, so that the integrity of the whole page is ensured.

Through the configuration, the embodiment of the application can carry out flexible page layout, so that elements are mutually nested and have independent patterns, and therefore nested layout is realized. And the corresponding layout components are not required to be written for each layout, so that the one-to-many corresponding relation is achieved. By placing the block attributes in the layout container, the framing of the main stream is successful.

Illustratively, as shown in fig. 2, embodiments of the present application may implement a plurality of block property rule layouts:

1) Configuring a plurality of block attributes to a layout container;

2) Each block attribute has the same width, the rows and columns in the block attribute are arranged in the same way, and the regular layout can be presented by adopting the same configuration.

Or a multi-column irregular layout:

1) Configuring a plurality of block attributes to a layout container;

2) The width of each block attribute is different;

3) In the third component, the block attributes are different in row and column, namely one row and three columns are realized, and the three columns are different.

According to the embodiment of the application, decoupling of page layout and HTML elements and components is carried out, the operation of page layout is given to a layout container, and the specific effect of display is realized by the HTML elements or components; attributes such as spindle orientation, spindle layout style, inter-space settings, etc. are also provided for flexible layout of layout containers.

The embodiment of the application adopts a multi-layer nested layout mode, so that page contents are more flexible in arrangement, and the effect of carrying out various layouts by using a single layout container is achieved, namely one-to-many function is realized, and each layout is not required to be independently written. Regardless of the layout entrance of any page is a layout container, a developer only needs to configure the corresponding page layout and then concentrate on realizing the functional requirements, so that the page layout work is simplified, and the development efficiency is improved.

Example two

In order to execute a corresponding method of the above embodiment to achieve the corresponding functions and technical effects, a WEB page layout device is provided below, as shown in fig. 3, where the device includes:

the acquisition module 1 is used for acquiring a configuration file of a WEB page;

a creation module 2 for creating a base layout of the layout container according to the configuration file;

the division module 3 is used for dividing the layout container after the basic layout is created to obtain a combined container;

the adjusting module 4 is used for adjusting the configuration file according to the WEB page and the combined container to obtain an adjusted configuration file;

and the layout module 5 is used for transmitting the adjusted configuration file to the combined container to obtain the WEB page layout.

Further, the creation module 2 is further configured to:

adding maximum width information in the configuration file;

Further, the segmentation module 3 is further configured to:

acquiring block attributes;

Further, the segmentation module 3 is further configured to:

acquiring width information of a plurality of independent blocks;

Further, the adjustment module 4 is further configured to:

acquiring current width information of a WEB page;

and adjusting the configuration file according to the width ratio value to obtain an adjusted configuration file.

The WEB page layout device described above may implement the method of the first embodiment described above. The options in the first embodiment described above also apply to this embodiment, and are not described in detail here.

The rest of the embodiments of the present application may refer to the content of the first embodiment, and in this embodiment, no further description is given.

Example III

The embodiment of the application provides an electronic device, which comprises a memory and a processor, wherein the memory is used for storing a computer program, and the processor runs the computer program to enable the electronic device to execute the WEB page layout method of the embodiment I.

Alternatively, the electronic device may be a server.

Referring to fig. 4, fig. 4 is a schematic structural diagram of an electronic device according to an embodiment of the present application. The electronic device may include a processor 41, a communication interface 42, a memory 43, and at least one communication bus 44. Wherein the communication bus 44 is used to enable direct connection communication of these components. The communication interface 42 of the device in the embodiment of the present application is used for performing signaling or data communication with other node devices. The processor 41 may be an integrated circuit chip with signal processing capabilities.

The processor 41 may be a general-purpose processor including a central processing unit (Central Processing Unit, CPU), a network processor (Network Processor, NP), etc.; but may also be a Digital Signal Processor (DSP), application Specific Integrated Circuit (ASIC), an off-the-shelf programmable gate array (FPGA) or other programmable logic device, discrete gate or transistor logic device, discrete hardware components. The disclosed methods, steps, and logic blocks in the embodiments of the present application may be implemented or performed. The general purpose processor may be a microprocessor or the processor 41 may be any conventional processor or the like.

The Memory 43 may be, but is not limited to, random access Memory (Random Access Memory, RAM), read Only Memory (ROM), programmable Read Only Memory (Programmable Read-Only Memory, PROM), erasable Read Only Memory (Erasable Programmable Read-Only Memory, EPROM), electrically erasable Read Only Memory (Electric Erasable Programmable Read-Only Memory, EEPROM), etc. The memory 43 has stored therein computer readable instructions which, when executed by the processor 41, enable the apparatus to perform the steps described above in relation to the embodiment of the method of fig. 1.

Optionally, the electronic device may further include a storage controller, an input-output unit. The memory 43, the memory controller, the processor 41, the peripheral interface, and the input/output unit are electrically connected directly or indirectly to each other to realize data transmission or interaction. For example, the components may be electrically coupled to each other via one or more communication buses 44. The processor 41 is arranged to execute executable modules stored in the memory 43, such as software functional modules or computer programs comprised by the device.

The input-output unit is used for providing the user with the creation task and creating the starting selectable period or the preset execution time for the task so as to realize the interaction between the user and the server. The input/output unit may be, but is not limited to, a mouse, a keyboard, and the like.

It will be appreciated that the configuration shown in fig. 4 is merely illustrative, and that the electronic device may also include more or fewer components than shown in fig. 4, or have a different configuration than shown in fig. 4. The components shown in fig. 4 may be implemented in hardware, software, or a combination thereof.

In addition, the embodiment of the present application further provides a computer readable storage medium storing a computer program, where the computer program when executed by a processor implements the WEB page layout method of the first embodiment.

The present application also provides a computer program product which, when run on a computer, causes the computer to perform the method described in the method embodiments.

In the several embodiments provided in this application, it should be understood that the disclosed apparatus and method may be implemented in other manners as well. The apparatus embodiments described above are merely illustrative, for example, flow diagrams and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of apparatus, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based devices which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.

In addition, the functional modules in the embodiments of the present application may be integrated together to form a single part, or each module may exist alone, or two or more modules may be integrated to form a single part.

The functions, if implemented in the form of software functional modules and sold or used as a stand-alone product, may be stored in a computer-readable storage medium. Based on such understanding, the technical solution of the present application may be embodied essentially or in a part contributing to the prior art or in a part of the technical solution, in the form of a software product stored in a storage medium, including several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the methods described in the embodiments of the present application. And the aforementioned storage medium includes: a usb disk, a removable hard disk, a ROM, a RAM, a magnetic disk, or an optical disk, etc.

The foregoing is merely exemplary embodiments of the present application and is not intended to limit the scope of the present application, and various modifications and variations may be suggested to one skilled in the art. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present application are intended to be included within the scope of the present application. It should be noted that: like reference numerals and letters denote like items in the following figures, and thus once an item is defined in one figure, no further definition or explanation thereof is necessary in the following figures.

The foregoing is merely specific embodiments of the present application, but the scope of the present application is not limited thereto, and any person skilled in the art can easily think about changes or substitutions within the scope of the present application, and the changes or substitutions are intended to be covered by the scope of the present application. Therefore, the protection scope of the present application shall be defined by the protection scope of the claims.

It is noted that relational terms such as first and second, and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Moreover, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

Claims

1. A WEB page layout method, the method comprising:

acquiring a configuration file of a WEB page;

2. The WEB page layout method according to claim 1, wherein said step of creating a base layout of a layout container from said configuration file comprises:

adding maximum width information in the configuration file;

3. The WEB page layout method according to claim 1, wherein the step of dividing the layout container after creating the base layout to obtain the combined container comprises:

acquiring block attributes;

4. The WEB page layout method according to claim 3, further comprising, after the step of acquiring the block attribute:

5. The WEB page layout method according to claim 3, wherein the step of configuring the plurality of independent blocks to obtain the combined container comprises:

acquiring width information of the plurality of independent blocks;

6. The WEB page layout method according to claim 1, wherein the step of adjusting the configuration file according to the WEB page and the combined container to obtain an adjusted configuration file comprises:

acquiring current width information of the WEB page;

7. A WEB page layout apparatus, the apparatus comprising:

8. The WEB page layout device according to claim 7, wherein the creation module is further configured to:

adding maximum width information in the configuration file;

9. An electronic device comprising a memory for storing a computer program and a processor that runs the computer program to cause the electronic device to perform the WEB page layout method according to any one of claims 1 to 6.

10. A computer-readable storage medium, characterized in that it stores a computer program which, when executed by a processor, implements the WEB page layout method according to any one of claims 1 to 6.