CN110781423B - Webpage generation method and device and electronic equipment - Google Patents
Webpage generation method and device and electronic equipment Download PDFInfo
- Publication number
- CN110781423B CN110781423B CN201910960381.0A CN201910960381A CN110781423B CN 110781423 B CN110781423 B CN 110781423B CN 201910960381 A CN201910960381 A CN 201910960381A CN 110781423 B CN110781423 B CN 110781423B
- Authority
- CN
- China
- Prior art keywords
- data
- component
- content
- webpage
- style
- 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 53
- 230000004044 response Effects 0.000 claims description 12
- 230000007423 decrease Effects 0.000 claims description 10
- 238000011161 development Methods 0.000 abstract description 22
- 238000010586 diagram Methods 0.000 description 14
- 230000008569 process Effects 0.000 description 13
- 230000004048 modification Effects 0.000 description 7
- 238000012986 modification Methods 0.000 description 7
- 238000012545 processing Methods 0.000 description 7
- 230000006870 function Effects 0.000 description 4
- 238000004891 communication Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 230000006978 adaptation Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000002708 enhancing effect Effects 0.000 description 1
- 230000002349 favourable effect Effects 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 239000003550 marker Substances 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 238000003825 pressing Methods 0.000 description 1
- 230000003252 repetitive effect Effects 0.000 description 1
- 238000005096 rolling process Methods 0.000 description 1
- 238000005070 sampling Methods 0.000 description 1
- 230000002123 temporal effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
Abstract
The disclosure provides a webpage generation method, a webpage generation device and electronic equipment, wherein the method comprises the following steps: acquiring a drag instruction of a target content component, and setting the target content component in a component editing area according to the drag instruction; acquiring a property editing instruction of the target content component, and recording a style source and a data source of the target content component according to the property editing instruction; and responding to the editing ending instruction, generating webpage data according to the arrangement sequence information of the content components in the component editing area, the style source and the data source of each content component, and loading the webpage data by a browser to generate a webpage. The webpage generating method provided by the invention can generate the webpage capable of dynamically updating the webpage style and the data, and improves the front-end development efficiency.
Description
Technical Field
The disclosure relates to the technical field of computers, and in particular relates to a webpage generation method and device capable of realizing dynamic update of webpage styles and contents, and electronic equipment.
Background
Web pages are fundamental elements constituting websites, and a browser generally generates web pages by loading HTML (HyperText Markup Language ) files describing web page contents. In these techniques, HTML documents describe elements (e.g., fonts, colors, sizes) of text, pictures, forms, sounds, etc. on pages by various markup, and a browser interprets the markup and generates the page.
In the related art, front-end development mainly describes page styles and contents by directly writing page codes, and in the application process, if 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 codes, and a great deal of labor cost and time cost are brought. In addition, the modification process is time-consuming and labor-consuming, so that when a large number of pages need to be modified aiming at the same problem, the modification time is long, the labor cost is high, the web page style is difficult to update in time, and the front-end development efficiency is also greatly reduced.
It should be noted that the information disclosed in the above background section is only for enhancing understanding of the background of the present disclosure and thus may include information that does not constitute prior art known to those of ordinary skill in the art.
Disclosure of Invention
The embodiment of the disclosure provides a webpage generating method, a webpage generating device and electronic equipment, which are used for overcoming the problem of low development efficiency in the front-end development process caused by the limitations and defects of related technologies at least to a certain extent.
According to one aspect of the present disclosure, there is provided a web page generation method including: acquiring a drag instruction of a target content component, and setting the target content component in a component editing area according to the drag instruction; acquiring a property editing instruction of the target content component, and recording a style source and a data source of the target content component according to the property editing instruction; and responding to the editing ending instruction, generating webpage data according to the arrangement sequence information of the content components in the component editing area, the style source and the data source of each content component, and loading the webpage data by a browser to generate a webpage.
In an exemplary embodiment of the present disclosure, further comprising: acquiring the use frequencies of a plurality of content components, wherein the use frequencies comprise developer use frequencies and user click frequencies; the plurality of content components are presented in the component library from large to small in frequency of use.
In an exemplary embodiment of the present disclosure, further comprising: and setting the content components with the use frequency smaller than the preset value as a state to be cleaned.
In an exemplary embodiment of the present disclosure, the loading the web page data by the browser to generate a web page includes: providing the webpage data for the browser in response to a webpage access request; and returning content data and style data corresponding to at least one content component to the browser according to the data source loading request and the style source loading request sent by the browser, so that the browser can generate a webpage according to the arrangement sequence information of the content component and the webpage display code of the content component after determining the webpage display code of the content component according to the style data and the content data.
In one exemplary embodiment of the present disclosure, the data source includes a configured interface including an interface link and interface parameters, and data including one or more of a button document, text, and a picture link.
In one exemplary embodiment of the present disclosure, recording the style source and the data source of the target content component according to the property editing instructions includes: and responding to the attribute editing instruction to display an attribute editing box, wherein the attribute editing box comprises a size data field, a style selection field and a data source input field, and the data source input field is used for adding, modifying and deleting data sources, wherein size data in the size data field increases with the increase of the number of the data sources and decreases with the decrease of the number of the data sources.
In an exemplary embodiment of the present disclosure, further comprising: and responding to a page preview instruction, loading the style data and the content data of each content component from a server or a cache according to the style source and the data source of each content component in the component editing area, and generating a preview page according to the style data and the content data.
In an exemplary embodiment of the present disclosure, the drag instruction includes a drag point position movement trajectory, and setting the target content component in the component editing area according to the drag instruction includes: determining the setting position of the target content component according to the end point of the drag point position moving track; if the target content component is set by taking the setting position as a coordinate, the target content component is at least partially overlapped with other content components, and the position of at least one content component is automatically adjusted to set all content components not to overlap.
In an exemplary embodiment of the present disclosure, the web page data is an HTML file.
According to an aspect of the present disclosure, there is provided a web page data generating apparatus including: the component layout management module is used for acquiring a drag instruction of a target content component, and setting the target content component in a component editing area according to the drag instruction; the component attribute management module is used for acquiring an attribute editing instruction of the target content component and recording a style source and a data source of the target content component according to the attribute editing instruction; the file generation module is used for responding to the editing ending instruction, generating webpage data according to the arrangement sequence information of the content components in the component editing area, the style source and the data source of each content component, and loading the webpage data by the browser to generate a webpage.
According to one aspect of the present disclosure, there is provided an electronic device including: a memory; and a processor coupled to the memory, the processor configured to perform the method of any of the above based on instructions stored in the memory.
According to one aspect of the present disclosure, there is provided a computer-readable storage medium having stored thereon a program which, when executed by a processor, implements a method as set forth in any one of the preceding claims.
According to the embodiment of the disclosure, the style source and the data source of the content component are set, so that the browser can load and pull the webpage data with the latest style and the latest data from the server in real time, programming work of a front-end development end can be reduced, dynamic update of webpage content is realized under the condition that the front-end webpage code is not modified as much as possible, coding and modification cost existing in the front-end development process is reduced, and front-end development efficiency is effectively improved.
It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the disclosure and together with the description, serve to explain the principles of the disclosure. It will be apparent to those of ordinary skill in the art that the drawings in the following description are merely examples of the disclosure and that other drawings may be derived from them without undue effort.
Fig. 1 is a schematic diagram of an exemplary system architecture to which a web page generation method or web page generation apparatus of an embodiment of the present disclosure is applied.
Fig. 2 is a flowchart of a web page generation method in an exemplary embodiment of the present disclosure.
FIG. 3 is a flow chart of a web page data loading process in one embodiment of the present disclosure.
FIG. 4 is a schematic diagram of managing content components in one embodiment of the present disclosure.
FIG. 5 is a detailed flow diagram of content component layout management in one embodiment of the present disclosure.
Fig. 6 is a schematic diagram of previewing effects of web page data in one embodiment of the present disclosure.
Fig. 7 is a schematic diagram of an application scenario of an embodiment of the present disclosure.
Fig. 8 is a block diagram of a web page generating apparatus in an exemplary embodiment of the present disclosure.
Fig. 9 is a block diagram of an electronic device in an exemplary embodiment of the present disclosure.
Detailed Description
Example embodiments will now be described more fully with reference to the accompanying drawings. However, the exemplary embodiments may be embodied in many forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the concept of the example embodiments to those skilled in the art. The described features, structures, or characteristics may be combined in any suitable manner in one or more embodiments. In the following description, numerous specific details are provided to give a thorough understanding of embodiments of the present disclosure. One skilled in the relevant art will recognize, however, that the aspects of the disclosure may be practiced without one or more of the specific details, or with other methods, components, devices, steps, etc. In other instances, well-known technical solutions have not been shown or described in detail to avoid obscuring aspects of the present disclosure.
Furthermore, the drawings are only schematic illustrations of the present disclosure, and equivalent reference numerals in the drawings denote the same or similar parts, and thus a repetitive description thereof will be omitted. Some of the block diagrams shown in the figures are functional entities and do not necessarily correspond to physically or logically separate entities. These functional entities may be implemented in software or in one or more hardware modules or integrated circuits or in different networks and/or processor devices and/or microcontroller devices.
FIG. 1 shows a schematic diagram of an exemplary system architecture 100 to which the web page generation method and web page generation method of embodiments of the present disclosure may be applied.
As shown in fig. 1, the system architecture 100 may include one or more of terminals 101, 102, 103, a network 104, and a server 105. The network 104 is a medium that provides a communication link between the terminals 101, 102, 103 and the server 105, enabling the terminals 101, 102, 103 to send information to the server 105 or receive information sent by the server 105. The network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, among others.
It should be understood that the number of terminals, networks and servers in fig. 1 is merely illustrative. There may be any number of terminals, networks, and servers, as desired for implementation. For example, the server 105 may be a server cluster formed by a plurality of servers. Terminals 101, 102, 103 may be a variety of electronic devices with display screens including, but not limited to, smartphones, tablets, laptop computers, desktop computers, and the like.
In some embodiments, the terminal 101 may be, for example, a web page user terminal, and is provided with a browser for loading web page data to generate a web page; the terminal 102 may be, for example, 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 103 may be, for example, another front-end development terminal, provided with a development environment of a content component in the web page data, for developing the content component and a style thereof; the server 105 may, for example, set up a storage environment to store developed content components and their styles, web page data, data sources and content data of the content components, etc. for providing the web page data, the styles of the content components, the content data of the content components to the terminal 101, the developed content components and their styles, the data sources and content data of the content components that may be selected to provide the content component storage service to the terminal 102. In some embodiments, server 105 may also be used as a front-end development end, which is not particularly limited by the present disclosure.
The following describes example embodiments of the present disclosure in detail with reference to the accompanying drawings.
Fig. 2 is a flowchart of a web page generation method in an exemplary embodiment of the present disclosure.
Referring to fig. 2, the web page generation method 200 may include:
step S1, a drag instruction of a target content component is obtained, and the target content component is set in a component editing area according to the drag instruction.
And S2, acquiring a property editing instruction of the target content component, and recording a style source and a data source of the target content component according to the property editing instruction.
And step S3, responding to the editing ending instruction, and generating webpage data according to the arrangement sequence information of the content components in the component editing area, the style source and the data source of each content component so as to enable the browser to load the webpage data to generate a webpage.
According to the embodiment of the disclosure, the style source and the data source of the content component are set, so that the browser can load and pull the webpage data with the latest style and the latest data from the server in real time, programming work of a front-end development end can be reduced, dynamic update of webpage content is realized under the condition that the front-end webpage code is not modified as much as possible, coding and modification cost existing in the front-end development process is reduced, and front-end development efficiency is effectively improved.
The steps of the embodiment shown in fig. 2 will be described in detail.
Step S1, a drag instruction of a target content component is obtained, and the target content component is set in a component editing area according to the drag instruction.
Unlike the related art in which the web page data directly describes the web page content, the content of the web page data record in the embodiment of the present disclosure is content components, and these content components are developed by the developer by grouping each module of the page through counting the commonalities of the products in the group, and are stored on the server for the front-end developer to call. The content component types may include, for example, text boxes, web page headers, web page footers, sidebars, advertising columns, operator sites, etc., or a permutation and combination of various content.
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, and can comprise 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; the data source includes a configured interface including an interface link and interface parameters, and the data may include one or more of a button document, text, and a picture link.
In the embodiment of the present disclosure, besides setting the position of the content component in the component editing area through a drag operation, the content component may also be moved by clicking, pressing a button, setting coordinates, or the like, which is not limited to this disclosure.
And S2, acquiring a property editing instruction of the target content component, and recording a style source and a data source of the target content component according to the property editing instruction.
In an embodiment of the present disclosure, a property editing box may be presented in response to a property editing instruction, the property editing box including a size data field, a style selection field, and a data source input field for adding, modifying, and deleting data sources.
In addition, in order to facilitate management and layout, the operation amount and debugging difficulty during webpage generation are reduced, and the same or different fixed sizes can be set for different kinds of content components. When the content assembly is set to be of a fixed size, the length and the width can be set to be of the fixed size, and one of the length and the width can be set to be of the fixed size. When the content component is set to be a fixed size, the number of the data sources can be set to be a preset value, the number of the data sources is not allowed to exceed the preset value, and the data sources can be displayed in the content component in a sliding, rolling, paging or other modes.
In one embodiment, the size data within the size data field may also be configured to increase as the number of data sources increases and decrease as the number of data sources decreases. That is, the profile of the setup content assembly varies with the number of data sources. For example, one link class data source corresponds to a content component length of 5pt, one banner (field) class data source corresponds to a content component length of 15pt, one input box class data source corresponds to a content component length of 10pt, and so on. Wherein, the banner refers to a banner image field, which can comprise image files (often expressed in a picture form) with various formats, and is generally used for vividly expressing advertising contents or large titles and other propaganda contents. Because of the wide variety of data sources, this disclosure is not limited in this disclosure, and the above data are only examples, and can be set by those skilled in the art according to the actual situation.
The style selection field may be used to select an existing style as well as to modify and store an existing style. However, it should be noted that, since the web page data in the embodiment of the present disclosure is mainly used for recording a style source, a content component style created by a developer or modified by a user can be saved to a server, and a storage address is added as a style source to a style selection field of a content component.
Because the style data and the content data of the content component are stored on the server, when the browser reads the style setting and the data setting of the content component, the sampling data and the content data can be pulled from the server in real time according to the style source and the data source; when the development end needs to update the content assembly in large scale in batches, the web page loading the same content assembly can be updated to the latest style and the latest content data of the content assembly only by modifying the style data corresponding to the style source and the content data corresponding to the data source without modifying the web page code, so that the updating workload of front-end developers is greatly reduced, and the development efficiency is improved.
And step S3, responding to the editing ending instruction, and generating webpage data according to the arrangement sequence information of the content components in the component editing area, the style source and the data source of each content component so as to enable the browser to load the webpage data to generate a webpage.
In the embodiment of the present disclosure, the web page data records arrangement order information of the content components instead of the region coordinates of each content component. The arrangement information of the content components can be generated according to the numbers of the content components from top to bottom, from left to right (or in other sequences) in the component editing area, for example, in the form of an array comprising the numbers of the content components, so that the browser loading the webpage data can sequentially load the content components in real time according to the numbers of the content components recorded by the array. The content components in the content are matched to record only the data source and the style source, and the content corresponding to the data source and the style source can be multiplexed in a plurality of webpages.
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 universal 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 be other data types that can be recognized by the browser without any obstacle, such as JavaScript, which is not limited in particular by the present disclosure. ( JavaScript is an interpreted scripting language, a dynamic type, weak type, prototype-based language, built-in support type. JavaScript language was originally used on HTML web pages to add dynamic functionality to HTML web pages. )
FIG. 3 is a flow chart of a web page data loading process in one embodiment of the present disclosure.
Referring to fig. 3, in an embodiment of the present disclosure, the web page data loading process may include, for example:
step S31, the web page data is provided for the browser in response to the page access request.
Step S32, according to the data source loading request and the style source loading request sent by the browser, returning content data and style data corresponding to at least one content component to the browser, so that after the browser determines a webpage display code of the content component according to the style data and the content data, generating a webpage according to the arrangement sequence information of the content component and the webpage display code of the content component.
Unlike the scheme that the browser directly loads and records style data and content data in the related art, the webpage data in the embodiment of the disclosure only records arrangement sequence information of the content components and style sources and data sources of the content components, so that when the browser acquires the webpage data, the latest style data and content data of each content component are acquired from a server in real time according to the description of the webpage data, and therefore the webpage data are not required to be changed or only the style sources and the data sources of the webpage data and the arrangement sequence information of the content components are required to be modified when the webpage is updated in a large scale, the technical threshold of webpage maintenance is reduced, and even if front-end webpage editors do not know about programming, a plurality of webpages can be efficiently managed, and favorable conditions are provided for realizing the subsequent artificial intelligent arrangement of webpages.
FIG. 4 is a schematic diagram of managing content components in one embodiment of the present disclosure.
In the embodiment of the present disclosure, the frequency of use of a plurality of content components may be acquired from a client or a server, and then the plurality of content components are presented in a component library according to the frequency of use of each content component. The use frequency comprises a developer use frequency and a user click frequency. Since the content components are stored in the server, used by the developer at front-end development and clicked on by the user at browser loading, the server can record the frequency of use of each content component and provide that data to the caller for presentation and management of the content components.
Referring to fig. 4, in the component library 41, a plurality of content components 411 can be presented from large to small in terms of frequency of use.
Content components with higher use frequency of a developer are displayed at more obvious positions in a component library, so that the front-end developer can conveniently select the content components with more use times, more multiplexing of the content components is realized, the storage pressure of a server is further reduced, and the development efficiency is improved. Content components with higher clicking frequency of a user are displayed at more obvious positions in the component library, so that front-end developers can know user preference degrees of various content components conveniently, and further webpage development quality is improved. The content components may be arranged and displayed in what manner according to user settings or default settings, or may be arranged and displayed according to user-defined grouping and position settings of content components in a component library, which is not limited in this disclosure.
The "frequency" may be set as the number of clicks per unit time, and the unit time may be, for example, one day, one week, one month or half year, one year, etc., and may be set by a person skilled in the art according to the actual situation.
In some embodiments, the content components with the frequency of use less than the preset value may also be set to a state to be cleaned (such as the content component 6 in fig. 4), so that a front-end developer or a background content component developer/manager can timely find that the developer uses fewer content components, and users click fewer content components, and timely clean, modify, and maintain the components.
FIG. 5 is a detailed flow diagram of content component layout management in one embodiment of the present disclosure.
Referring to fig. 5, the drag instruction includes a drag point position moving trajectory, and step S1 includes:
and S11, determining the setting position of the target content component according to the end point of the dragging point position moving track.
In step S12, if the setting of the target content component with the setting position as the coordinates causes the target content component to at least partially overlap with other content components, the position of at least one content component is automatically adjusted to set all content components to be non-overlapping.
When the position of the target content component is set, the setting position of the target content component can be determined according to the end point of the movement track of the drag point position, and the arrangement of the content components can be automatically adjusted so as to improve the development efficiency of front-end developers.
In addition, when the layout management is performed on the content components, the new construction of the content components can be realized through dragging. For example, if the start point of the drag point position movement track corresponds to a content component in the component library, a content component with empty data can be newly created in response to the drag instruction; if the start point of the drag point position movement track corresponds to a content component within the component editing area, the content component may be moved in response to the drag instruction.
Fig. 6 is a schematic diagram of previewing effects of web page data in one embodiment of the present disclosure.
Referring to fig. 6, since the content of the web page data record is relatively abstract, after the front-end developer sets the arrangement position information, 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 web page generated by the web page data accords with the expectations.
The preview page may be generated in response to a page preview instruction (e.g., a click signal of a "preview" button in the editing interface of fig. 6) by loading style data and content data for each content component according to a style source and a data source for each content component within the component editing area.
The generation of the preview page may be performed after the editing of the web page data is completed as in fig. 6, or may be performed in real time along with the setting of the content component. The preview page can be generated in real time, so that a front-end developer can be helped to timely obtain setting feedback of the content component, and the use experience of the front-end developer is improved.
Fig. 7 is a schematic diagram of an application scenario of an embodiment of the present disclosure.
Referring to fig. 7, the web page generation method 200 may be implemented by a web page editing tool 700.
The web page editing tool 700 may include, for example, a component library 71, a component editing area 72, a live preview area 73, and a control area 74.
Wherein, a plurality of content components 75 are arranged in the component library 71 from high to low according to the use frequency of the content components, so that a front-end developer can create a content component with empty data by dragging.
The component edit area 72 includes a plurality of content components that have been set, and the upper right corner shows a property edit box 721 corresponding to the current content component. The property edit box 721 includes a size data field, a style selection field, and a data source input field for adding, modifying, and deleting data sources, wherein size data within the size data field increases with an increase in the number of data sources and decreases with a decrease in the number of data sources.
The live preview area 73 presents the preview page in real time according to the content components that have been set in the component editing area.
The control region 74 may include a live preview control 741, a component statistics control 742, and a web page data generation control 743. The real-time preview control 741 is used for starting a real-time preview function and can be switched between a real-time preview mode and a response click preview mode; the component statistics control 742 is used to control the content components to automatically order according to the frequency of use; the web page data generation control 743 is used to respond to clicks to generate web page data that can be loaded by the browser according to the settings and arrangements of the current content component.
As can be seen from fig. 7, the web page editing tool provided by the present disclosure has advantages of low operation threshold, convenient operation, and the like, and can embody the simplicity and ease of use of the web page generating method 200.
In summary, the webpage generation method provided by the embodiment of the present disclosure can realize dynamic update of webpage content and style by generating the webpage data recorded with the arrangement sequence of the content components, the data source and the style source, and reduce the labor cost and the time cost caused by batch modification in the related technology, and has the advantages of simplicity, easiness, high efficiency and convenience.
Corresponding to the above method embodiment, the present disclosure further provides a web page generating device, which may be used to execute the above method embodiment.
Fig. 8 is a block diagram of a web page generating apparatus in an exemplary embodiment of the present disclosure.
Referring to fig. 8, the web page generating apparatus 800 may include:
the component layout management module 81 may be configured to obtain a drag instruction of a target content component, and set the target content component in a component editing area according to the drag instruction;
a component attribute management module 82 configured to obtain a record of an attribute editing instruction for the target content component, and to instruct a style source and a data source of the target content component according to the attribute editing instruction;
the file generating module 83 may be configured to generate, in response to the edit end instruction, web page data according to the arrangement order information of the content components in the component editing area, the style source and the data source of each of the content components, so that the browser loads the web page data to generate a web page.
In an exemplary embodiment, the web page generating apparatus 800 further includes: a component management module 84 configured to obtain usage frequencies of a plurality of content components, the usage frequencies including developer usage frequencies and user click frequencies; the plurality of content components are presented in the component library from large to small in frequency of use.
In an exemplary embodiment, the component management module 84 is further configured to set content components that are used less frequently than a preset value to a state to be cleaned.
In an exemplary embodiment of the present disclosure, the file generation module 83 is configured to provide the web page data to the browser in response to a page access request; and returning content data and style data corresponding to at least one content component to the browser according to the data source loading request and the style source loading request sent by the browser, so that the browser can generate a webpage according to the arrangement sequence information of the content component and the webpage display code of the content component after determining the webpage display code of the content component according to the style data and the content data.
In one exemplary embodiment of the present disclosure, the data source includes a configured interface including an interface link and interface parameters, and data including one or more of a button document, text, and a picture link.
In one exemplary embodiment of the present disclosure, the component property management module 82 is configured to expose a property editing box in response to the property editing instructions, the property editing box comprising a size data field, a style selection field, and a data source input field for adding, modifying, and deleting data sources, wherein size data within the size data field increases as the number of data sources increases and decreases as the number of data sources decreases.
In an exemplary embodiment of the present disclosure, the web page generating apparatus 800 further includes: the page preview module 85 is configured to respond to a page preview instruction, load style data and content data of each content component from a server or a cache according to the style source and the data source of each content component in the component editing area, and generate a preview page according to the style data and the content data.
In an exemplary embodiment of the present disclosure, the component layout management module 81 is further configured to: determining the setting position of the target content component according to the end point of the drag point position moving track; if the target content component is set by taking the setting position as a coordinate, the target content component is at least partially overlapped with other content components, and the position of at least one content component is automatically adjusted to set all content components not to overlap.
In an exemplary embodiment of the present disclosure, the web page data is an HTML file.
Since the functions of the apparatus 800 are described in detail in the corresponding method embodiments, the disclosure is not repeated herein.
It should be noted that although in the above detailed description several modules or units of a device for action execution are mentioned, such a division is not mandatory. Indeed, the features and functionality of two or more modules or units described above may be embodied in one module or unit in accordance with embodiments of the present disclosure. Conversely, the features and functions of one module or unit described above may be further divided into a plurality of modules or units to be embodied.
In an exemplary embodiment of the present disclosure, an electronic device capable of implementing the above method is also provided.
Those skilled in the art will appreciate that the various aspects of the invention may be implemented as a system, method, or program product. Accordingly, aspects of the invention may be embodied in the following forms, namely: an entirely hardware embodiment, an entirely software embodiment (including firmware, micro-code, etc.) or an embodiment combining hardware and software aspects may be referred to herein as a "circuit," module "or" system.
An electronic device 900 according to such an embodiment of the invention is described below with reference to fig. 9. The electronic device 900 shown in fig. 9 is merely an example, and should not be construed as limiting the functionality and scope of use of embodiments of the present invention.
As shown in fig. 9, the electronic device 900 is embodied in the form of a general purpose computing device. Components of electronic device 900 may include, but are not limited to: the at least one processing unit 910, the at least one storage unit 920, and a bus 930 connecting the different system components (including the storage unit 920 and the processing unit 910).
Wherein the storage unit stores program code that is executable by the processing unit 910 such that the processing unit 910 performs steps according to various exemplary embodiments of the present invention described in the above-described "exemplary methods" section of the present specification. For example, the processing unit 910 may perform the method as shown in fig. 2.
The storage unit 920 may include readable media in the form of volatile storage units, such as Random Access Memory (RAM) 9201 and/or cache memory 9202, and may further include Read Only Memory (ROM) 9203.
The storage unit 920 may also include a program/utility 9204 having a set (at least one) of program modules 9205, such program modules 9205 include, but are not limited to: an operating system, one or more application programs, other program modules, and program data, each or some combination of which may include an implementation of a network environment.
The bus 930 may be one or more of several types of bus structures including a memory unit bus or memory unit controller, a peripheral bus, an accelerated graphics port, a processing unit, or a local bus using any of a variety of bus architectures.
The electronic device 900 may also communicate with one or more external devices 1000 (e.g., keyboard, pointing device, bluetooth device, etc.), with one or more devices that enable a user to interact with the electronic device 900, and/or with any device (e.g., router, modem, etc.) that enables the electronic device 900 to communicate with one or more other computing devices. Such communication may occur through an input/output (I/O) interface 950. Also, electronic device 900 may communicate with one or more networks such as a Local Area Network (LAN), a Wide Area Network (WAN), and/or a public network, such as the Internet, through network adapter 960. As shown, the network adapter 960 communicates with other modules of the electronic device 900 over the bus 930. It should be appreciated that although not shown, other hardware and/or software modules may be used in connection with electronic device 900, including, but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, data backup storage systems, and the like.
From the above description of embodiments, those skilled in the art will readily appreciate that the example embodiments described herein may be implemented in software, or may be implemented in software in combination with the necessary hardware. Thus, the technical solution according to the embodiments of the present disclosure may be embodied in the form of a software product, which may be stored in a non-volatile storage medium (may be a CD-ROM, a U-disk, a mobile hard disk, etc.) or on a network, including several instructions to cause a computing device (may be a personal computer, a server, a terminal device, or a network device, etc.) to perform the method according to the embodiments of the present disclosure.
The above-described figures are merely schematic illustrations of processes involved in a method according to an exemplary embodiment of the present invention, and are not intended to be limiting. It will be readily appreciated that the processes shown in the above figures do not indicate or limit the temporal order of these processes. In addition, it is also readily understood that these processes may be performed synchronously or asynchronously, for example, among a plurality of modules.
Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the disclosure disclosed herein. This application is intended to cover any adaptations, uses, or adaptations of the disclosure following, in general, the principles of the disclosure and including such departures from the present disclosure as come within known or customary practice within the art to which the disclosure pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope of the disclosure being indicated by the following claims.
Claims (10)
1. A web page generation method, comprising:
acquiring a drag instruction of a target content component, setting the target content component in a component editing area according to the drag instruction, wherein the target content component is provided with a style source and a data source, the style source is a storage address of style data of the target content component, the data source comprises a configured interface and data, the configured interface comprises an interface link and interface parameters, and the data comprises at least one of a button file, a text and a picture link;
acquiring a property editing instruction of the target content component, and recording a style source and a data source of the target content component according to the property editing instruction;
responding to an editing ending instruction, generating webpage data according to the arrangement sequence information of the content components in the component editing area, and the style source and the data source of each content component, so that a browser can load the webpage data to generate a webpage;
the step of loading the webpage data by the browser to generate the webpage comprises the following steps:
providing the webpage data for the browser in response to a webpage access request;
returning content data and style data corresponding to at least one content component to the browser according to a data source loading request and a style source loading request sent by the browser, so that the browser can generate a webpage according to the arrangement sequence information of the content component and the webpage display code of the content component after determining the webpage display code of the content component according to the style data and the content data;
the generating the webpage according to the arrangement sequence information of the content components and the webpage display codes of the content components comprises the following steps:
generating an array according to the numbers of the content components from top to bottom and from left to right in the component editing area;
and loading the content components in sequence according to the content component codes contained in the array.
2. The web page generation method of claim 1, further comprising:
acquiring the use frequencies of a plurality of content components, wherein the use frequencies comprise developer use frequencies and user click frequencies;
the plurality of content components are presented in a component library from large to small in frequency of use.
3. The web page generation method of claim 2, further comprising:
and setting the content components with the use frequency smaller than the preset value as a state to be cleaned.
4. The web page generation method of any of claims 1-3, wherein recording the style source and the data source of the target content component according to the property editing instruction comprises:
and responding to the attribute editing instruction to display an attribute editing box, wherein the attribute editing box comprises a size data field, a style selection field and a data source input field, and the data source input field is used for adding, modifying and deleting data sources, wherein size data in the size data field increases with the increase of the number of the data sources and decreases with the decrease of the number of the data sources.
5. A method of generating a web page as claimed in any one of claims 1 to 3, further comprising:
and responding to a page preview instruction, loading the style data and the content data of each content component from a server or a cache according to the style source and the data source of each content component in the component editing area, and generating a preview page according to the style data and the content data.
6. The web page generation method of any one of claims 1-3, wherein the drag instruction includes a drag point position movement trajectory, and setting the target content component in the component editing area according to the drag instruction includes:
determining the setting position of the target content component according to the end point of the drag point position moving track;
if the target content component is set by taking the setting position as a coordinate, the target content component is at least partially overlapped with other content components, and the position of at least one content component is automatically adjusted to set all content components not to overlap.
7. A method of generating a web page as claimed in any one of claims 1 to 3 wherein the web page data is an HTML file.
8. A web page data generating apparatus, comprising:
the component layout management module is used for acquiring a drag instruction of a target content component, setting the target content component in a component editing area according to the drag instruction, wherein the target content component is provided with a style source and a data source, the style source is a storage address of style data of the target content component, the data source comprises a configured interface and data, the configured interface comprises an interface link and an interface parameter, and the data comprises at least one of a button document, a text and a picture link;
the component attribute management module is used for acquiring an attribute editing instruction of the target content component and recording a style source and a data source of the target content component according to the attribute editing instruction;
the file generation module is used for responding to the editing ending instruction, generating webpage data according to the arrangement sequence information of the content components in the component editing area, the style source and the data source of each content component, and loading the webpage data by the browser to generate a webpage;
the step of loading the webpage data by the browser to generate the webpage comprises the following steps:
providing the webpage data for the browser in response to a webpage access request;
returning content data and style data corresponding to at least one content component to the browser according to a data source loading request and a style source loading request sent by the browser, so that the browser can generate a webpage according to the arrangement sequence information of the content component and the webpage display code of the content component after determining the webpage display code of the content component according to the style data and the content data;
the generating the webpage according to the arrangement sequence information of the content components and the webpage display codes of the content components comprises the following steps:
generating an array according to the numbers of the content components from top to bottom and from left to right in the component editing area;
and loading the content components in sequence according to the content component codes contained in the array.
9. An electronic device, comprising:
a memory; and
a processor coupled to the memory, the processor configured to perform the method of any of claims 1-7 based on instructions stored in the memory.
10. A computer readable storage medium having stored thereon a program which, when executed by a processor, implements the method of any of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910960381.0A CN110781423B (en) | 2019-10-10 | 2019-10-10 | Webpage generation method and device and electronic equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910960381.0A CN110781423B (en) | 2019-10-10 | 2019-10-10 | Webpage generation method and device and electronic equipment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110781423A CN110781423A (en) | 2020-02-11 |
| CN110781423B true CN110781423B (en) | 2024-02-06 |
Family
ID=69385070
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910960381.0A Active CN110781423B (en) | 2019-10-10 | 2019-10-10 | Webpage generation method and device and electronic equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110781423B (en) |
Families Citing this family (24)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111651966A (en) * | 2020-06-04 | 2020-09-11 | 航天科工智慧产业发展有限公司 | Data report file generation method and device and electronic equipment |
| CN112015410A (en) * | 2020-07-16 | 2020-12-01 | 深圳市大富网络技术有限公司 | Webpage editing method, device and system and computer storage medium |
| CN111949266A (en) * | 2020-07-23 | 2020-11-17 | 上海硬通网络科技有限公司 | Webpage generation method and device and electronic equipment |
| CN111966345A (en) * | 2020-08-21 | 2020-11-20 | 西安寰宇卫星测控与数据应用有限公司 | Drag-type webpage design method and device, computer equipment and storage medium |
| CN112286546A (en) * | 2020-09-22 | 2021-01-29 | 长沙市到家悠享网络科技有限公司 | Application program updating method, device and equipment |
| CN112416342A (en) * | 2020-11-04 | 2021-02-26 | 杭州讯酷科技有限公司 | UI (user interface) quick construction method based on associated fields |
| CN112579929B (en) * | 2020-11-04 | 2024-04-05 | 京信数据科技有限公司 | Method and device for constructing visual blockchain browser page |
| CN112433724A (en) * | 2020-11-09 | 2021-03-02 | 北京达佳互联信息技术有限公司 | Target component style generation method and device, electronic equipment and storage medium |
| CN112558964A (en) * | 2020-11-27 | 2021-03-26 | 华帝股份有限公司 | Webpage generation method, computer equipment and storage medium |
| CN112540758A (en) * | 2020-12-08 | 2021-03-23 | 杭州讯酷科技有限公司 | UI intelligent construction method based on voice recognition |
| CN112540762A (en) * | 2020-12-08 | 2021-03-23 | 杭州讯酷科技有限公司 | UI (user interface) quick manufacturing method based on table and field optimization sorting |
| CN112540760A (en) * | 2020-12-08 | 2021-03-23 | 杭州讯酷科技有限公司 | UI (user interface) quick construction method based on data source field |
| CN112540759B (en) * | 2020-12-08 | 2024-03-26 | 杭州讯酷科技有限公司 | Basic element construction method for visual UI interface generation |
| CN112667218A (en) * | 2020-12-22 | 2021-04-16 | 北京锐安科技有限公司 | Processing method, device, equipment and storage medium |
| CN112528204B (en) * | 2020-12-22 | 2024-02-06 | 北京搜房科技发展有限公司 | Method and device for manufacturing thematic webpage |
| CN114675910A (en) * | 2020-12-24 | 2022-06-28 | 广东飞企互联科技股份有限公司 | Distributed service-oriented component layout method and system |
| CN113220386A (en) * | 2021-04-06 | 2021-08-06 | 北京健康之家科技有限公司 | Instrument board publishing method and related equipment |
| CN113076499A (en) * | 2021-04-30 | 2021-07-06 | 北京字节跳动网络技术有限公司 | Page interaction method, device, equipment, medium and program product |
| CN113239672B (en) * | 2021-05-18 | 2024-04-16 | 北京京东振世信息技术有限公司 | Target file editing method and device, electronic equipment and storage medium |
| CN113296775A (en) * | 2021-06-17 | 2021-08-24 | 数字广东网络建设有限公司 | Page generation method and device, computer equipment and storage medium |
| CN113343157B (en) * | 2021-07-05 | 2023-07-14 | 湖南快乐阳光互动娱乐传媒有限公司 | Content editing method and device based on domain-specific language |
| CN116048348A (en) * | 2021-10-28 | 2023-05-02 | 北京字跳网络技术有限公司 | Component control method and device, electronic equipment and storage medium |
| CN114547525B (en) * | 2022-04-26 | 2022-08-05 | 成都瑞华康源科技有限公司 | Large-data-volume tree structure rendering system and method under Web browser |
| CN116952253B (en) * | 2023-09-21 | 2024-02-23 | 深圳库犸科技有限公司 | Method for adjusting moving path, terminal device and storage medium |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101593207A (en) * | 2009-07-06 | 2009-12-02 | 孟智平 | The method and system of a kind of structure and generation webpage |
| WO2013157678A1 (en) * | 2012-04-16 | 2013-10-24 | Kwon Oh Suk | System and method for dynamically converting webpage, and computer-readable recording medium |
| CN108415706A (en) * | 2018-03-14 | 2018-08-17 | 上海携程商务有限公司 | Visualize method, system, equipment and the storage medium of auto-building html files |
-
2019
- 2019-10-10 CN CN201910960381.0A patent/CN110781423B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101593207A (en) * | 2009-07-06 | 2009-12-02 | 孟智平 | The method and system of a kind of structure and generation webpage |
| WO2013157678A1 (en) * | 2012-04-16 | 2013-10-24 | Kwon Oh Suk | System and method for dynamically converting webpage, and computer-readable recording medium |
| CN108415706A (en) * | 2018-03-14 | 2018-08-17 | 上海携程商务有限公司 | Visualize method, system, equipment and the storage medium of auto-building html files |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110781423A (en) | 2020-02-11 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110781423B (en) | Webpage generation method and device and electronic equipment | |
| CN109918607B (en) | Page construction method and device, medium and computing equipment | |
| CN110688600A (en) | Online editing method, device and equipment based on HTML (Hypertext markup language) page and storage medium | |
| CN113239672B (en) | Target file editing method and device, electronic equipment and storage medium | |
| CN109445775B (en) | One-key active embedded code method, device and computer readable storage medium | |
| US10803236B2 (en) | Information processing to generate screen based on acquired editing information | |
| CN111651966A (en) | Data report file generation method and device and electronic equipment | |
| US20170031882A1 (en) | Web Page Profiler | |
| CN110888634B (en) | Game floor page generation method, game floor page generation device, computer equipment and storage medium | |
| CN113656005B (en) | Application component library construction method, application component configuration method and related devices | |
| CN117093316B (en) | Cross-platform page rendering system, electronic equipment and storage medium | |
| EP3819760A1 (en) | Methods and apparatus for generating a platform-agnostic mobile application configuration data structure with a dynamic quiz | |
| CN111787188B (en) | Video playing method and device, terminal equipment and storage medium | |
| CN115618144B (en) | Dynamic layout method, system, equipment and medium based on webpage | |
| WO2014120287A2 (en) | Creating a communication editable in a browser independent of platform and operating system | |
| CN111435300A (en) | Web system development method, device, equipment and storage medium | |
| JP2011118497A (en) | Device and program for managing guideline | |
| CN113220297A (en) | Webpage style dynamic generation method and device, storage medium and electronic equipment | |
| CN112181346B (en) | Method, device, server, client and medium for processing thinking guide graph | |
| CN113656041A (en) | Data processing method, device, equipment and storage medium | |
| CN114168875A (en) | Page program generation method and device, computer equipment and storage medium | |
| CN113849257A (en) | Page processing method, device, medium and electronic equipment | |
| CN110647327B (en) | Method and device for dynamic control of user interface based on card | |
| CN113094144A (en) | Display screen interface control method and electronic equipment | |
| CN107045549B (en) | Method and device for acquiring page number of electronic book |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| REG | Reference to a national code |
Ref country code: HK Ref legal event code: DE Ref document number: 40022047 Country of ref document: HK |
|
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |