Implementation method and system of image-text list webpage dragging type design and computer readable medium

Abstract

The invention discloses an image-text list webpage drag-and-drop design implementation method and system and a computer readable medium, and relates to the technical field of webpage design. Page data, basic components, self-defined components and list components are defined, and corresponding component dictionaries are formed and stored; a user is allowed to store the user-defined component formed by dragging and editing, the user-defined component is used as a template, after the page is loaded, the image-text list can be rendered in combination with the list data, the webpage layout containing the content of the image-text list can be achieved through simple dragging operation, repeated layout design is not needed, the design efficiency is improved, and the user experience is improved. The convenience of webpage design is improved; moreover, the dragging operation and layout of each component dragged into the canvas can be avoided, so that the positioning error caused by dragging each component is reduced, the designed webpage can better meet the requirements of the image-text list webpage with the unified style and layout, and the design quality of the image-text webpage is improved.

Description

Technical Field

[0001] The present invention relates to the technical field of web page design, and in particular to a method, system and computer-readable medium for implementing drag-and-drop design of a graphic and text list web page. Background Art

[0002] Low-code development platform technology is widely used in the development of various computer programs. Visual page design is an important part of the low-code platform. This design method focuses on building web pages by dragging and dropping components, adjusting styles, and real-time previewing. At present, the visual page design of mainstream platforms mainly realizes the visual drag-and-drop design of web pages through processes, forms, and large-screen data display. For web pages in the style of graphic lists, there is currently no design method that can be implemented through drag-and-drop positioning and simple configuration of attributes. Users usually need to edit the code and configure the components to complete the design and layout of graphic list web pages.

[0003] Traditional drag-and-drop web design platforms or design methods, such as the Chinese patent with patent number CN111966345A, usually store packaged single components and data on a server. When designing a web page, users can only drag the packaged components and modify and configure the stored components. For the design of graphic list web pages, using such traditional design platforms or implementation methods, it is necessary to drag each graphic component in the graphic list to the canvas and modify and configure them one by one during design, so that users have to perform a large number of repetitive editing and configuration operations. Not only is the design efficiency low, but also in the design that only needs to change component properties or replace a component but does not need to change the list layout, because the design requires the dragging operation of each component, the positioning error between the graphic components is large, and it is easy to have problems such as graphic misalignment or a messy layout. Summary of the invention

[0004] The purpose of the present invention is to provide a method, system and computer-readable medium for implementing the drag-and-drop design of a graphic list web page, which is used to solve the existing low-code web page design platform or design method. In the graphic list web page design, it is necessary to drag each graphic component in the graphic list to the canvas and modify and configure them one by one, which requires users to perform a large number of repetitive editing and configuration operations, resulting in low design efficiency. Or, when there is no need to change the list layout, due to the dragging operation on each component, the positioning error between the graphic components is large, and the problem of graphic misalignment or messy layout may easily occur.

[0005] The present invention solves the above problems through the following technical solutions:

[0006] A method for implementing drag-and-drop design of a graphic list webpage includes the following steps:

[0007] Define page data: use the GUID as the first identifier of the first data item added by the user, and use the first identifier as the key to store the first data item in the first page variable in a dictionary format in the form of key-value, so as to form a page data dictionary;

[0008] The first data item is defined as a first data structure through the page JavaScript, wherein the first data structure includes: a name, a first identifier, a data type, a data source, actual data, interface data, and an extended field; the interface data is used when the data source selected by the user is the interface data; the extended field is used when the user configures the paging list data;

[0009] Define basic components: when the user drags the basic component to the canvas, obtain the release point coordinates; modify the top and left fields of the corresponding component style and the set default value field according to the release point coordinates, and generate a second identifier as the ID of the dragged component; store the dragged component in the second page variable with the second identifier as the key to form a first component dictionary;

[0010] The data structure of the basic component is defined as a second data structure: the second data structure includes: a second identifier, a component type, a parent component, a component style, component data, and component interaction;

[0011] After the user selects the dragged component and completes the style configuration, data configuration or interaction configuration, responding the style configuration, data configuration or interaction configuration to the dragged component;

[0012] Defining a custom component: when the user selects at least one of the dragged-in components and saves it as a custom component, the subordinate components contained in the selected component are automatically identified, and the selected component and the subordinate components are saved as a second component dictionary in the Component field; the second component dictionary uses the ID of the selected component as the third identifier;

