Method and apparatus for generating webpage by automatic layout without code

Abstract

The present application relates to the technical field of webpage design, and particularly relates to a code-free automatic layout webpage generation method and device, which is applied to an editing page with a component list area, an editor area and a tool area, and comprises the following steps: obtaining N target components to be arranged, the N target components to be arranged being located in the component list area, M interaction events being integrated in each component of the component list area, and receiving an operation of dragging the target components to the editor area; based on the operation, automatically laying out the target components in the editor area, so that multiple target components in the same row are sequentially and adjacently laid out and occupy the whole row, multiple target components in the same column are sequentially laid out from top to bottom, and a gap is reserved between adjacent target components; and based on the automatically laid out target components of the editor area and an operation on the tool area, generating a target webpage, which is automatically laid out without multiple adjustments, has better layout effect and improved layout efficiency.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of webpage design, and in particular to a code-free automatic layout webpage generation method and device. BACKGROUND

[0002] The existing webpage can be generated by dragging components onto a canvas by a user, and the position and size of the components need to be customized by the user.

[0003] However, the webpage generated by the above method is prone to misalignment and misplacement of layout, resulting in a long page production time and poor effect.

[0004] Therefore, how to improve the efficiency and effect of webpage layout is a technical problem to be solved at present. SUMMARY

[0005] In view of the above problems, the present application is proposed to provide a code-free automatic layout webpage generation method and device to overcome the above problems or at least partially solve the above problems.

[0006] In a first aspect, the present application provides a code-free automatic layout webpage generation method applied to an editing page having a component list area, an editor area and a tool area, comprising:

[0007] Obtaining N target components to be arranged, the N target components to be arranged being located in the component list area, and M interaction events being integrated in each component of the component list area, M and N being positive integers;

[0008] Receiving an operation of dragging the target component to the editor area;

[0009] Based on the operation, automatically laying out the target component in the editor area, so that multiple target components in the same row are sequentially and adjacently laid out and occupy the entire row, multiple target components in the same column are sequentially laid out from top to bottom, and a gap is reserved between adjacent target components;

[0010] Based on the automatically laid out target components of the editor area and the operation on the tool area, generating a target webpage.

[0011] Further, the target component forms a preset area in the editor area, and after the automatic layout of the target component in the editor area based on the operation, the method further comprises:

[0012] Receiving an operation of adjusting the target component in the preset area.

[0013] Further, the preset area comprises, from outside to inside, a frame, a drag point, a mask layer and component content, wherein the mask layer is integrated with a drag event interface and a click event interface, the drag point is used to acquire relevant information of the target component and target position information of the target component released by the user and information of other target components in the same row when the target component is dragged, and the component content is used to display the target component content; the operation of adjusting the target component in the preset area is received, comprising:

[0014] a drag operation on the drag point is received;

[0015] based on the drag operation on the drag point, adjustment of the width or height of the target component and adjustment of the width or height of other target components adjacent to the target component are realized.

[0016] Further, the operation of adjusting the target component in the preset area is received, further comprising:

[0017] a selection operation on the mask layer is received to realize highlight display of the target component; or

[0018] a drag operation on the mask layer is received to realize position adjustment of the target component.

[0019] Further, after the selection operation on the mask layer is received to realize highlight display of the target component, further comprising:

[0020] a re-selection operation on the mask layer is received to make the mask layer disappear, so as to realize editing of the component content.

[0021] Further, the operation of dragging the target component to the editor area is received, comprising:

[0022] when the operation of dragging the target component to the editor area is received, a FLIP animation is created to record the operation process of dragging the target component from the component list area to the editor area, and the operation process is stored in a history record stack.

[0023] Further, after the operation, the target component is automatically laid out in the editor area to make multiple target components in the same row be sequentially and adjacently laid out and fill the whole row, and multiple target components in the same column are sequentially laid out from top to bottom and a gap is reserved between adjacent target components, further comprising:

[0024] When receiving an operation of dragging a new target component to a row where an existing target component in the editor region is located, the width of the target component in the row is shortened to reserve a new space for the new target component.

[0025] Further, it also comprises:

