Front-end page containerization layout method and device, computer device and storage medium

Abstract

The application discloses a front-end page containerization layout method and device, computer equipment and a storage medium. The method comprises the following steps: adopting a Vue technology to abstract a page layout scene into a container, the positions and sizes of element components in the container corresponding to element components in the page layout scene; based on the structure of the container, the page skeleton is horizontally and vertically divided according to the principle of from outside to inside, a certain number of horizontal division units arranged along the horizontal direction and vertical division units arranged along the vertical direction are generated; according to the page layout scene, the element components in the container are respectively embedded into the corresponding horizontal division unit and vertical division unit, and the width and height of the embedded element components are stretched, so that the embedded element components fill the corresponding horizontal division unit or vertical division unit. The application can enable the developer to concentrate on organizing page elements and focus on a smaller area for fine layout.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of page layout, in particular to a front-end page containerization layout method and device, computer equipment and storage medium. BACKGROUND

[0002] At present, the schemes in the industry for page layout in the field of low / zero code mainly include absolute layout, Grid layout and grid layout. Among them, the absolute layout realizes the front-end page layout in the specified canvas in the form of "dragging" by integrating vue-draggable-resizable and other plug-ins. Its advantage is that the positions of all page components are very flexible, and the disadvantage is that the alignment efficiency is low, and there will be differences in the layout of multiple resolutions or multiple terminals. It cannot achieve unified compatibility. The layout unit using Grid layout can modify the position, order, size and other properties at will, which is good for user experience and also meets the layout needs of users, but this scheme cannot realize layering in the interface, and has certain limitations in some specific demand scenarios. The grid layout aims to subdivide the horizontal direction into a plurality of grids, adjusts the element size by specifying the grid proportion of the element, and specifies the position by specifying the grid offset. The disadvantage of this scheme is that no matter how the number of grid division increases, it cannot perform fine position adjustment similar to pixel level, and the code cost and maintenance cost of using nested grids are high, and a visual solution is needed.

[0003] In summary, although the existing page layout scheme can complete the uniformity of layout in most scenarios, it still has many pain points in a small number of scenarios, such as the inability to unify the multi-resolution display effect, the inability to group and aggregate components, and the inability to quickly change the position and properties in the form of grouping. SUMMARY

[0004] The present application provides a front-end page containerization layout method, device, computer equipment and storage medium, aiming to solve the technical problems of the existing page layout scheme, such as the inability to unify the multi-resolution display effect in a small number of scenarios, the inability to group and aggregate components, and the inability to quickly change the position and properties in the form of grouping.

[0005] To solve the above technical problems, the technical scheme adopted by the present application is as follows:

[0006] A front-end page containerization layout method, comprising:

[0007] The page layout scene is abstracted as a container using Vue technology, the positions and sizes of the element components inside the container correspond to the element components in the page layout scene, and the element components inside the container follow the constraints of absolute layout;

[0008] According to an outer-to-inner principle, the page skeleton is horizontally and vertically divided to generate a set number of horizontal column units arranged in a horizontal direction and vertical column units arranged in a vertical direction based on the structure of the container;

[0009] According to the page layout scene, element components in the container are respectively embedded into corresponding horizontal column units and vertical column units, and the width and height of the embedded element components are stretched so that the embedded element components fill the corresponding horizontal column units or vertical column units.

[0010] The technical scheme adopted by the embodiment of the application further includes that the page layout scene is abstracted into a container by using the Vue technology, and the container includes:

[0011] The container Container is encapsulated according to the page layout scene, and a position attribute is set, wherein the position attribute is set to relative, and is used to specify a positioning mode of an element component in a page;

[0012] Element components ContainerItem inside the container are encapsulated, and a vue-draggable-resizable plug-in is used for position dragging and size adjustment of the element components;

[0013] A recursive JSON data format is defined;

[0014] The element components inside the container are recursively encapsulated according to the JSON data format.

