CN111949266B - Webpage generation method and device and electronic equipment - Google Patents
Webpage generation method and device and electronic equipment Download PDFInfo
- Publication number
- CN111949266B CN111949266B CN202010719901.1A CN202010719901A CN111949266B CN 111949266 B CN111949266 B CN 111949266B CN 202010719901 A CN202010719901 A CN 202010719901A CN 111949266 B CN111949266 B CN 111949266B
- Authority
- CN
- China
- Prior art keywords
- component
- data
- content
- instruction
- 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
- 238000000034 method Methods 0.000 title claims abstract description 60
- 238000004590 computer program Methods 0.000 claims description 8
- 238000011161 development Methods 0.000 description 14
- 238000011068 loading method Methods 0.000 description 11
- 238000012986 modification Methods 0.000 description 8
- 230000004048 modification Effects 0.000 description 8
- 238000010586 diagram Methods 0.000 description 6
- 230000004044 response Effects 0.000 description 4
- 238000013479 data entry Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 239000000284 extract Substances 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 238000010276 construction Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 239000003550 marker Substances 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 239000000047 product Substances 0.000 description 1
- 238000005070 sampling Methods 0.000 description 1
- 239000013589 supplement Substances 0.000 description 1
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
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
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)
- Information Transfer Between Computers (AREA)
- Document Processing Apparatus (AREA)
Abstract
The application discloses a webpage generation method, a webpage generation device and electronic equipment, wherein the method comprises the following steps: acquiring a selection instruction of a content component, and setting the content component in a component editing area according to the selection instruction; acquiring data sources of the content components in the component editing area, and extracting component data corresponding to the data sources from a server according to the data sources; responding to the component data editing instruction of the content component, and selecting the component data of each content component in the component editing area according to the component data editing instruction; and responding to a data source editing ending instruction, and generating webpage data according to the component data and the ordering information of each content component in each component editing area so as to enable a browser to load the webpage data to generate a webpage.
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 web page, and an electronic device.
Background
In the prior front-end development, the generation of the webpage mainly describes the style and the content of the webpage by directly writing page codes, generates an HTML file according to the page codes, and loads the HTML file by using a browser to realize the generation of the webpage. However, in the application process, it is found that if the requirements such as page style modification based on user experience are generated, a great deal of modification is often required to be performed on the page code, and great cost is brought. In addition, when a large number of pages need to be modified aiming at the same problem, the modification time is long, the web page style is difficult to update in time, and the front-end development efficiency is reduced.
Disclosure of Invention
The application aims to at least solve one of the technical problems in the prior art and provide a webpage generating method, a webpage generating device, a computer readable storage medium and electronic equipment, which improve the front-end development efficiency in the front-end development process.
The embodiment of the application provides a webpage generating method, which comprises the following steps:
acquiring a selection instruction of a content component, and setting the content component in a component editing area according to the selection instruction;
Acquiring data sources of the content components in the component editing area, and extracting component data corresponding to the data sources from a server according to the data sources;
Responding to the component data editing instruction of the content component, and selecting the component data of each content component in the component editing area according to the component data editing instruction;
And responding to a data source editing ending instruction, and generating webpage data according to the component data and the ordering information of each content component in each component editing area so as to enable a browser to load the webpage data to generate a webpage.
Further, in an embodiment of the present application, the data source includes a configured interface and data, the configured interface includes an interface link and an interface parameter, and the data may include one or more of a button document, text, and a picture link.
Further, the selection instruction includes a position movement instruction of the content component;
the setting of the content component in the component editing area according to the selection instruction comprises the following steps:
Determining the component position of the content component in the component editing area according to the position moving instruction;
Detecting whether the content component set according to the component position is at least partially overlapped with other content components in the component editing area, and performing overlay display according to the hierarchical sequence of each overlapped content component when the content component in the component position is detected to be at least partially overlapped with the other content components.
Further, generating web page data according to the component data and the ordering information of each content component in the component editing area includes:
Generating an html structure of the content assembly according to the ordering information of each content assembly in the assembly editing area, and then writing the assembly data into the html structure and storing the assembly data;
And generating webpage data according to the html structure written in the component data.
Further, in an embodiment of the present application, the method further includes: and acquiring a component generation instruction, matching a corresponding style source according to a component mark in the component generation instruction, and extracting corresponding style data from the server according to the style source to generate the content component.
Further, in the embodiment of the present application, the style source includes size data, picture/video setting data, font setting data, paragraph setting data, dynamic effect setting data, layout content position setting data, and the like of the content component.
Still further, the matching the corresponding style source according to the component mark in the component generating instruction includes:
and after the corresponding component category is selected according to the component mark in the component generation instruction, matching a style source corresponding to the component mark from the component category according to the component mark.
Further, after the obtaining the corresponding component data, the method further includes:
and generating a preview page in real time according to the component data.
Further, the selecting the component data of each content component in the component editing area according to the component data editing instruction includes:
Responding to the data editing instruction to display a data input field of the content component, and selecting component data of the content component according to the data input field;
wherein the data entry fields are used to add, modify and delete the component data.
Further, in an embodiment of the present application, the component data includes one or more of a button document, text, and picture.
Further, an embodiment of the present application provides a web page generating apparatus, including:
The component setting module is used for acquiring a selection instruction of a content component and setting the content component in a component editing area according to the selection instruction;
the data acquisition module is used for acquiring each data source of the content component in the component editing area, and extracting each component data corresponding to each data source from the server according to each data source;
the component editing module is used for responding to the component data editing instruction of the content component and selecting the component data of each content component in the component editing area according to the component data editing instruction;
And the webpage generating module is used for responding to the data source editing ending instruction, generating webpage data according to the component data and the ordering information of the content components in the component editing areas, and loading the webpage data by the browser to generate a webpage.
Further, in an embodiment of the present application, the web page generating apparatus further includes a component generating module, configured to obtain a component generating instruction, and match a corresponding style source according to a component tag in the component generating instruction, so as to extract corresponding style data from the server according to the style source to generate the content component.
Further, an embodiment of the present application provides an electronic device, including: the system comprises a memory, a processor and a computer program stored on the memory and capable of running on the processor, wherein the processor executes the program to realize the webpage generating method according to the embodiment.
Further, an embodiment of the present application provides a computer-readable storage medium storing computer-executable instructions for causing a computer to perform the web page generation method according to the above embodiment.
Compared with the prior art, according to the embodiment, when the content component is set, all corresponding component data are pulled from the server according to all data sources of the webpage component, so that pulling from the server is not needed during subsequent loading, network communication with the server during each data source modification is avoided, modification time is shortened, and front-end development efficiency is improved.
Drawings
The application is further described below with reference to the drawings and examples;
FIG. 1 is an application environment diagram of a web page generation method in one embodiment;
FIG. 2 is a flowchart illustrating a method for generating a web page according to one embodiment;
FIG. 3 is a flowchart of a method for setting content components according to a selection instruction in one embodiment;
FIG. 4 is a flowchart of a method for generating a web page according to another embodiment;
FIG. 5 is a flowchart of a method for generating a web page according to another embodiment;
FIG. 6 is a flowchart of a method for generating a web page according to another embodiment;
FIG. 7 is a block diagram of a web page generating apparatus in one embodiment;
FIG. 8 is a block diagram showing the construction of a web page generating apparatus according to still another embodiment;
FIG. 9 is a block diagram of a computer device in one embodiment.
Detailed Description
Reference will now be made in detail to the present embodiments of the present application, examples of which are illustrated in the accompanying drawings, wherein the accompanying drawings are used to supplement the description of the written description so that one can intuitively and intuitively understand each technical feature and overall technical scheme of the present application, but not to limit the scope of the present application.
As shown in FIG. 1, an application environment diagram of a web page generation method in one embodiment is shown. Referring to fig. 1, the web page generation system includes a terminal 110 and a server 120. The terminal 110 and the server 120 are connected through a network. The terminal 110 may be specifically a desktop terminal 110 or a mobile terminal 110, and the mobile terminal 110 may be specifically at least one of a mobile phone, a tablet computer, a notebook computer, and the like. The server 120 may be implemented as a single server 120 or as a cluster of servers 120 comprising a plurality of servers 120. The user selects a content component through the terminal 110, sets the content component in the component editing area, obtains each data source of the selected content component, extracts each component data from the server 120 according to the data source, selects the component data of the content component in the component editing area, generates web page data according to the component data and the ordering information of the selected content component, and loads the web page data by the browser to generate a web page. The terminal 110 may be a web page user terminal, and is provided with a browser for loading web page data to generate a web page; the terminal 110 may be a web page editing terminal (front-end development terminal) provided with a front-end development environment for generating web page data and executing a web page generation method; the terminal 110 may also be another front-end development terminal, and is provided with a development environment of the content component in the webpage data, for developing the content component and its style.
The webpage generating method provided by the embodiment of the application is described and illustrated in detail through a few specific embodiments.
As shown in FIG. 2, in one embodiment, a web page generation method is provided. The embodiment is mainly exemplified by the method applied to computer equipment. The computer device may specifically be the terminal 110 of fig. 1 described above.
Referring to fig. 2, the web page generating method specifically includes the following steps:
Step S1, acquiring a selection instruction of a content component, and setting the content component in a component editing area according to the selection instruction.
In one embodiment, the selection instruction of the content component may be obtained through a terminal device such as a mobile phone, a notebook computer, and a tablet computer. Different from the fact that the webpage data directly describe webpage content in the related technology, the webpage data in the embodiment of the application records content components, and the content components are formed by assembling each module of the webpage through statistics of commonalities of products in a group by developers and are stored in a server for being called by front-end developers. The types of content components may include text boxes, web page headers, web page footers, sidebars, advertising columns, operator sites, etc., or a combination of permutations of various content.
When setting a content component in the component editing area, it is necessary to select the type of the content component and set the position of the content component. Thus, in one embodiment, the selection instruction includes a position movement instruction of the content component.
Referring to fig. 3, the setting the content component in the component editing area according to the selection instruction includes:
and S11, determining the component position of the content component in the component editing area according to the position moving instruction.
And S12, detecting whether the content component set according to the component position is at least partially overlapped with other content components in the component editing area, and performing overlay display according to the hierarchical sequence of each overlapped content component when detecting that the content component in the component position is at least partially overlapped with the other content components.
When setting the position of the content component, the position of the content component can be set by means of dragging, clicking, pressing a button, setting coordinates, and the like. In the embodiment of the application, when the components are overlapped, the overlay display is performed according to the hierarchical sequence of the components. Wherein the hierarchical order of the components may be modified in the component management list. Through management of the component layers, various page effects can be better realized, and the position relation among the components can be effectively managed.
Step S2, obtaining all data sources of the content components in the component editing area, and extracting all component data corresponding to all the data sources from a server according to all the data sources.
Each content component is provided with a style source and a data source, wherein the style source is a storage address of style data of the content component. Wherein the style source may include size data, picture/video setting data, font setting data, paragraph setting data, dynamic effect setting data, layout content position setting data, etc. of the content component. The data sources may include a configured interface including interface links and interface parameters, and component data that may include one or more of button text, and picture links.
The style data and the content data of the content component are stored on the server, so that the browser can pull the sampling data and the content data from the server in real time according to the style source and the data source when reading the style setting and the data setting of the content component. For pulling corresponding component data according to the data source, only the data source can be selected when the webpage component is set, and the corresponding component data is pulled from the server according to the data source when the webpage component is loaded. However, when the data source is modified, network communication with the server is required, and when the number of times of data source modification is large, the component data pulling mode may cause that component data cannot be acquired or the acquisition rate is slow for a certain time due to network fluctuation, so that the efficiency of generating subsequent webpages is reduced. In the scheme, when the webpage component is set, all corresponding component data are pulled from the server according to all data sources of the webpage component, and when the webpage component is edited, the component data are directly selected without being pulled from the server when the webpage component is loaded. Thereby improving the efficiency of webpage generation.
And step S3, responding to the component data editing instruction of the content component, and selecting the component data of each content component in the component editing area according to the component data editing instruction.
And S4, responding to a data source editing end instruction, and generating webpage data according to the component data and the ordering information of the content components in the component editing areas so as to enable a browser to load the webpage data to generate a webpage.
In one embodiment, the data type of the webpage data is, for example, an HTML file, so that loading and parsing of the webpage data can be achieved without changing a browser, and a webpage is generated. HTML (Hypertext Marked Language), hyperText markup language, is a specification under standard generic markup language. It marks the various parts of the web page to be displayed by means of a marking symbol. HTML web page data itself is a text file that, by adding a marker to the text file, tells the browser how to display the content therein (e.g., how to process text, how to arrange pictures, how to display pictures, etc.). The browser reads the web page data in order and then interprets and displays the marked contents thereof according to the markers. In other embodiments of the present disclosure, the data type of the web page data may also be JavaScript or other data types that can be recognized by the browser without obstacles.
In one embodiment, since the content of the webpage data record is relatively abstract, after the front-end developer sets the style source and the data source of each content component, a preview function can be provided for the front-end developer to check whether the webpage generated by the webpage data accords with the expectations.
In an embodiment of the present application, after the obtaining the corresponding component data, the method further includes:
and generating a preview page in real time according to the component data.
For the generation of the preview interface, the preview page can be generated according to style data and content data of each content component by loading the style data and the content data of each content component according to the style source and the data source of each content component in the component editing area in response to the page preview instruction. The generation of the preview page can be performed after the editing of the webpage data is completed, or can be completed in real time along with the setting of the content component. The preview page can be generated in real time, so that the front-end developer can be helped to obtain the setting and feedback of the content component in time, and the use experience of the front-end developer is improved.
In still another embodiment, for the web page loading manner, the content data and the style data corresponding to the at least one content component may be returned to the browser according to the data source loading request and the style source loading request sent by the browser, so that after the browser determines the web page display code of the content component according to the style data and the content data, the web page may be generated according to the arrangement sequence information of the content component and the web page display code of the content component. The loading method takes a long time. In order to solve the technical problem, referring to fig. 4, the web page generating method specifically includes the following steps:
Step S21, acquiring a selection instruction of a content component, and setting the content component in a component editing area according to the selection instruction. The specific implementation procedure of step S21 is similar to the above embodiment, and will not be repeated.
Step S22, obtaining each data source of the content component in the component editing area, and extracting each component data corresponding to each data source from a server according to each data source. The specific implementation procedure of step S22 is similar to the above embodiment, and will not be repeated.
Step S23, responding to the component data editing instruction of the content component, and selecting the component data of each content component in the component editing area according to the component data editing instruction. The specific implementation procedure of step S23 is similar to the above embodiment, and will not be repeated.
Step S24, responding to a data source editing ending instruction, generating an html structure of a content component according to ordering information of each content component in the component editing area, writing the component data into the html structure and storing the html structure, and generating webpage data according to the html structure written with the component data so as to enable a browser to load the webpage data to generate a webpage.
In the embodiment, by adopting smarty templates, the html structure and style of the component are stored on the webpage data, and the technical problem that the user experience is reduced due to long loading time of the webpage on the white screen is solved.
In yet another embodiment, when the development end needs to perform large-scale batch update on the content component, the update workload of the front-end developer is greatly increased by adopting a manner of directly selecting the component data of the content component. In order to solve the technical problem, referring to fig. 5, the webpage generating method specifically includes the following steps:
Step S31, a selection instruction of a content component is obtained, and the content component is set in a component editing area according to the selection instruction. The specific implementation procedure of step S31 is similar to the above embodiment, and will not be repeated.
Step S32, each data source of the content component in the component editing area is obtained, and each component data corresponding to each data source is extracted from the server according to each data source. The specific implementation procedure of step S32 is similar to the above embodiment, and will not be repeated.
And step S33, responding to the component data editing instruction of the content component, responding to the data editing instruction, displaying a data input field of the content component, and selecting the component data of the content component according to the data input field. Wherein the data entry fields are used to add, modify and delete the component data.
Step S34, responding to the data source editing end instruction, generating web page data according to the component data and the ordering information of each content component in each component editing area, so that the browser can load the web page data to generate web pages. The specific implementation procedure of step S34 is similar to the above embodiment, and will not be repeated.
In this embodiment, the component data of the content component is selected by adopting the data input field, so that when the development end needs to update the content component in large scale in batches, the web page code is not required to be modified, and only the content data corresponding to the data source is required to be modified, so that the web page loading the same content component can be updated to the latest content data of the content component, the update workload of front-end developers is greatly reduced, and the development efficiency is improved.
In yet another embodiment, where a content component is created from the component library with empty data, a matching process is required to edit the style source, which pulls the sampled data from the server, which may make the component generation less efficient. In order to solve the technical problem, referring to fig. 6, the webpage generating method specifically includes the following steps:
Step S41, acquiring a component generation instruction, selecting a corresponding component category according to a component mark in the component generation instruction, and then matching a style source corresponding to the component mark from the component category according to the component mark so as to extract corresponding style data from the server according to the style source to generate the content component.
Step S42, obtaining a selection instruction of a content component, and setting the content component in a component editing area according to the selection instruction. The specific implementation procedure of step S42 is similar to the above embodiment, and will not be repeated.
Step S43, each data source of the content component in the component editing area is obtained, and each component data corresponding to each data source is extracted from the server according to each data source. The specific implementation procedure of step S43 is similar to the above embodiment, and will not be repeated.
And step S44, responding to the component data editing instruction of the content component, and selecting the component data of each content component in the component editing area according to the component data editing instruction. The specific implementation procedure of step S44 is similar to the above embodiment, and will not be repeated.
Step S45, responding to a data source editing end instruction, generating webpage data according to the component data and the ordering information of the content components in the component editing areas, so that a browser can load the webpage data to generate a webpage. The specific implementation procedure of step S45 is similar to the above embodiment, and will not be repeated.
In the embodiment, the component mark is set, so that when the content component is generated, the corresponding content component can be directly extracted from the server according to the component mark, thereby reducing the programming work of the front-end development end. And the content components are classified, so that class matching is firstly carried out according to the component marks, and then the final content components are determined according to the class matching result, so that global matching is not needed, the matching times are reduced, and the generation efficiency of the components is improved.
In one embodiment, as shown in fig. 7, there is provided a web page generating apparatus, including:
the component setting module 101 is configured to obtain a selection instruction of a content component, and set the content component in a component editing area according to the selection instruction.
In one embodiment, the selection instruction includes a position movement instruction of the content component, and the component setting module 101 is further configured to determine a component position of the content component in the component editing area according to the position movement instruction; detecting whether the content component set according to the component position is at least partially overlapped with other content components in the component editing area, and performing overlay display according to the hierarchical sequence of each overlapped content component when the content component in the component position is detected to be at least partially overlapped with the other content components.
The data obtaining module 102 is configured to obtain each data source of the content component in the component editing area, and extract, from the server, each component data corresponding to each data source according to each data source.
And the component editing module 103 is used for responding to the component data editing instruction of the content component and selecting the component data of each content component in the component editing area according to the component data editing instruction.
In one embodiment, the component editing module 103 is further configured to respond to a component data editing instruction of the content component, respond to the data editing instruction, display a data input field of the content component, and select component data of the content component according to the data input field; wherein the data entry fields are used to add, modify and delete the component data.
The web page generating module 104 is configured to generate web page data according to the component data and the ordering information of each content component in each component editing area in response to a data source editing end instruction, so that a browser loads the web page data to generate a web page.
In one embodiment, the web page generating module 104 is further configured to, in response to a data source editing end instruction, write the component data into the html structure and store the html structure after generating the html structure of the content component according to the ordering information of each content component in the component editing area; generating webpage data according to the html structure written in the component data, so that a browser can load the webpage data to generate a webpage.
In yet another embodiment, where a content component is created from the component library with empty data, a matching process is required to edit the style source, which pulls the sampled data from the server, which may make the component generation less efficient. In order to solve this technical problem, as shown in fig. 8, there is provided a web page generating apparatus including:
And the component generating module 100 is configured to obtain a component generating instruction, select a corresponding component category according to a component mark in the component generating instruction, and then match a style source corresponding to the component mark from the component category according to the component mark, so as to extract corresponding style data from the server according to the style source to generate the content component.
The component setting module 101 is configured to obtain a selection instruction of a content component, and set the content component in a component editing area according to the selection instruction.
The data obtaining module 102 is configured to obtain each data source of the content component in the component editing area, and extract, from the server, each component data corresponding to each data source according to each data source.
And the component editing module 103 is used for responding to the component data editing instruction of the content component and selecting the component data of each content component in the component editing area according to the component data editing instruction.
The web page generating module 104 is configured to generate web page data according to the component data and the ordering information of each content component in each component editing area in response to a data source editing end instruction, so that a browser loads the web page data to generate a web page.
In the embodiment, the component mark is set, so that when the content component is generated, the corresponding content component can be directly extracted from the server according to the component mark, thereby reducing the programming work of the front-end development end. And the content components are classified, so that class matching is firstly carried out according to the component marks, and then the final content components are determined according to the class matching result, so that global matching is not needed, the matching times are reduced, and the generation efficiency of the components is improved.
In one embodiment, a computer apparatus is provided, as shown in FIG. 9, comprising a processor, a memory, a network interface, an input device, and a display screen connected by a system bus. The memory includes a nonvolatile storage medium and an internal memory. The non-volatile storage medium of the computer device stores an operating system, and may also store a computer program that, when executed by a processor, causes the processor to implement a web page generation method. The internal memory may also store a computer program that, when executed by the processor, causes the processor to perform the web page generation method. It will be appreciated by persons skilled in the art that the architecture shown in fig. 9 is merely a block diagram of some of the architecture relevant to the present inventive arrangements and is not limiting as to the computer device to which the present inventive arrangements are applicable, and that a particular computer device may include more or fewer components than shown, or may combine some of the components, or have a different arrangement of components.
In one embodiment, the web page generating apparatus provided by the present application may be implemented in the form of a computer program, which may be run on a computer device as shown in fig. 9. The memory of the computer device may store the various program modules that make up the web page generating apparatus. The computer program constituted by the respective program modules causes the processor to execute the steps in the web page generation method of the respective embodiments of the present application described in the present specification.
In one embodiment, there is provided an electronic device including: the system comprises a memory, a processor and a computer program stored on the memory and capable of running on the processor, wherein the processor executes the steps of the webpage generating method. The steps of the web page generation method herein may be the steps in the web page generation method of the above embodiments.
In one embodiment, a computer-readable storage medium storing computer-executable instructions for causing a computer to perform the steps of the above-described web page generation method is provided. The steps of the web page generation method herein may be the steps in the web page generation method of the above embodiments.
While the foregoing is directed to the preferred embodiments of the present application, it will be appreciated by those skilled in the art that changes and modifications may be made without departing from the principles of the application, such changes and modifications are also intended to be within the scope of the application.
Those skilled in the art will appreciate that implementing all or part of the above-described methods in accordance with the embodiments may be accomplished by way of a computer program stored on a computer readable storage medium, which when executed may comprise the steps of the embodiments of the methods described above. The storage medium may be a magnetic disk, an optical disk, a Read-Only Memory (ROM), a random-access Memory (Random Access Memory, RAM), or the like.
Claims (9)
1. A web page generation method, comprising:
acquiring a selection instruction of a content component, and setting the content component in a component editing area according to the selection instruction;
Acquiring data sources of the content components in the component editing area, and extracting component data corresponding to the data sources from a server according to the data sources;
Responding to a component data editing instruction of the content component to display a data input field of the content component, and selecting component data of each content component in the component editing area according to the data input field; wherein the data input field is used for adding, modifying and deleting the component data;
Responding to a data source editing ending instruction, generating an html structure of a content component according to ordering information of each content component in the component editing area, and writing the component data into the html structure and storing the component data; generating webpage data according to the html structure written in the component data, so that a browser can load the webpage data to generate a webpage.
2. A method of generating a web page according to claim 1, wherein the selection instruction comprises a position movement instruction of the content component;
the setting of the content component in the component editing area according to the selection instruction comprises the following steps:
Determining a component position of the content component in the component editing area according to the position moving instruction;
Detecting whether the content component set according to the component position is at least partially overlapped with other content components in the component editing area, and performing overlay display according to the hierarchical sequence of each overlapped content component when the content component in the component position is detected to be at least partially overlapped with the other content components.
3. The web page generation method of claim 1, further comprising:
and acquiring a component generation instruction, matching a corresponding style source according to a component mark in the component generation instruction, and extracting corresponding style data from the server according to the style source to generate the content component.
4. A method of generating a web page according to claim 3, wherein said matching corresponding style sources according to component tags in said component generation instruction comprises:
and after the corresponding component category is selected according to the component mark in the component generation instruction, matching a style source corresponding to the component mark from the component category according to the component mark.
5. The method according to claim 1, further comprising, after the extracting each component data corresponding to each of the data sources:
and generating a preview page in real time according to the component data.
6. A method of generating a web page according to any of claims 1-5, wherein the component data comprises one or more of a button document, text, picture.
7. A web page generation apparatus, comprising:
The component setting module is used for acquiring a selection instruction of a content component and setting the content component in a component editing area according to the selection instruction;
the data acquisition module is used for acquiring each data source of the content component in the component editing area, and extracting each component data corresponding to each data source from the server according to each data source;
The component editing module is used for responding to the component data editing instruction of the content component to display the data input field of the content component, and selecting the component data of each content component in the component editing area according to the data input field; wherein the data input field is used for adding, modifying and deleting the component data;
The webpage generating module is used for responding to a data source editing ending instruction, generating an html structure of a content component according to the ordering information of each content component in the component editing area, and writing the component data into the html structure and storing the component data; generating webpage data according to the html structure written in the component data, so that a browser can load the webpage data to generate a webpage.
8. The web page generating apparatus of claim 7, further comprising a component generation module configured to obtain a component generation instruction, match a corresponding style source according to a component tag in the component generation instruction, and generate the content component according to the style source by extracting corresponding style data from the server.
9. An electronic device, comprising: memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements the web page generation method according to any one of claims 1to 6 when executing the program.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010719901.1A CN111949266B (en) | 2020-07-23 | 2020-07-23 | Webpage generation method and device and electronic equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010719901.1A CN111949266B (en) | 2020-07-23 | 2020-07-23 | Webpage generation method and device and electronic equipment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111949266A CN111949266A (en) | 2020-11-17 |
| CN111949266B true CN111949266B (en) | 2024-06-21 |
Family
ID=73340986
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010719901.1A Active CN111949266B (en) | 2020-07-23 | 2020-07-23 | Webpage generation method and device and electronic equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111949266B (en) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103365855A (en) * | 2012-03-28 | 2013-10-23 | 腾讯科技（深圳）有限公司 | Method and server for generating web pages |
| CN110413161A (en) * | 2019-06-14 | 2019-11-05 | 深圳爱根斯通科技有限公司 | Arrrangement method, device and electronic equipment |
| CN110781423A (en) * | 2019-10-10 | 2020-02-11 | 腾讯科技（深圳）有限公司 | Webpage generation method and device and electronic equipment |
| CN111061473A (en) * | 2019-12-16 | 2020-04-24 | 新奥数能科技有限公司 | Visual component editing method and device for quickly building page |
Family Cites Families (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8375294B2 (en) * | 2004-07-29 | 2013-02-12 | Cisco Technology, Inc. | Editing web pages |
| CN102231104B (en) * | 2010-07-29 | 2013-10-23 | 艾默生网络能源有限公司 | Device and method for generating interface based on description |
| US10789412B2 (en) * | 2012-02-20 | 2020-09-29 | Wix.Com Ltd. | System and method for extended dynamic layout |
| KR101456508B1 (en) * | 2012-11-30 | 2014-10-31 | 인크로스 주식회사 | A data binding method for authoring web applications and the authoring tool by using the same |
| CN110110174B (en) * | 2017-12-15 | 2023-05-12 | 阿里巴巴集团控股有限公司 | Data visualization page generation, monitoring and display method, browser and server |
| CN108681454A (en) * | 2018-05-23 | 2018-10-19 | 成都淞幸科技有限责任公司 | A kind of webpage visualization component development method |
| CN110543298A (en) * | 2018-05-28 | 2019-12-06 | 北京京东尚科信息技术有限公司 | webpage style generation method and device and webpage generation method and device |
| CN110865807B (en) * | 2018-08-27 | 2024-06-18 | 京东科技控股股份有限公司 | System, method, device and storage medium for creating active page |
| CN110633081A (en) * | 2019-08-23 | 2019-12-31 | 北京浪潮数据技术有限公司 | Page generation method and device |
| CN110888634B (en) * | 2019-11-04 | 2023-11-17 | 上海硬通网络科技有限公司 | Game floor page generation method, game floor page generation device, computer equipment and storage medium |
-
2020
- 2020-07-23 CN CN202010719901.1A patent/CN111949266B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103365855A (en) * | 2012-03-28 | 2013-10-23 | 腾讯科技（深圳）有限公司 | Method and server for generating web pages |
| CN110413161A (en) * | 2019-06-14 | 2019-11-05 | 深圳爱根斯通科技有限公司 | Arrrangement method, device and electronic equipment |
| CN110781423A (en) * | 2019-10-10 | 2020-02-11 | 腾讯科技（深圳）有限公司 | Webpage generation method and device and electronic equipment |
| CN111061473A (en) * | 2019-12-16 | 2020-04-24 | 新奥数能科技有限公司 | Visual component editing method and device for quickly building page |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111949266A (en) | 2020-11-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110781423B (en) | Webpage generation method and device and electronic equipment | |
| US20190251143A1 (en) | Web page rendering method and related device | |
| CN109254773A (en) | Skeleton page generation method, device, equipment and storage medium | |
| KR101494844B1 (en) | System for Transforming Chart Using Metadata and Method thereof | |
| US10049095B2 (en) | In-context editing of output presentations via automatic pattern detection | |
| CN104834753A (en) | Webpage screenshot generating method and device | |
| CN111241793B (en) | Method, system and medium for resolving rich text editor content to render to native client | |
| US20130117656A1 (en) | Conversion of web template designs | |
| CN102306174A (en) | Method and equipment for interacting with user based on web page elements | |
| CN104050238A (en) | Map labeling method and map labeling device | |
| US10417317B2 (en) | Web page profiler | |
| US20100269093A1 (en) | Content Management System and Method for Generating Dynamic Applications | |
| CN108595697A (en) | Webpage integrated approach, apparatus and system | |
| CN110780868A (en) | Website development method, device, equipment and storage medium based on componentized template | |
| CN113391808A (en) | Page configuration method and device and electronic equipment | |
| CN101876998A (en) | Method and system for editing data | |
| CN112287255B (en) | Page construction method and device, computing equipment and computer readable storage medium | |
| CN110162301B (en) | Form rendering method, form rendering device and storage medium | |
| CN117093386A (en) | Page screenshot method, device, computer equipment and storage medium | |
| CN111949266B (en) | Webpage generation method and device and electronic equipment | |
| CN117055987A (en) | Webpage display method and device, electronic equipment and computer readable storage medium | |
| JP2001125855A (en) | Dynamic web page generation program | |
| Khan et al. | A retargetable model-driven framework for the development of mobile user interfaces | |
| CN114168875A (en) | Page program generation method and device, computer equipment and storage medium | |
| CN112732254B (en) | Webpage development method, webpage development device, computer equipment and storage medium |
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 |