[0026] Data storage is performed on the N target components and other data on the editing page, and storage is performed in a tree structure.

[0027] An array structure is added so that the original tree structure implements data recording, and the array structure implements data rendering.

[0028] In a second aspect, the application further provides a device for automatically typesetting a webpage without codes, which is applied to an editing page having a component list region, an editor region and a tool region, and comprises:

[0029] An acquisition module is configured to acquire N target components to be arranged, wherein the N target components to be arranged are located in the component list region, and each component in the component list region is integrated with M interactive events, and M and N are positive integers.

[0030] A receiving module is configured to receive an operation of dragging the target component to the editor region.

[0031] A typesetting module is configured to, based on the operation, automatically typeset the target component in the editor region, so that multiple target components in a same row are sequentially and adjacently typeset and occupy the whole row, multiple target components in a same column are sequentially typeset from top to bottom, and an interval is reserved between adjacent target components.

[0032] A generation module is configured to, based on the automatically typeset target component of the editor region and an operation on the tool region, generate a target webpage.

[0033] In a third aspect, the application further provides a computer device, which comprises a memory, a processor and a computer program stored in the memory and executable on the processor, and the processor implements the method steps described above when executing the program.

[0034] In a fourth aspect, the application further provides a computer readable storage medium, which stores a computer program, and the program is executable on the processor to implement the method steps.

[0035] The one or more technical solutions in the embodiments of the application have at least the following technical effects or advantages:

[0036] The application provides a code-free automatic layout webpage generation method, which is applied to an editing page with a component list area, an editor area and a tool area, and includes the following steps: obtaining N target components to be arranged, the N target components to be arranged being located in the component list area, and each component in the component list area being integrated with M interaction events, M and N being positive integers; receiving an operation of dragging the target components to the editor area; based on the operation, automatically laying out the target components in the editor area, so that multiple target components in the same row are sequentially and adjacently laid out and occupy the whole row, multiple target components in the same column are sequentially laid out from top to bottom, and a gap is reserved between adjacent target components; and generating a target webpage based on the target components laid out in the editor area and an operation on the tool area. By means of automatic layout, the target components in the same row can be sequentially arranged and occupy the whole row, the multiple target components in the same column are sequentially arranged, and a gap is reserved between adjacent target components in the multiple target components in the same row or the same column, so that the layout effect is better and the layout efficiency is improved. BRIEF DESCRIPTION OF DRAWINGS

[0037] Various other advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiments. The accompanying drawings are included to provide a description of the preferred embodiments and are not intended to limit the scope of the application. Moreover, the same reference numerals in different figures represent the same or similar components. In the drawings:

[0038] Figure 1 A step flowchart of the code-free automatic layout webpage generation method in the embodiment of the application is shown;

[0039] Figure 2 A structure diagram of the editing software in the embodiment of the application is shown;

[0040] Figure 3 A diagram of the arrangement positions of rows, columns and components on a canvas in the embodiment of the application is shown;

[0041] Figure 4 A structure diagram of a preset area in the embodiment of the application is shown;

[0042] Figure 5 A diagram of one-way data flow of data in a component in the embodiment of the application is shown;

[0043] Figure 6 An implementation flowchart of the editing software in the embodiment of the application is shown;

[0044] Figure 7 A structure diagram of the code-free automatic layout webpage generation device in the embodiment of the application is shown;

[0045] Figure 8 Fig. 1 shows a schematic diagram of a computer device for implementing the webpage generation method according to an embodiment of the present application. DETAILED DESCRIPTION

[0046] Exemplary embodiments of the present disclosure will be described in detail with reference to the accompanying drawings. Although exemplary embodiments of the present disclosure are shown in the drawings, it is understood that the present disclosure can be implemented in various forms and should not be limited by the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the present disclosure to those skilled in the art.

[0047] Embodiment One

[0048] Embodiments of the present application provide a webpage generation method without code automatic layout, which is applied to an editing page having a component list area, an editor area and a tool area.

[0049] As Figure 1 described, the method comprises:

[0050] S101, obtaining N target components to be arranged, the N target components to be arranged being located in the component list area, each component in the component list area being integrated with M interaction events, M and N being positive integers;