[0015] The technical scheme adopted by the embodiment of the application further includes that each element component inside the container includes respective attribute information, the attribute information includes an X coordinate, a Y coordinate, a width and a height, and the position and size of each element component in the container are positioned according to the attribute information; and the level of an element component embedded first in the container is low, and the level of an element component embedded later is high, if two embedded element components overlap, the element component embedded later covers the element component embedded first.

[0016] The technical scheme adopted by the embodiment of the application further includes that the page skeleton is horizontally and vertically divided according to an outer-to-inner principle to generate a set number of horizontal column units arranged in a horizontal direction and vertical column units arranged in a vertical direction, and the horizontal column units and the vertical column units are generated based on the structure of the container.

[0017] The page skeleton is horizontally and vertically divided according to an el-row component of Element-UI.

[0018] The technical scheme adopted by the embodiment of the present application further includes that the height of each horizontal column unit is equal to the total height of the horizontal column, and the width is a percentage of the total width of the horizontal column; the width of each vertical column unit is equal to the total width of the vertical column, and the height is a percentage of the total height of the vertical column.

[0019] The technical scheme adopted by the embodiment of the present application further includes that the elements components in the container are respectively embedded into corresponding horizontal column units and vertical column units according to the page layout scene, and specifically:

[0020] Only one element component can be embedded in each horizontal column unit or vertical column unit;

[0021] If a horizontal column unit or a vertical column unit without embedded element components is added, the element components are embedded;

[0022] If a horizontal column unit or a vertical column unit with embedded element components is deleted, the element components embedded in the horizontal column unit or the vertical column unit are also deleted.

[0023] The technical scheme adopted by the embodiment of the present application further includes that the page layout scene is abstracted into a container by using the Vue technology, and the container further includes:

[0024] The stack container is configured according to the page layout scene, the stack container is used for the page layout scene with the "stacking" effect after layer stacking, all stack units are arranged in the stack container along the Z-axis direction in turn, and the stack unit with a higher Z value has a higher level, the stack unit with a higher level covers the stack unit with a lower level, each stack unit can only embed one element component, and the embedded element component needs to fill the entire stack unit.

[0025] Another technical scheme adopted by the embodiment of the present application is a front-end page containerization layout device, which includes:

[0026] The page abstraction module is used for abstracting the page layout scene into a container by using the Vue technology, the position and size of the element components in the container correspond to the element components in the page layout scene, and the element components in the container follow the constraint of absolute layout;

[0027] The page splitting module is used for horizontally columnizing and vertically columnizing the page skeleton according to the principle of from outside to inside based on the structure of the container, to generate a set number of horizontal column units arranged along the horizontal direction and vertical column units arranged along the vertical direction;

[0028] The page layout module is configured to embed element components in the container into corresponding horizontal column units and vertical column units according to a page layout scene, and stretch the width and height of the embedded element components so that the embedded element components fill the corresponding horizontal column units or vertical column units.

[0029] Another technical solution adopted by the embodiment of the present application is a computer device, which comprises:

[0030] a memory storing executable program codes;

[0031] a processor connected to the memory;

[0032] The processor is configured to call the executable program codes stored in the memory and perform the following steps:

[0033] The page layout scene is abstracted into a container by using the Vue technology, the positions and sizes of element components in the container correspond to those of element components in the page layout scene, and the element components in the container follow the constraint of absolute layout;

[0034] Based on the structure of the container, the page skeleton is horizontally and vertically divided according to the principle of from outside to inside, and a plurality of horizontal column units arranged in the horizontal direction and vertical column units arranged in the vertical direction are generated;

[0035] The element components in the container are embedded into corresponding horizontal column units and vertical column units according to the page layout scene, and the width and height of the embedded element components are stretched so that the embedded element components fill the corresponding horizontal column units or vertical column units.

[0036] Another technical solution adopted by the embodiment of the present application is a storage medium storing a program file executable by a processor, and the program file is configured to perform the following steps:

[0037] The page layout scene is abstracted into a container by using the Vue technology, the positions and sizes of element components in the container correspond to those of element components in the page layout scene, and the element components in the container follow the constraint of absolute layout;

