CN110457028B - Page visual programming method, device, server and storage medium - Google Patents
Page visual programming method, device, server and storage medium Download PDFInfo
- Publication number
- CN110457028B CN110457028B CN201910721499.8A CN201910721499A CN110457028B CN 110457028 B CN110457028 B CN 110457028B CN 201910721499 A CN201910721499 A CN 201910721499A CN 110457028 B CN110457028 B CN 110457028B
- Authority
- CN
- China
- Prior art keywords
- function
- code
- page
- area
- target page
- 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
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
- 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
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application discloses a page visual programming method, a device, a server and a storage medium, which comprise thumbnail images for displaying a plurality of pages to be configured; selecting a target to-be-configured page, wherein the target to-be-configured page comprises a fixed function area and one or more to-be-configured function areas; inputting a function code to realize the function of the function area to be configured; the execution code generates a target page. According to the method, the page to be configured with a fixed style is manufactured in advance, and meanwhile, annotation and annotation are carried out in the existing codes, so that a software engineer can save time for configuring the page, quickly know own work content, concentrate on realizing the page function, and improve the work efficiency.
Description
Technical Field
The embodiment of the application relates to the field of visual programming, in particular to a method, a device, a server and a storage medium for visual programming of pages.
Background
The existing programming method mainly uses manual code writing, realizes control processing procedures of object oriented, variable declaration, branch circulation and the like of programmers through coding, and finally realizes design effects, wherein IDE tools such as visual studio, eclipse and the like support conventional coding, compiling, testing and debugging functions. Some visual platform systems are also provided, which take a flow chart as a main body, and realize visual programming, such as general component programming, children building block programming and the like, by dragging program blocks. Both are mainly faced with programmers, and the programmers are required to process all programming details of the system, so that when page programming is involved, UI designers or testers are required to detect work results, more communication is needed in work, and the work efficiency is reduced.
Disclosure of Invention
The application provides a visual programming method of a page, which aims to solve the problem that programmers consume too much time in the beautifying design of static pages in the page programming process, and achieve the effect of improving efficiency:
displaying thumbnail images of a plurality of preset pages to be configured;
selecting a target to-be-configured page according to the thumbnail, wherein the target to-be-configured page comprises a fixed function area and one or more to-be-configured function areas;
the target page to be configured is displayed in an enlarged mode, and meanwhile, a code editing window corresponding to the target page to be configured is displayed, wherein the code editing window comprises an uneditable area and an editable area, and the uneditable area displays a fixed code corresponding to the fixed function area and one or more function comments corresponding to the function area to be configured;
receiving a first function code input from the editable area based on the one or more function annotations, the first function code for implementing a function of the function area to be configured;
and executing the fixed code and the first function code of the code editing window to generate a target page corresponding to the target page to be configured.
The application also provides a visual programming device which comprises a display module, a display module and a display module, wherein the display module is used for displaying the thumbnail of the preset plurality of pages to be configured;
the selection module is used for selecting a target page to be configured according to the thumbnail, wherein the target page to be configured comprises a fixed function area and one or more function areas to be configured;
the display module is used for displaying the target page to be configured in an enlarged manner, and displaying a code editing window corresponding to the target page to be configured, wherein the code editing window comprises an uneditable area and an editable area, and the uneditable area displays a fixed code corresponding to the fixed function area and one or more function comments corresponding to the function area to be configured;
a code writing module for receiving a first function code input from the editable area based on the one or more function notes, the first function code for implementing a function of the function area to be configured;
and the compiling module is used for executing the fixed code and the first functional code of the code editing window to generate a target page corresponding to the target page to be configured.
The application also provides a server comprising one or more processors;
a storage means for storing one or more programs;
the one or more programs, when executed by the one or more processors, enable the one or more processors to implement the page visualization programming method as described in any one of the preceding claims.
The present application also provides a computer readable storage medium having stored thereon a computer program which when executed by a processor implements a page visualization programming method as described in any of the above.
According to the method, the page to be configured with a fixed style is manufactured in advance, and meanwhile, annotation and annotation are carried out in the existing codes, so that a software engineer can save time for configuring the page, quickly know own work content, concentrate on realizing the page function, and improve the work efficiency.
Drawings
FIG. 1 is a flow chart of a page visualized programming method according to a first embodiment of the application.
FIG. 2 is a flow chart of a method for programming a page in accordance with an alternative embodiment of the present application;
FIG. 3 is a flow chart of a page visualized programming method according to a second embodiment of the application.
FIG. 4 is a flow chart of a page visualized programming method according to a second alternative embodiment of the application.
FIG. 5 is a block diagram of a page view programming apparatus according to a third embodiment of the present application.
FIG. 6 is a block diagram of a page visualization programming device according to a third alternative embodiment of the present application.
Fig. 7 is a schematic structural diagram of a page visual programming server according to a fourth embodiment of the present application.
Detailed Description
The application is described in further detail below with reference to the drawings and examples. It is to be understood that the specific embodiments described herein are merely illustrative of the application and are not limiting thereof. It should be further noted that, for convenience of description, only some, but not all of the structures related to the present application are shown in the drawings.
Before discussing exemplary embodiments in more detail, it should be mentioned that some exemplary embodiments are described as processes or methods depicted as flowcharts. Although a flowchart depicts steps as a sequential process, many of the steps may be implemented in parallel, concurrently, or with other steps. Furthermore, the order of the steps may be rearranged. The process may be terminated when its operations are completed, but may have additional steps not included in the figures. The processes may correspond to methods, functions, procedures, subroutines, and the like.
Furthermore, the terms "first," "second," and the like, may be used herein to describe various directions, acts, steps, or elements, etc., but these directions, acts, steps, or elements are not limited by these terms. These terms are only used to distinguish one direction, action, step or element from another direction, action, step or element. For example, the first speed difference may be a second speed difference, and similarly, the second speed difference may be the first speed difference without departing from the scope of the present application. Both the first speed difference and the second speed difference are speed differences, but they are not the same speed difference. The terms "first," "second," and the like, are not to be construed as indicating or implying a relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defining "a first" or "a second" may explicitly or implicitly include one or more such feature. In the description of the present application, "plurality", "batch" means at least two, for example, two, three, etc., unless specifically defined otherwise.
Example 1
As shown in fig. 1, the embodiment discloses a page visual programming method, which includes the following steps:
s110, displaying thumbnail images of a plurality of preset pages to be configured;
in this step, the page to be configured is a semi-finished product web page which is previously manufactured and uploaded by the UI designer, and the semi-finished product web page has a fixed style characteristic, specifically includes logo, background, edge, ground tint, separator, system title, menu field title and other contents, but displays the area which needs to be further encoded by the software engineer for data information, dynamic area and the like as an unconfigured state.
In a working platform, in order to facilitate a programmer to quickly select a page to be configured which needs to be encoded at present, a platform working area will first display thumbnail images of a plurality of preset pages to be configured. Optionally, the working area may display multiple thumbnails at the same time in a tiled manner, or may display the thumbnails in turn using modes such as page turning, sliding, covering, etc.; optionally, the workspace may determine a display order of the plurality of pages to be configured and/or a size of the thumbnail according to a priority set when the user uploads the pages.
As shown in fig. 2, in an alternative embodiment, step S110 further includes:
s111, receiving a plurality of pages to be configured uploaded by a user and codes to be edited corresponding to the plurality of pages to be configured, wherein the codes to be edited comprise one or more functional comments and fixed codes;
the user also needs to execute the making process before uploading the page to be configured: the art designer designs a plurality of plane patterns of the pages to be configured, wherein the plane patterns comprise logo, background, edge, shading, separator and other contents of the fixed functional area, each page has a plurality of layouts, and the layouts are the size and arrangement mode of the fixed functional area and the area of the functional area to be configured on the page to be configured. Optionally, functional comments are also made on different areas to be configured of each page template, wherein the functional comments refer to the UI designer annotating the comments in the code writing. Optionally, visual annotations can be made on each page to be configured according to the functional annotations.
The UI designer uses programming language to realize the plane pattern of the art designer design, which is used for distinguishing the fixed function area and the function area to be configured, the fixed function area can not be modified by the software engineer after the manufacture is finished, the function area to be configured is unfinished, and the software engineer can modify the function area by inputting codes.
And after the manufacture is finished, packing and compressing a plurality of pages to be configured, and uploading the pages to a system for storage.
And S112, after receiving a system login instruction of a user, displaying the thumbnail of a plurality of preset pages to be configured.
In this embodiment, the system may operate on a PC or mobile terminal. After receiving login information of a user, the system is started, and then a plurality of preset pages to be configured are displayed. The user can select a target page to be configured from a plurality of displayed pages to be configured according to the need, or select to close a template display page, and open a blank editing area for configuration.
S120, selecting a target page to be configured according to the thumbnail, wherein the target page to be configured comprises a fixed function area and one or more function areas to be configured;
in the step, a platform acquires a selection instruction of a user, and a target page to be configured is selected from a plurality of thumbnails. Optionally, the selection instruction of the user may be a drag instruction, drag the target page to be configured of the display area of the working platform to the operation area according to the drag track, or may be a click instruction, and select the chart to be configured according to the pressure of the touch screen or the click of the mouse, so that the display area of the working platform jumps to the operation area, where the user selection instruction includes but is not limited to the above two instructions.
The target to-be-configured page comprises a fixed function area and one or more to-be-configured function areas, wherein the fixed function area is a configured page area, and specifically comprises a logo, a background, an edge, a shading, a separator, a system title, a menu field title and other non-changeable parts, the to-be-configured function area is one or more, and needs a software engineer to further encode and display the to-be-configured function area in an unconfigured state, and the to-be-configured area comprises: based on a graph and/or a dynamic image of an external data source. The position, size, style, etc. of the area to be configured on the page to be configured are fixed.
S130, magnifying and displaying the target page to be configured, and displaying a code editing window corresponding to the target page to be configured, wherein the code editing window comprises an uneditable area and an editable area, and the uneditable area displays a fixed code corresponding to the fixed function area and one or more function comments corresponding to the function area to be configured;
as shown in the foregoing, the selection instruction of the user may be a drag instruction, drag the target page to be configured of the display area of the working platform to the operation area according to the drag track, or may be a click instruction, and select the chart to be configured according to the pressure of the touch screen or the click of the mouse, so that the display area of the working platform jumps to the operation area, where the user selection instruction includes but is not limited to the above two instructions. In the step, after a target page to be configured of a display area of a working platform is dragged to an operation area according to a dragging track, the operation area can enlarge and display the target page to be configured; or according to the point selection instruction, selecting the chart to be configured according to the pressure of the touch screen or the click of the mouse, so that the display area of the working platform is jumped to the operation area, and the chart to be configured is enlarged and displayed in the operation area.
In the process of webpage design and development, a UI designer can use CGI, ASP, ASP.NET, PHP, script, javaScript, VBScript, perl, python, coldFusion, java, JSP, XML and other programming languages to realize, so that code scripts corresponding to the selected target to-be-configured pages are displayed in a code editing window. Since one or more charts to be configured for binding the content such as the data source are reserved in the steps, correspondingly, the code script reserves the code to be supplemented and also comprises one or more functional comments. The function annotation enables a software engineer to quickly locate a position where a code needs to be supplemented, and meanwhile, the software engineer can quickly know functions and requirements of a chart to be configured, so that invalid communication in a page configuration process is prevented, and efficiency is prevented from being influenced.
And displaying the fixed codes corresponding to the fixed function areas and one or more function comments corresponding to the function areas to be configured in the non-editable area of the code editing window. Illustratively, the non-editable area and the editable area may be two display areas separated by a code editing window, with the fixed code and the functional annotation displayed on one side and the blank area of the inputtable code content displayed on the other side; the code script may be one area with non-editable code, fixed code and annotation part, non-editable area and editable area reserved for new input code.
As shown in fig. 2, in an alternative embodiment, step S130 further includes:
s131, displaying the function comments corresponding to the selected function area to be configured in a code editing window according to the instruction of selecting the function area to be configured, which is input to the target page to be configured by a user.
S140, receiving a first function code input from the editable area based on the one or more function comments, wherein the first function code is used for realizing the functions of the function area to be configured;
in the step, a user knows the requirement of a UI designer on a region to be configured when designing and making a page according to the function annotation, and if the type of a database to be bound, the dynamic image effect to be achieved and the like are required, code writing work is carried out in an editable region so as to realize the function effect required to be achieved by the region to be configured.
S150, executing the fixed codes and the first function codes of the code editing window to generate a target page corresponding to the target page to be configured.
In this step, the first function code of step S140 and the original fixed code are combined to form a complete script code of the target page, and after receiving a compiling code instruction from the user, the complete script code is compiled to generate the target page. The target page comprises complete data functions, dynamic images and other functions.
According to the technical scheme, the page to be configured with the fixed style is manufactured in advance, meanwhile, annotation and annotation are carried out in the existing codes, so that a software engineer can save time for configuring the page, quickly know own work content, concentrate on realizing the page function, and improve the work efficiency.
Example two
Fig. 3 is a flowchart of a page visualization method according to a second embodiment of the present application, where, based on the first embodiment, a step of modifying a page to be configured according to a received user instruction is preferably added, so that a user can modify the page to be configured conveniently. The method comprises the following steps:
s210, displaying thumbnail images of a plurality of preset pages to be configured;
s220, selecting a target page to be configured according to the thumbnail, wherein the target page to be configured comprises a fixed function area and one or more function areas to be configured;
s230, displaying the target page to be configured in an enlarged manner, and displaying a code editing window corresponding to the target page to be configured, wherein the code editing window comprises an uneditable area and an editable area, and the uneditable area displays a fixed code corresponding to the fixed function area and one or more function comments corresponding to the function area to be configured;
s240, receiving a first function code input from the editable area based on the one or more function notes, wherein the first function code is used for realizing the functions of the function area to be configured;
s250, executing the fixed codes and the first function codes of the code editing window to generate a target page corresponding to the target page to be configured.
S260, judging whether the target page meets the user requirement according to the instruction input by the user;
after the target page is generated, the system receives a preview instruction input by the user, previews the target page, if the preview effect meets the user expectation, step S270 is executed, and if not, the target page needs to be modified, step S280 is executed.
S270, if a page confirmation instruction input by a user is received, storing and issuing the target page;
and if the page previews are in accordance with the expectations, the user inputs a page confirmation instruction through the mobile terminal or the PC end, the system stores the target page, and the target page is issued online, so that other users can access the page conveniently. Optionally, after the system saves and issues the target page, the system can also set the access mode of the target page according to the needs, such as disclosure, password access or limiting the number of people accessing.
As shown in fig. 4, in an alternative embodiment, step S270 further includes:
s271: and storing the fixed code and the first function code corresponding to the target page.
In the step, after the target page is confirmed, the stored code can be conveniently referred to and used in the subsequent operation of the page.
S280, if a code modification instruction input by a user is received, modifying the first function code.
If not, the system receives a code modification instruction entered by the user, optionally including a re-edit instruction and a reset instruction. When a re-editing instruction of a user is received, the system displays an editable area and a non-editable area, so that the user can modify and/or adjust the editable area on the basis that the code is input into the editable area; when a reset instruction of a user is received, the editable area is displayed as blank, so that the user can write the code again conveniently.
As shown in fig. 4, in another alternative embodiment, step S280 includes:
s281, modifying the first function code of the editable area into a second function code based on a code modification instruction input by a user;
in this step, the second function code refers to a code that can be written newly to the area to be configured function after the editable area is modified by the user.
S282, executing the fixed code and the second function code of the code editing window to generate a second target page corresponding to the target page to be configured;
in the step, the second function code and the original fixed code are combined to form a script code of a second target page, and after a compiling code instruction of a user is received, the script code is compiled, and the second target page is generated. The second target page contains complete data functions, dynamic images and the like. Preferably, after the second target page is generated, the system automatically stores the second target page, the corresponding fixed code and the second function code, and reserves version information for the user in subsequent modification.
S283, judging whether the second target page meets the user requirement according to the instruction input by the user;
after the second target page is finished, the system receives the preview instruction input by the user, previews the second target page, and if the preview effect does not meet the expectation, needs to continuously modify the second function code, and then step S284 is executed.
S284, if a code modification instruction input by a user is received, modifying the second target page;
the system receives a code modification instruction input by a user, modifies the second function code into a third function code, and compiles the fixed code and the third function code to generate a third target page. Preferably, after the third target page is generated, the system automatically stores the third target page, the corresponding fixed code and the third function code, and reserves version information for the user in subsequent modification.
S285, repeatedly executing the steps until a page confirmation instruction input by a user is received, and storing and issuing a target page corresponding to the page confirmation instruction.
After the system receives the code modification instruction input by the user, the system stores the current target page, copies the function code corresponding to the current target page, modifies the current target page according to the code modification instruction of the user, and then receives the instruction information of the user again. And repeatedly executing the steps until the system receives the page confirmation instruction input by the user, indicating that each function of the current target page meets the user requirement, storing the target page corresponding to the page confirmation instruction, and issuing the target page.
The technical scheme of the embodiment adds the step of judging whether the generated target page meets the requirements of clients, so that the functional codes can be conveniently modified, and the efficiency of modifying the target page is improved. The embodiment of the application simultaneously saves the functional code version information modified each time, thereby realizing the effect of facilitating users to review historical versions at any time.
Example III
Fig. 5 is a schematic diagram of a page visual programming device according to an embodiment of the present application, including the following modules:
the display module 301 is configured to display thumbnails of a plurality of preset pages to be configured;
a selection module 302, configured to select a target to-be-configured page according to the thumbnail, where the target to-be-configured page includes a fixed function area and one or more to-be-configured function areas;
the display module 303 is used for displaying the target page to be configured in an enlarged manner, and displaying a code editing window corresponding to the target page to be configured, wherein the code editing window comprises an uneditable area and an editable area, and the uneditable area displays a fixed code corresponding to the fixed function area and one or more function comments corresponding to the function area to be configured;
a code writing module 304 for receiving a first function code input from the editable area based on the one or more function notes, the first function code being for implementing a function of the function area to be configured;
and the compiling module 305 is configured to execute the fixed code and the first function code of the code editing window to generate a target page corresponding to the target page to be configured.
As shown in fig. 6, in an alternative embodiment, the apparatus further comprises:
the storage module 306 is configured to receive a plurality of pages to be configured and codes to be edited, which are uploaded by a user and correspond to the plurality of pages to be configured, wherein the codes to be edited include one or more functional comments and fixed codes;
in this alternative embodiment, the display module 301 is configured to display thumbnail images of a plurality of preset pages to be configured after receiving a system login instruction of a user.
In another alternative embodiment, the apparatus further comprises:
code positioning module 307: and displaying the function comments corresponding to the selected function areas to be configured on the code editing window according to the instruction of selecting the function areas to be configured, which is input by a user to the target page to be configured, after the target page to be configured is displayed in an enlarged mode and the code editing window corresponding to the target page to be configured is displayed.
In another alternative embodiment, the apparatus further comprises:
the judgment module 308: the target page is used for judging whether the target page meets the user requirements according to the instruction input by the user;
logic block 309: if a page confirmation instruction input by a user is received, storing and issuing the target page; and if a code modification instruction input by a user is received, modifying the first function code.
Further comprises:
modification module 310: the code modification instruction is used for modifying the first function code of the editable area into the second function code based on the code modification instruction input by the user;
the compiling module 305 in this alternative embodiment is configured to execute the fixed code and the second function code of the code editing window to generate a second target page corresponding to the target page to be configured;
the judging module 308 is configured to judge whether the second target page meets a user requirement according to an instruction input by a user;
the modification module 310 is configured to modify the second target page if a code modification instruction input by a user is received;
the circulation module 311: and repeatedly executing the steps until a page confirmation instruction input by a user is received, and storing and issuing a target page corresponding to the page confirmation instruction.
The page visual programming device provided by the embodiment of the application can execute the page visual programming method provided by any embodiment of the application, and has the corresponding functional modules and beneficial effects of the execution method.
Example IV
FIG. 7 is a schematic diagram of a page visual programming server according to an embodiment of the present application, and as shown in the drawing, the server includes a processor 40, a memory 41, an input device 42 and an output device 43; the number of processors 40 in the server may be one or more, one processor 40 being shown as an example; the processor 40, memory 41, input means 42 and output means 43 in the device/terminal/server may be connected by a bus or other means, in fig. 7 by way of example.
The memory 41 is used as a computer readable storage medium for storing software programs, computer executable programs, and modules, such as program instructions/modules (e.g., the presentation module 301 and the selection module 302 in the page visualization programming device, etc.) corresponding to the theme update method in the embodiment of the present application. The processor 40 performs various functional applications of the device/terminal/server and data processing, i.e., implements the above-described page visualization programming method, by running software programs, instructions, and modules stored in the memory 41.
The memory 41 may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, at least one application program required for functions; the storage data area may store data created according to the use of the terminal, etc. In addition, memory 41 may include high-speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other non-volatile solid-state storage device. In some examples, memory 41 may further include memory located remotely from processor 40, which may be connected to the device/terminal/server via a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.
The input means 42 may be used to receive entered numeric or character information and to generate key signal inputs related to user settings of the device/terminal/server and function control. The output means 43 may comprise a display device such as a display screen.
The page visual programming server provided by the embodiment of the application can execute the page visual programming method provided by any embodiment of the application, and has the corresponding functional modules and beneficial effects of the execution method.
Example five
The embodiment of the present application also provides a computer readable storage medium having stored thereon a computer program which when executed by a processor implements a page visualization programming method as provided by any embodiment of the present application, the method may include:
displaying thumbnail images of a plurality of preset pages to be configured;
selecting a target to-be-configured page according to the thumbnail, wherein the target to-be-configured page comprises a fixed function area and one or more to-be-configured function areas;
the target page to be configured is displayed in an enlarged mode, and meanwhile, a code editing window corresponding to the target page to be configured is displayed, wherein the code editing window comprises an uneditable area and an editable area, and the uneditable area displays a fixed code corresponding to the fixed function area and one or more function comments corresponding to the function area to be configured;
receiving a first function code input from the editable area based on the one or more function annotations, the first function code for implementing a function of the function area to be configured;
and executing the fixed code and the first function code of the code editing window to generate a target page corresponding to the target page to be configured.
The computer-readable storage media of embodiments of the present application may take the form of any combination of one or more computer-readable media. The computer readable medium may be a computer readable signal medium or a computer readable storage medium. The computer readable storage medium can be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of the computer-readable storage medium would include the following: an electrical connection having one or more wires, a portable computer diskette, 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. In this document, a computer 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 computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, either in baseband or as part of a carrier wave. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A computer readable signal medium may also be any computer readable medium that is not a computer 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 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.
Computer program code for carrying out operations of the present application may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, smalltalk, C ++ 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 computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or terminal. In the case of a remote computer, the remote computer may be connected to the user's computer through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to an external computer (for example, through the Internet using an Internet service provider).
According to the embodiment of the application, the page to be configured with a fixed style is manufactured in advance, and meanwhile, the annotation and the annotation are carried out in the existing codes, so that a software engineer can save the time for configuring the page, quickly know the working content of the software engineer, concentrate on realizing the page function, and improve the working efficiency.
Note that the above is only a preferred embodiment of the present application and the technical principle applied. It will be understood by those skilled in the art that the present application is not limited to the particular embodiments described herein, but is capable of various obvious changes, rearrangements and substitutions as will now become apparent to those skilled in the art without departing from the scope of the application. Therefore, while the application has been described in connection with the above embodiments, the application is not limited to the embodiments, but may be embodied in many other equivalent forms without departing from the spirit or scope of the application, which is set forth in the following claims.
Claims (9)
1. A method of page visualization programming, comprising:
displaying thumbnail images of a plurality of preset pages to be configured; the page to be configured is a webpage of a semi-finished product which is manufactured and uploaded by a UI designer in advance;
the displaying the thumbnail of the preset plurality of pages to be configured comprises the following steps: determining the display sequence of the plurality of pages to be configured and/or the size of the thumbnail based on the preset priority;
selecting a target to-be-configured page according to the thumbnail, wherein the target to-be-configured page comprises a fixed function area and one or more to-be-configured function areas; the function area to be configured comprises: charts and/or dynamic images based on external data sources;
the target page to be configured is displayed in an enlarged mode, and meanwhile, a code editing window corresponding to the target page to be configured is displayed, wherein the code editing window comprises an uneditable area and an editable area, and the uneditable area displays a fixed code corresponding to the fixed function area and one or more function comments corresponding to the function area to be configured;
receiving a first function code input from the editable area based on the one or more function annotations, the first function code for implementing a function of the function area to be configured;
and executing the fixed code and the first function code of the code editing window to generate a target page corresponding to the target page to be configured.
2. The method for visual programming of pages according to claim 1, wherein the displaying the thumbnail of the preset plurality of pages to be configured comprises:
receiving a plurality of pages to be configured and codes to be edited, which are uploaded by a user and correspond to the pages to be configured, wherein the codes to be edited comprise one or more functional comments and fixed codes;
and after receiving a system login instruction of a user, displaying the thumbnail of a plurality of preset pages to be configured.
3. The page visual programming method according to claim 1, further comprising, after said magnifying the target page to be configured and displaying a code editing window corresponding to the target page to be configured at the same time:
and displaying the function comments corresponding to the selected function area to be configured in a code editing window according to the instruction of selecting the function area to be configured, which is input to the target page to be configured by a user.
4. The page visualization programming method of claim 1, further comprising, after the executing the fixed code and the first function code of the code editing window to generate a target page corresponding to the target page to be configured:
judging whether the target page meets the user requirement according to the instruction input by the user;
if a page confirmation instruction input by a user is received, storing and issuing the target page;
and if a code modification instruction input by a user is received, modifying the first function code.
5. The method for visualizing a programming as in claim 4, further comprising, after said saving and publishing said target page:
and storing the fixed code and the first function code corresponding to the target page.
6. The page visualization programming method of claim 4, wherein the modifying the first function code comprises:
modifying the first function code of the editable area to a second function code based on a code modification instruction input by a user;
executing the fixed code and the second function code of the code editing window to generate a second target page corresponding to the target page to be configured;
judging whether the second target page meets the user requirement according to the instruction input by the user;
if a code modification instruction input by a user is received, modifying the second target page;
and repeatedly executing the steps until a page confirmation instruction input by a user is received, and storing and issuing a target page corresponding to the page confirmation instruction.
7. A visual programming device, comprising:
the display module is used for displaying thumbnail images of a plurality of preset pages to be configured; the page to be configured is a webpage of a semi-finished product which is manufactured and uploaded by a UI designer in advance;
the display module is used for determining the display sequence of the plurality of pages to be configured and/or the size of the thumbnail based on the preset priority;
the selection module is used for selecting a target page to be configured according to the thumbnail, wherein the target page to be configured comprises a fixed function area and one or more function areas to be configured; the function area to be configured comprises: charts and/or dynamic images based on external data sources;
the display module is used for displaying the target page to be configured in an enlarged manner, and displaying a code editing window corresponding to the target page to be configured, wherein the code editing window comprises an uneditable area and an editable area, and the uneditable area displays a fixed code corresponding to the fixed function area and one or more function comments corresponding to the function area to be configured;
a code writing module for receiving a first function code input from the editable area based on the one or more function notes, the first function code for implementing a function of the function area to be configured;
and the compiling module is used for executing the fixed code and the first functional code of the code editing window to generate a target page corresponding to the target page to be configured.
8. A server, comprising:
one or more processors;
a storage means for storing one or more programs;
the one or more programs, when executed by the one or more processors, enable the one or more processors to implement the page visualization programming method of any of claims 1-6.
9. A computer readable storage medium having stored thereon a computer program, which when executed by a processor implements the page visualization programming method of any of claims 1-6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910721499.8A CN110457028B (en) | 2019-08-06 | 2019-08-06 | Page visual programming method, device, server and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910721499.8A CN110457028B (en) | 2019-08-06 | 2019-08-06 | Page visual programming method, device, server and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110457028A CN110457028A (en) | 2019-11-15 |
| CN110457028B true CN110457028B (en) | 2023-09-01 |
Family
ID=68485075
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910721499.8A Active CN110457028B (en) | 2019-08-06 | 2019-08-06 | Page visual programming method, device, server and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110457028B (en) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111026395B (en) * | 2019-12-09 | 2021-01-15 | 苏州精易会信息技术有限公司 | Multi-page interaction method, device, terminal and storage medium based on building block programming |
| CN112753013A (en) * | 2019-12-23 | 2021-05-04 | 深圳市大疆创新科技有限公司 | Movable platform control method, control terminal, movable platform and storage medium |
| CN117891368B (en) * | 2024-03-18 | 2024-05-14 | 成都融见软件科技有限公司 | Code positioning method, electronic equipment and storage medium |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104049978A (en) * | 2014-06-27 | 2014-09-17 | 北京思特奇信息技术股份有限公司 | Method and system for achieving visualized edition and combination of codes |
| CN106776334A (en) * | 2016-12-28 | 2017-05-31 | 北京奇虎科技有限公司 | Based on annotation generation method of test example and device |
| CN108345456A (en) * | 2018-03-07 | 2018-07-31 | 平安普惠企业管理有限公司 | Page code generation method, device, computer equipment and storage medium |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102479224A (en) * | 2010-11-23 | 2012-05-30 | 腾讯科技（深圳）有限公司 | Application webpage editing method and application webpage editing device |
-
2019
- 2019-08-06 CN CN201910721499.8A patent/CN110457028B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104049978A (en) * | 2014-06-27 | 2014-09-17 | 北京思特奇信息技术股份有限公司 | Method and system for achieving visualized edition and combination of codes |
| CN106776334A (en) * | 2016-12-28 | 2017-05-31 | 北京奇虎科技有限公司 | Based on annotation generation method of test example and device |
| CN108345456A (en) * | 2018-03-07 | 2018-07-31 | 平安普惠企业管理有限公司 | Page code generation method, device, computer equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110457028A (en) | 2019-11-15 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110457028B (en) | Page visual programming method, device, server and storage medium | |
| CN105653644B (en) | A kind of page constructor and page building method | |
| CN110362302A (en) | Configuration method, device, server and the storage medium of big data visualization interface | |
| Falck et al. | Freecad [How-To] | |
| CN112540763A (en) | Front-end page generation method and device, platform equipment and storage medium | |
| US10740073B2 (en) | Method for creating prototype | |
| JP7420911B2 (en) | Systems and methods for smart interactions between website components | |
| CN101198957A (en) | Method and device for generation of a parametric model associated with a 3d geometry | |
| US9104527B2 (en) | Automatically generated style rules for page design | |
| CN112306481A (en) | Code display method, system, device and storage medium for graphical programming scene | |
| US20070038947A1 (en) | Method and device for generation of a parametric model associated with a 3D geometry | |
| US20240220218A1 (en) | Design tool with multi-edit function | |
| US20210096700A1 (en) | Preferential automation view curation | |
| US20200174757A1 (en) | Application development preview tool and methods | |
| US8667406B1 (en) | Artboard creation and preview | |
| CN117215556A (en) | Modularized page rapid construction method, system, equipment and medium | |
| CN114238072A (en) | HIL requirement design method, HIL requirement design device, computer equipment and storage medium | |
| CN104516860A (en) | Methods and systems for selecting text within a displayed document | |
| CN115249284A (en) | Visual view construction method and device | |
| Tching et al. | IM-sgi: an interface model for shape grammar implementations | |
| CN110704537A (en) | Intelligent contract generation method, device, equipment and storage medium | |
| US20230297208A1 (en) | Collaborative widget state synchronization | |
| AU2022246444B2 (en) | System and method for smart interaction between website components | |
| Reich et al. | Deep Nodes-creating 3D objects with node-trees | |
| Mannadiar et al. | AToMPM User’s Manual |
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 | ||
| CB02 | Change of applicant information |
Address after: 300308 402, building 7, Zhongxing Industrial base, No.2, East 7th Road, Tianjin pilot free trade zone (Airport Economic Zone), Binhai New Area, Tianjin Applicant after: Softcom smart Information Technology Co.,Ltd. Address before: 300308 402, building 7, Zhongxing Industrial base, No.2, East 7th Road, Tianjin pilot free trade zone (Airport Economic Zone), Binhai New Area, Tianjin Applicant before: ISOFTSTONE INFORMATION TECHNOLOGY Co.,Ltd. |
|
| CB02 | Change of applicant information | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |