CN114489623B - Method, device and equipment for generating front-end page based on drag mode and storage medium - Google Patents

Method, device and equipment for generating front-end page based on drag mode and storage medium Download PDF

Info

Publication number
CN114489623B
CN114489623B CN202210152046.XA CN202210152046A CN114489623B CN 114489623 B CN114489623 B CN 114489623B CN 202210152046 A CN202210152046 A CN 202210152046A CN 114489623 B CN114489623 B CN 114489623B
Authority
CN
China
Prior art keywords
page
functional component
design
design area
information
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.)
Active
Application number
CN202210152046.XA
Other languages
Chinese (zh)
Other versions
CN114489623A (en
Inventor
娄元杰
马亮
赵岩
安静
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Konggang Yuntian Smart City Technology Co.,Ltd.
Original Assignee
Beijing Lida Zhengtong Technology Group Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Lida Zhengtong Technology Group Co ltd filed Critical Beijing Lida Zhengtong Technology Group Co ltd
Priority to CN202210152046.XA priority Critical patent/CN114489623B/en
Publication of CN114489623A publication Critical patent/CN114489623A/en
Application granted granted Critical
Publication of CN114489623B publication Critical patent/CN114489623B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

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/34—Graphical or visual programming
    • 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/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The present disclosure provides a method, an apparatus, a device and a storage medium for generating a front-end page based on a drag-and-drop method, wherein the method comprises: before generating a front-end page, acquiring attribute information of the current front-end page to be generated, wherein the attribute information comprises a page type; and loading and pushing a design interface according to the attribute information of the front-end page, wherein the pushed design interface comprises a design area and functional components required for generating the front-end page of the page type. Therefore, when the front-end page is generated, the screening and dragging operations of the required functional components can be efficiently completed in the design interface matched with the page type of the front-end page, and the front-end page is generated, so that the generation efficiency of the front-end page is improved.

Description

Method, device and equipment for generating front-end page based on drag mode and storage medium
Technical Field
The present disclosure relates to the field of software development technologies, and in particular, to a method, an apparatus, a device, and a storage medium for generating a front-end page based on a drag-and-drop method.
Background
When a service platform system is developed, in order to meet the customized requirements of different users for a front-end page, different codes need to be generated according to different user requirements during development, and in addition to artificial factors such as a coding habit, a coding mode, a data processing mode, a flow processing mode and the like of developers, the structures of page data can have differences, so that the code structure of the whole system becomes very complex and is difficult to understand, and the system is inconvenient for the developers to maintain.
At present, the method for generating the front-end code based on the drag mode can well solve the technical problems, but the efficiency of generating the front-end page is low.
Disclosure of Invention
In view of this, the present disclosure provides a method, an apparatus, a device, and a storage medium for generating a front-end page based on a drag mode, which may improve the generation efficiency of the front-end page.
According to a first aspect of the present disclosure, a method for generating a front-end page based on a drag-and-drop method is provided, including:
acquiring attribute information of a front-end page to be generated currently; the attribute information comprises a page type;
loading and pushing a design interface according to the attribute information; the design interface comprises a design area and a functional component required for generating a front-end page of the page type;
monitoring a functional component which is currently dragged to the design area, acquiring dragging information of the currently triggered functional component, and rendering the currently triggered functional component in the design area based on the dragging information;
and generating a corresponding front-end page according to each functional component which is currently rendered in the design area.
In one possible implementation, the page type includes at least one of a home page, a list page, and a form page.
In a possible implementation manner, the attribute information is configured based on an attribute configuration interface pushed and displayed by a triggered design page instruction.
In a possible implementation manner, the attribute information further includes a display terminal of the front-end page;
when loading and pushing the design interface according to the attribute information, the method further comprises the following steps:
and dividing the design area in the design interface according to a preset design area division rule matched with the display terminal.
In one possible implementation, the drag information includes a component release location;
rendering the currently triggered functional component in the design area based on the drag information, further comprising:
judging whether the component release position is loaded with the functional component in a sub-area where the design area is located:
under the condition that the functional component is not loaded, taking the highest point of the sub-area as a rendering starting point;
under the condition that the functional component is loaded, determining a rendering starting point according to the highest point of the sub-area and the attribute information of the loaded functional component;
and rendering the currently triggered functional component in the design area based on the rendering starting point and the acquired attribute information of the currently triggered functional component.
In one possible implementation manner, when rendering the currently triggered functional component in the design area based on the drag information, the method further includes:
when an attribute modification instruction is triggered, pushing and displaying an attribute modification interface, and acquiring attribute modification information of a functional component which is currently rendered based on the attribute modification interface;
and adjusting the rendering effect of the currently triggered functional component according to the attribute modification information.
In a possible implementation manner, the attribute information further includes a page layout, and the page layout includes at least one of a responsive page and a non-responsive page;
the page layout is associated with the display terminal.
According to a second aspect of the present disclosure, an apparatus for generating a front-end page based on a drag-and-drop method is provided, including:
the attribute information acquisition module is used for acquiring the attribute information of the front-end page to be generated currently; the attribute information comprises a page type;
the design interface loading module is used for loading and pushing a design interface according to the attribute information; the design interface comprises a design area and a functional component required for generating a front-end page of the page type;
the functional component rendering module is used for monitoring a functional component which is currently dragged to the design area, acquiring dragging information of the currently triggered functional component, and rendering the currently triggered functional component in the design area based on the dragging information;
and the front-end page generating module is used for generating a corresponding front-end page according to each functional component which is currently rendered in the design area.
According to a third aspect of the present disclosure, an apparatus for generating a front-end page based on a drag-and-drop method is provided, including: a processor; a memory for storing processor-executable instructions; wherein the processor is configured to perform the method of the first aspect of the present disclosure.
According to a fourth aspect of the present disclosure, there is provided a non-transitory computer readable storage medium having stored thereon computer program instructions, wherein the computer program instructions, when executed by a processor, implement the method of the first aspect of the present disclosure.
Before generating a front-end page, the method comprises the steps of firstly acquiring attribute information of the current front-end page to be generated, wherein the attribute information comprises a page type; and loading and pushing a design interface according to the attribute information of the front-end page, wherein the pushed design interface comprises a design area and a functional component required for generating the front-end page of the page type. Therefore, when the front-end page is generated, the screening and dragging operations of the required functional components can be efficiently completed in the design interface matched with the page type of the front-end page, the front-end page is generated, and the generation efficiency of the front-end page is further improved.
Other features and aspects of the present disclosure will become apparent from the following detailed description of exemplary embodiments, which proceeds with reference to the accompanying drawings.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate exemplary embodiments, features, and aspects of the disclosure and, together with the description, serve to explain the principles of the disclosure.
FIG. 1 shows a schematic flow chart diagram of a method of generating a front-end page based on drag-and-drop according to an embodiment of the present disclosure;
FIG. 2 illustrates a schematic diagram of a page identification management interface according to an embodiment of the present disclosure;
FIG. 3 illustrates a schematic diagram of a property configuration interface in accordance with an embodiment of the present disclosure;
FIG. 4 illustrates a design area partitioning effect diagram according to an embodiment of the present disclosure;
FIG. 5 illustrates a rendering effect diagram of a quick menu component according to an embodiment of the disclosure;
FIG. 6 illustrates a rendering effect diagram of another quick menu component according to an embodiment of the present disclosure;
FIG. 7 illustrates a rendering effect diagram of a calendar component according to an embodiment of the present disclosure;
FIG. 8 illustrates a rendering effect diagram of another calendar component according to an embodiment of the present disclosure;
FIG. 9 illustrates a rendering effect diagram of a histogram component, according to an embodiment of the present disclosure;
FIG. 10 shows a rendering effect diagram of a Tab component according to an embodiment of the disclosure;
FIG. 11 illustrates a rendering effect diagram of a query component in accordance with an embodiment of the present disclosure;
FIG. 12 illustrates a rendering effect diagram of yet another query component in accordance with an embodiment of the present disclosure;
FIG. 13 illustrates a rendering effect diagram of yet another query component in accordance with an embodiment of the present disclosure;
FIG. 14 is a schematic diagram illustrating a front-end page display effect of a computer according to an embodiment of the disclosure;
FIG. 15 illustrates a front page display effect diagram of a flat end, according to an embodiment of the present disclosure;
fig. 16 is a schematic diagram illustrating a front-end page display effect of a mobile phone according to an embodiment of the disclosure;
FIG. 17 is a schematic block diagram illustrating an apparatus for drag-based generation of front end pages according to an embodiment of the present disclosure;
FIG. 18 is a schematic block diagram illustrating an apparatus for drag-based generation of front end pages according to an embodiment of the present disclosure.
Detailed Description
Various exemplary embodiments, features and aspects of the present disclosure will be described in detail below with reference to the accompanying drawings. In the drawings, like reference numbers can indicate functionally identical or similar elements. While the various aspects of the embodiments are presented in drawings, the drawings are not necessarily drawn to scale unless specifically indicated.
The word "exemplary" is used exclusively herein to mean "serving as an example, embodiment, or illustration. Any embodiment described herein as "exemplary" is not necessarily to be construed as preferred or advantageous over other embodiments.
Furthermore, in the following detailed description, numerous specific details are set forth in order to provide a better understanding of the present disclosure. It will be understood by those skilled in the art that the present disclosure may be practiced without some of these specific details. In some instances, methods, means, elements and circuits that are well known to those skilled in the art have not been described in detail so as not to obscure the present disclosure.
< method examples >
FIG. 1 shows a schematic flow chart of a method for generating a front-end page based on drag-and-drop according to an embodiment of the present disclosure. As shown in fig. 1, the method includes steps S1100-S1400.
S1100, acquiring attribute information of the front-end page to be generated currently.
The front-end page is a browsing page running on the display terminal and providing content presentation and interaction for the user. The attribute information of the front page is information reflecting the display characteristics of the front page.
In one possible implementation, the attribute information may include at least one of a page type, a display terminal, and a page layout.
The page type may include at least one of a home page, a list page, and a form page. The home page is a collection display page of information of different columns in the system, and different columns can be quickly positioned through the home page. The list page is a page for inquiring and displaying the set data of a certain column in the system. The form page is a page for viewing and displaying a piece of detailed information of a column in the system.
The display terminal is a terminal for displaying a front page. The display terminal may include at least one of a tablet, a computer, and a mobile phone.
The page layout may include at least one of responsive pages and non-responsive pages. Wherein the page layout is associated with the display terminal. For example, in the case where the page layout is a responsive page, the display terminal can only be a computer; in the case that the page layout is a non-responsive setup page, the display terminal may be at least one of a tablet, a computer, and a mobile phone. Therefore, when the page attribute is configured, when the page layout is selected to be the response page, the display terminal is automatically selected to be the computer terminal. When the selected page is a non-responsive page, one of the tablet, the mobile phone and the computer can be selected as a display terminal of the currently generated front-end page at this time.
In one possible implementation, the attribute information is configured based on an attribute configuration interface pushed and displayed by a triggered design page instruction.
In one possible implementation, the design page command may be triggered by clicking on a design page identifier. The design page identifier may be disposed in a page identifier management interface.
And when receiving an operation opened by a user, pushing and displaying a page identifier management interface. The page identification management interface is used for creating page identification information of a front-end page and displaying the created page identification information.
The page identification information of the front-end page may include at least one of a sequence number, a page name, a category, a creator, a creation time, and a corresponding operation identification. The operation identifier for the newly-built front-end page may include a design page identifier and a deletion identifier, and the operation identifier for the published front-end page may include unpublishing. In the case where the operation identifier is triggered, an operation corresponding to the operation identifier may be performed. For example, in the case that the design page identification is triggered, the property configuration interface will be pushed and displayed. And under the condition that the deletion identifier is triggered, deleting the page identifier information of the front page. And under the condition that the publication canceling identifier is triggered, canceling the publication of the front-end page.
In the page identifier management interface, page identifier information of all created front end pages may be displayed, or page identifier information of a set number of newly created front end pages may be displayed, which is not specifically limited herein.
In one possible implementation, the page identifier management interface may be as shown in fig. 2, and include a search control (e.g., a select category control, an input page name keyword control, and a search control) for searching for page identifier information of a front-end page, an add-on control for creating page identifier information of the front-end page, and a form control for displaying the created page identifier information of the front-end page. And under the condition that the user clicks the newly added function control, pushing and displaying a page identification information creating interface, so as to obtain the page identification information of the front-end page to be generated currently through the page identification information creating interface and display the page identification information in the form control.
In the implementation manner that the attribute information includes the page layout, the display terminal, and the page type, the attribute configuration interface pushed and displayed may be as shown in fig. 3 when the design interface identifier of the front-end page to be generated currently is touched. The user can configure the attribute information of the front-end page to be generated currently in the attribute configuration interface shown in fig. 3 according to actual requirements. And after the function control is determined to be touched, acquiring the attribute information configured by the current attribute configuration interface and taking the attribute information as the attribute information of the front-end page to be generated currently.
And S1200, loading and pushing the design interface according to the attribute information.
The design interface is an operation interface for generating a front-end page. The design interface comprises a design area and functional components required for generating the front-end page, so that a user can generate the required front-end page through the operation of dragging the required functional components to the design area.
In embodiments where the attribute information includes a page type, the functional components included in the design interface are the functional components required to generate the front end page of the selected page type. Therefore, the user can quickly position the required functional component and generate the required front-end page through the operation of dragging the functional component to the design area, and the generation efficiency of the front-end page is further improved.
In a possible implementation manner, the functional component required when the page type is the front page of the home page is generated may include at least one of a shortcut menu component, a calendar component, a statistical graph component, a number statistical component, and a list component. The functional components required in generating the page type as a front page of the list page may include: at least one of a Tab component, the list component, and a query component. The functional components required when the page type is the front page of the form page may include at least one of an input box component, a multi-box component, a radio box component, a time box component, an attachment uploading component, a picture uploading component, and a positioning component.
In order to make the generated front-end page applicable to different display terminals, in an embodiment where the attribute information includes a display terminal, when loading and pushing the design interface according to the attribute information, the method further includes: and dividing the design area in the design interface according to a preset design area division rule matched with the display terminal. The reason is that different display terminals have different sizes of display screens and different resolution sizes, so that when the selected display terminals are different, the division of the corresponding design area is also adaptively adjusted, so that when the design area adopts a drag-type operation to configure the page components, the finally generated front-end page can be normally displayed in the selected display terminal.
In one possible implementation manner, when the design area is divided according to the design area division rule, the division may be performed based on the resolution of the display terminal. The resolution of the display terminal may be a preset default value. For example, the default display resolution of the computer may be 1920 x 1080px. The default display resolution of the flat panel may be 768 × 1024px. The default display resolution of the handset may be 750 × 1344px. The display resolution of the display terminal can also be configured according to a specific application scenario. For example, when the user selects a computer as the display terminal, the resolution configuration interface is pushed and displayed, so that the display resolution of the computer is obtained through the display resolution configuration interface.
In one possible implementation, the design partitioning rule matched with the resolution of the display terminal may include: the width of the design area, the number and width of columns, slots, and margins in the design area. The columns are sub-regions for containing the functional components, the grooves are spaced regions between adjacent columns, and the edge distances are spaced regions between the outermost columns and boundaries of the left side and the right side of the design region. The length of the design area may be a preset default value, or may be adapted according to a specific application scenario, and is not limited in this respect.
In one possible implementation, when the display terminal is a computer and the display resolution is 1920 × 1080px, the design region division rule matching the display terminal resolution includes: the design area, having a width of 1608PX, is divided into 12 columns, 11 slots and 2 margins. The width of the column may be 112PX, the width of the slot may be 24PX, and the width of the margin may be 24PX. The design area divided according to the design rule may be as shown in fig. 4.
In one possible implementation, when the display terminal is a flat panel and the display resolution is 768 × 1024px (vertical screen mode corresponding to the flat panel), the design region division rule matching the display terminal resolution includes: the design area, width 648PX, was divided into 6 columns, 5 slots and 2 margins. Wherein the width of the column may be 80PX, the width of the groove may be 24PX, and the width of the margin may be 24PX.
In one possible implementation, when the display terminal is a flat panel and the display resolution is 1024 × 768px (corresponding to the flat panel landscape mode), the design division rule matching the display terminal resolution includes: a design area of width 888PX is divided into 12 columns, 11 slots and 2 margins. Wherein the width of the column may be 48PX, the width of the slot may be 24PX, and the width of the margin may be 24PX.
In one possible implementation manner, when the display terminal is a mobile phone and the display resolution is 750 × 1344px (corresponding to the vertical screen mode of the mobile phone), the design region division rule matching the resolution of the display terminal includes: a design area with a width of 720PX is divided into 3 columns, 3 slots and 2 margins. Wherein the width of the column may be 224PX, the width of the slot may be 24PX, and the width of the margin may be 15PX.
In one possible implementation, when the display terminal is a mobile phone and the display resolution is 1344 × 750px (corresponding to a horizontal screen mode of the mobile phone), the design region division rule matching the display terminal resolution includes: a design area with a width of 720PX is divided into 3 columns, 3 slots and 2 margins. Wherein the width of the column may be 416PX, the width of the slot may be 24PX, and the width of the margin may be 24PX.
The display terminal and the design division rule matched with the display terminal can be stored in a form of a mapping relation table, so that the design division rule matched with the selected display terminal can be found in the mapping relation table under the condition that the display terminal is obtained, and the design area is divided based on the obtained design division rule.
S1300, monitoring the functional component which is currently dragged to the design area, acquiring dragging information of the currently triggered functional component, and rendering the currently triggered functional component in the design area based on the dragging information.
After the design interface is displayed, the design software begins to monitor the operating information of the design interface. The design software can monitor the operation information of the design interface according to the preset frequency and can also monitor the operation information of the design interface in real time, and the design software is not particularly limited herein
When the operation that any functional component is dragged to the design area is monitored, the dragging information of the currently triggered functional component is obtained, and the currently triggered functional component is rendered in the design area based on the dragging information. Wherein the currently triggered functional component is the functional component currently dragged to the design area.
In one possible implementation, the drag information includes a release position of the currently triggered functional component in the design area. When it is monitored that the currently triggered functional component is released, a functional component release instruction is generated, and position information acquired when the functional component release instruction is received is used as a release position of the previously triggered functional component.
In this implementation manner, when rendering the currently triggered functional component in the design area based on the drag information, the method includes the following steps:
first, it is determined whether a functional component is loaded in a sub-area where the component release position is located in the design area, that is, whether a functional component is loaded in a column where the release position is located.
Second, in the case of no functional component being loaded, the highest point of the sub-region is taken as the rendering starting point. The highest point of the sub-area is the highest point of the column. The highest point of the column may be the highest point of the left side boundary, or may be a position point preset according to requirements, and is not specifically limited herein. And under the condition of loading the functional component, determining a rendering starting point according to the highest point of the sub-area and the attribute information of the loaded functional component. In a possible implementation manner, one functional component a is already loaded in the sub-region, at this time, the height information X1 of the functional component a and the highest point information X2 of the sub-region may be obtained, and the rendering starting point is determined according to X1 and X2. In another possible implementation manner, a separation distance X3 between the functional components may also be obtained, and a rendering starting point is determined according to X1, X2, and X3.
Thirdly, based on the rendering starting point and the acquired attribute information of the currently triggered functional component, rendering the currently triggered functional component in the design area, that is, rendering the currently triggered functional component in the design area according to the attribute information of the currently triggered functional component with the rendering starting point as the starting point.
Under different use scenes, the requirements on the rendering effect of the functional components are different. In order to meet the requirements on rendering effect in different application scenes, when the currently triggered functional component is rendered in the design area based on the dragging information, the method further comprises the following steps.
Firstly, when an attribute modification instruction is triggered, pushing and displaying an attribute modification interface, and acquiring attribute modification information of a functional component which is currently rendered based on the attribute modification interface.
The attribute modification instruction trigger may be implemented by clicking on the functional component currently being rendered.
The property modification interface includes different parameter information for different functional components.
In a possible implementation manner, for the shortcut menu component, the parameter information of the attribute modification interface may include: the menu display comprises at least one of title name, explicit and implicit modes, display mode, number of shortcut menu elements and name, icon and single link of each shortcut menu element. The display mode of the shortcut menu can comprise left-right scrolling and tiling. When the display mode is left-right scrolling, the parameter information also comprises the height and width of the shortcut menu. When the display mode selects the tiled display, the parameter information comprises the number of shortcut menu elements and the height of the shortcut menu.
When the name of the shortcut menu is hidden, the display mode is left-right scrolling, and the number of shortcut menu elements is 7, the rendering effect of the shortcut menu can be as shown in fig. 5. When the name of the shortcut menu is hidden, the display mode is tiled, and the number of shortcut menu elements is 6, the rendering effect of the shortcut menu can be as shown in fig. 6.
In one possible implementation, for the calendar component, the parameter information of the property modification interface may include: title name and at least one of a hidden mode, a showing mode, a size, a default date and a calendar identification color. The display mode of the calendar component can comprise at least one of an upper layout, a lower layout and a left layout and a right layout.
When the name of the calendar component is displayed as schedule, the display mode is top-bottom layout, the default current date parameter is table 1, and the color parameter for different schedule information on the calendar is table 2, the rendering effect of the calendar component can be as shown in fig. 7.
TABLE 1
Colour(s) Presentation mode Description of the identification Default date setting
Orange color Color block identification Default date 2022-1-30
TABLE 2
Colour(s) Presentation mode Description of the identification
Grey colour Dot identification Has expired
Green colour Dot recognition Has not expired
When the name of the calendar component is displayed as schedule, the display mode is left-right layout, the default current date parameter is table 1, and the color parameter for different schedule information on the calendar is table 2, the rendering effect of the calendar component can be as shown in fig. 8.
In one possible implementation, for the statistical graph component, the parameter information of the attribute modification interface may include: the title name and at least one of a hidden or revealed mode, a display mode, a color scheme and a data source. The display mode of the statistical chart component can comprise at least one of a line graph, a pie chart, a bar chart and a line graph. When the display name of the statistical chart component is data statistics and the display mode is a line graph, the rendering effect of the statistical chart component can be as shown in fig. 9.
In one possible implementation, for the numeric statistics component, the parameter information of the attribute modification interface may include: title name and at least one of a hidden-appearing mode, a showing mode, a color scheme and a data source. The display mode of the digital statistic component can comprise at least one of user-defined color block display, template color block display and icon-containing color block display. In the case of custom color block display, the parameter information further includes at least one of parameters such as width, height, number, color, name, and static data of the color block. In the case of template color block display, the parameter information further includes at least one of the number, name, static data and other parameters of the color block, wherein the width and height of the rendered color block and the color are preset values. In the case of icon color block display, the parameter information further includes at least one of the number, name, icon, and static data of the color block, wherein the width and height of the color block and the color are preset values. In the case of icon tile presentation, one rendering effect of the numerology component may be as shown in FIG. 9.
In one possible implementation, for the list component, the parameter information of the attribute modification interface may include: the title name and at least one of the visible and invisible modes, the showing mode, the mouse suspension effect (hover), the mouse click effect (onclick) and the data source. The display mode may include at least one of a text list, a picture list and a picture-text list. The mouse hover effect includes a list font color and a line background color when the mouse hovers. The mouse click effect includes a list font color and a line background color when the mouse clicks.
In one possible implementation manner, for the Tab component, the parameter information of the attribute modification interface may include: and at least one of the name, the number, the display mode and the reminding mode of the Tab element. The display mode can comprise transverse display and longitudinal display. The reminding mode can comprise a closing mode and an opening mode. And when the reminding mode is open, the name of the Tab element presents a reminding identifier containing numbers. When the display mode is the horizontal display, the Tab number is 2, and the reminding mode is selected to be opened, the rendering effect of a Tab component can be as shown in fig. 10.
In one possible implementation, for the query component, the parameter information of the attribute modification interface may include: at least one of a presentation manner and presentation content. Wherein the presentation manner may include at least one of a multi-condition query, a search query, and a specified field query. When the display mode is multi-condition query, the parameter information further comprises at least one of condition number, condition name, expansion and retraction switch, mouse suspension effect (hover) and mouse click effect (onclick). Wherein the condition number is the number of conditions to be exhibited. The condition name is the name of each condition and the option. The deployment stow switch defaults to deployment stow closed. The mouse hover effect and the mouse click effect are as described above and will not be described herein. When the presentation is a multi-condition query, one presentation effect of the query component can be as shown in FIG. 11. When the presentation mode is a search query, the parameter information further comprises at least one of the number, the ordering and the button style of different control elements. Wherein the number of different control elements: such as the number of text boxes, the number of pull-down menus, and the number of time selectors. Sorting: and through dragging, the configuration area only displays the sorted result. Button style: font button/icon button, font button may be configured with background color. When the presentation is a search query, one presentation effect of the query component can be as shown in FIG. 12. When the presentation mode is a specified field query, the parameter information further comprises at least one of the number, the name, the default value and the option content of the drop-down selection. When the presentation is a specified field query, one presentation effect of the query component can be as shown in FIG. 13.
In one possible implementation manner, for the input box component, the parameter information of the attribute modification interface may include: width and height, whether it is at least one of a mandatory item, format, length, and grid width.
In one possible implementation, for the multi-box component, the parameter information of the attribute modification interface may include: width and height, option quantity, maximum limit number, arrangement mode, whether the option is at least one of mandatory items and grid width.
In one possible implementation, for the radio box component, the parameter information of the attribute modification interface may include: the number of options, the name of the option, the default option, the arrangement mode, whether the option is a mandatory item or not and the grid width.
In one possible implementation, for the time selection box component, the parameter information of the attribute modification interface may include: format type, whether it is a mandatory item, and grid width.
In one possible implementation manner, for the accessory uploading component, the parameter information of the attribute modification interface may include: at least one of a file format, a number of files, a file size, and a grid width.
In one possible implementation manner, for the picture uploading component, the parameter information of the attribute modification interface may include: at least one of a number of documents, a picture size, and a grid width. The WEB and the mobile terminal can be distinguished for the image uploading component, and the camera can be directly called to obtain the image to be uploaded under the condition of the mobile terminal.
In one possible implementation, for the positioning component, the parameter information of the attribute modification interface may include: whether to automatically acquire a position fix.
And under the condition that the parameter information of the attribute modification interface is modified, acquiring the modified parameter information as the attribute modification information of the currently rendered functional component.
And secondly, adjusting the rendering effect of the currently triggered functional component according to the attribute modification information.
And adjusting the rendering effect of the currently triggered functional component through the attribute modification information acquired by the attribute modification interface, so that the rendering effect of the front-end page can meet the personalized requirements of various application scenes.
And S1400, generating a corresponding front-end page according to each functional component which is rendered into the design area at present.
When the front-end page is generated, the front-end page may be generated in real time based on the functional components that have been currently rendered into the design area, or may be generated when a front-end page generation instruction is triggered, which is not specifically limited herein.
In one possible implementation, the instruction to generate the front-end page instruction may be implemented by clicking a preview function control. For example, in a case where the preview function control is touched, a corresponding front-end page is generated according to each functional component that has been currently rendered in the design area.
Under the condition that the page layout in the attribute information is a response-type page, and under the condition that a front-end page of the computer end is generated, front-end pages suitable for the tablet end and the mobile phone end can be generated in a response-type mode.
When the front page of the panel end is adapted to the response generation, a design area matched with the panel end is obtained (the design area is divided according to the design area division rule matched with the panel). And carrying out width adaptation and arrangement position adaptation on the functional control of the front-end page corresponding to the computer.
When the width is adapted, if the width of the functional component is larger than the total column width of the flat end design area, the width of the functional component is adjusted to be the total column width of the flat end. If the width of the functional component is smaller than the total column width of the flat end design area, the width of the functional component is adjusted according to the column width reduction proportion.
The arrangement position adaptation is that if the functional components cannot be displayed in the same line, the line is automatically changed for display. When the front end page of the computer end is as shown in fig. 14, the front end page of the response type generation flat panel end can be as shown in fig. 15.
The method for responsively generating the front-end page of the adaptive mobile phone end is the same as the method for responsively generating the front-end page of the adaptive tablet end, and details are not repeated herein. When the front end page of the computer end is as shown in fig. 14, the front end page of the mobile phone end generated in a response manner may be as shown in fig. 16.
In one possible implementation, after the front end page is generated, the generated front end page may also be published to a page template plaza. Therefore, when a user logs in a page template square, the user can collect, download and repeatedly revise the required front-end page template, the sharing of the front-end page template is realized, and the development efficiency of the front-end page is further improved.
Before generating a front-end page, the method comprises the steps of firstly acquiring attribute information of the current front-end page to be generated, wherein the attribute information comprises a page type; and loading and pushing a design interface according to the attribute information of the front-end page, wherein the pushed design interface comprises a design area and functional components required for generating the front-end page of the page type. Therefore, when the front-end page is generated, the screening and dragging operations of the required functional components can be efficiently completed in the design interface matched with the page type of the front-end page, the front-end page is generated, and the generation efficiency of the front-end pages of different types is improved.
< apparatus embodiment >
Fig. 17 is a schematic block diagram illustrating an apparatus for generating a front page based on drag according to an embodiment of the present disclosure. As shown in fig. 17, the apparatus 100 for generating a front page based on a drag-and-drop method includes:
an attribute information obtaining module 110, configured to obtain attribute information of a front-end page to be generated currently; the attribute information includes a page type.
A design interface loading module 120, configured to load and push a design interface according to the attribute information; the design interface comprises a design area and functional components required for generating a front page of the page type.
The functional component rendering module 130 is configured to monitor a functional component currently dragged to the design area, obtain drag information of the currently triggered functional component, and render the currently triggered functional component in the design area based on the drag information.
The front-end page generating module 140 is configured to generate a corresponding front-end page according to each functional component that has been currently rendered into the design area.
In one possible implementation, the page type includes at least one of a home page, a list page, and a form page.
In one possible implementation, the attribute information is configured based on an attribute configuration interface pushed and displayed by a triggered design page instruction.
In one possible implementation, the attribute information further includes a display terminal of the front-end page;
the design interface loading module 120, when loading and pushing the design interface according to the attribute information, is further configured to: and dividing the design area in the design interface according to a preset design area division rule matched with the display terminal.
In one possible implementation, the drag information includes a component release location;
the functional component rendering module 130, when rendering the currently triggered functional component in the design area based on the drag information, is further configured to:
judging whether the component release position is loaded with the functional component in the sub-area where the design area is located:
under the condition that the functional components are not loaded, taking the highest point of the sub-region as a rendering starting point;
under the condition that the functional component is loaded, determining a rendering starting point according to the highest point of the sub-region and the attribute information of the loaded functional component;
and rendering the currently triggered functional component in the design area based on the rendering starting point and the acquired attribute information of the currently triggered functional component.
In one possible implementation, the functional component rendering module 130, when rendering the currently triggered functional component in the design area based on the drag information, is further configured to:
when an attribute modification instruction is triggered, pushing and displaying an attribute modification interface, and acquiring attribute modification information of a functional component which is currently rendered based on the attribute modification interface;
and adjusting the rendering effect of the currently triggered functional component according to the attribute modification information.
In one possible implementation, the attribute information further includes a page layout, and the page layout includes at least one of a responsive page and a non-responsive page;
the page layout is associated with a display terminal.
< apparatus embodiment >
FIG. 18 shows a schematic block diagram of an apparatus for drag-based generation of front-end pages according to an embodiment of the present disclosure. As shown in fig. 18, the apparatus 200 for generating a front page based on drag-and-drop includes a processor 210 and a memory 220 for storing executable instructions of the processor 210. Wherein the processor 210 is configured to execute the executable instructions to implement any of the methods for drag-based generation of front end pages.
Here, it should be noted that the number of the processors 210 may be one or more. Meanwhile, in the apparatus 200 for generating a front page based on a drag-and-drop method according to an embodiment of the present disclosure, an input device 230 and an output device 240 may be further included. The processor 210, the memory 220, the input device 230, and the output device 240 may be connected via a bus, or may be connected via other methods, which is not limited in detail herein.
The memory 220, which is a computer-readable storage medium, may be used to store software programs, computer-executable programs, and various modules, such as: the method for generating the front-end page based on the drag mode in the embodiment of the disclosure corresponds to a program or a module. The processor 210 executes various functional applications and data processing of the device 200 for generating a front page based on a drag-and-drop manner by running software programs or modules stored in the memory 220.
The input device 230 may be used to receive an input number or signal. Wherein the signal may be a key signal generated in connection with user settings and function control of the device/terminal/server. The output device 240 may include a display device such as a display screen.
< storage Medium embodiment >
According to a fourth aspect of the present disclosure, there is also provided a non-transitory computer readable storage medium having stored thereon computer program instructions, which when executed by the processor 210, implement any of the foregoing methods for generating a front-end page based on drag.
Having described embodiments of the present disclosure, the foregoing description is intended to be exemplary, not exhaustive, and not limited to the disclosed embodiments. Many modifications and variations will be apparent to those of ordinary skill in the art without departing from the scope and spirit of the described embodiments. The terms used herein were chosen in order to best explain the principles of the embodiments, the practical application, or technical improvements to the techniques in the marketplace, or to enable others of ordinary skill in the art to understand the embodiments disclosed herein.

Claims (9)

1. A method for generating a front-end page based on a drag mode is characterized by comprising the following steps:
acquiring attribute information of a front-end page to be generated currently; the attribute information comprises a page type;
loading and pushing a design interface according to the attribute information; the design interface comprises a design area and a functional component required for generating a front-end page of the page type;
monitoring the functional component which is currently dragged to the design area, acquiring dragging information of the currently triggered functional component, and rendering the currently triggered functional component in the design area based on the dragging information;
generating a corresponding front-end page according to each functional component which is currently rendered in the design area;
the attribute information also comprises a display terminal of the front-end page;
when loading and pushing the design interface according to the attribute information, the method further comprises the following steps:
dividing the design area in the design interface according to a preset design area division rule matched with the display terminal, wherein the design area division rule matched with the display terminal comprises the width of the design area matched with the resolution of the display terminal, and the number and the width of sub-areas, grooves and margins in the design area;
the drag information comprises a component release position;
when the currently triggered functional component is rendered in the design area based on the drag information, the sub-area divided in the design area based on the component release position and according to the design area division rule is realized.
2. The method of claim 1, wherein the page type comprises at least one of a top page, a list page, and a form page.
3. The method of claim 1, wherein the attribute information is configured based on an attribute configuration interface pushed and displayed by a triggered design page directive.
4. The method according to claim 1, when implementing rendering of a currently triggered functional component in the design area based on the component release position and sub-areas partitioned in the design area according to the design area partitioning rule, comprising:
judging whether the component release position is loaded with the functional component in a sub-area where the design area is located:
taking the highest point of the sub-area as a rendering starting point under the condition that the functional component is not loaded; under the condition that the functional component is loaded, determining a rendering starting point according to the highest point of the sub-area and the attribute information of the loaded functional component;
and rendering the currently triggered functional component in the design area based on the rendering starting point and the acquired attribute information of the currently triggered functional component.
5. The method according to any one of claims 1 to 4, wherein, when rendering the currently triggered functional component in the design area based on the drag information, further comprising:
when an attribute modification instruction is triggered, pushing and displaying an attribute modification interface, and acquiring attribute modification information of a functional component which is currently rendered based on the attribute modification interface;
and adjusting the rendering effect of the currently triggered functional component according to the attribute modification information.
6. The method of claim 1, wherein the attribute information further comprises a page layout, the page layout comprising at least one of responsive pages and non-responsive pages;
the page layout is associated with the display terminal.
7. An apparatus for generating a front-end page based on a drag-and-drop approach, comprising:
the attribute information acquisition module is used for acquiring the attribute information of the front-end page to be generated currently; the attribute information comprises a page type;
the design interface loading module is used for loading and pushing a design interface according to the attribute information; the design interface comprises a design area and a functional component required for generating a front-end page of the page type;
the functional component rendering module is used for monitoring a functional component which is currently dragged to the design area, acquiring dragging information of the currently triggered functional component, and rendering the currently triggered functional component in the design area based on the dragging information;
the front-end page generating module is used for generating a corresponding front-end page according to each functional component which is currently rendered in the design area;
the attribute information further comprises a display terminal of the front-end page;
the design interface loading module is further configured to, when loading and pushing a design interface according to the attribute information:
dividing the design area in the design interface according to a preset design area division rule matched with the display terminal, wherein the design area division rule matched with the display terminal comprises the width of the design area matched with the resolution of the display terminal, and the number and the width of sub-areas, grooves and margins in the design area;
the drag information includes a component release position;
and the functional component rendering module is used for realizing the rendering of the currently triggered functional component in the design area based on the dragging information and based on the component release position and the sub-area divided in the design area according to the design area division rule.
8. An apparatus for generating a front-end page based on a drag-and-drop approach, comprising:
a processor;
a memory for storing processor-executable instructions;
wherein the processor is configured to carry out the method of any one of claims 1 to 6 when executing the executable instructions.
9. A non-transitory computer readable storage medium having computer program instructions stored thereon, wherein the computer program instructions, when executed by a processor, implement the method of any of claims 1 to 6.
CN202210152046.XA 2022-02-18 2022-02-18 Method, device and equipment for generating front-end page based on drag mode and storage medium Active CN114489623B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210152046.XA CN114489623B (en) 2022-02-18 2022-02-18 Method, device and equipment for generating front-end page based on drag mode and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210152046.XA CN114489623B (en) 2022-02-18 2022-02-18 Method, device and equipment for generating front-end page based on drag mode and storage medium

Publications (2)

Publication Number Publication Date
CN114489623A CN114489623A (en) 2022-05-13
CN114489623B true CN114489623B (en) 2022-11-04

Family

ID=81483313

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210152046.XA Active CN114489623B (en) 2022-02-18 2022-02-18 Method, device and equipment for generating front-end page based on drag mode and storage medium

Country Status (1)

Country Link
CN (1) CN114489623B (en)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114647478B (en) * 2022-05-23 2022-09-13 武汉中科通达高新技术股份有限公司 Data billboard generation method and device, computer equipment and storage medium
CN115016960B (en) * 2022-08-08 2022-11-11 杭州实在智能科技有限公司 Configurable RPA robot full-flow information notification processing method and system

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111443911A (en) * 2020-03-24 2020-07-24 五八有限公司 Page development method and device, electronic equipment and computer storage medium
CN111930370A (en) * 2020-06-17 2020-11-13 石化盈科信息技术有限责任公司 Visualized page processing method and device, computer equipment and storage medium
CN112015501A (en) * 2020-07-15 2020-12-01 深圳市金蝶天燕云计算股份有限公司 Visual page generation method and device, computer equipment and storage medium
CN112540763A (en) * 2020-12-24 2021-03-23 贵阳货车帮科技有限公司 Front-end page generation method and device, platform equipment and storage medium
CN112650966A (en) * 2020-12-28 2021-04-13 珠海新华通软件股份有限公司 Method, generator and medium for generating dynamic list page of online design
CN113448569A (en) * 2021-06-28 2021-09-28 天闻数媒科技（湖南）有限公司 Site page processing system, method, equipment and storage medium

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107015958A (en) * 2017-04-14 2017-08-04 东莞中国科学院云计算产业技术创新与育成中心 Report form generation method and device
US20200097138A1 (en) * 2018-09-24 2020-03-26 Salesforce.Com, Inc. Application builder
US10838744B2 (en) * 2018-12-04 2020-11-17 Sap Se Web component design and integration system
CN111352628A (en) * 2020-02-28 2020-06-30 深圳壹账通智能科技有限公司 Front-end code generation method and device, computer system and readable storage medium
CN113010162B (en) * 2021-03-02 2024-03-29 中国工商银行股份有限公司 Page construction method, device and equipment

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111443911A (en) * 2020-03-24 2020-07-24 五八有限公司 Page development method and device, electronic equipment and computer storage medium
CN111930370A (en) * 2020-06-17 2020-11-13 石化盈科信息技术有限责任公司 Visualized page processing method and device, computer equipment and storage medium
CN112015501A (en) * 2020-07-15 2020-12-01 深圳市金蝶天燕云计算股份有限公司 Visual page generation method and device, computer equipment and storage medium
CN112540763A (en) * 2020-12-24 2021-03-23 贵阳货车帮科技有限公司 Front-end page generation method and device, platform equipment and storage medium
CN112650966A (en) * 2020-12-28 2021-04-13 珠海新华通软件股份有限公司 Method, generator and medium for generating dynamic list page of online design
CN113448569A (en) * 2021-06-28 2021-09-28 天闻数媒科技（湖南）有限公司 Site page processing system, method, equipment and storage medium

Also Published As

Publication number Publication date
CN114489623A (en) 2022-05-13

Similar Documents

Publication Publication Date Title
CN114489623B (en) Method, device and equipment for generating front-end page based on drag mode and storage medium
EP3304338B1 (en) System and method for the generation of an adaptive user interface in a website building system
US11048484B2 (en) Automated responsive grid-based layout design system
KR101246737B1 (en) Content managing device and content managing method
CN101957730B (en) Messaging device and information processing method
CN104965630B (en) Method and system for layout of desktop application icons
CN106708484B (en) Method and device for establishing page
CN110764850A (en) Interface display method, parameter assignment method, system and equipment
CN112632942A (en) Document processing method, device, equipment and medium
CN109284034B (en) Method, system, storage medium and mobile phone for previewing terminal wallpaper
US20210271355A1 (en) Display control device, display control method, and display control program
CN106201216A (en) The display packing of a kind of self-defined desktop icons and system
CN113568540A (en) Method, device, equipment and medium for displaying function menu in Web application
CN115712413A (en) Low code development method, device, equipment and storage medium
CN105204751A (en) Method and terminal for touch screen equipment background image conversion
CN108255370A (en) Icon classifying indication method, icon classification display device and mobile terminal
CN112947826B (en) Information acquisition method and device and electronic equipment
CN109992580A (en) Processing method and processing device, storage medium, the computer equipment of table data
CN113805752A (en) Object moving method and electronic equipment
CN111061532B (en) Wallpaper display method and terminal equipment
CN113468117A (en) Information processing apparatus, control method thereof, and storage medium
CN102289475A (en) Terminal and method for storing file
CN109635829B (en) Picture classification method, mobile terminal and computer storage medium
CN109213980B (en) Method and device for editing presentation file and computer readable storage medium
CN112783382B (en) Method, device, terminal and storage medium for setting document icons

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
GR01 Patent grant
GR01 Patent grant
TR01 Transfer of patent right

Effective date of registration: 20230529

Address after: Room 219, 2nd Floor, Room 101, Building 9, Building 1-4, No. 4 Tianzhu East Road, Shunyi District, Beijing, 101318

Patentee after: Beijing Konggang Yuntian Smart City Technology Co.,Ltd.

Address before: 101312 room 2792, floor 2, building 17, Tianzhu Jiayuan, Tianzhu town, Shunyi District, Beijing

Patentee before: Beijing Lida Zhengtong Technology Group Co.,Ltd.

TR01 Transfer of patent right