[0013] The automatic identification specifically includes the following steps: traversing the Parent field of the second page variable of the selected component, selecting the basic component whose Parent field is the second identifier as the first child component; and then recursively traversing the second child components of the first child component until no component that satisfies the second identifier in the Parent field is found;

[0014] The data structure defining the custom component is a third data structure, the third data structure comprising: a second component dictionary, a name and a third identifier; the third identifier field value is the second identifier of the basic component acted upon by the right-click menu; the third identifier is used to indicate the first-level component in the first component dictionary;

[0015] Define list component: define the element template Template field of the basic component; if the user saves the custom component as an element template, generate a template component according to the list component set by the user and through the element template Template field, and then save the custom component as a template component;

[0016] Page loading: After the user completes the layout of the page, the page includes: a page data dictionary, a first component dictionary, and a second component dictionary; when the page generates a static page, the page data dictionary, the first component dictionary, and the second component dictionary are saved in the web page in the form of a Json string;

[0017] When the web page starts, the data corresponding to the basic components, custom components and list components are obtained through JSON parsing and rendered.

[0018] The implementation method of the drag-and-drop design of the graphic list web page described in the present invention defines the data agreed format as described above, performs visual drag-and-drop layout and performs data configuration and storage of basic components, and defines custom components and stores the custom components in a second component dictionary, so that in the process of user setting the list component, the graphic list component can be saved and configured or bound to data in a unified style or pattern by selecting the custom component as a template. When performing the current or next design, there is no need to repeatedly edit or configure a single component to form a component list. The web page layout containing the graphic list content can be realized through a simple drag-and-drop operation without repeated layout design, thereby improving the design efficiency and the convenience of web page design; and, by selecting the custom component as the template component, the dragging operation and layout of each component dragged into the canvas are avoided, thereby reducing the positioning error caused by dragging each component, so that the designed web page can better meet the requirements of a graphic list web page with a unified style and layout, and the quality of graphic web page design is improved.

[0019] Furthermore, in the implementation method of the drag-and-drop design of the graphic list web page, when the list component is rendered, the array data is first obtained according to the data configuration of the custom component in the list component; then the second component dictionary is obtained through the element template Template field, and for each element of the array data, a copy of the second component dictionary is made, and then the list component is rendered.

[0020] As a further improvement of the implementation method of the drag-and-drop design of the graphic list web page described in the present invention, on the basis of generating a template component by setting the custom component to be saved as an element template, during the page loading process, when rendering the list component, a second component dictionary corresponding to the template component can be copied for each element of the array data for rendering, thereby achieving the layout of the graphic list content and being able to load the page according to the defined custom component loading process, further improving the accuracy of the list component loading, reducing loading failures, and improving the quality of web page design.

[0021] Furthermore, in the implementation method of the drag-and-drop design of the graphic list web page, when the custom component is rendered, the second component dictionary is first read, and then the selected component is cyclically rendered according to the order of the second component dictionary; during the rendering process, it is first determined whether the selected component has been rendered; if the selected component has not been rendered, it is then determined whether the parent component corresponding to the selected component has been rendered; if the parent component has not been rendered, the parent component is first rendered and marked as rendered, and then the selected component is rendered and marked as rendered.

[0022] As a further improvement to the implementation method of the drag-and-drop design of the graphic list web page described in the present invention, since the user drags the basic component to the canvas, the position fields of the parent component and the component style are modified or configured, and the modification of the remaining fields is performed in the corresponding configuration area after selecting the component. Through the rendering method of this improved scheme, it can further ensure that the modified or configured basic components and the custom defined components configured according to the second component dictionary can be completely and accurately rendered and loaded, further reducing the possibility of errors in web page loading and improving the quality of web page design.

[0023] Furthermore, the implementation method of the drag-and-drop design of the graphic list web page, after completing the rendering of the first component dictionary and the second component dictionary, parses the page data dictionary and filters the first data item containing the interface data; according to the user configuration request interface, generates a second data item from the first data item containing the interface data, and re-renders the component bound to the second data item.

