CN114064016A - Method and device for generating page code based on drag of code editor and electronic equipment - Google Patents
Method and device for generating page code based on drag of code editor and electronic equipment Download PDFInfo
- Publication number
- CN114064016A CN114064016A CN202111406406.6A CN202111406406A CN114064016A CN 114064016 A CN114064016 A CN 114064016A CN 202111406406 A CN202111406406 A CN 202111406406A CN 114064016 A CN114064016 A CN 114064016A
- Authority
- CN
- China
- Prior art keywords
- page
- code
- drag
- generating
- dragging
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/33—Intelligent editors
-
- 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
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 provides a method and a device for generating a page code based on code editor dragging, and electronic equipment, wherein the method comprises the following steps: the code editor is provided with an automatic coding plug-in, and responds to a file new request to create a software program file; responding to a triggering instruction of the software program file, and expanding a function menu; according to a selection instruction of an automatic coding function in the function menu, a webpage view panel is created, and a dragging page is opened; and generating a code statement in response to the drag operation completed on the drag page. The code generated by the method can be automatically imported into the project, and personalized modification is supported, so that secondary modification of the page is facilitated.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to a method and an apparatus for generating a page code based on dragging of a source code editor, and an electronic device.
Background
The method for generating front-end webpage codes through visual dragging is a trend of web development, and has the advantages that elements can be dragged rapidly, so that the front-end webpage can be generated automatically, and development efficiency is improved. The current popular mode of visual dragging is to set up a site, drag elements to set up a page after access, and have two modes of accessing the existing project after setting up the page, wherein the first mode is to download codes and then import the codes into the project, and the second mode is to generate a page configuration file and put the page configuration file to a server side, then access an application and then load the configuration file. The above two methods have the defects that: firstly, secondary operation is needed, and the code is subjected to secondary operation after dragging; secondly, individuation is not supported, and the generated page does not support modification; and thirdly, editing is not supported, and the generated page code does not support secondary modification.
Disclosure of Invention
The embodiment of the application provides a method for generating a page code based on drag of a code editor, which is used for simplifying operation, supporting personalized modification and facilitating secondary modification of a page.
The embodiment of the application provides a method for generating a page code based on drag of a code editor, which comprises the following steps:
responding to a file new request, and creating a software program file;
responding to a triggering instruction of the software program file, and expanding a function menu;
according to a selection instruction of an automatic coding function in the function menu, a webpage view panel is created, and a dragging page is opened;
and generating a code statement in response to the drag operation completed on the drag page.
In an embodiment, before the generating a code statement in response to the drag operation completed on the drag page, the method further includes:
judging whether the dragged page is opened or not;
and if the page is determined to be opened, acquiring page content and displaying the page content in the dragging page.
In one embodiment, before creating the software program file in response to the file new request, the method includes:
installing an automatically encoding plug-in into the code editor.
In an embodiment, after the installing the automatically encoding plug-in into the code editor, the method further comprises:
registering a transaction for opening the function menu by the trigger instruction, the function menu including an automatic coding function.
In an embodiment, after the installing the automatically encoding plug-in into the code editor, the method further comprises:
and configuring a dragging page address through the automatic coding plug-in.
In one embodiment, the opening a drag page includes:
and opening the drag page according to the configured drag page address.
In an embodiment, after the generating a code statement in response to the drag operation completed on the drag page, the method further includes:
and saving the code statements generated by the drag page into a local file.
The embodiment of the present application further provides a device for generating a page code based on drag of a code editor, including:
the file creating module is used for responding to a file new request and creating a software program file;
the data processing module is used for responding to a trigger instruction of the software program file and expanding a function menu;
the page dragging module is used for creating a webpage view panel and opening a dragging page according to a selection instruction of an automatic coding function in the function menu;
and the code statement generating module is used for responding to the dragging operation completed on the dragging page and generating the code statement.
An embodiment of the present application further provides an electronic device, where the electronic device includes:
a processor;
a memory for storing processor-executable instructions;
wherein the processor is configured to execute the method for generating page code based on drag of the code editor.
The embodiment of the application also provides a computer-readable storage medium, wherein the storage medium stores a computer program, and the computer program can be executed by a processor to complete the method for generating the page code based on the drag of the code editor.
According to the technical scheme provided by the embodiment of the application, the code editor is provided with the automatic coding plug-in, the software program file is created by responding to the file new creation request, the function menu is expanded by responding to the trigger instruction of the software program file, the webpage view panel is created and the drag page is opened according to the selection instruction of the automatic coding function in the function menu, and finally the code sentence is generated by responding to the drag operation completed on the drag page, so that the generated code can be automatically imported into the project, the personalized modification is supported, and the secondary modification of the page is facilitated.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required to be used in the embodiments of the present application will be briefly described below.
Fig. 1 is a schematic structural diagram of an electronic device according to an embodiment of the present application;
FIG. 2 is a flowchart illustrating a method for generating page code based on drag of a code editor according to an embodiment of the present application;
FIG. 3 is a flowchart illustrating a method for generating page code based on drag of a code editor according to an embodiment of the present application;
FIG. 4 is a block diagram illustrating an apparatus for generating page code based on drag of a code editor according to an embodiment of the present application;
FIG. 5 is a diagram illustrating a page effect of generating page code based on drag of a code editor according to an embodiment of the present application;
fig. 6 is a diagram illustrating a page effect of generating page codes based on drag of a code editor according to an embodiment of the present application.
Detailed Description
The technical solutions in the embodiments of the present application will be described below with reference to the drawings in the embodiments of the present application.
Like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures. Meanwhile, in the description of the present application, the terms "first", "second", and the like are used only for distinguishing the description, and are not to be construed as indicating or implying relative importance.
When a page code is generated based on drag of a code editor, firstly, an automatic coding plug-in is installed on the code editor; secondly, the computer responds to a file new building request and creates a software program file; then the computer responds to a triggering instruction of the software program file and expands a function menu; according to a selection instruction of an automatic coding function in the function menu, a webpage view panel is created, and a dragging page is opened; then the computer responds to the dragging operation completed on the dragging page and generates a code statement; and finally, storing the code statements generated by the dragged page into a local file.
Fig. 1 is a schematic structural diagram of an electronic device according to an embodiment of the present application. The electronic equipment can be used for executing the method for generating the page code based on the drag of the code editor provided by the embodiment of the application. As shown in fig. 1, the electronic device 100 includes: one or more processors 102, one or more memories 104 storing processor-executable instructions, wherein the processors 102 are configured to perform a method of generating page code based on code editor dragging provided by embodiments described below herein.
The processor 102 may be a gateway, or may be an intelligent terminal, or may be a device including a Central Processing Unit (CPU), a Graphics Processing Unit (GPU), or other form of processing unit having data processing capability and/or instruction execution capability, and may process data of other components in the electronic device 100, and may control other components in the electronic device 100 to perform desired functions.
The memory 104 may include one or more computer program products that may include various forms of computer-readable storage media, such as volatile memory and/or non-volatile memory. The volatile memory may include, for example, Random Access Memory (RAM), cache memory (cache), and/or the like. The non-volatile memory may include, for example, Read Only Memory (ROM), hard disk, flash memory, etc. One or more computer program instructions may be stored on the computer-readable storage medium and executed by processor 102 to implement the method for generating page code based on code editor drag described below. Various applications and various data, such as various data used and/or generated by the applications, may also be stored in the computer-readable storage medium.
In one embodiment, the electronic device 100 shown in FIG. 1 may also include an input device 106, an output device 108, and a data acquisition device 110, which are interconnected via a bus system 112 and/or other form of connection mechanism (not shown). It should be noted that the components and structure of the electronic device 100 shown in fig. 1 are exemplary only, and not limiting, and the electronic device may have other components and structures as desired.
The input device 106 may be a device used by a user to input instructions and may include one or more of a keyboard, a mouse, a microphone, a touch screen, and the like. The output device 108 may output various information (e.g., images or sounds) to the outside (e.g., a user), and may include one or more of a display, a speaker, and the like. The data acquisition device 110 may acquire an image of a subject and store the acquired image in the memory 104 for use by other components. Illustratively, the data acquisition device 110 may be a camera.
In an embodiment, the devices in the example electronic device for implementing the method for generating page code based on drag of code editor of the present application may be integrally disposed, or may be separately disposed, such as integrally disposing the processor 102, the memory 104, the input device 106 and the output device 108, and separately disposing the data acquisition device 110.
In an embodiment, an example electronic device for implementing the method for generating a page code based on drag of a code editor according to the embodiment of the present application may be implemented as a smart terminal, such as a smart phone, a tablet computer, a smart watch, an in-vehicle device, and the like.
Fig. 2 is a flowchart illustrating a method for generating a page code based on drag of a code editor according to an embodiment of the present application. As shown in fig. 2, the method may include the following steps S201-S204.
Step S201: in response to the file new request, a software program file is created.
And an AutoCode plug-in is installed in the vscode editor, and the computer responds to a file new request and creates a software program file App.
Step S202: and expanding a function menu in response to a triggering instruction of the software program file.
The computer expands the function menu in response to a trigger instruction to the software program file app. Wherein, the function menu includes: open VForm designer, open on the side, open style, display in file explorer, open in integrated terminal, select to compare, open timeline, cut, copy path, copy relative path, rename, and delete.
Step S203: and according to the selection instruction of the automatic coding function in the function menu, creating a webpage view panel and opening a dragging page.
According to a selection instruction of an automatic coding function in the function menu, the computer selects to open the VForm designer by a right key, creates a webpage view panel by a vscode.
Step S204: and generating a code statement in response to the drag operation completed on the drag page.
According to the drag page opened in step S203, the user performs a drag operation on the drag page to complete page drag. The user clicks a save button, the computer sends a message through the vscode.
Fig. 3 is a flowchart illustrating a method for generating a page code based on drag of a code editor according to an embodiment of the present application. As shown in fig. 3, the method may include the following steps S301-S310.
Step S301: installing an automatically encoding plug-in into the code editor.
The automatic coding plug-in AutoCode is installed in a code editor vscode, and the plug-in AutoCode packages the dragging operation into the editor vscode, so that the operation of a user is facilitated.
Step S302: registering a transaction for opening the function menu by the trigger instruction, the function menu including an automatic coding function.
After the automatic coding plug-in AutoCode is installed in the code editor vscode, the item of opening the function menu by a trigger instruction, namely a right-click menu is registered, and the function menu comprises an automatic coding function.
Step S303: and configuring a dragging page address through the automatic coding plug-in.
The computer configures the address of the drag page by automatically encoding the plugin configuration attribute contibutes of the plugin AutoCode.
Step S304: in response to the file new request, a software program file is created. Refer to the description of step S201 in the above embodiments in detail, and are not repeated herein.
Step S305: and expanding a function menu in response to a triggering instruction of the software program file. For details, refer to the description of step S202 in the above embodiment, and are not described herein again.
Step S306: and creating a webpage view panel according to a selection instruction of an automatic coding function in the function menu, and opening the dragging page according to the configured dragging page address.
According to the selection instruction of the automatic coding function in the function menu, namely selecting the first one in the function menu: opening a VForm designer, then creating a webpage view panel by a vscode.
Step S307: judging whether the drag page is determined to be opened or not, and if the drag page is opened, executing the step S308-the step S310; otherwise, the process is ended.
Judging whether a drag page is opened or not by an iframe. Otherwise, the process is ended.
Step S308: and acquiring page content and displaying the page content in the dragging page.
And according to the step S307, if the drag page is opened, acquiring the page content by the fs.
Step S309: and generating a code statement in response to the drag operation completed on the drag page. Refer to the description of step S204 in the above embodiments in detail, and are not repeated here.
Step S310: and saving the code statements generated by the drag page into a local file.
And saving the code statements generated by the dragged page into a local file by using an fs.writeFileSync method, and completing page dragging.
The following is an embodiment of an apparatus that may be used to execute the above-described embodiment of the method for generating page code based on drag of a code editor. For details not disclosed in the embodiments of the apparatus of the present application, please refer to the embodiments of the method for generating page code based on drag of the code editor of the present application.
Fig. 4 is a block diagram illustrating an apparatus for generating page code based on drag of a code editor according to an embodiment of the present application. As shown in fig. 4, the apparatus includes a file creation module 401, a data processing module 402, a page dragging module 403, and a code statement generation module 404.
A file creating module 401, configured to respond to a file new request and create a software program file;
a data processing module 402, configured to expand a function menu in response to a trigger instruction for the software program file;
a page dragging module 403, configured to create a web page view panel and open a dragged page according to a selection instruction for an automatic coding function in the function menu;
and a code statement generating module 404, configured to generate a code statement in response to the drag operation completed on the drag page.
The implementation processes of the functions and actions of each module in the device are specifically described in the implementation processes of the corresponding steps in the method for generating the page code based on the drag of the code editor, and are not described herein again.
In the embodiments provided in the present application, the disclosed apparatus and method can be implemented in other ways. The apparatus embodiments described above are merely illustrative, and for example, the flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of apparatus, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). In some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
In addition, functional modules in the embodiments of the present application may be integrated together to form an independent part, or each module may exist separately, or two or more modules may be integrated to form an independent part.
The functions, if implemented in the form of software functional modules and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present application or portions thereof that substantially contribute to the prior art may be embodied in the form of a software product stored in a storage medium and including instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present application. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and other various media capable of storing program codes.
Claims (10)
1. A method for generating page code based on code editor drag, wherein the code editor has installed an auto-code plug-in, the method comprising:
responding to a file new request, and creating a software program file;
responding to a triggering instruction of the software program file, and expanding a function menu;
according to a selection instruction of an automatic coding function in the function menu, a webpage view panel is created, and a dragging page is opened;
and generating a code statement in response to the drag operation completed on the drag page.
2. The method of claim 1, wherein prior to the generating a code statement in response to the drag operation being completed on the drag page, the method further comprises:
judging whether the dragged page is opened or not;
and if the page is determined to be opened, acquiring page content and displaying the page content in the dragging page.
3. The method of claim 1, wherein prior to said creating software program files in response to a file new request, comprising:
installing an automatically encoding plug-in into the code editor.
4. The method of claim 3, wherein after the installing the automatically encoding plug-in into the code editor, the method further comprises:
registering a transaction for opening the function menu by the trigger instruction, the function menu including an automatic coding function.
5. The method of claim 3, wherein after the installing the automatically encoding plug-in into the code editor, the method further comprises:
and configuring a dragging page address through the automatic coding plug-in.
6. The method of claim 1, wherein opening the drag page comprises:
and opening the drag page according to the configured drag page address.
7. The method of claim 1, wherein after generating the code statement in response to the drag operation being completed on the drag page, the method further comprises:
and saving the code statements generated by the drag page into a local file.
8. An apparatus for generating page code based on code editor drag, comprising:
the file creating module responds to a file new building request and creates a software program file;
the data processing module responds to a trigger instruction of the software program file and expands a function menu;
the page dragging module is used for creating a webpage view panel and opening a dragging page according to a selection instruction of an automatic coding function in the function menu;
and the code statement generating module is used for responding to the dragging operation completed on the dragging page and generating a code statement.
9. An electronic device, characterized in that the electronic device comprises:
a processor;
a memory for storing processor-executable instructions;
wherein the processor is configured to perform the method of generating page code based on code editor drag as claimed in any one of claims 1 to 7.
10. A computer-readable storage medium, wherein the storage medium stores a computer program executable by a processor to perform the method for generating page code based on code editor drag as claimed in any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111406406.6A CN114064016A (en) | 2021-11-24 | 2021-11-24 | Method and device for generating page code based on drag of code editor and electronic equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111406406.6A CN114064016A (en) | 2021-11-24 | 2021-11-24 | Method and device for generating page code based on drag of code editor and electronic equipment |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114064016A true CN114064016A (en) | 2022-02-18 |
Family
ID=80276100
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111406406.6A Pending CN114064016A (en) | 2021-11-24 | 2021-11-24 | Method and device for generating page code based on drag of code editor and electronic equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114064016A (en) |
-
2021
- 2021-11-24 CN CN202111406406.6A patent/CN114064016A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102693280B (en) | Webpage browsing method, WebApp framework, method and device for executing JavaScript, and mobile terminal | |
| WO2018040913A1 (en) | Interface display method and device | |
| US20130036196A1 (en) | Method and system for publishing template-based content | |
| CN111796821A (en) | Page updating method and device | |
| WO2018130085A1 (en) | Method and apparatus for page presentation | |
| CN114816401B (en) | Interface element positioning method, electronic equipment and storage medium | |
| CN110704053B (en) | Style information processing method and device | |
| WO2023040443A1 (en) | Method and device for drawing canvas | |
| CN107832052A (en) | Show the method, apparatus and storage medium and electronic equipment of preview page | |
| WO2024011899A1 (en) | Widget loading method and apparatus, device, and storage medium | |
| CN113655999A (en) | Rendering method, device and equipment of page control and storage medium | |
| CN112506854A (en) | Method, device, equipment and medium for storing page template file and generating page | |
| EP3654175A1 (en) | Terminal device, ui extension method, and ui extension program | |
| CN114020197A (en) | Cross-application message processing method, electronic device and readable storage medium | |
| CN111737614B (en) | Page display method, page display device, electronic equipment and storage medium | |
| CN112102446A (en) | Animation processing method and device and computer readable storage medium | |
| WO2013109858A1 (en) | Design canvas | |
| CN110020361A (en) | A kind of web page processing method, device, storage medium and electronic equipment | |
| CN104834715A (en) | Website generating method and system based on components and container | |
| CN111782999B (en) | Page display method, device, equipment and system | |
| CN113076165A (en) | Page checking method and device | |
| CN112783494A (en) | Automatic skeleton screen generation method and device and application page updating method and device | |
| CN114064016A (en) | Method and device for generating page code based on drag of code editor and electronic equipment | |
| CN108021317B (en) | Method and device for screen editing | |
| CN108228836B (en) | Video compatible loading method and device and video component |
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 |