[0051] S102, receiving an operation of dragging a target component to the editor area;

[0052] S103, based on the operation, automatically arranging the target component in the editor area, so that multiple target components in the same row are arranged in sequence and adjacent to each other and occupy the entire row, and multiple target components in the same column are arranged in sequence from top to bottom, and a gap is reserved between adjacent target components;

[0053] S104, generating a target webpage based on the automatically arranged target components in the editor area and the operation on the tool area.

[0054] First, the method is applied in an editing software for realizing editing of the content of a webpage. As Figure 2 shown, the editing software has a component list area 201, an editor area 202 and a tool area 203 on an editing page thereof.

[0055] The component list area includes multiple target components, including an input box component, a text component, a picture component, a video component, an audio component, a button component, a table component, a chart component, a tab component and other customized components (components made according to business and webpage content requirements), which will not be described in detail here.

[0056] The editor area is used to display the components dragged into the editor area, the editor area can identify the components dragged in by the user, and the components dragged in can be rendered into corresponding component elements, the component elements can be deleted, copied, pasted, etc. through the right-click menu, and the position and size of the component elements can be changed to realize layout.

[0057] The tool module is used to realize the functions of importing and exporting the webpage, undo, forward, adding a new page, deleting a page, etc.

[0058] In the specific use of the editing software, a blank canvas needs to be created first, that is, a new object (Object, a data type for storing a large number of characters) is created as a canvas object, and the corresponding ID (Identity document) is assigned, and the drag-related event listener API (Application Programming Interface) is bound.

[0059] In S101, N target components to be arranged are obtained, and the N target components to be arranged are located in a component list area, and M interaction events are integrated in each component in the component list area, and M and N are positive integers.

[0060] Since the component list area includes many components, the user needs to select some components in the process of making a webpage for layout, which can be selected one by one or in batches, and this is not limited. The selected components are N target components.

[0061] Then, S102 is executed to receive an operation of dragging the target component to the editor area.

[0062] After the target component is dragged into the editor area to form a preset area, S102, specifically includes:

[0063] The target component is dragged into the editor area, and the operation of adjusting the target component in the preset area is received.

[0064] After receiving the operation of dragging the target component into the editor area, in S103, the target component is automatically arranged in the editor area based on the operation, so that multiple target components in the same row are arranged in sequence and adjacent to each other and occupy the entire row, and multiple target components in the same row are arranged in sequence from top to bottom, and a gap is reserved between adjacent target components.

[0065] After the target component is dragged into the editor area, in the editor area, when there is only one component in a row, the component occupies the row, and if there are multiple components, a gap is reserved between the multiple components and the entire row is occupied.

[0066] In the editor area, a column of components is arranged from top to bottom, and a gap is reserved between adjacent components.

[0067] In automatic layout, the height of a row is supported by the height of a column, and the height of a column is supported by the preset area. The row is always full, and the width is 960px (pixels). The width of a column is supported by the widest preset area in the column, and the height is supported by the preset area of the entire column. The width and height of the preset area are allocated by calculation. The component content has two layouts according to the different content: 1. The component content width is not variable, and it is centered from top to bottom and left to right; 2. The width is variable, and the component content width and height are inherited from the parent component content.

[0068] In the layout order, a table-like layout is adopted. In the vertical direction, a column is arranged from top to bottom. In the horizontal direction, the width of a whole row is divided into 24 parts, and the target components in the same row occupy the entire row. All components cannot have overlapping parts, and all components have built-in spacing. The target component and the target component are separated by adjusting the spacing in the component.

[0069] The row, column and component formed in the canvas are specifically shown in Figure 3 .

[0070] The automatic layout described above does not necessarily meet the user's design requirements for the webpage. Of course, the components in the editor also need to be adjusted.

[0071] Therefore, after S103, it further includes:

[0072] Receiving an operation of adjusting a target component of a preset area, the target component forming a preset area in the editor area.

[0073] The operation of adjusting the target component of the preset area can be an operation of adjusting the layout position, layout size, etc. of the target component.