[0024] As a further improvement of the implementation method of the drag-and-drop design of the graphic list web page described in the present invention, by re-parsing the page data dictionary, the data items in the first data item that are configured with the request interface by the user are filtered out, and then the components bound to the second data item are re-rendered, so that the corresponding binding attribute fields can be rendered according to the correct values. When the user has configured the interface request, the integrity of the component rendering can be further guaranteed, the effect of web page loading is improved, and the quality of web page design is higher.

[0025] Furthermore, in the implementation method of the drag-and-drop design of the image and text list web page, when the user configures the data of the dragged-in component, the binding type of the dragged-in component includes: no binding, binding instance data or binding template data;

[0026] When the user selects the binding type as instance data, the first data item is used as the binding data of the dragged-in component, and the binding data is recorded in the DataId field;

[0027] It is agreed that the binding type of the template component is template data, and the data source of the template data is specified by the list component; when the user sets the list, the list component is bound to a single list element in the list data, and the binding properties of the list component are defined, and then the list component is configured with the binding properties as the key.

[0028] As a further improvement to the implementation method of the drag-and-drop design of the graphic list web page described in the present invention, by setting the binding type of the dragged-in component to include no binding, binding instance data, or binding template data and binding array data, when the user uses and configures the data of the dragged-in component, the user can choose to design and configure only the basic component when dragging the component of the design web page, and can also choose to use the configuration mode of the instance data and template data of the component template of the list component that saves the custom component, thereby enabling the user to not only choose the traditional configuration design method of the basic component, but also choose the design method of the list component template that binds instance data and template data, thereby improving the selectivity of the web page design method.

[0029] Furthermore, the implementation method of the drag-and-drop design of the graphic list web page, the automatic identification, specifically includes the following steps: traversing the Parent field of the second page variable of the selected component, selecting the basic component whose Parent field is the second identifier as the first child component; and then recursively traversing the second child components of the first child components until no component is found that satisfies the Parent field as the second identifier.

[0030] As an implementation method of the drag-and-drop design of the graphic list web page described in the present invention, by traversing the Parent field of the second page variable of the selected component, and then recursively traversing the second child component of the first child component, until no component that satisfies the second identifier of the Parent field is found, the subordinate components contained in the selected component can be more accurately and comprehensively identified, so that the selected component and the subordinate components can be more accurately saved in the Component field, making the definition and storage of custom components more accurate and complete.

[0031] A graphic list web page design system includes: a data definition module, a component definition module, a request response module, and a page loading module; the data definition module is used to define the page data and form the page data dictionary; the component definition module is used to define the basic component, the custom component, and the list component; the page loading module is used to: obtain or bind data corresponding to the basic component, the custom component, and the list component according to the user's design and configuration; render the basic component, the custom component, or the list component and load the page to form a web page.

[0032] The graphic list web page design system described in the present invention can define page data including instance data and template data through a data definition module. In conjunction with a component definition module and a page loading module, when designing a graphic list web page, a user can select a custom component as a template, save the graphic list component in a unified style or pattern and configure or bind data. When designing this or the next time, there is no need to repeat the layout design, thereby improving the design efficiency and the convenience of web page design. Moreover, using the graphic list web page design system described in the present invention, a user can choose to design and configure only the basic components or choose to use the configuration mode of instance data and template data of the component template that saves the custom component as the list component, thereby enabling the user to not only select the traditional configuration design method of the basic components, but also select the design method of the list component template that is bound to instance data and template data, thereby improving the applicability of the system.

[0033] A computer non-transitory readable medium, when executed by a processor of a computer, the computer executable instructions cause the computer to perform steps, the steps comprising:

[0034] Define page data: use the GUID as the first identifier of the first data item added by the user, and use the first identifier as the key to store the first data item in the first page variable in a dictionary format in the form of key-value, so as to form a page data dictionary;

[0035] The first data item is defined as a first data structure through the page JavaScript, wherein the first data structure includes: a name, a first identifier, a data type, a data source, actual data, interface data, and an extended field; the interface data is used when the data source selected by the user is the interface data; the extended field is used when the user configures the paging list data;

[0036] Define basic components: when the user drags the basic component to the canvas, obtain the release point coordinates; modify the top and left fields of the corresponding component style and the set default value field according to the release point coordinates, and generate a second identifier as the ID of the dragged component; store the dragged component in the second page variable with the second identifier as the key to form a first component dictionary;

[0037] The data structure of the basic component is defined as a second data structure: the second data structure includes: a second identifier, a component type, a parent component, a component style, component data, and component interaction;