[0038] Based on the structure of the container, the page skeleton is horizontally and vertically divided according to the principle of from outside to inside, and a plurality of horizontal column units arranged in the horizontal direction and vertical column units arranged in the vertical direction are generated;

[0039] Embedding element components in the container into corresponding horizontal column units and vertical column units respectively according to a page layout scene, and stretching the width and height of the embedded element components, so that the embedded element components fill the corresponding horizontal column units or vertical column units.

[0040] The front-end page containerization layout method, device, computer equipment and storage medium of the embodiment of the application can effectively identify regional division by abstracting the absolute layout of a page into a container and then splitting the page skeleton by using vertical or / and horizontal columns to form a plurality of vertical column units and horizontal column units, so that the embedded element components can adapt to the size of the column units, the page can be more effectively and reasonably compatible and displayed, the deficiencies of the existing page layout scheme, such as the inability to unify the multi-resolution display effect in a few scenes, the inability to group components, the inability to quickly change the position and attributes in the form of grouping, and the like, are solved, and the page layout efficiency is improved. Based on the characteristics of low / zero code, the code maintenance disadvantages caused by container nesting are reduced, the developers can concentrate on organizing page elements and focusing on fine layout in a smaller area, and the low / zero code system can be more easily developed and maintained. BRIEF DESCRIPTION OF DRAWINGS

[0041] Figure 1 is a flowchart of a front-end page containerization layout method of a first embodiment of the application;

[0042] Figure 2 is a flowchart of a front-end page containerization layout method of a second embodiment of the application;

[0043] Figure 3 is a container structure diagram of an embodiment of the application;

[0044] Figure 4 is a horizontal column structure diagram of an embodiment of the application;

[0045] Figure 5 is a vertical column structure diagram of an embodiment of the application;

[0046] Figure 6 is a stacked container structure diagram of an embodiment of the application;

[0047] Figure 7 is a structure diagram of a front-end page containerization layout device of an embodiment of the application;

[0048] Figure 8 is a structure diagram of a computer equipment of an embodiment of the application;

[0049] Figure 9 is a structure diagram of a storage medium of an embodiment of the application. DETAILED DESCRIPTION

[0050] The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, rather than all the embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by a person of ordinary skill in the art without creative effort fall within the protection scope of the present application.

[0051] The terms “first”, “second”, “third” in the present application are only for descriptive purpose, and cannot be understood as indicating or implying relative importance or implicitly indicating the number of the indicated technical features. Therefore, the features defined with “first”, “second”, “third” can explicitly or implicitly include at least one of the features. In the description of the present application, the meaning of “plurality” is at least two, for example, two, three, etc., unless otherwise explicitly and specifically limited. All directional indications (such as up, down, left, right, front, back, etc.) in the embodiments of the present application are only used to explain the relative position relationship, movement condition, etc. between components in a certain posture (as shown in the drawings), and if the certain posture changes, the directional indications also change accordingly. In addition, the terms “include” and “have” and any variations thereof are intended to cover non-exclusive inclusion. For example, a process, method, system, product or device including a series of steps or units is not limited to the listed steps or units, but can optionally include steps or units not listed, or can optionally include other steps or units inherent to the process, method, product or device.

[0052] Reference herein to “an embodiment” means that a particular feature, structure, or characteristic described in connection with the embodiment can be included in at least one embodiment of the application. The appearance of the phrase in various places in the specification does not necessarily all refer to the same embodiment, nor does it necessarily refer to a separate or alternative embodiment. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein can be combined with each other.

[0053] Please refer to Figure 1 is a flowchart of a front-end page containerization layout method of the first embodiment of the present application. The front-end page containerization layout method of the first embodiment of the present application includes the following steps:

[0054] S100: Abstract a page layout scene as a container by using Vue technology, the positions and sizes of element components inside the container correspond to the element components in the page layout scene, and the element components inside the container follow the constraint of absolute layout;