[0074] Specifically, in the adjustment process, the preset area is adjusted.

[0075] As shown in Figure 4 , the preset area includes: a border from the outside to the inside, a drag point, a mask layer, and component content. The mask layer integrates a drag event interface and a click event interface, and is used to obtain the related information of the target component when the target component is dragged, and the target position information of the user releasing the target component and the information of other target components in the entire row, to adjust the position of the target component. The component content is used to display the content of the target component.

[0076] In the operation of receiving the adjustment of the target component of the preset area, it includes:

[0077] A drag operation on the drag point is received, and based on the drag operation on the drag point, the width or height of the target component and the width or height of other target components adjacent to the target component are adjusted.

[0078] For example, if there are five target components in a row, adjusting the width of one component will also adjust the widths of the adjacent components. If you adjust the height of one component, when the height of the tallest component in the row is adjusted, the height of the entire row will also be adjusted. The components below the row will be lowered, but the height will not change. When adjusting the height of components other than the tallest component in the row, the height of the remaining components in the row will not change.

[0079] Receiving an operation of adjusting a target component in a preset area also includes:

[0080] Receive a selection operation on the mask layer to highlight the target component; or receive a drag operation on the mask layer to adjust the position of the target component.

[0081] In a specific embodiment, when the mask layer is selected and clicked for the first time, the target component is highlighted to indicate that the target component is selected.

[0082] After the target component is highlighted, if the mask layer is selected again, the mask layer disappears, so that the component content can be edited.

[0083] Specifically, after selecting and clicking the mask layer for the first time, by clicking the mask layer again, the mask layer disappears and the target component content can be edited.

[0084] like Figure 5 As shown, the data within the component can come from user input or from the editor area, and there is no limitation here. This data flow is unidirectional, passing from the editor to the component. When the component monitors data changes, it performs unified processing for unified management and storage in the history stack.

[0085] In S102, receiving an operation of dragging a target component to the editor area specifically includes:

[0086] By creating a FILP animation, the operation process of dragging the target component from the component list area to the editor area is recorded, and the operation process is stored in the record stack.

[0087] The FILP animation method can clearly show the user's operation. Storing the user's operation in the history stack means storing a new canvas object in the history stack to achieve the function of moving back and forth.

[0088] Among them, in the FILP (First-Last-Invert-Play), First is to obtain the information of the current component DOM (Document Object Model, abbreviated as DOM); Last, renders the new canvas object to the page into a new DOM and obtains the new DOM information; Invert: creates a transition animation between the two states based on the DOM information obtained in the first and last states; Play: plays the transition animation.

[0089] After the target component is dragged into the editor area, the process of adjusting the preset area formed also uses the above-mentioned FILP animation for clear display.

[0090] For component content, different data can be passed in depending on the component, such as text format data, pictures, videos, audio, etc. These data are all obtained from the component itself, transmitted to the processing layer where the editor is located in the Object format through the event bus, and then passed into the component through editing.

[0091] Finally, S104 is executed to generate a target web page based on the target component of the automatic typesetting of its area and the operation on the tool area.

[0092] The target webpage can be exported and imported. The export is in JSON format, which is a lightweight data exchange format. When exporting the target webpage, the canvas object is copied and the network resource addresses (including pictures, audio, video and other network resources) are filtered out. The download interface is called to download and store the downloaded files in the export file. Finally, the canvas object is converted into JSON format and placed in the export file. The compression interface is called to compress the entire file, and the browser download interface is called before it is presented to the user.

[0093] Import: This is done by importing a compressed file, calling the decompression interface, decompressing the relevant resources and JSON files, converting the JSON into a canvas object, and determining whether the current state is offline. If it is offline, the resource address is replaced with the local address. Otherwise, the data is passed to the editor area, which decodes and renders it.

[0094] The implementation process of the editing software is as follows Figure 6As shown, first, a new page is received S601 or a page is imported S602, a component in the component list area is selected, i.e., a component is selected S603, the selected component is placed in the editor area by dragging S604, and since the layout S605 at this time can or can not meet the design requirements of the user, when it does not meet the design requirements of the user, a new component can be added S606, the newly added component is re-laid out after being dragged, a new layout is obtained, component data is added to all components S607, and finally, the page is exported S608.