[0038] After the user selects the dragged component and completes the style configuration, data configuration or interaction configuration, responding the style configuration, data configuration or interaction configuration to the dragged component;

[0039] Defining a custom component: when the user selects at least one of the dragged-in components and saves it as a custom component, the subordinate components contained in the selected component are automatically identified, and the selected component and the subordinate components are saved as a second component dictionary in the Component field; the second component dictionary uses the ID of the selected component as the third identifier;

[0040] The data structure defining the custom component is a third data structure, the third data structure comprising: a second component dictionary, a name and a third identifier; the third identifier field value is the second identifier of the basic component acted upon by the right-click menu; the third identifier is used to indicate the first-level component in the first component dictionary;

[0041] Define list component: define the element template Template field of the basic component; if the user saves the custom component as an element template, generate a template component according to the list component set by the user and through the element template Template field, and then save the custom component as a template component;

[0042] Page loading: After the user completes the layout of the page, the page includes: a page data dictionary, a first component dictionary, and a second component dictionary; when the page generates a static page, the page data dictionary, the first component dictionary, and the second component dictionary are saved in the web page in the form of a Json string;

[0043] When the web page starts, the data corresponding to the basic components, custom components and list components are obtained through JSON parsing and rendered.

[0044] The computer non-temporary readable medium described in the present invention, when executed by the processor of the computer, the computer executable instructions enable the computer to execute the steps including defining page data, defining basic components, defining custom components and defining list components, page loading, etc., so that in the process of user setting list components, by selecting custom components as templates, the graphic list components can be saved and configured or bound to data in a unified style or pattern, and when performing the current or next design, there is no need to repeatedly edit or configure a single component to form a component list, and the web page layout containing graphic list content can be realized through simple drag and drop operations without repeated layout design, thereby improving the design efficiency and the convenience of web page design; and, by selecting custom components as template components, the dragging operation and layout of each component dragged into the canvas are avoided, thereby reducing the positioning error caused by dragging each component, so that the designed web page can better meet the requirements of graphic list web pages with unified style and layout, and improve the quality of graphic web page design.

[0045] Compared with the prior art, the present invention has the following advantages and beneficial effects:

[0046] (1) The implementation method of the present invention enables a user to select a custom component as a template during the process of setting a list component, and save and configure or bind data to the graphic list component in a unified style or pattern. When performing the current or next design, there is no need to repeatedly edit or configure a single component to form a component list. The web page layout containing the graphic list content can be realized through a simple drag and drop operation without repeated layout design, thereby improving the design efficiency and the convenience of web page design.

[0047] (2) The implementation method of the present invention avoids dragging and layout of each component dragged into the canvas by selecting a custom component as a template component, thereby reducing the positioning error caused by dragging each component, making the designed web page more in line with the requirements of a graphic list web page with a unified style and layout, and improving the quality of graphic list web page design.

[0048] (3) The system or computer-readable medium described in the present invention can enable users to select custom components as templates, save and configure or bind data of graphic list components in a unified style or pattern without repeated layout design, thereby improving design efficiency, enhancing the convenience of web page design, and improving the quality of graphic and text web page design. BRIEF DESCRIPTION OF THE DRAWINGS

[0049] Figure 1 A schematic diagram of a process for implementing a method for drag-and-drop design of a graphic list web page of the present invention;

[0050] Figure 2A schematic diagram of an example of a data structure of a data item according to the present invention;

[0051] Figure 3 is a schematic diagram of an example of the second data structure of the present invention;

[0052] Figure 4 is a schematic diagram of an example of the third data structure of the present invention;

[0053] Figure 5 This is a schematic diagram of the page loading process of the present invention;

[0054] Figure 6 A schematic diagram of the rendering process of a single component of the present invention;

[0055] Figure 7 A schematic diagram of the rendering process of the component dictionary of the present invention;

[0056] Figure 8 A schematic diagram of an example of binding properties of the list component of the present invention;

[0057] Fig. 9 It is a module schematic diagram of the image and text list webpage design system of the present invention;

[0058] Fig.10 The figure is a schematic diagram of the interface provided by the graphic list webpage design system of the present invention for user operation. DETAILED DESCRIPTION

[0059] The present invention is further described in detail below in conjunction with examples, but the embodiments of the present invention are not limited thereto.