[0055] S110: based on the structure of the container, the page skeleton is horizontally and vertically divided according to the principle of from outside to inside, a plurality of horizontal column units arranged in the horizontal direction and a plurality of vertical column units arranged in the vertical direction are generated;

[0056] S120: according to the page layout scene, the element components in the container are respectively embedded into the corresponding horizontal column unit and vertical column unit, and the width and height of the embedded element components are stretched, so that the embedded element components fill the corresponding horizontal column unit or vertical column unit.

[0057] Based on the above, the front-end page containerization layout method of the first embodiment of the application can effectively identify the area division by abstracting the absolute layout of the page into a container and then splitting the page skeleton by vertical or / and horizontal columns to form a plurality of vertical column units and horizontal column units, so that the embedded element components can adapt to the size of the column unit, the page can be more effectively and reasonably compatible, and the deficiencies of the existing page layout scheme, such as the inability to unify the multi-resolution display effect in a few scenes, the inability to group components, the inability to quickly change the position and attributes in the form of grouping, etc., are solved, and the page layout efficiency is improved. Based on the characteristics of low / zero code, the code maintenance disadvantages caused by container nesting are reduced, the developers can concentrate on organizing page elements and focusing on fine layout in smaller areas, so that the low / zero code system can be more easily developed and maintained

[0058] Please refer to Figure 2 is a flowchart of the front-end page containerization layout method of the second embodiment of the application. The front-end page containerization layout method of the second embodiment of the application comprises the following steps:

[0059] S200: abstracting the page layout scene into a container by using Vue technology, and making the element components in the container comply with the constraints of absolute layout;

[0060] In this step, as shown in Figure 3 is a container structure diagram of the embodiment of the application. After abstracting the absolute layout into container A, the positions and sizes of the element components in container A cannot exceed the boundary of container A, and the positions and sizes of the element components in container A correspond to the element components in the page layout scene, wherein the element components in container A include but are not limited to navigation bar elements, column elements, menu bar elements and text content elements.

[0061] Specifically, the process of abstracting the absolute layout of the page into a container comprises:

[0062] S201: encapsulate a container Container and set a position attribute; wherein the size of the container Container can be set according to the page layout scene, and the position attribute is set to relative, used to specify the positioning mode of an element component in the page.

[0063] S202: encapsulate an element component ContainerItem in the container, and realize the position dragging and size adjustment of the element component by means of the vue-draggable-resizable plug-in;

[0064] S203: define a recursive JSON data format, wherein the associated field of the child node children of the element component is as follows:

[0065]

[0066]

[0067] S204: recursively encapsulate the element component according to the JSON data format, and the specific code is as follows:

[0068] Container Container code:

[0069]

[0070]

[0071] Element component ContainerItem code:

[0072] In the embodiment of the application, there can be any number of element components in the container, each of which follows an absolute layout mode, and each element component includes its own X coordinate, Y coordinate, Width (width) and Height (height) attribute information, and the position and size of each element component in the container are positioned according to the attribute information. Specifically, the left upper corner of the container can be set as the coordinate origin, the X axis starts from the left of the coordinate origin, and the Y axis starts from the top of the coordinate origin. The element components in the container are arranged freely, but cannot exceed the boundary of the container. The element components embedded in the container are arranged in a hierarchical manner, with the element components embedded earlier being arranged in a lower level and the element components embedded later being arranged in a higher level. If two embedded element components overlap, the element component embedded later will cover the element component embedded earlier, and this rule is similar to that of a stacked container.

[0073] S210: horizontally and vertically divide the page skeleton according to the principle of from outside to inside according to the structure of the container, to obtain a certain number of horizontal column units arranged along the horizontal direction and vertical column units arranged along the vertical direction;

[0074] In this step, in most visualization layout scenarios, the page skeleton is split into small areas according to the principle of from outside to inside by vertical or horizontal column splitting, so as to enable the developer to concentrate on organizing page elements and focus on fine layout in smaller areas.