[0095] The above is the process of dragging a component to an editing page to generate a webpage. Since some webpages only need simple components and some webpages need complex components, for complex components, changing the position of an original component in a browser under a normal document flow changes the position of the component, which causes the component to be repeatedly created and destroyed. In a use scenario involving a complex component or a high-performance requirement, this repeated overhead needs to be avoided to improve the processing performance of the browser.

[0096] To solve this problem, in an embodiment, N target components on an editing page and other data are stored in a data storage, and are stored in a tree structure. An array structure is added to enable the original tree structure to record data and the array structure to render data.

[0097] After the array structure is added, when creating a FLIP animation, only the first and last steps are retained, the canvas object tree is converted through a conversion function after the last step is completed, and a transition animation is directly implemented through a Transition attribute in CSS (Cascading Style Sheets).

[0098] The height and width of a component need to be manually calculated according to the normal document flow of a browser. A conversion function is calculated through the width, the height is changed, the height, width, and level information of an array in the data of the tree structure are converted into an absolute positioning tree, are stored in an array structure, and are rendered to an interface through the array structure.

[0099] In another embodiment, an editor area is regarded as a "chessboard", a corresponding data in a tree structure is changed into a simplest div tag as a "pseudo element", and a z-index attribute in CSS is changed into -1 as the chessboard; array-shaped data is rendered to a page by absolute positioning, and is mapped and bound as a chess piece through one-to-one correspondence of element ids in two data.

[0100] Specific binding method: by traversing all "pseudo elements" on the "board", and through the browser's getBoundingClientRect interface to obtain all pseudo element position height information, thereby stored in array form structure data. Finally, the data form structure is rendered.

[0101] For this reduced browser overhead, improve the browser's processing performance in other application scenarios, specifically for complex DOM structure (such as 3D model, containing a large amount of data table, a large number of data charts), and there is a need to move the structure of the scene.

[0102] In a specific scenario, when a target DOM structure that needs to be moved is encountered during normal document flow layout, a blank div of the same size as the DOM is created to replace the original DOM. Then, the target DOM structure is positioned in the entire document using absolute positioning, and the position information pos1=(top1,left1) and width information (width,height) of the blank div are obtained using the getBoundingClientRect interface. The position pos3=(top3=top2-top1,left3=left2-left1) of the root node of the entire document is also obtained using the getBoundingClientRect interface. Finally, the top3 and left3 in pos3 are set to the position of the target DOM structure, which coincides with the blank div. When the complex DOM needs to be moved, a new blank div is created at the new position, the new position is obtained in the above manner, and the target DOM structure is assigned to the new position to achieve the purpose of moving. If animation is needed, FLIP animation or direct transition animation can be used.

[0103] When a 3D model drawn on a page needs to be moved or the component is reused on multiple pages (the component can be lowered in level to achieve the effect of hiding), the above scheme is used. When the component needs to be used on different pages (the front-end route needs to be included, and the entire page cannot be jumped, otherwise the target route will be destroyed), the level of the target DOM structure is changed to -1 to hide it. When the component needs to appear, a new blank div is created in the above manner to obtain the position.

[0104] The application scenarios suitable for complex pages in the present application can also be video windows, normal document flow, and a large number of complex component interactions (such as various web virtual experiments). Similarities exist, and therefore will not be described in detail here.

[0105] The one or more technical solutions in the embodiment of the present application have at least the following technical effects or advantages:

[0106] The application provides a code-free automatic layout webpage generation method, which is applied to an editing page with a component list area, an editor area and a tool area, and includes the following steps: obtaining N target components to be arranged, the N target components to be arranged being located in the component list area, and M interaction events being integrated in each component of the component list area, wherein M and N are positive integers; receiving an operation of dragging the target components to the editor area; based on the operation, performing automatic layout on the target components in the editor area, so that multiple target components in the same row are sequentially and adjacently arranged and occupy the whole row, multiple target components in the same column are sequentially arranged from top to bottom, and a gap is reserved between adjacent target components; and based on the target components arranged automatically in the editor area and an operation on the tool area, generating a target webpage. In the code-free automatic layout manner, the target components in the same row can be sequentially arranged and occupy the whole row, the multiple target components in the same column are sequentially arranged, and a gap is reserved between adjacent target components in the multiple target components in the same row or the same column, so that the layout effect is better and the layout efficiency is improved.