[0060] Example 1

[0061] Combined with Figure 1 As shown, the present invention provides a method for implementing the drag-and-drop design of a graphic list webpage, comprising the following steps:

[0062] S1: define page data: use the GUID as the first identifier of the first data item added by the user, and use the first identifier as the key to store the first data item in the first page variable in a dictionary format in the form of key-value, so as to form a page data dictionary;

[0063] The first data item is defined as a first data structure through the page JavaScript, wherein the first data structure includes: a name, a first identifier, a data type, a data source, actual data, interface data, and an extended field; the interface data is used when the data source selected by the user is the interface data; the extended field is used when the user configures the paging list data;

[0064] S2: define basic components: when the user drags the basic component to the canvas, obtain the release point coordinates; modify the top and left fields of the corresponding component style and the set default value field according to the release point coordinates, and generate a second identifier as the ID of the dragged component; store the dragged component in the second page variable with the second identifier as the key to form a first component dictionary;

[0065] The data structure of the basic component is defined as a second data structure, wherein the second data structure includes: a second identifier, a component type, a parent component, a component style, component data, and component interaction;

[0066] After the user selects the dragged component and completes the style configuration, data configuration or interaction configuration, responding the style configuration, data configuration or interaction configuration to the dragged component;

[0067] S3: define custom components: when the user selects at least one of the dragged-in components and saves it as a custom component, automatically identify the subordinate components contained in the selected component, and save the selected component and the subordinate components as a second component dictionary in the Component field; the second component dictionary uses the ID of the selected component as a third identifier;

[0068] The data structure defining the custom component is a third data structure, the third data structure comprising: a name, a third identifier, and a second component dictionary; the third identifier field value is the second identifier of the basic component acted upon by the right-click menu; the third identifier is used to indicate the first-level component in the first component dictionary;

[0069] S4: define list component: define the element template Template field of the basic component; if the user saves the custom component as an element template, generate a template component according to the list component set by the user and through the element template Template field, and then save the custom component as a template component;

[0070] S5: Page loading: After the user completes the layout of the page, the page includes: a page data dictionary, a first component dictionary, and a second component dictionary; when the page generates a static page, the page data dictionary, the first component dictionary, and the second component dictionary are saved in the web page in the form of a Json string; when the web page is started, the data corresponding to the basic components, custom components, and list components are obtained through JSON parsing and rendered.

[0071] It should be noted that the GUID in the first identifier is a globally unique identifier. The generation of the GUID follows a certain algorithm to ensure its uniqueness. In this embodiment, it is used as the first identifier to record data items in the database; Figure 2As shown, the first identifier is understood as a definition field of the data item. By using the first identifier as the unique identifier of the data item as the key, the data item added by the user can be saved in the first page variable in a dictionary format in the form of key-value to form a page data dictionary; the key is understood as a field or attribute commonly used in the computer field to uniquely identify a data record or object. In this embodiment, it is mainly used for unique key records. Specifically, the first data item is defined as the first data structure specifically including the following content Figure 2 shown.

[0072] In this embodiment, the main definition fields of the basic components are as follows: Figure 3 As shown, by defining the fields of the basic component, the content contained in the basic component can be stored in the second page variable with the second identifier as the key to form a first component dictionary, which is understood as the component dictionary of the basic component; it should be noted that, Figure 3 The components shown in are understood as the basic components dragged into the canvas, that is, the dragged components are configured. The user can modify or configure the basic components by configuring the component style of the basic components and setting the type of component data; it should be noted that the present invention adds the element template Template field that defines the basic components to be included in the basic component definition field. Since the element template Template field is defined in the component data, Figure 3 No further display.

[0073] The custom component in this embodiment is understood to be a number of basic components selected by the user to save the custom component in the canvas as a template component, and is also understood to be a collection of basic components or a collection of selected components after the selected component in this embodiment is saved. For example, the custom component is a component collection containing the selected component and its sub-components saved by the user through the right-click menu operation; for specific reference Figure 4 As shown, the data structure defining the custom component is a third data structure. The custom component includes a second component dictionary, which is understood as a collection of basic components in a dictionary format, that is, a component dictionary of the custom component; it also includes a name Name and a third identifier, which is understood as a unique identifier Id field used to record the data in the custom component. The value of the third identifier is the Id field of a basic component in the canvas that is affected by the right-click menu, which is used to indicate the basic component located at the top-level component in the second component dictionary Component, for example, the root node component.