[0075] Specifically, the page skeleton can be horizontally split according to the el-row component of Element-UI, and the number of generated horizontal column units can be increased or decreased according to the layout scenario. Specifically, as shown in Figure 4 , it is a horizontal column structure diagram of the embodiment of the present application, and the generated horizontal column unit includes three, which are horizontal column unit 1, horizontal column unit 2 and horizontal column unit 3. The three horizontal column units are arranged in the horizontal direction in turn, the height of each horizontal column unit is equal to the total height of the horizontal column, and the width of each horizontal column unit is controlled by the percentage of the parent element (i.e. the total width of the horizontal column) (for example: 0.2 represents that the width of the horizontal column unit is 20% of the total width of the horizontal column). For example, in Figure 4 , the percentage of horizontal column unit 1 in the total width of the horizontal column is 30%, the percentage of horizontal column unit 2 in the total width of the horizontal column is 20%, and the percentage of horizontal column unit 3 in the total width of the horizontal column is 50%. The specific code is as follows:

[0076]

[0077] In the embodiment of the present application, the vertical column method is the same as the horizontal column method. The number of vertical column units generated after vertical column can be increased or decreased at will according to the layout scenario. Specifically, as shown in Figure 5 , it is a vertical column result diagram of the embodiment of the present application. Among them, the vertical column unit 1 and the vertical column unit 2 generated after the vertical column are arranged in the vertical direction in turn, the width of each vertical column unit is equal to the total width of the vertical column, and the height is a percentage of the parent element (the total height of the vertical column) (for example: 0.7 represents that the height of the vertical column unit is 70% of the total height of the vertical column). For example, in Figure 5 , the height of the vertical column unit 1 is 70% of the total height of the vertical column, and the height of the vertical column unit 2 is 30% of the total height of the vertical column. The specific code is as follows:

[0078]

[0079] S220: According to the page layout scenario, the container or the element component in the container is respectively embedded in the horizontal column unit and the vertical column unit, and the width and height of the embedded element component are stretched, so that the embedded element component fills the entire horizontal column unit or vertical column unit.

[0080] In this step, only one element component can be embedded in each horizontal column unit. As shown in Figure 4 After embedding the element component a in the horizontal column unit 1, the width and height of the element component a need to be stretched to fill the entire horizontal column unit 1 to adapt to the size of the horizontal column unit 1. It should be noted that if a horizontal column unit without embedded element components is added, the element component needs to be specified for embedding; if a horizontal column unit with embedded element components is deleted, the embedded element components in the horizontal column unit will be deleted.

[0081] Similarly, only one element component can be embedded in each vertical column unit, and the width and height of the embedded element component need to be stretched to fill the entire vertical column unit. As shown in Figure 5 After embedding the container A in the vertical column unit 1, the width of the container A needs to be stretched to fill the entire vertical column unit 1 to adapt to the size of the vertical column unit 1, and each element component in the container A still has the absolute layout characteristics relative to the container A. The vertical column scheme is limited to the layout scene with fixed height and cannot be applied to the layout scene that needs to accumulate height or page scrolling display. It should be noted that if a vertical column unit without embedded element components is added, the element component needs to be specified for embedding; if a vertical column unit with embedded element components is deleted, the embedded element components in the vertical column unit will be deleted.

[0082] Specifically, in one embodiment, based on the above column scheme, the page skeleton can be vertically columned first to generate a first vertical column unit and a second vertical column unit, the navigation bar element is embedded in the first vertical column unit in the upper half, and the column element is embedded in the second vertical column unit in the lower half; and the second vertical column unit is horizontally columned to generate a first horizontal column unit and a second horizontal column unit, and the menu bar element is embedded in the first horizontal column unit in the left half, and the text content element is embedded in the second horizontal column unit in the right half.

[0083] S230: According to the page layout scene, a stack container is configured, so that the width and height of each stack unit in the stack container are equal to the width and height of the stack container;