[0107] Embodiment two

[0108] Based on the same inventive concept, the application further provides a code-free automatic layout webpage generation device, which is applied to an editing page with a component list area, an editor area and a tool area, as shown in Figure 7 , and includes:

[0109] The obtaining module 701 is configured to obtain N target components to be arranged, the N target components to be arranged being located in the component list area, and M interaction events being integrated in each component of the component list area, wherein M and N are positive integers.

[0110] The receiving module 702 is configured to receive an operation of dragging the target components to the editor area.

[0111] The layout module 703 is configured to perform automatic layout on the target components in the editor area based on the operation, so that multiple target components in the same row are sequentially and adjacently arranged and occupy the whole row, multiple target components in the same column are sequentially arranged from top to bottom, and a gap is reserved between adjacent target components.

[0112] The generating module 704 is configured to generate a target webpage based on the target components arranged automatically in the editor area and an operation on the tool area.

[0113] In an optional embodiment, the application further includes:

[0114] The adjusting module is configured to receive an operation of adjusting the target components in the preset area.

[0115] In an optional implementation, the preset area includes, from outside to inside, a frame, a drag point, a mask layer, and component content, the mask layer is integrated with a drag event interface and a click event interface, and is configured to acquire relevant information of the target component, target position information of the target component released by a user, and information of other target components in an entire row when the target component is dragged, and the component content is configured to display content of the target component. The adjustment module is configured to: receive a drag operation on the drag point; and based on the drag operation on the drag point, adjust a width or a height of the target component and a width or a height of other target components adjacent to the target component.

[0116] In an optional implementation, the adjustment module is further configured to:

[0117] receive a selection operation on the mask layer, and highlight the target component; or

[0118] receive a drag operation on the mask layer, and adjust a position of the target component.

[0119] In an optional implementation, the adjustment module is further configured to:

[0120] after the selection operation on the mask layer is received and the target component is highlighted, a re-selection operation on the mask layer is received, the mask layer disappears, and the component content is edited.

[0121] In an optional implementation, the adjustment operation includes:

[0122] when the operation of the target component being dragged to the editor area is received, a FLIP animation is created to record a process of the target component being dragged from the component list area to the editor area, and the process is stored in a history record stack.

[0123] In an optional implementation, the method further includes a new component module configured to:

[0124] when the operation of the new target component being dragged to a row where existing target components in the editor area is received, a width of the target components in the row is shortened to reserve a new space for the new target component.

[0125] In an optional implementation, the method further includes a storage module configured to:

[0126] store the N target components and other data on the editor page, and store the N target components and other data in a tree structure.

[0127] An array-shaped structure is added to enable the original tree-shaped structure to implement data recording, and the array-shaped structure implements data rendering.

[0128] Example 3

[0129] Based on the same inventive concept, an embodiment of the present invention provides a computer device, such as Figure 8 As shown, it includes a memory 804, a processor 802 and a computer program stored in the memory 804 and capable of running on the processor 802. When the processor 802 executes the program, the steps of the above-mentioned method for automatically typesetting and generating a web page without code are implemented.

[0130] Among them, Figure 8 In the embodiment of the present invention, a bus architecture (represented by bus 800) is shown. Bus 800 may include any number of interconnected buses and bridges. Bus 800 links various circuits, including one or more processors represented by processor 802 and memory represented by memory 804. Bus 800 may also link various other circuits, such as peripherals, voltage regulators, and power management circuits, which are well known in the art and are therefore not described further herein. Bus interface 806 provides an interface between bus 800 and receiver 801 and transmitter 803. Receiver 801 and transmitter 803 may be the same component, namely a transceiver, which provides a means for communicating with various other devices over a transmission medium. Processor 802 is responsible for managing bus 800 and general processing, while memory 804 may be used to store data used by processor 802 when performing operations.

