CN115437633A - Page layout method supporting user-defined assembly - Google Patents
Page layout method supporting user-defined assembly Download PDFInfo
- Publication number
- CN115437633A CN115437633A CN202211084152.5A CN202211084152A CN115437633A CN 115437633 A CN115437633 A CN 115437633A CN 202211084152 A CN202211084152 A CN 202211084152A CN 115437633 A CN115437633 A CN 115437633A
- Authority
- CN
- China
- Prior art keywords
- component
- page
- user
- components
- vue
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Computer Security & Cryptography (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention relates to the technical field of page display, and provides a page layout method supporting a user-defined component, which comprises the following steps: writing a vue component, and packaging and placing the written vue component into a specified folder by adopting a lib mode of vue-cli; customizing a registration data format, registering the written vue component into a database according to the registration data format, and storing corresponding registration data into a database table; reading the registration data and displaying the registration data on a certain page; self-defining a stored data format, and storing the component data selected by the user into another database table according to the stored data format; and reading and traversing the stored component data on any page, loading the components with the display permission, and generating a complete user-defined page component. According to the page layout method supporting the user-defined component, the decoupling of the page is realized by standardizing the registered data format and the stored data format, and the efficiency and the flexibility of page layout and display are improved.
Description
Technical Field
The invention relates to the technical field of page display, in particular to a page layout method supporting user-defined components.
Background
In the front-end development process, for example, in a proprietary cloud development scenario, when multiple teams cooperate with respect to a summary page, different teams need to display different information on the summary page. Aiming at a scene that multiple teams need to respectively display own data information on one page, the existing scheme is to jointly develop and maintain in a code base; for the requirements of different users on customized display of a certain page, most of the existing technical solutions adopt a method of displaying and hiding page elements to display different modules for different users. In practical application, the existing page layout has the following defects: 1. if the codes of the whole overview page are maintained in one project, when the requirement or data of one service team changes, the whole overview page needs to be reissued, the version verification workload is increased, and the development cost is high; 2. a team develops an overview page in a code base, so that conflict is easily caused, the code is difficult to manage and maintain, and the version management difficulty is increased; 3. for some special pages, such as overview and large screen, different information focused by different users is different, the user cannot freely combine information required to be displayed on the page, cannot adjust the position of different information displayed on the page, and the flexibility is poor.
Therefore, how to provide an efficient, easy-to-manage and flexible page layout display method becomes a problem to be solved urgently.
Disclosure of Invention
In view of this, the present invention provides a page layout method supporting user-defined components, in which sub-components of a page can be dragged and scaled, and the page after layout can be used as a vue component, and becomes a part of the page or the entire page content after any page of a vue item is imported and registered like other components.
The invention provides a page layout method supporting a user-defined component, which comprises the following steps:
step S1: writing a vue component, and packaging and placing the written vue component into a specified folder by adopting a lib mode of vue-cli;
step S2: customizing a registration data format, registering the written vue component into a database according to the registration data format, and storing corresponding registration data into a database table;
and step S3: reading the registration data in the step S2, and displaying the registration data on a certain page;
and step S4: self-defining a data storage format, and storing the component data selected by the user in the page in the step S3 into another database table according to the data storage format;
step S5: and reading and traversing the component data stored in the step S4 on any page, loading the components with the display authority, and generating a complete user-defined page component.
Further, the invention supports a page layout method for self-defining components, and the registered data format in the step S2 is composed of component id, component name, component label, component authority information, component intelligent form configuration information and component loading path.
Further, in step S3 of the page layout method for the user-defined component, the present invention displays the registration data on a certain page, and includes: and displaying the registration data on a certain page in the form of a table or a multi-selection button group.
Further, the invention supports a page layout method for the custom component, and the saved data format in the step S4 is composed of page id, page name, page type and layout information.
Furthermore, the invention supports a page layout method for self-defining components, and the layout information in the step S4 is composed of the width, the height, the x-axis coordinate, the y-axis coordinate, the component id, the component authority information, the component name, the component label, the component dragging information, the intelligent form configuration information, the component loading path, the component creating time and the component updating time of the component when the page is displayed.
Further, in step S5 of the page layout method supporting the user-defined component, the loading of the component with the display right includes: and asynchronously loading the components with the display authority according to the corresponding component loading paths, and transmitting the components to vue-grid-layout for display.
Further, the invention supports the page layout method for the user-defined component, and the user-defined page component in the step S5 can be displayed as an independent page, and can also be displayed as a part of other pages through registration and storage.
Further, the invention supports a page layout method for the custom component, further comprising: the various sub-components on the user-defined page components can be dragged and zoomed.
Furthermore, the invention supports a page layout method for the user-defined assembly, and the method realizes the dragging and zooming of each sub-assembly on the user-defined page assembly by modifying the width, the height, the x-axis coordinate and the y-axis coordinate of the assembly when the page is displayed, updating the information of the assembly according to the stored data format, and reloading the assembly.
The invention also provides a terminal device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the steps of the method when executing the program.
The page layout method supporting the user-defined component has the following beneficial effects:
1. the decoupling of the page is realized by standardizing the registered data format and the stored data format of the components, a plurality of development teams can develop and maintain in own projects respectively only according to the specifications, then the registered information is read from the page and each component is loaded to combine into a complete page, and the full compiling caused by the requirement or data updating is avoided.
2. The components are not influenced mutually, and the user can select and display the page information required by the user according to the requirement.
3. The dragging and zooming of the components are realized through the vue asynchronous component technology and the vue-grid-layout page element dragging and zooming layout capability, and the user can autonomously decide how the page information is displayed.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings needed to be used in the embodiments will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without creative efforts.
FIG. 1 is a flowchart of a method for supporting page layout for custom components according to an exemplary first embodiment of the present invention.
Detailed Description
Embodiments of the present invention will be described in detail below with reference to the accompanying drawings.
It should be noted that, in the case of no conflict, the features in the following embodiments and examples may be combined with each other; moreover, all other embodiments that can be derived by one of ordinary skill in the art from the embodiments disclosed herein without making any creative effort fall within the scope of the present disclosure.
It is noted that various aspects of the embodiments are described below within the scope of the appended claims. It should be apparent that the aspects described herein may be embodied in a wide variety of forms and that any specific structure and/or function described herein is merely illustrative. Based on the disclosure, one skilled in the art should appreciate that one aspect described herein may be implemented independently of any other aspects and that two or more of these aspects may be combined in various ways. For example, an apparatus may be implemented and/or a method practiced using any number of the aspects set forth herein. In addition, such an apparatus may be implemented and/or such a method may be practiced using other structure and/or functionality in addition to or other than one or more of the aspects set forth herein.
The terms referred to in the following examples are to be construed as follows:
the vue component: the extended HTML elements that can be used directly in Vue applications like HTML tags are registered by the component () method of the Vue instance. The method is used for packaging reusable code containing html, css and js together, then registering as a component, and referring to any page of the vue application like html elements to form the whole page.
Lib mode of vue-cli: the vue-cli scaffold provides a mode for packing vue components, and the mode is used for packing and compressing the vue components.
vue-grid-layout: the grid layout system is suitable for vue projects, can drag page elements, adjusts the size of the page elements to perform layout, and is used for performing layout on the page elements.
Fig. 1 is a flowchart of a page layout method for supporting a user-defined component according to an exemplary first embodiment of the present invention, as shown in fig. 1, the method of this embodiment includes:
step S1: writing a vue assembly, and packaging and placing the written vue assembly to a specified folder by adopting a lib mode of vue-cli;
step S2: customizing a registration data format, registering the written vue component into a database according to the registration data format, and storing corresponding registration data into a database table;
and step S3: reading the registration data in the step S2, and displaying the registration data on a certain page;
and step S4: self-defining a data storage format, and storing the component data selected by the user in the page in the step S3 into another database table according to the data storage format;
step S5: and reading and traversing the component data stored in the step S4 on any page, loading the components with the display authority, and generating a complete user-defined page component.
In step S3 of the page layout method for a user-defined component supported by this embodiment, displaying the registration data on a certain page includes: and displaying the registration data on a certain page in the form of a table or a multi-selection button group.
According to the method, the page decoupling is realized by combining the asynchronous component technology of vue through the register data format and the storage data format of the standardized component. Under the scene of the common development of a plurality of development teams, each team can develop and maintain the components in own project only by following the agreed component data format specification, and then read the registration information on the page and load each component to form a complete overview page. And simultaneously, dragging and zooming of the assembly are realized by combining the dragging and zooming layout functions of vue-grid-layout. The user can carry out position adjustment and size adjustment to the page subassembly according to the demand of oneself, makes the user can oneself decide how page information shows.
A second exemplary embodiment of the present invention provides a page layout method supporting a user-defined component, where this embodiment is a preferred embodiment of the method shown in fig. 1, and a registered data format in step S2 of the method in this embodiment is composed of a component id, a component name, a component tag, component permission information, component smart form configuration information, and a component loading path.
In practical application, the format of the registration data of the method of the embodiment is as follows:
the id is a component identifier, has global uniqueness and is automatically generated by a back end when a user calls an interface to perform data registration; name is the name of the component, and is filled in by the user as the title of the sub-component displayed on the page; tags are component tags and are used for distinguishing which sub-application a sub-component belongs to (when a system is composed of a plurality of sub-applications), a user plans an enumeration value in advance according to the actual condition of the system, fills the tags to which the component of the user belongs when registering the component, and filters a component list through the tags; auth is a component authority which can be used for storing the authority displayed by the component, such as the id of a user, and the component is displayed only when the id of the user exists in the auth of the component and the user logs in, so that the aim of authority control is fulfilled, and the user plans and fills in according to the actual condition of the system; the uiOption is configured for an intelligent form used for editing the components, can automatically display the form when the components are edited, and is filled by a user according to the actual condition of the form; the component is a component loading path, the component is obtained through the loading path when being loaded, and the component is filled in by a user when being registered.
An exemplary third embodiment of the present invention provides a page layout method supporting a user-defined component, where this embodiment is a preferred embodiment of the method shown in fig. 1, a data format saved in step S4 of the method in this embodiment is composed of a page id, a page name, a page type, and layout information, where the layout information is composed of a width, a height, an x-axis coordinate, a y-axis coordinate, a component id, component authority information, a component name, a component tag, component dragging information, smart form configuration information, a component loading path, component creation time, and component update time of a component when the page is displayed.
In practical application, the stored data format of the method of the embodiment is as follows:
the id is a unique page identifier and is automatically generated by the back end when the user calls an interface to store data; the name is a page name and is filled in by a user in a self-defined way; type is used to distinguish page types, such as dashboard, which is an overview page, defined by the user himself, depending on the situation.
layout and load path related information of the selected component, wherein one object in layout represents one component, and a plurality of components comprise a plurality of objects. W, h, x and y of an object in the Layout respectively represent the width, height, x-axis coordinate and y-axis coordinate of the component when the page is displayed, the values are mainly used for transmitting the values to vue-grid-Layout to generate the page Layout, the values can be filled by a user, and the values can be automatically distributed if vue-grid-Layout is not filled; id is a unique identifier of the component; auth is a component authority which can be used for storing the authority displayed by the component, such as the id of a user, and the component is displayed only when the id of the user exists in the auth of the component and the user logs in, so that the aim of authority control is fulfilled, and the user plans and fills in according to the actual condition of the system; name is the name of the subassembly, tags is the label of the subassembly, and is mainly used for distinguishing the item to which the subassembly belongs; the moved indicates whether the component can be dragged or not, the user fills the component, true is draggable, and false is not draggable; a component loads a path for a component.
An exemplary fourth embodiment of the present invention provides a page layout method for supporting a user-defined component, where this embodiment is a preferred embodiment of the method shown in fig. 1, and in step S5 of the method in this embodiment, loading a component with a presentation right includes: and asynchronously loading the components with the display authority according to the corresponding component loading paths, and transmitting the components to vue-grid-layout for display.
The user-defined page component generated by the method can be displayed as an independent page and also can be stored by registration to be displayed as a part of other pages.
In the scenario of writing specific pages, the method of the embodiment avoids the full writing which is newly required due to the change of service requirements or data in the prior art, and can effectively improve the writing efficiency; the page components are split into different atomic components, then the subcomponents are registered, read and combined to generate a complete large page, the subcomponents are not influenced mutually, and the problem that multiple teams need to respectively display own team components on one page such as an overview page is solved. Different users can select to display the page information required by the users according to the requirements.
An exemplary fifth embodiment of the present invention provides a page layout method for supporting a user-defined component, where this embodiment is a preferred embodiment of the method shown in fig. 1, and the method in this embodiment further includes: the various sub-components on the user-defined page components can be dragged and zoomed. Specifically, in the method of this embodiment, the width, the height, the x-axis coordinate, and the y-axis coordinate of the component during the page display are modified, the information of the component is updated according to the stored data format, and the component is reloaded, so that each sub-component on the user-defined page component is dragged and zoomed.
Finally, the invention also provides a terminal device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the steps of the method when executing the program.
The terminal equipment has the corresponding technical effect of supporting the page layout method for the user-defined assembly.
The above description is only for the specific embodiment of the present invention, but the scope of the present invention is not limited thereto, and any changes or substitutions that can be easily conceived by those skilled in the art within the technical scope of the present invention are included in the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.
Claims (10)
1. A page layout method for supporting user-defined components is characterized in that the method comprises the following steps:
step S1: writing a vue component, and packaging and placing the written vue component into a specified folder by adopting a lib mode of vue-cli;
step S2: customizing a registration data format, registering the written vue component into a database according to the registration data format, and storing corresponding registration data into a database table;
and step S3: reading the registration data in the step S2, and displaying the registration data on a certain page;
and step S4: self-defining a data storage format, and storing the component data selected by the user in the page in the step S3 into another database table according to the data storage format;
step S5: and reading and traversing the component data stored in the step S4 on any page, loading the components with the display permission, and generating a complete user-defined page component.
2. The method for supporting page layout of custom components according to claim 1, wherein the registered data format in step S2 is composed of component id, component name, component tag, component permission information, component smart form configuration information and component loading path.
3. The method for supporting page layout for custom components according to claim 1, wherein the step S3 of displaying the registration data on a certain page comprises: and displaying the registration data on a certain page in the form of a table or a multi-selection button group.
4. The method for supporting page layout for self-defined components as claimed in claim 1, wherein the saved data format in step S4 is composed of page id, page name, page type and layout information.
5. The page layout method supporting components defined in claim 4, wherein the layout information in step S4 is composed of width, height, x-axis coordinate, y-axis coordinate, component id, component authority information, component name, component label, component dragging information, smart form configuration information, component loading path, component creation time and component update time of the component when the page is displayed.
6. The method for supporting page layout of custom component as claimed in claim 1, wherein in step S5, loading the component with the presentation right comprises: and asynchronously loading the components with the display authority according to the corresponding loading paths, and transmitting the components to vue-grid-layout for display.
7. The method of claim 1, wherein the user-defined page component in step S5 can be displayed as a separate page or can be registered and saved as a part of other pages.
8. The method of claim 1, wherein the method further comprises: the various sub-components on the user-defined page components can be dragged and zoomed.
9. The method of claim 8, wherein dragging and zooming of each sub-component on a user-defined page component is achieved by modifying the width, height, x-axis coordinates, and y-axis coordinates of the component when the page is displayed, updating the information of the component according to the stored data format, and reloading the component.
10. A terminal device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the steps of the method of any one of claims 1 to 9 when executing the program.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211084152.5A CN115437633A (en) | 2022-09-06 | 2022-09-06 | Page layout method supporting user-defined assembly |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211084152.5A CN115437633A (en) | 2022-09-06 | 2022-09-06 | Page layout method supporting user-defined assembly |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115437633A true CN115437633A (en) | 2022-12-06 |
Family
ID=84247570
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211084152.5A Pending CN115437633A (en) | 2022-09-06 | 2022-09-06 | Page layout method supporting user-defined assembly |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115437633A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115905757A (en) * | 2023-01-06 | 2023-04-04 | 深圳华强电子网集团股份有限公司 | Browser digital management system and method based on distributed deployment |
-
2022
- 2022-09-06 CN CN202211084152.5A patent/CN115437633A/en active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115905757A (en) * | 2023-01-06 | 2023-04-04 | 深圳华强电子网集团股份有限公司 | Browser digital management system and method based on distributed deployment |
| CN115905757B (en) * | 2023-01-06 | 2023-05-02 | 深圳华强电子网集团股份有限公司 | Distributed deployment-based browser digital management system and method |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111552473B (en) | Application processing method, device and equipment | |
| CN109446570B (en) | Business process display method, device, computer equipment and storage medium | |
| CN113535165A (en) | Interface generation method and device, electronic equipment and computer readable storage medium | |
| CN109213668B (en) | Operation recording method and device and terminal | |
| CN109144614A (en) | Quick display page application loading method, device, computer equipment and storage medium | |
| CN115437633A (en) | Page layout method supporting user-defined assembly | |
| CN115543282A (en) | Page code generation method and device, storage medium and computer equipment | |
| CN109634610B (en) | Interface marking data generation method and device | |
| CN103984554A (en) | Software design document generating method and device | |
| CN114444478A (en) | Voucher visualization method and device, electronic equipment and storage medium | |
| EP3314458A1 (en) | Presenting content using decoupled presentation resources | |
| CN117762519A (en) | Component management method, device, computer equipment and storage medium | |
| CN102467527B (en) | Working desktop showing system and method and application server thereof | |
| CN115586896B (en) | Page project development method, equipment and storage medium based on template engine | |
| CN112988810B (en) | Information searching method, device and equipment | |
| CN115357696A (en) | Dynamic chart billboard display method based on components and related equipment | |
| CN114780081A (en) | Animation display method, electronic device and storage medium | |
| US11797719B2 (en) | Dynamic preview generation in a product lifecycle management environment | |
| CN112241297B (en) | Data display method, system, computer equipment and readable storage medium | |
| CN113485686A (en) | Method and device for generating information system program, electronic device and storage medium | |
| CN111737784A (en) | Board card type selection configuration method and device based on digital three-dimensional ZXMP S385 subframe | |
| Pick et al. | A framework for developing flexible virtual-reality-centered annotation systems | |
| CN111104031A (en) | User-oriented data updating method and device, electronic equipment and storage medium | |
| CN112579082A (en) | Interactive state data establishing method and device, storage medium and electronic equipment | |
| CN111026391A (en) | Icon code generation method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |