CN108415706B - Method, system, equipment and storage medium for generating visual webpage - Google Patents
Method, system, equipment and storage medium for generating visual webpage Download PDFInfo
- Publication number
- CN108415706B CN108415706B CN201810209982.3A CN201810209982A CN108415706B CN 108415706 B CN108415706 B CN 108415706B CN 201810209982 A CN201810209982 A CN 201810209982A CN 108415706 B CN108415706 B CN 108415706B
- Authority
- CN
- China
- Prior art keywords
- component
- area
- components
- candidate
- webpage
- 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
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/34—Graphical or visual programming
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)
- Information Transfer Between Computers (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention provides a method, a system, equipment and a storage medium for generating a visual webpage, which comprises the steps of initializing an alternative component list and previewing canvas; receiving a dragging operation instruction of a user; judging the alternative component pointed by the drag operation instruction to serve as a selected component; judging a standard positioning point which is in the shortest distance from the pointing position of the dragging operation instruction in the preview canvas to serve as a target position; fixing and displaying the selected component in the preview canvas, wherein the center position of the selected component is aligned with the target position; and rearranging the arrangement sequence of the plurality of alternative components in the alternative component list, receiving a release instruction of a user, generating a webpage link according to the current preview canvas and automatically releasing the webpage. According to the method and the device, the plurality of optional components are modularized, and the selected components are fixed and displayed in the preview canvas according to the dragging operation instruction, so that the visual page generation process is realized, a user can generate the webpage through the dragging operation, and the operation is simple and convenient.
Description
Technical Field
The present invention relates to a web page generation technology, and in particular, to a method, a system, a device, and a storage medium for generating a visual web page.
Background
The existing mobile terminal webpage generating process has high requirements on a producer, and codes are generally required to be written in the webpage producing process, so that the producer is required to have professional network programming knowledge, and the effect of a finally issued webpage cannot be visually seen in the webpage producing process by the existing webpage generating technology. Particularly, for the marketing campaign web pages, because the number of marketing campaigns is large, the online time of the web pages is required urgently, and the forms are similar, the marketing campaign web pages are manufactured in the existing mode, professional development is needed, the period is long, and the time requirement cannot be met. The existing method is always used for repeatedly developing the process, and resources are wasted. The existing marketing activity webpage generation process is not intuitive, so that the finally issued webpage effect has a large gap with the assumption of a producer.
Disclosure of Invention
Aiming at the technical problems, the invention provides a method, a system, equipment and a storage medium for generating a visual webpage, wherein a plurality of optional components are modularized, a dragging operation instruction of a user is received, and the selected components are fixed and displayed in a preview canvas according to the dragging operation instruction, so that the visual page generation process is realized, the webpage can be generated by the user through dragging operation, codes do not need to be written, and the operation is simple and convenient. The modularized alternative components can be applied to a plurality of webpages, so that repeated development is avoided, universality is high, and time and resources are greatly saved.
The first aspect of the present invention provides a method for generating a visual webpage, comprising the steps of: s11, initializing a candidate component list and a preview canvas, wherein the candidate component list comprises a first area and a second area, the first area comprises a plurality of candidate components, each candidate component is set to receive a dragging operation, and the preview canvas comprises a plurality of standard positioning points; s12, receiving a drag operation instruction of a user; s13, judging the alternative component pointed by the drag operation instruction to be used as a selected component; s14, judging a standard positioning point which is in the shortest distance from the pointing position of the dragging operation instruction in the preview canvas to serve as a target position; s15, fixing and displaying the selected component in the preview canvas, wherein the center position of the selected component is aligned with the target position; s16, rearranging the arrangement sequence of the multiple alternative components in the alternative component list, and arranging the selected component in a second area of the alternative component list; repeating steps S12 to S16; and S17, receiving a publishing instruction of a user, generating a webpage link according to the current preview canvas and automatically publishing the webpage.
Preferably, the step S16 includes the steps of: s161, detecting a standard positioning point which is not covered by the selected component in the current preview canvas to obtain a blank area of the current preview canvas; s162, rearranging the standby components of the standby components, the sizes of which exceed the area of the blank area, to the bottom of the first area according to the size of the blank area; and S163, arranging all the selected components in a second area of the candidate component list.
Preferably, step S162 includes determining whether the blank area is an irregular figure, and if not, rearranging the candidate components, whose component sizes exceed the area of the blank area, of the plurality of candidate components to the bottom of the first area; if yes, the blank area is divided into a plurality of sub-areas, and the candidate components with the component size exceeding the area of the sub-areas in the plurality of candidate components are rearranged to the bottom of the first area.
Preferably, the step S11 includes the steps of: s111, providing a plurality of theme templates and a blank template, wherein the theme template selects a plurality of selected components in advance according to different themes, and the blank template does not comprise the selected components; s112, receiving a template selection instruction of a user; s113, initializing the alternative component list and the preview canvas according to the template selection instruction, displaying a plurality of selected components which are selected in advance in the theme template in the preview canvas when the template selection instruction is the selected theme template, and displaying blanks in the preview canvas when the template selection instruction is the selected blank template.
Preferably, in step S11, a plurality of candidate components are arranged in the candidate component list in a literal form; step S13 includes step S131, determining the candidate component pointed by the drag operation instruction as the selected component; and S132, converting the selected component from the character form into the visual graphic form.
Preferably, step S14 includes step S141, moving the selected component following the movement trajectory of the drag operation instruction; s142, judging whether the moving track of the dragging operation instruction stays at the current position for more than preset time, and if so, executing the step S143; s143, judging that the current position is a preset pointing position, and selecting a standard positioning point closest to the preset pointing position as a preset target position; s144, displaying the selected component in preview canvas, wherein the center position of the selected component is aligned with the preset target position; s145, receiving the position confirmation information of the drag operation instruction, setting the predetermined target position as the target position, and executing step S15.
Preferably, the step S15 includes the steps of: s151, fixing and displaying the selected component in the preview canvas, wherein the center position of the selected component is aligned with the target position; s152, judging whether the selected component exists before the currently selected component is added into the preview canvas, if so, executing the step S153; s153, aligning the outer border of the currently selected component by taking the outer border line of the existing selected component closest to the edge of the preview canvas as a standard.
The second aspect of the present invention also provides a system for generating a visual webpage, including: the device comprises an initialization module and a preview canvas, wherein the initialization module is used for initializing a standby component list and the preview canvas, the standby component list comprises a first area and a second area, the first area comprises a plurality of standby components, each standby component is set to receive dragging operation, and the preview canvas comprises a plurality of standard positioning points; the dragging operation execution module is used for receiving a dragging operation instruction of a user, judging an alternative component pointed by the dragging operation instruction to serve as a selected component, judging a standard positioning point which is in the shortest distance with the pointed position of the dragging operation instruction in the preview canvas to serve as a target position, displaying the selected component in the preview canvas, and aligning the center position of the selected component with the target position; the updating module rearranges the arrangement sequence of the plurality of alternative components in the alternative component list and arranges the selected component in a second area of the alternative component list; and the issuing module is used for receiving an issuing instruction of a user, generating a webpage link according to the current preview canvas and automatically issuing the webpage.
The third aspect of the present invention also provides a visualized web page generating apparatus, including: a processor; a memory having stored therein executable instructions of the processor; wherein the processor is configured to perform the steps of the method of visualized web page generation of the first aspect described above via execution of executable instructions.
The fourth aspect of the present invention also provides a computer-readable storage medium for storing a program, which when executed, implements the steps of the method for generating a visualized webpage of the first aspect.
The method, the system, the equipment and the storage medium for generating the visual webpage receive the dragging operation instruction of the user by modularizing a plurality of alternative components, and fix and display the selected component in the preview canvas according to the dragging operation instruction, so that the visual webpage generation process is realized, the user can generate the webpage through the dragging operation, codes do not need to be written, and the operation is simple and convenient. The modularized alternative components can be applied to a plurality of webpages, so that repeated development is avoided, universality is high, and time and resources are greatly saved.
The first area and the second area are distinguished from the alternative component list, so that the arrangement of alternative components is optimized, and the use experience of a user is improved.
Drawings
Other features, objects and advantages of the present invention will become more apparent upon reading of the following detailed description of non-limiting embodiments thereof, with reference to the accompanying drawings.
FIG. 1 is a flow diagram of a method of visual web page generation in accordance with an embodiment of the present invention;
FIG. 2 is a detailed flow chart of step S16 of FIG. 1 according to the present invention;
FIG. 3 is an interface operation diagram of a visualized webpage according to an embodiment of the present invention;
FIG. 4 is an interface operation diagram of a visualization web page according to an embodiment of the invention;
FIG. 5 is a block diagram of a system including visual web page generation in accordance with an embodiment of the present invention;
FIG. 6 is a schematic structural diagram of a device for generating a visual webpage according to an embodiment of the present invention; and
fig. 7 is a schematic structural diagram of a computer-readable storage medium according to an embodiment of the present invention.
Detailed Description
Example embodiments will now be described more fully with reference to the accompanying drawings. Example embodiments may, however, be embodied in many different forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the concept of example embodiments to those skilled in the art. The same reference numerals in the drawings denote the same or similar structures, and thus their repetitive description will be omitted.
In the prior art, codes are generally required to be written in the process of webpage making, so that a maker is required to have professional network programming knowledge, needs professional personnel to develop, has a long period, and cannot meet the requirement of emergency time. The existing webpage generation technology cannot visually see the effect of the finally issued webpage in the webpage making process, and the generation process is not visual, so that the effect of the finally issued webpage has a large difference from the assumption of a maker.
According to the method and the device, the plurality of optional components are modularized, the dragging operation instruction of the user is received, the selected components are fixed and displayed in the preview canvas according to the dragging operation instruction, and therefore the visual page generation process is achieved, the user can generate the webpage through the dragging operation, codes do not need to be written, and the operation is simple and convenient. The modularized alternative components can be applied to a plurality of webpages, so that repeated development is avoided, universality is high, and time and resources are greatly saved.
Fig. 1 is a flowchart of a method for generating a visualized web page according to an embodiment of the present invention. As shown in fig. 1, the method for generating a visualized webpage of the present invention includes the following steps:
s11, initializing a list of alternative components, and previewing the canvas.
Fig. 3 is an interface operation diagram of a visualized webpage according to an embodiment of the present invention. As shown in conjunction with FIG. 1 and FIG. 3, the interface for visualizing a web page includes a list of candidate components 20, a preview canvas 40, and a property settings area 50. In step S11, the functional components are modularized as the alternative components 31, for example, the alternative components 31 include pictures, advertisement spots, nine-grid drawings, and the like. The candidate component list 20 is initialized, and the plurality of candidate components 31 are arranged in the candidate component list 20. In the embodiment, a plurality of candidate components 31 are preferably arranged in the candidate component list 20 in a literal manner, so that space of an interface of a visual webpage is saved. In other embodiments, the alternative components 31 may also be arranged in an image or other format.
In order to facilitate the component management of the user and improve the webpage generation efficiency, the candidate component list 20 preferably includes a first area 21 and a second area 22. The first area 21 includes a plurality of candidate components 31 therein, and each of the candidate components 31 is configured to accept a drag operation. The candidate components 31 are set to accept a property setting operation, and when a specific candidate component 31 is selected, the property setting area 50 displays settable properties of the specific candidate component 31 to enable a user to perform property setting. The attribute setting area 50 is preferably displayed only at the time of the attribute setting operation in the present embodiment, and is hidden when other operations are performed. The alternative component 31 is adjusted by setting the properties of the alternative component 31 so that no adjustment by writing code is necessary.
When an alternative component 31 is selected and displayed in the preview canvas 40, the selected component 31 becomes the selected component 32. The second region 22 is configured to arrange the selected components 32. In the present embodiment, the first region 21 is arranged above the second region 22.
Initializing a preview canvas 40, the preview canvas 40 being used to display the visual effect of the webpage when it is finally issued, the preview canvas 40 comprising a plurality of standard anchor points.
Preferably, in order to further facilitate the webpage producer to produce the webpage, a plurality of theme templates and a blank template are provided in advance for the producer to select. Step S11 thus includes the steps of:
s111, providing a plurality of theme templates and a blank template, wherein the theme template selects a plurality of selected components 32 in advance according to different themes, and the blank template does not include the selected components 32.
And S112, receiving a template selection instruction of a user.
S113, initializing the alternative component list 20 and the preview canvas 40 according to a template selection instruction, displaying a plurality of selected components 32 which are selected in advance in the theme template in the preview canvas 40 when the template selection instruction is a selected theme template, and displaying blanks in the preview canvas when the template selection instruction is a selected blank template.
The plurality of theme templates are arranged, so that a producer can conveniently adjust the existing theme template to directly issue the theme template when the webpage is generated, the webpage generation efficiency is further improved, and the user experience is improved.
And S12, receiving a drag operation instruction of the user.
And S13, judging the alternative component 31 pointed by the drag operation instruction as the selected component 32. Since the plurality of candidate components 31 are arranged in the candidate component list 20 in a text form in order to save interface space, in order to improve the visualization degree in the page generation process and improve the user experience, step S13 further includes the steps of: s131, judging the alternative component 31 pointed by the drag operation instruction to serve as the selected component. And S132, converting the selected component from the character form into the visual graphic form.
S14, a standard positioning point closest to the pointing position of the dragging operation instruction in the preview canvas 40 is judged to be used as a target position. In order to improve the positioning accuracy of the target position, step S14 further includes the steps of:
and S141, moving the selected component 32 along the moving track of the dragging operation instruction.
And S142, judging whether the movement track of the dragging operation instruction stays at the current position in the preview canvas 40 for more than preset time, and if so, executing the step S143.
S143, judging that the current position is a preset pointing position, and selecting a standard positioning point closest to the preset pointing position as a preset target position.
S144, displaying the selected component 32 in the preview canvas in a preview mode, wherein the center position of the selected component 32 is aligned with the preset target position.
S145, receiving the position confirmation information of the drag operation instruction, setting the predetermined target position as the target position, and executing step S15.
Positioning accuracy is improved by setting a predetermined target position and displaying the selected component 32 at the predetermined target position so that the producer can further precisely control the target position by dragging an operation instruction.
S15, the selected component 32 is fixed and displayed within the preview canvas 40 with the center position of the selected component 32 aligned with the target position. In order to improve efficiency and convenience of operation, step S15 further includes the steps of:
s151, fixing and displaying the selected component 32 in the preview canvas 40, wherein the center position of the selected component 32 is aligned with the target position.
S152, judging whether the selected component 32 exists before the currently selected component 32 is added into the preview canvas 40, if so, executing the step S153;
s153, aligning the outer border of the currently selected component 32 with the outer border line of the existing selected component 32 closest to the edge of the preview canvas as a standard. There is also a fixed separation distance, for example, 5 standard anchor point distances, between adjacent selected components 32 in the preview canvas 40, and when the currently selected components 32 are aligned, the arrangement is automatically adjusted to meet the requirement of the fixed separation distance.
Efficiency is improved by avoiding manual readjustment of the position of the selected component 32 by the producer through an automatic alignment operation.
S16, rearranging the candidate component list 20. In order to improve the convenience of the manufacturer to quickly find the required candidate component 31 and improve the efficiency, the arrangement order of the plurality of candidate components 31 in the candidate component list 20 is rearranged, and the selected component 32 is arranged in the second area 22 of the candidate component list 20.
Fig. 2 is a detailed flowchart of step S16 of fig. 1 according to the present invention. As shown in fig. 2, step S16 further includes the steps of:
s161, detecting a standard positioning point which is not covered by the selected component in the current preview canvas to obtain a blank area of the current preview canvas.
And S162, rearranging the standby components of the standby components, the sizes of which exceed the area of the blank area, to the bottom of the first area according to the size of the blank area. For the case that irregular patterns usually appear in the blank area, step S162 is further subdivided into steps:
s1621, determining whether the blank area is an irregular pattern, if not, executing step S1622, and if so, executing step S1623.
S1622, rearranging the standby components of the plurality of standby components, the size of which exceeds the area of the blank area, to the bottom of the first area.
S1623, dividing the blank area into a plurality of sub-areas.
And S1624, rearranging the candidate assemblies of the plurality of candidate assemblies, of which the assembly size exceeds the area of the sub-area, to the bottom of the first area.
And S163, arranging all the selected components in a second area of the candidate component list.
Fig. 3 and fig. 4 are schematic diagrams illustrating an interface operation of a visualization web page according to an embodiment of the present invention, and the execution process of step S164 is further described with reference to fig. 3 and fig. 4.
As shown in FIG. 3, the navigation bar at the bottom of the selected component 32 already exists in the preview canvas 40 in FIG. 3. The canonical anchor points in the current preview canvas 40 that are not covered by the selected component 32, e.g., the bottom navigation bar component, are first detected, and the margin area 41 is bounded by the boundaries of the uncovered canonical anchor points. Judging that the blank area 41 is not an irregular figure according to the peripheral shape of the blank area 41, the candidate components 31, such as the nine-grid drawing components, having the component size exceeding the area of the blank area 41 among the plurality of candidate components 31 are rearranged to the bottom of the first area 21. Since the candidate component 31 generally has a fixed optimal component size, the candidate components 31 whose component sizes exceed the area of the blank area 41 are arranged at the bottom of the first area 21 at a fixed area of the web page, so that the candidate components 31 that can be selected are arranged at the front, which is convenient for the manufacturer to select and improves the efficiency.
As shown in FIG. 4, the navigation bar, picture, and CSS components at the bottom of the selected component 32 are already present in the preview canvas 40 in FIG. 4. If the blank area 41 is determined to be irregular according to the outer peripheral shape of the blank area 41, the blank area 41 is divided into 2 sub-areas 42. The blank area 41 is divided on the basis of the minimum number of rectangles, and when there are 2 or more division methods, the division method in which the sub-area 42 can be aligned with the boundary line of the adjacent selected component 32 is preferentially selected. Then, the candidate components 31 with the component size exceeding the area of the sub-area 42 in the plurality of candidate components 31 are rearranged to the bottom of the first area 21, for example, the nine-grid lottery components and the cell phone coupon have the component size exceeding the larger area of 2 sub-areas 42, and are therefore arranged at the bottom of the first area 21.
Steps S12 through S16 are repeated, thereby displaying a plurality of selected components 32 in the preview canvas 40, completing the webpage layout.
And S17, receiving a publishing instruction of a user, generating a webpage link according to the current preview canvas and automatically publishing the webpage. Because the finally issued webpage is consistent with the preview canvas, the problem that the effect of the finally issued webpage has a large gap with the assumption of a producer can be effectively avoided.
According to the method for generating the visual webpage, the plurality of optional components are modularized, the dragging operation instruction of the user is received, the selected component is fixed and displayed in the preview canvas according to the dragging operation instruction, and therefore the visual page generation process is achieved, the user can generate the webpage through dragging operation, codes do not need to be written, and the operation is simple and convenient. The modularized alternative components can be applied to a plurality of webpages, so that repeated development is avoided, universality is high, and time and resources are greatly saved.
The invention also provides a system for generating the visual webpage, which aims at the problems that the existing webpage generation system needs professional operation, the webpage generation period is long, the requirement of emergency time cannot be met, the effect of the finally issued webpage cannot be visually seen in the webpage making process, and the generation process is not visual.
Fig. 5 is a schematic block diagram of a system including a visualized webpage generation according to an embodiment of the present invention, and as shown in fig. 5, the system 10 including a visualized webpage generation according to the present invention includes an initialization module 11, a drag operation execution module 12, an update module 13, and a publishing module 14.
The initialization module 11 is configured to initialize a candidate component list and a preview canvas, where the candidate component list includes a first area and a second area, the first area includes a plurality of candidate components, the candidate components are configured to accept a drag operation, and the preview canvas includes a plurality of standard anchor points.
The dragging operation execution module 12 is configured to receive a dragging operation instruction of a user, determine an alternative component pointed by the dragging operation instruction to serve as a selected component, determine a standard positioning point closest to a pointed position of the dragging operation instruction in the preview canvas to serve as a target position, display the selected component in the preview canvas, and align a center position of the selected component with the target position.
The updating module 13 is configured to rearrange the arrangement order of the multiple candidate components in the candidate component list, and arrange the selected component in the second area of the candidate component list.
The publishing module 14 is configured to receive a publishing instruction of a user, generate a webpage link according to the current preview canvas, and automatically publish the webpage.
It is understood that the system 10 for generating a visual web page also includes other existing functional modules that support the operation of the system 10 for generating a visual web page. The system 10 for generating a visualized webpage shown in fig. 5 is only an example and should not bring any limitation to the functions and the scope of use of the embodiment of the present invention.
The system 10 for generating a visual webpage in this embodiment is used to implement the method for generating a visual webpage, so for specific implementation steps of the system 10 for generating a visual webpage, reference may be made to the description of the method for generating a visual webpage, and details are not described here again.
The system for generating the visual webpage receives the dragging operation instruction of the user by modularizing the plurality of optional components, fixes and displays the selected component in the preview canvas according to the dragging operation instruction, thereby realizing the visual page generation process, enabling the user to generate the webpage through the dragging operation without compiling codes, and being simple and convenient to operate.
The embodiment of the invention also provides a visual webpage generating device which comprises a processor. A memory having stored therein executable instructions of the processor. Wherein the processor is configured to perform the steps of the above-described method of visualized web page generation via execution of executable instructions.
As described above, in the embodiment, the unique mapping is established between the internal order process number and the combination of the travel product in the current order, and when the user updates the original order, the order number is associated with the newly generated internal order process number, so that the order updating is realized, the efficiency is improved, and the error occurrence rate is reduced.
As will be appreciated by one skilled in the art, aspects of the present invention may be embodied as a system, method or program product. Thus, various aspects of the invention may be embodied in the form of: an entirely hardware embodiment, an entirely software embodiment (including firmware, microcode, etc.) or an embodiment combining hardware and software aspects that may all generally be referred to herein as a "circuit," module "or" platform.
Fig. 6 is a schematic structural diagram of a visualized web page generating device according to an embodiment of the present invention. The visualized web page generating apparatus 600 according to this embodiment of the present invention is described below with reference to fig. 6. The visualized web page generating device 600 shown in fig. 6 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiment of the present invention.
As shown in fig. 6, the visualized web page generating device 600 is represented in the form of a general purpose computing device. The components of the visualization web page generation device 600 may include, but are not limited to: at least one processing unit 610, at least one memory unit 620, a bus 630 connecting the different platform components (including the memory unit 620 and the processing unit 610), a display unit 640, etc.
Wherein the storage unit stores program code executable by the processing unit 610 to cause the processing unit 610 to perform steps according to various exemplary embodiments of the present invention described in the above-mentioned electronic prescription flow processing method section of the present specification. For example, processing unit 610 may perform the steps as shown in fig. 1.
The storage unit 620 may include readable media in the form of volatile memory units, such as a random access memory unit (RAM)6201 and/or a cache memory unit 6202, and may further include a read-only memory unit (ROM) 6203.
The memory unit 620 may also include a program/utility 6204 having a set (at least one) of program modules 6205, such program modules 6205 including, but not limited to: an operating system, one or more application programs, other program modules, and program data, each of which, or some combination thereof, may comprise an implementation of a network environment.
The visual web page generating device 600 may also communicate with one or more external devices 700 (e.g., keyboard, pointing device, bluetooth device, etc.), with one or more devices that enable a user to interact with the visual web page generating device 600, and/or with any device (e.g., router, modem, etc.) that enables the visual web page generating device 600 to communicate with one or more other computing devices. Such communication may occur via an input/output (I/O) interface 650. Also, the visualization web page generating device 600 may also communicate with one or more networks (e.g., a Local Area Network (LAN), a Wide Area Network (WAN), and/or a public network, such as the internet) through the network adapter 660. The network adapter 660 may communicate with other modules of the visualized web page generating device 600 through the bus 630. It should be appreciated that, although not shown in the figures, other hardware and/or software modules may be used in conjunction with the visualization web page generating device 600, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage platforms, to name a few.
An embodiment of the present invention further provides a computer-readable storage medium, which is used for storing a program, and when the program is executed, the steps of the method for generating a visualized webpage in the foregoing embodiment are implemented. In some possible embodiments, the aspects of the present invention may also be implemented in the form of a program product comprising program code for causing a terminal device to perform the steps according to various exemplary embodiments of the present invention described in the above-mentioned electronic prescription flow processing method section of this specification, when the program product is run on the terminal device.
As shown above, when the program of the computer-readable storage medium of this embodiment is executed, the multiple candidate components are modularized, the drag operation instruction of the user is received, and the selected component is fixed and displayed in the preview canvas according to the drag operation instruction, so that a visual page generation process is implemented, and the user can generate a webpage through the drag operation without writing a code, and the operation is simple and convenient.
Fig. 7 is a schematic structural diagram of a computer-readable storage medium according to an embodiment of the present invention. Referring to fig. 7, a program product 800 for implementing the above method according to an embodiment of the present invention is described, which may employ a portable compact disc read only memory (CD-ROM) and include program code, and may be run on a terminal device, such as a personal computer. However, the program product of the present invention is not limited in this regard and, in the present document, a readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.
The program product may employ any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium include: an electrical connection having one or more wires, a portable disk, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
A computer readable storage medium may include a propagated data signal with readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A readable storage medium may also be any readable medium that is not a readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a readable storage medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.
Program code for carrying out operations for aspects of the present invention may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computing device, partly on the user's device, as a stand-alone software package, partly on the user's computing device and partly on a remote computing device, or entirely on the remote computing device or server. In the case of a remote computing device, the remote computing device may be connected to the user computing device through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to an external computing device (e.g., through the internet using an internet service provider).
According to the description of the invention, the method, the system, the equipment and the storage medium for generating the visual webpage provided by the invention receive the dragging operation instruction of the user through modularizing the plurality of optional components, and the selected components are fixed and displayed in the preview canvas according to the dragging operation instruction, so that the visual page generation process is realized, the webpage can be generated by the user through dragging operation, codes do not need to be written, and the operation is simple and convenient. The modularized alternative components can be applied to a plurality of webpages, so that repeated development is avoided, universality is high, and time and resources are greatly saved.
The first area and the second area are distinguished from the alternative component list, so that the arrangement of alternative components is optimized, and the use experience of a user is improved.
The arrangement of the alternative components is optimized through the step of rearranging the alternative component list, and the alternative components capable of being selected are arranged at the front part of the list of the alternative components, so that a producer can conveniently select the alternative components, and the efficiency and the user experience are improved.
The foregoing is a more detailed description of the invention in connection with specific preferred embodiments and it is not intended that the invention be limited to these specific details. For those skilled in the art to which the invention pertains, several simple deductions or substitutions can be made without departing from the spirit of the invention, and all shall be considered as belonging to the protection scope of the invention.
Claims (9)
1. A method of visual web page generation, comprising the steps of:
s11, initializing a candidate component list and a preview canvas, wherein the candidate component list comprises a first area and a second area, the first area comprises a plurality of candidate components, each candidate component is set to accept drag operation, and the preview canvas comprises a plurality of standard positioning points;
s12, receiving a drag operation instruction of a user;
s13, judging the alternative component pointed by the drag operation instruction to be used as a selected component;
s14, judging a standard positioning point which is in the shortest distance from the pointing position of the dragging operation instruction in the preview canvas to be used as a target position;
s15, fixing and displaying the selected component in the preview canvas, wherein the center position of the selected component is aligned with the target position;
s16, rearranging the arrangement order of the plurality of candidate components in the candidate component list, including: detecting standard positioning points which are not covered by the selected components in the current preview canvas to obtain a blank area of the current preview canvas, and rearranging the optional components of the multiple optional components, the size of which exceeds the area of the blank area, to the bottom of the first area according to the size of the blank area; arranging the selected component in a second area of the alternative component list;
repeating steps S12 to S16;
and S17, receiving a publishing instruction of a user, generating a webpage link according to the current preview canvas and automatically publishing the webpage.
2. The method for generating a visualized webpage according to claim 1, wherein the step S16 comprises determining whether the blank area is an irregular figure, and if not, rearranging the candidate components with component sizes exceeding the area of the blank area to the bottom of the first area;
if yes, dividing the blank area into a plurality of sub-areas, and rearranging the candidate components with the component size exceeding the area of the sub-areas in the plurality of candidate components to the bottom of the first area.
3. The method for generating visualized web page according to claim 1, wherein said step S11 comprises the steps of:
s111, providing a plurality of theme templates and a blank template, wherein the theme template selects a plurality of selected components in advance according to different themes, and the blank template does not comprise the selected components;
s112, receiving a template selection instruction of a user;
s113, initializing a standby component list and a preview canvas according to the template selection instruction, displaying a plurality of selected components which are selected in advance in the theme template in the preview canvas when the template selection instruction is a selected theme template, and displaying blanks in the preview canvas when the template selection instruction is a selected blank template.
4. A method for generating a visualized web page as claimed in claim 1, wherein in said step S11, a plurality of alternative components are arranged in a text form in an alternative component list; step S131, namely, determining the candidate component pointed by the drag operation instruction as a selected component in step S13; and S132, converting the selected component from a text form to a visual graphic form.
5. The method for generating visualized web page according to claim 1, wherein said step S14 includes step S141 of moving said selected component following a moving trajectory of said drag operation instruction; s142, judging whether the moving track of the dragging operation instruction stays at the current position for more than preset time, and if so, executing a step S143; s143, judging that the current position is a preset pointing position, and selecting a standard positioning point closest to the preset pointing position as a preset target position; s144, displaying the selected component in the preview canvas in a preview mode, wherein the center position of the selected component is aligned with the preset target position; s145, receiving the position confirmation information of the drag operation instruction, setting the predetermined target position as the target position, and executing step S15.
6. The method for generating visualized web page according to claim 1, wherein said step S15 comprises the steps of: s151, fixing and displaying the selected component in the preview canvas, wherein the center position of the selected component is aligned with the target position;
s152, judging whether the selected component exists before the currently selected component is added into the preview canvas, if so, executing the step S153;
s153, aligning the outer border of the currently selected component by taking the outer border line of the existing selected component closest to the edge of the preview canvas as a standard.
7. A system for visualizing webpage generation, comprising:
the device comprises an initialization module and a preview canvas, wherein the initialization module is used for initializing a candidate component list and the preview canvas, the candidate component list comprises a first area and a second area, the first area comprises a plurality of candidate components, each candidate component is set to accept drag operation, and the preview canvas comprises a plurality of standard positioning points;
the dragging operation execution module is used for receiving a dragging operation instruction of a user, judging the alternative component pointed by the dragging operation instruction to be used as a selected component, judging a standard positioning point which is in the shortest distance with the pointed position of the dragging operation instruction in a preview canvas to be used as a target position, displaying the selected component in the preview canvas, and aligning the center position of the selected component with the target position;
the updating module rearranges the arrangement sequence of the plurality of candidate components in the candidate component list, and comprises: detecting standard positioning points which are not covered by the selected components in the current preview canvas to obtain a blank area of the current preview canvas, and rearranging the optional components of the multiple optional components, the size of which exceeds the area of the blank area, to the bottom of the first area according to the size of the blank area; arranging the selected component in a second area of the alternative component list;
and the issuing module is used for receiving an issuing instruction of a user, generating a webpage link according to the current preview canvas and automatically issuing the webpage.
8. An apparatus for visualizing webpage generation, comprising:
a processor;
a memory having stored therein executable instructions of the processor;
wherein the processor is configured to perform the steps of the method of visualized web page generation of any of claims 1 to 6 via execution of the executable instructions.
9. A computer-readable storage medium storing a program, wherein the program when executed implements the steps of the method of visual web page generation of any one of claims 1 to 6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810209982.3A CN108415706B (en) | 2018-03-14 | 2018-03-14 | Method, system, equipment and storage medium for generating visual webpage |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810209982.3A CN108415706B (en) | 2018-03-14 | 2018-03-14 | Method, system, equipment and storage medium for generating visual webpage |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108415706A CN108415706A (en) | 2018-08-17 |
| CN108415706B true CN108415706B (en) | 2021-07-06 |
Family
ID=63131394
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810209982.3A Active CN108415706B (en) | 2018-03-14 | 2018-03-14 | Method, system, equipment and storage medium for generating visual webpage |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108415706B (en) |
Families Citing this family (24)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109657182B (en) * | 2018-12-18 | 2020-09-08 | 深圳店匠科技有限公司 | Webpage generation method, system and computer readable storage medium |
| CN109901832A (en) * | 2019-01-17 | 2019-06-18 | 平安城市建设科技(深圳)有限公司 | Visualize webpage making method, apparatus, equipment and storage medium |
| CN109933322B (en) * | 2019-01-28 | 2024-05-24 | 平安科技（深圳）有限公司 | Page editing method and device and computer readable storage medium |
| CN109885819B (en) * | 2019-02-19 | 2022-12-20 | 携程旅游信息技术（上海）有限公司 | Data table dynamic adjustment method, system, device and storage medium |
| CN110046010A (en) * | 2019-02-19 | 2019-07-23 | 阿里巴巴集团控股有限公司 | Interface processing method, apparatus and system |
| CN110377379B (en) * | 2019-06-20 | 2023-01-20 | 平安科技（深圳）有限公司 | Method and device for generating home page, computer equipment and storage medium |
| CN112230908B (en) * | 2019-07-15 | 2023-05-23 | 腾讯科技（深圳）有限公司 | Method and device for aligning components, electronic equipment and storage medium |
| CN110609683B (en) * | 2019-08-13 | 2022-01-28 | 平安国际智慧城市科技股份有限公司 | Conversation robot configuration method and device, computer equipment and storage medium |
| CN110781423B (en) * | 2019-10-10 | 2024-02-06 | 腾讯科技（深圳）有限公司 | Webpage generation method and device and electronic equipment |
| CN112783488B (en) * | 2019-11-08 | 2023-09-29 | 腾讯科技（深圳）有限公司 | Business mode canvas drawing method and device |
| CN111224863B (en) * | 2019-12-10 | 2021-06-22 | 平安国际智慧城市科技股份有限公司 | Session task generation method and device, computer equipment and storage medium |
| CN111679823A (en) * | 2020-04-16 | 2020-09-18 | 上海淇玥信息技术有限公司 | Method and device for generating activity page, electronic equipment and computer-readable storage medium |
| CN111679824B (en) * | 2020-04-16 | 2023-12-26 | 上海淇玥信息技术有限公司 | Active page manufacturing method and device, electronic equipment and storage medium |
| CN111596913B (en) * | 2020-05-22 | 2024-04-30 | 北京达佳互联信息技术有限公司 | Visual component framework arranging method and device |
| CN112632942B (en) * | 2020-08-19 | 2021-09-28 | 腾讯科技（深圳）有限公司 | Document processing method, device, equipment and medium |
| CN111736823B (en) * | 2020-08-27 | 2020-12-08 | 北京安帝科技有限公司 | Data visualization method and device and computer readable medium |
| CN114816594B (en) * | 2021-01-18 | 2023-08-08 | 中盈优创资讯科技有限公司 | Method and device for detecting topology collision |
| CN112947921A (en) * | 2021-01-27 | 2021-06-11 | 长沙市到家悠享网络科技有限公司 | Method, device, equipment and storage medium for rapidly building CRUD page |
| CN113568618A (en) * | 2021-07-14 | 2021-10-29 | 上海淇玥信息技术有限公司 | Visual page generation method and device and electronic equipment |
| CN116048320A (en) * | 2021-10-28 | 2023-05-02 | 北京字跳网络技术有限公司 | Multi-component cross-container control method and device and electronic equipment |
| CN114329291A (en) * | 2021-12-22 | 2022-04-12 | 中国铁道科学研究院集团有限公司电子计算技术研究所 | Dynamic management method and system for portal website |
| CN114489648A (en) * | 2022-01-27 | 2022-05-13 | 竹间智能科技（上海）有限公司 | Page generation method, system, terminal and medium |
| CN114820115A (en) * | 2022-04-14 | 2022-07-29 | 荃豆数字科技有限公司 | Personalized merchant activity page generation method and device and computer equipment |
| CN116952253B (en) * | 2023-09-21 | 2024-02-23 | 深圳库犸科技有限公司 | Method for adjusting moving path, terminal device and storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102087597A (en) * | 2011-02-14 | 2011-06-08 | 浪潮通信信息系统有限公司 | J2EE and component set-based visualized development platform |
| CN103955366A (en) * | 2014-04-18 | 2014-07-30 | 南威软件股份有限公司 | Producing method of visualized website template |
| WO2015116592A1 (en) * | 2014-01-28 | 2015-08-06 | Moboom Ltd. | Adaptive content management |
| CN106708484A (en) * | 2015-11-13 | 2017-05-24 | 阿里巴巴集团控股有限公司 | Page creating method and apparatus |
-
2018
- 2018-03-14 CN CN201810209982.3A patent/CN108415706B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102087597A (en) * | 2011-02-14 | 2011-06-08 | 浪潮通信信息系统有限公司 | J2EE and component set-based visualized development platform |
| WO2015116592A1 (en) * | 2014-01-28 | 2015-08-06 | Moboom Ltd. | Adaptive content management |
| CN103955366A (en) * | 2014-04-18 | 2014-07-30 | 南威软件股份有限公司 | Producing method of visualized website template |
| CN106708484A (en) * | 2015-11-13 | 2017-05-24 | 阿里巴巴集团控股有限公司 | Page creating method and apparatus |
Also Published As
| Publication number | Publication date |
|---|---|
| CN108415706A (en) | 2018-08-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108415706B (en) | Method, system, equipment and storage medium for generating visual webpage | |
| US11038947B2 (en) | Automated constraint-based deployment of microservices to cloud-based server sets | |
| CN1815440B (en) | Method and system for a digital device menu editor | |
| KR20090018927A (en) | Modifying a chart | |
| CN102799573A (en) | Method and system for annotating webpage | |
| CN104115141A (en) | Providing translation assistance in application localization | |
| CN111045653B (en) | System generation method and device, computer readable medium and electronic equipment | |
| US20080098319A1 (en) | Method and apparatus for interacvtive multimedia author tool and dynamic toolbar | |
| CN114020256A (en) | Front-end page generation method, device and equipment and readable storage medium | |
| CN117875288A (en) | Form page generation method and device and electronic equipment | |
| CN107861779A (en) | Page object localization method and device, storage medium, electronic equipment | |
| US10592087B1 (en) | System and method for creating fluid design keyframes on graphical user interface | |
| CN113656041A (en) | Data processing method, device, equipment and storage medium | |
| JP6552162B2 (en) | Information processing apparatus, information processing method, and program | |
| CN110945478B (en) | Managing software components for software application development | |
| CN113791787A (en) | Method and device for developing page | |
| US20200183682A1 (en) | Electronic calculator, method, and storage medium | |
| KR102228241B1 (en) | Method and system for virtual input on the web | |
| EP2921952B1 (en) | Server and method for providing design data for application and system for generating application | |
| US11960658B2 (en) | Method and apparatus for bypass block webpage navigation | |
| KR101587637B1 (en) | Method for assisting programming based upon icon and apparatus for controlling the same | |
| JP6652724B2 (en) | Information processing apparatus, information processing apparatus control method, and program | |
| CN114489857B (en) | Page configuration method and device based on general configuration platform and computer system | |
| KR102211864B1 (en) | Application user interface making tool | |
| US11861883B2 (en) | Information processing apparatus and information processing method |
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 |