[0084] In this step, by adding a stack container, the stack layout scene of a specific element component can be compatible and supported. In the stack container, the original CSS attribute z-index is used to determine the stacking order of each element component, and the number of stack units in the stack container can be increased or decreased at will according to the page layout scene. Specifically, as shown in Figure 6As shown, it is a schematic diagram of the stacked container structure of the embodiment of the present application. The width and height of each stacked unit are equal to the width and height of the stacked container. All stacked units are arranged in sequence along the Z-axis direction in the stacked container. The stacked unit with a higher Z value has a higher level, and the stacked unit with a higher level covers the stacked unit with a lower level. Each stacked unit can only embed one element component, and the width and height of the embedded element component need to be stretched to fill the entire stacked unit. In the embodiment of the present application, the layout scheme of the stacked container is mainly used for the "stacking" effect after the layer stacking, for example, adding a background picture to the text content, using a semi-transparent layer cover with a "frosted glass" effect to highlight the key content, etc. The layout scheme of the stacked container is closer to the real world seen by the human eye, and can show a rich hierarchical scene.

[0085] Based on the above, the front-end page containerization layout method of the second embodiment of the present application abstracts the absolute layout of the page into a container, and then splits the page skeleton by using vertical or / and horizontal columns to form a plurality of vertical column units and horizontal column units. The page skeleton built by the columns can effectively identify the area division, so that the embedded element component can adapt to the size of the column unit, so that the page can be more effectively and reasonably compatible and displayed, solving the problems of the existing page layout scheme, such as the non-uniform multi-resolution display effect in a few scenarios, the inability to group and aggregate components, the inability to quickly change the position and attributes in the form of grouping, etc., and improving the page layout efficiency. At the same time, by adding a stacked container, the page layout has more rich levels and is more in line with human basic cognition. Based on the characteristics of low / zero code, the present application reduces the code maintenance disadvantages caused by container nesting, enables the developer to concentrate on organizing page elements and focusing on fine layout in a smaller area, and enables the low / zero code system to be easier to develop and maintain.

[0086] In an optional implementation, the result of the front-end page containerization layout method can also be uploaded to a blockchain.

[0087] Specifically, the corresponding summary information is obtained based on the result of the front-end page containerization layout method, and specifically, the summary information is obtained by hashing the result of the front-end page containerization layout method, for example, by using a sha256s algorithm. Uploading the summary information to the blockchain can ensure its security and fairness and transparency to users. Users can download the summary information from the blockchain to check whether the result of the front-end page containerization layout method has been tampered with. The blockchain referred to in this example is a new application mode of distributed data storage, peer-to-peer transmission, consensus mechanism, encryption algorithm and other computer technologies. Blockchain, in essence, is a decentralized database, a series of data blocks associated using cryptographic methods, each containing a batch of network transaction information for verifying the validity (anti-fake) of the information and generating the next block. Blockchain can include blockchain underlying platforms, platform product service layers, and application service layers.

[0088] Referring to Figure 7 is a structural schematic diagram of the front-end page containerization layout device of the embodiment of the present application. The front-end page containerization layout device 40 of the embodiment of the present application comprises:

[0089] The page abstraction module 41 is configured to abstract the page layout scene into a container using the Vue technology, wherein the positions and sizes of the element components inside the container correspond to those of the element components in the page layout scene, and the element components inside the container follow the constraint of absolute layout.

[0090] The page splitting module 42 is configured to split the page skeleton horizontally and vertically according to the structure of the container based on the principle of from outside to inside, to generate a plurality of horizontal column units arranged in the horizontal direction and vertical column units arranged in the vertical direction.

[0091] The page layout module 43 is configured to embed the element components inside the container into the corresponding horizontal column units and vertical column units according to the page layout scene, and stretch the width and height of the embedded element components, so that the embedded element components fill the corresponding horizontal column units or vertical column units.