[0131] Example 4

[0132] Based on the same inventive concept, an embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the above-mentioned method for automatically typesetting and generating web pages without code.

[0133] The algorithm and display provided herein are not inherently related to any particular computer, virtual system or other device. Various general-purpose systems can also be used together with the teachings based on this. According to the above description, it is obvious that the structure required for constructing this type of system. In addition, the present invention is not directed to any specific programming language. It should be understood that various programming languages ​​can be utilized to realize the content of the present invention described herein, and the above description of specific languages ​​is for the purpose of disclosing the best mode of the present invention.

[0134] In the description provided herein, numerous specific details are described. However, it is understood that embodiments of the present invention may be practiced without these specific details. In some instances, well-known methods, structures, and techniques are not shown in detail so as not to obscure the understanding of this description.

[0135] Similarly, it is to be understood that the embodiments of the present application can be placed into practice notwithstanding modifications to form yet further embodiments of the present application. As such, the terms and expressions of the foregoing description are used solely by way of the example thereof, but to the extent possible no limitation is intended to the details of the construction described herein other than as described in the claims. In this manner, the embodiments of the present application as described herein are to be understood to overcome or circumvent one or more of the disadvantages of the prior art.

[0136] Those skilled in the art can appreciate that modules in the apparatuses in the embodiments can be adaptively changed and disposed in one or more apparatuses different from the embodiments. The modules or units or components in the embodiments can be combined into one module or unit or component, and further can be divided into multiple sub-modules or sub-units or sub-components. Any combination of all the features disclosed in the specification (including the accompanying claims, abstract and drawings), and all the processes or units of any method or apparatus disclosed in the specification can be adopted in any combination, except that at least some of such features and / or processes or units are mutually exclusive. Unless explicitly stated, each feature disclosed in the specification (including the accompanying claims, abstract and drawings) can be replaced by an alternative feature that provides the same, equivalent or similar function.

[0137] Furthermore, those skilled in the art could understand that although some embodiments herein include certain features rather than others included in other embodiments, the combination of features of different embodiments means to be within the scope of the present application and forms different embodiments. For example, in the following claims, any one of the claimed embodiments can be used in any combination.

[0138] The various component embodiments of the present invention may be implemented in hardware, as software modules running on one or more processors, or as a combination thereof. Those skilled in the art will appreciate that, in practice, a microprocessor or digital signal processor (DSP) may be used to implement some or all of the functions of some or all of the components of the code-free automatic typesetting webpage generation device or computer device according to the embodiments of the present invention. The present invention may also be implemented as an apparatus or device program (e.g., a computer program or computer program product) for performing part or all of the methods described herein. Such a program implementing the present invention may be stored on a computer-readable medium or in the form of one or more signals. Such signals may be downloaded from an Internet website, provided on a carrier signal, or provided in any other form.

[0139] It should be noted that the above embodiments illustrate rather than limit the invention, and that those skilled in the art may devise alternative embodiments without departing from the scope of the appended claims. In the claims, any reference signs placed between brackets should not be construed as limiting the claims. The word "comprising" does not exclude the presence of elements or steps not listed in the claims. The word "a" or "an" preceding an element does not exclude the presence of a plurality of such elements. The present invention may be implemented by means of hardware comprising several different elements and by means of appropriately programmed computers. In a unit claim enumerating several means, several of these means may be embodied by the same item of hardware. The use of the words first, second, and third etc. does not indicate any order. These words may be interpreted as names.

Claims