[0074] In this embodiment, by Figure 1Steps S1 to S5 shown in the figure, after the user completes the layout of the page, save the content of the page laid out by the user, so that the page can be loaded according to the layout page; after the web page is started, the page starts to load, and the specific process is referred to Figure 5 As shown, it should be noted that Figure 5 The rendering component dictionary is understood as rendering the first component dictionary and the second component dictionary, and whether the second component dictionary needs to be rendered is selected according to whether the user saves the custom component as a template component.

[0075] Specifically, refer to Figure 5 As shown, after completing the rendering of the first component dictionary and the second component dictionary, the page data dictionary is parsed again to filter out the first data item containing the interface data; according to the user configuration request interface, the first data item containing the interface data is generated into a second data item, and the component bound to the second data item is re-rendered to complete the page loading of the web page.

[0076] It should be noted that the rendering described in the present invention is understood to include the rendering of basic components, custom components and list components; for example Figure 6 The rendering of a single component shown in the figure is understood as the rendering of a basic component, for example. After the user designs the component style of the basic component, the same configuration response creates an element according to the type and applies the component style. This rendering process needs to determine whether the user has bound the data. If the data is bound, the element style and attributes are set according to the binding field override to achieve the modification and configuration of the basic component, and then the element is mounted under the corresponding element of the parent component to complete the component rendering. Since custom components and list components can be component collections containing several basic components, the rendering of custom components or list components is understood as follows: Figure 7 The rendering flow of the component dictionary is shown.

[0077] Specifically, refer to Figure 7 As shown, when the custom component is rendered, the second component dictionary is read first, and then the selected component is rendered. Since the custom component contains multiple selected components, each selected component needs to be judged. If a selected component has been rendered, it means that its parent component has completed rendering, and then the next selected component is rendered, such as Figure 7 , and render the next component as shown in the figure until all components are rendered; during the rendering process, first determine whether the selected component has been rendered; if the selected component has not been rendered, then determine whether the parent component corresponding to the selected component has been rendered; if the parent component has not been rendered, first render the parent component and mark the parent component as rendered, then render the selected component and mark the selected component as rendered. It should be noted that Figure 7The component dictionary shown is understood to be a second component dictionary, that is, a component dictionary of a custom component. The component in "Is the component rendered / not rendered" is understood to be a selected component, and the "current component" is understood to be a selected component for judging whether the parent component has completed rendering. Specifically, in this embodiment, when the list component is rendered, the array data is first obtained according to the data configuration of the custom component in the list component. Then, the second component dictionary is obtained through the element template Template field, and for each element of the array data, a copy of the second component dictionary is copied to render the list component.

[0078] Specifically, in this embodiment, the implementation method of the drag-and-drop design of the graphic list web page is that when the user configures the data of the dragged-in component, the binding type of the dragged-in component includes: no binding, binding instance data or binding template data; when the user selects the binding type as instance data, the first data item is used as the binding data of the dragged-in component, and the binding data is recorded in the DataId field; it is agreed that the binding type of the template component is template data, and the data source of the template data is specified by the list component; when the user sets the list, the list component is bound to a single list element in the list data, and the binding properties of the list component are defined, and then the list component is configured with the binding properties as the key. For specific binding properties of the list component, refer to Figure 8 shown.

[0079] In this embodiment, the automatic identification specifically includes the following steps: traversing the Parent field of the second page variable of the selected component, selecting the basic component whose Parent field is the second identifier as the first child component; and then recursively traversing the second child components of the first child components until no component is found that satisfies the Parent field as the second identifier.

[0080] Example 2

[0081] refer to Fig. 9 As shown, a graphic list web page design system includes: a data definition module, a component definition module, a request response module, and a page loading module; the data definition module is used to define the page data and form the page data dictionary; the component definition module is used to define the basic component, the custom component, and the list component; the page loading module is used to: obtain or bind data corresponding to the basic component, the custom component, and the list component according to the user's design and configuration; render the basic component, the custom component, or the list component and load the page to form a web page.