[0092] The front-end page containerization layout device provided by the embodiment of the application abstracts the absolute layout of a page into a container, then splits the page skeleton by using vertical or / and horizontal columns to form a plurality of vertical column units and horizontal column units, and the page skeleton built by the columns can effectively identify the area division, so that the embedded element components can adapt to the size of the column units, so that the page can be more effectively and reasonably compatible and displayed, and the problems of the existing page layout scheme, such as the inability to unify the multi-resolution display effect in a few scenarios, the inability to group components, the inability to quickly change the position and attributes in the form of grouping, and the like are solved, and the page layout efficiency is improved. Based on the characteristics of low / zero code, the code maintenance disadvantages caused by container nesting are reduced, the developers can concentrate on organizing page elements and focusing on fine layout in a smaller area, and the low / zero code system can be more easily developed and maintained.

[0093] Please refer to Figure 8 , a computer device structure schematic diagram of the embodiment of the application. The computer device 50 comprises:

[0094] a memory 51 storing executable program codes;

[0095] a processor 52 connected with the memory 51;

[0096] The processor 52 is configured to call the executable program codes stored in the memory 51 to perform the following steps: abstracting a page layout scene into a container by using a Vue technology, the positions and sizes of element components in the container correspond to those of the element components in the page layout scene, and the element components in the container follow the constraint of absolute layout; based on the structure of the container, performing horizontal column and vertical column on a page skeleton according to the principle of from outside to inside, to generate a plurality of horizontal column units arranged along the horizontal direction and vertical column units arranged along the vertical direction; embedding the element components in the container into the corresponding horizontal column units and vertical column units according to the page layout scene, and stretching the width and height of the embedded element components, so that the embedded element components fill the corresponding horizontal column units or vertical column units.

[0097] The processor 52 can also be referred to as a CPU (Central Processing Unit). The processor 52 can be an integrated circuit chip with signal processing capability. The processor 52 can also be a general-purpose processor, a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a programmable read-only memory (PROM), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor.

[0098] Please refer to Figure 9 , Figure 9 is a structural schematic view of a storage medium of an embodiment of the present application. The storage medium of the embodiment of the present application stores a program file 61 for performing the following steps: abstracting a page layout scene into a container using a Vue technology, the positions and sizes of element components inside the container corresponding to element components in the page layout scene, and the element components inside the container complying with constraints of absolute layout; based on the structure of the container, horizontally and vertically dividing a page skeleton according to an outside-in principle, to generate a set number of horizontal column units arranged in a horizontal direction and vertical column units arranged in a vertical direction; embedding element components in the container into corresponding horizontal column units and vertical column units according to the page layout scene, and stretching the width and height of the embedded element components, so that the embedded element components fill the corresponding horizontal column units or vertical column units

[0099] The program file 61 can be stored in the above storage medium in the form of a software product, and includes a plurality of instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) or a processor to execute all or part of the steps of the method of each embodiment of the present application. The above storage medium includes a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and various media that can store program codes, or a terminal device such as a computer, a server, a mobile phone, or a tablet.

[0100] In several embodiments provided by the present application, it should be understood that the disclosed system, device and method can be implemented by other ways. For example, the system embodiments described above are only schematic; the division of the units is only a logical function division, and other division manners can be adopted during actual implementation; for example, a plurality of units or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the displayed or discussed mutual couplings or direct couplings or communication connections can be indirect couplings or communication connections through some interfaces, devices or units, and can be electrical, mechanical or other forms.

[0101] In addition, each function unit in each embodiment of the present application can be integrated in one processing unit, or each unit can exist physically separately, or two or more units can be integrated in one unit. The integrated unit can be realized in the form of hardware or in the form of a software function unit. The above is only an implementation manner of the present application, and does not limit the patent scope of the present application. Any equivalent structure or equivalent flow transformation made by using the content of the present application specification and drawings, or direct or indirect application in other related technical fields, is also included in the patent protection scope of the present application.

Claims