1. A method for generating a webpage by automatic layout without code, applied to an editing page having a component list area, an editor area and a tool area, characterized in that, include: Obtain N target components to be arranged, wherein the N target components to be arranged are located in the component list area, and each component in the component list area integrates M interaction events, where M and N are both positive integers; Receive an operation of dragging the target component to the editor area; Based on the operation, the target components are automatically laid out in the editor area so that multiple target components in the same row are laid out adjacent to each other and occupy the entire row, and multiple target components in the same column are laid out from top to bottom, with spaces reserved between adjacent target components; Receiving an operation to adjust the target component in a preset area, the preset area including a border from outside to inside, a drag point, a mask layer, and component content, wherein the mask layer integrates a drag event interface and a click event interface, and is used to obtain relevant information of the target component and target position information of the target component released by the user and information of other target components in the entire row when the target component is dragged, and the component content is used to display the target component content. Receiving an operation to adjust the target component in the preset area includes: receiving a drag operation on the drag point; Based on the dragging operation on the drag point, adjusting the width or height of the target component and adjusting the width or height of other target components adjacent to the target component includes: Based on the dragging operation on the drag point, when the width of any target component is adjusted, the width of the adjacent target components is adjusted accordingly; when the height of any target component is adjusted, the height of the highest target component in the corresponding row is adjusted, so that the height of the target components in the entire row is adjusted accordingly; Receiving an operation of adjusting the target component in the preset area further includes: receiving a selection operation on the mask layer to highlight the target component; or receiving a drag operation on the mask layer to adjust the position of the target component; A target web page is generated based on the target component of the automatic typesetting of the editor area and the operation on the tool area.

2. The method of claim 1, wherein, After receiving a selection operation on the mask layer and highlighting the target component, the method further includes: A reselection operation on the mask layer is received, so that the mask layer disappears, thereby enabling editing of the component content.

3. The method of claim 1, wherein, The operation of receiving the target component being dragged to the editor area includes: When receiving an operation of dragging a target component to the editor area, a FLIP animation is created to record the operation process of dragging the target component from the component list area to the editor area, and the operation process is stored in a history record stack.

4. The method of claim 1, wherein, After automatically laying out the target components in the editor area based on the operation so that multiple target components in the same row are laid out adjacent to each other in sequence and occupy the entire row, and multiple target components in the same column are laid out from top to bottom in sequence with spaces reserved between adjacent target components, the method further includes: When receiving an operation of dragging a new target component to a row where an existing target component in the editor region is located, the width of the target component in the row is shortened to reserve a new space for the new target component.

5. The method of claim 1, wherein, Also include: Data storage is performed on N target components and other data on the editing page, and storage is performed in a tree structure; An array structure is added to enable the original tree structure to implement data recording, and the array structure implements data rendering.

6. A device for generating a webpage by automatic layout without codes, applied to an editing page having a component list area, an editor area and a tool area, characterized in that, Include: An acquisition module is configured to acquire N target components to be arranged, the N target components to be arranged being located in a component list region, and M interaction events being integrated in each component of the component list region, M and N being positive integers; A receiving module is configured to receive an operation of dragging the target component to the editor region; A layout module is configured to, based on the operation, automatically layout the target component in the editor region, so that multiple target components in a same row are sequentially and adjacently laid out and occupy the entire row, and multiple target components in a same column are sequentially laid out from top to bottom and have a spacing between adjacent target components; An adjusting module is configured to receive an operation of adjusting the target component in a preset region, the preset region including, from outside to inside, a border, a dragging point, a mask layer, and component content, wherein the mask layer is integrated with a dragging event interface and a clicking event interface, and is configured to, when the target component is dragged, acquire related information of the target component, target position information of the target component released by a user, and information of other target components in an entire row, and the component content is configured to display content of the target component, the adjusting module is further configured to: receive a dragging operation on the dragging point; based on the dragging operation on the dragging point, adjust the width or height of the target component and the width or height of other target components adjacent to the target component; The adjusting module is specifically configured to: based on the dragging operation on the dragging point, when adjusting the width of any target component, adjust the width of an adjacent target component, and when adjusting the height of any target component, adjust the height of a target component in a corresponding row that is highest, so that the height of target components in the entire row is adjusted; The adjusting module is further configured to: receive a selection operation on the mask layer to implement highlight display of the target component, or receive a dragging operation on the mask layer to implement an operation of adjusting the position of the target component; A generation module is configured to generate a target web page based on the automatically laid out target components of the editor region and an operation on the tool region.

7. A computer-readable storage medium having stored thereon a computer program, characterized in that The program is executed by the processor to implement the method of any one of claims 1-5.

Images