[0082] It should be noted that Fig. 9For the sake of convenience, only the modules that can realize the main part of the graphic list design described in the present invention are shown. The system described in the present invention, based on the traditional web design platform that includes the web design function, also includes the data definition module, component definition module, request response module and page loading module described in the present invention; for example, on the basis of the traditional storage unit, computing unit and control unit, it also includes various modules that can define data, respond to user requests, component definition and page loading.

[0083] Specifically, the graphic list webpage design system can form the following structure by setting various modules on the basis of the traditional webpage design platform through this embodiment. Fig.10 In the user operation interface shown, users can drag components from the component area on the left to the canvas area in the middle to achieve layout. Every time a component is dragged in, a component object of the corresponding type will be added to the first component dictionary UserComponents; the system reads the drag event parameters through the request response module to set the component's position and parent information. Users can configure the style, data and interaction settings of the selected component through the configuration area to achieve visual drag layout operations.

[0084] Example 3

[0085] A computer non-transitory readable medium, when executed by a processor of a computer, the computer executable instructions cause the computer to perform steps, the steps comprising:

[0086] Define page data: use the GUID as the first identifier of the first data item added by the user, and use the first identifier as the key to store the first data item in the first page variable in a dictionary format in the form of key-value, so as to form a page data dictionary;

[0087] The first data item is defined as a first data structure through the page JavaScript, wherein the first data structure includes: a name, a first identifier, a data type, a data source, actual data, interface data, and an extended field; the interface data is used when the data source selected by the user is the interface data; the extended field is used when the user configures the paging list data;

[0088] Define basic components: when the user drags the basic component to the canvas, obtain the release point coordinates; modify the top and left fields of the corresponding component style and the set default value field according to the release point coordinates, and generate a second identifier as the ID of the dragged component; store the dragged component in the second page variable with the second identifier as the key to form a first component dictionary;

[0089] The data structure of the basic component is defined as a second data structure: the second data structure includes: a second identifier, a component type, a parent component, a component style, component data, and component interaction;

[0090] After the user selects the dragged component and completes the style configuration, data configuration or interaction configuration, responding the style configuration, data configuration or interaction configuration to the dragged component;

[0091] Defining a custom component: when the user selects at least one of the dragged-in components and saves it as a custom component, the subordinate components contained in the selected component are automatically identified, and the selected component and the subordinate components are saved as a second component dictionary in the Component field; the second component dictionary uses the ID of the selected component as the third identifier;

[0092] The automatic identification specifically includes the following steps: traversing the Parent field of the second page variable of the selected component, selecting the basic component whose Parent field is the second identifier as the first child component; and then recursively traversing the second child components of the first child component until no component that satisfies the second identifier in the Parent field is found;

[0093] The data structure defining the custom component is a third data structure, the third data structure comprising: a second component dictionary, a name and a third identifier; the third identifier field value is the second identifier of the basic component acted upon by the right-click menu; the third identifier is used to indicate the first-level component in the first component dictionary;

[0094] Define list component: define the element template Template field of the basic component; if the user saves the custom component as an element template, generate a template component according to the list component set by the user and through the element template Template field, and then save the custom component as a template component;

[0095] Page loading: After the user completes the layout of the page, the page includes: a page data dictionary, a first component dictionary, and a second component dictionary; when the page generates a static page, the page data dictionary, the first component dictionary, and the second component dictionary are saved in the web page in the form of a Json string;

[0096] When the web page starts, the data corresponding to the basic components, custom components and list components are obtained through JSON parsing and rendered.

[0097] Although the present invention is described herein with reference to the illustrative embodiments of the present invention, the above embodiments are only preferred embodiments of the present invention, and the embodiments of the present invention are not limited to the above embodiments. It should be understood that those skilled in the art can design many other modifications and embodiments, which will fall within the scope and spirit of the principles disclosed in this application.

Claims