1. A containerized layout method for front-end pages, characterized in that, include: Using Vue technology, the page layout scenario is abstracted into a container. The position and size of the elements and components inside the container correspond to the elements and components in the page layout scenario, and the elements and components inside the container follow the constraints of absolute layout. Based on the structure of the container, the page skeleton is divided into horizontal and vertical columns according to the principle of from the outside to the inside, generating a set number of horizontal column units arranged in the horizontal direction and vertical column units arranged in the vertical direction. According to the page layout scenario, the element components in the container are embedded into the corresponding horizontal and vertical column units respectively, and the width and height of the embedded element components are stretched so that the embedded element components fill the corresponding horizontal or vertical column units. The method of using Vue technology to abstract page layout scenarios into a container also includes: Configure a stacking container according to the page layout scenario. The stacking container is used for page layout scenarios where layers are stacked to create a "layered" effect. All stacking units are arranged sequentially along the Z-axis in the stacking container. The stacking unit with the higher Z value has a higher level. The stacking unit with a higher level covers the stacking unit with a lower level. Each stacking unit can only embed one element component, and the width and height of the embedded element component must be stretched to fill the entire stacking unit.

2. The front-end page containerization layout method according to claim 1, characterized in that, The method of abstracting page layout scenarios into a container using Vue technology includes: Encapsulate a container based on the page layout scenario and set its position property; wherein, the position property is set to relative to specify the positioning method of an element component on the page; The container item is encapsulated within the container, and the vue-draggable-resizable plugin is used to drag and drop the position and adjust the size of the element component. Define the recursive JSON data format; The elements within the container are recursively processed according to the JSON data format.

3. The front-end page containerization layout method according to claim 2, characterized in that, Each element component inside the container includes its own attribute information, including X coordinate, Y coordinate, width, and height. The position and size of each element component in the container are located based on the attribute information. Furthermore, the element components embedded earlier in the container have a lower layer and the element components embedded later have a higher layer. If two embedded element components overlap, the element component embedded later will cover the element component embedded earlier.

4. The front-end page containerization layout method according to any one of claims 1 to 3, characterized in that, The process of dividing the page skeleton into horizontal and vertical columns according to the principle of working from the outside in, and generating a set number of horizontally arranged horizontal column units and vertically arranged vertical column units, specifically involves: The page skeleton is divided into horizontal and vertical columns based on the el-row component of Element-UI.

5. The front-end page containerization layout method according to claim 4, characterized in that, The height of each horizontal column unit is equal to the total height of the horizontal column, and the width is a set percentage of the total width of the horizontal column; the width of each vertical column unit is equal to the total width of the vertical column, and the height is a set percentage of the total height of the vertical column.

6. The front-end page containerization layout method according to claim 5, characterized in that, The specific steps of embedding the element components within the container into the corresponding horizontal and vertical column units according to the page layout scenario are as follows: Only one element component can be embedded in each horizontal or vertical column unit. If a new horizontal or vertical column cell without an embedded element component is added, the specified element component will be embedded. If a horizontal or vertical column with embedded element components is deleted, the embedded element components within that horizontal or vertical column will also be deleted.

7. A front-end page containerization layout apparatus, the apparatus being used to implement the steps of the front-end page containerization layout method according to any one of claims 1-6, characterized in that, include: Page Abstraction Module: Used to abstract the page layout scenario into a container using Vue technology. The position and size of the elements and components inside the container correspond to the elements and components in the page layout scenario, and the elements and components inside the container follow the constraints of absolute layout. Page splitting module: Based on the structure of the container, the page skeleton is horizontally and vertically divided into columns according to the principle of from the outside to the inside, generating a set number of horizontally arranged columns and vertically arranged columns. Page layout module: used to embed the element components in the container into the corresponding horizontal and vertical column units according to the page layout scenario, and stretch the width and height of the embedded element components so that the embedded element components fill the corresponding horizontal or vertical column units.

8. A computer device, characterized in that, The computer device includes: Memory containing executable program code; The processor connected to the memory; The processor is used to call the executable program code stored in the memory and perform the steps of the front-end page containerization layout method as described in any one of claims 1 to 6.

9. A storage medium, characterized in that, The system stores a processor-executable program file for performing the steps of the front-end page containerization layout method as described in any one of claims 1 to 6.

Images