1. A method for implementing drag-and-drop design of a graphic list web page. It is characterized in that The following steps are involved: Define page data: use the GUID as the first identifier of the first data item added by the user, and use the first identifier as the key to store the first data item in the first page variable in a dictionary format in the form of key-value, so as to form a page data dictionary; The first data item is defined as a first data structure through the page JavaScript, wherein the first data structure includes: a name, a first identifier, a data type, a data source, actual data, interface data, and an extended field; the interface data is used when the data source selected by the user is the interface data; the extended field is used when the user configures the paging list data; Define basic components: when the user drags the basic component to the canvas, obtain the release point coordinates; modify the top and left fields of the corresponding component style and the set default value field according to the release point coordinates, and generate a second identifier as the ID of the dragged component; store the dragged component in the second page variable with the second identifier as the key to form a first component dictionary; The data structure of the basic component is defined as a second data structure: the second data structure includes: a second identifier, a component type, a parent component, a component style, component data, and component interaction; After the user selects the dragged component and completes the style configuration, data configuration or interaction configuration, responding the style configuration, data configuration or interaction configuration to the dragged component; Defining a custom component: when the user selects at least one of the dragged-in components and saves it as a custom component, the subordinate components contained in the selected component are automatically identified, and the selected component and the subordinate components are saved as a second component dictionary in the Component field; the second component dictionary uses the ID of the selected component as the third identifier; The data structure defining the custom component is a third data structure, the third data structure comprising: a second component dictionary, a name and a third identifier; the third identifier field value is the second identifier of the basic component acted upon by the right-click menu; the third identifier is used to indicate the first-level component in the first component dictionary; Define list component: define the element template Template field of the basic component; if the user saves the custom component as an element template, generate a template component according to the list component set by the user and through the element template Template field, and then save the custom component as a template component; Page loading: After the user completes the layout of the page, the page includes: a page data dictionary, a first component dictionary, and a second component dictionary; when the page generates a static page, the page data dictionary, the first component dictionary, and the second component dictionary are saved in the web page in the form of a Json string; When the web page starts, the data corresponding to the basic components, custom components and list components are obtained through JSON parsing and rendered.

2. The method for implementing the drag-and-drop design of a graphic list webpage according to claim 1, It is characterized in that When the list component is rendered, the array data is first obtained according to the data configuration of the custom component in the list component; then the second component dictionary is obtained through the element template Template field, and for each element of the array data, a copy of the second component dictionary is copied, and then the list component is rendered.

3. The method for implementing the drag-and-drop design of a picture and text list web page according to claim 1, It is characterized in that When rendering the custom component, first read the second component dictionary, and then loop render the selected component according to the order of the second component dictionary; During the rendering process, first determine whether the selected component has been rendered; if the selected component has not been rendered, then determine whether the parent component corresponding to the selected component has been rendered; If the parent component is not rendered, the parent component is rendered first and marked as rendered, and then the selected component is rendered and marked as rendered.

4. The method for implementing the drag-and-drop design of a picture and text list web page according to claim 1, It is characterized in that After completing the rendering of the first component dictionary and the second component dictionary, parse the page data dictionary again and filter the first data item containing the interface data; according to the user configuration request interface, generate the second data item from the first data item containing the interface data, and re-render the component bound to the second data item.

5. The method for implementing the drag-and-drop design of a picture and text list web page according to claim 1, It is characterized in that When the user configures the data of the dragged-in component, the binding type of the dragged-in component includes: no binding, binding instance data or binding template data; When the user selects the binding type as instance data, the first data item is used as the binding data of the dragged-in component, and the binding data is recorded in the DataId field; It is agreed that the binding type of the template component is template data, and the data source of the template data is specified by the list component; when the user sets the list, the list component is bound to a single list element in the list data, and the binding properties of the list component are defined, and then the list component is configured with the binding properties as the key.

6. The method for implementing the drag-and-drop design of a graphic list webpage according to any one of claims 1 to 5, It is characterized in that The automatic identification specifically includes the following steps: traversing the Parent field of the second page variable of the selected component, selecting the basic component whose Parent field is the second identifier as the first child component; and then recursively traversing the second child components of the first child components until no component that satisfies the Parent field as the second identifier is found.

7. A graphic and text list web page design system, It is characterized in that Used to implement the drag-and-drop design of a graphic list web page as described in claim 1 or 5, comprising: a data definition module, a component definition module, a request response module, and a page loading module; the data definition module is used to define the page data and form the page data dictionary; the component definition module is used to define the basic component, the custom component, and the list component; the page loading module is used to: obtain or bind data corresponding to the basic component, the custom component, and the list component according to the user's design and configuration; render the basic component, the custom component, or the list component and load the page to form a web page.

8. A computer non-transitory readable medium, It is characterized in that When executed by a processor of a computer, the computer executable instructions cause the computer to perform the steps of claim 1.

Images