CN110781423A - Webpage generation method and device and electronic equipment - Google Patents

Webpage generation method and device and electronic equipment Download PDF

Info

Publication number
CN110781423A
CN110781423A CN201910960381.0A CN201910960381A CN110781423A CN 110781423 A CN110781423 A CN 110781423A CN 201910960381 A CN201910960381 A CN 201910960381A CN 110781423 A CN110781423 A CN 110781423A
Authority
CN
China
Prior art keywords
data
content
component
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.)
Granted
Application number
CN201910960381.0A
Other languages
Chinese (zh)
Other versions
CN110781423B (en
Inventor
李大双
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN201910960381.0A priority Critical patent/CN110781423B/en
Publication of CN110781423A publication Critical patent/CN110781423A/en
Application granted granted Critical
Publication of CN110781423B publication Critical patent/CN110781423B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986Document structures and storage, e.g. HTML extensions

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

The disclosure provides a webpage generation method, a webpage generation device and electronic equipment, wherein the method comprises the following steps: obtaining a dragging instruction of a target content assembly, and setting the target content assembly in an assembly editing area according to the dragging instruction; acquiring a property editing instruction of the target content assembly, and recording a style source and a data source of the target content assembly according to the property editing instruction; and responding to an 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 load the webpage data by a browser to generate a webpage. The webpage generation method can generate the webpage capable of dynamically updating the webpage style and data, and improves the front-end development efficiency.

Description

Webpage generation method and device and electronic equipment
Technical Field
The present disclosure relates to the field of computer technologies, and in particular, to a method and an apparatus for generating a webpage capable of dynamically updating webpage styles and content, and an electronic device.
Background
A web page is a basic element constituting a web site, and a browser generally generates a web page by loading an HTML (HyperText Markup Language) file in which web page contents are described. In these techniques, an HTML file describes elements (e.g., fonts, colors, sizes) of text, pictures, tables, sounds, etc. on a page with various tags, and a browser interprets the tags and generates the page.
In the related art, front-end development mainly describes page styles and content by directly writing page codes, and in the application process, if requirements such as page style modification based on user experience are generated, a large amount of modification is often required to be performed on the page codes, so that a large amount of labor cost and time cost are brought. In addition, the modification process is time-consuming and labor-consuming, 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 webpage style cannot be updated in time, and the front-end development efficiency can be greatly reduced.
It is to be noted that the information disclosed in the above background section is only for enhancement of 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 generation method, a webpage generation device and electronic equipment, which are used for overcoming the problem of low development efficiency in a front-end development process due to the limitations and defects of related technologies at least to a certain extent.
According to an aspect of the present disclosure, there is provided a web page generation method including: obtaining a dragging instruction of a target content assembly, and setting the target content assembly in an assembly editing area according to the dragging instruction; acquiring a property editing instruction of the target content assembly, and recording a style source and a data source of the target content assembly according to the property editing instruction; and responding to an 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 load the webpage data by a browser to generate a webpage.
In an exemplary embodiment of the present disclosure, further comprising: obtaining usage frequencies of a plurality of content components, the usage frequencies including developer usage frequencies and user click frequencies; and displaying the plurality of content components in the component library according to the use frequency from large to small.
In an exemplary embodiment of the present disclosure, further comprising: and setting the content assembly with the use frequency less than the preset value as a state to be cleaned.
In an exemplary embodiment of the present disclosure, the generating a web page by the browser loading the web page data includes: providing the webpage data to a 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 a data source loading request and a style source loading request sent by the browser, so that the browser can determine a webpage display code of the content component according to the style data and the content data and then generate a webpage according to the arrangement sequence information of the content component and the webpage display code of the content component.
In an exemplary embodiment of the present disclosure, the data source includes a configured interface including interface links and interface parameters, and data including one or more of button copy, text, picture links.
In an exemplary embodiment of the present disclosure, recording the style source and the data source of the target content component according to the property editing instruction includes: and displaying a property editing box in response to the property editing instruction, wherein the property 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, and the size data in the size data field is increased along with the increase of the number of the data sources and is reduced along with the reduction 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 assembly from a server or a cache according to the style source and the data source of each content assembly in the assembly 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 setting of the target content component in the component editing region according to the drag instruction includes: determining the setting position of the target content assembly according to the end point of the moving track of the position of the dragging point; if setting the target content component with the set position as a coordinate would cause the target content component to at least partially overlap with other content components, automatically adjusting the position of at least one content component to set all content components to be non-overlapping.
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 dragging instruction of a target content component and setting the target content component in a component editing area according to the dragging 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; and the file generation module is set to respond to an editing ending instruction and generate 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 a browser to load the webpage data and generate a webpage.
According to an 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 an aspect of the present disclosure, there is provided a computer readable storage medium having a program stored thereon, which when executed by a processor, performs a method as in any one of the above.
According to the method and the device for generating the webpage data, the style source and the data source of the content component are set, the webpage data which can be loaded by the browser and can be used for pulling the latest style and the latest data from the server in real time are generated, the programming work of a front-end development end can be reduced, the dynamic update of the webpage content is realized under the condition that the front-end webpage code is not modified as far as possible, the coding and modifying cost existing in the front-end development process is reduced, and the 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 present disclosure and together with the description, serve to explain the principles of the disclosure. It is to be understood that the drawings in the following description are merely exemplary of the disclosure, and that other drawings may be derived from those drawings by one of ordinary skill in the art without the exercise of inventive faculty.
Fig. 1 is a schematic diagram of an exemplary system architecture to which a web page generation method or a web page generation apparatus according to 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 diagram of a web page data loading process in one embodiment of the 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 diagram illustrating a preview of the effect 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 generation 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 disclosure.
Detailed Description
Example embodiments will now be described more fully with reference to the accompanying drawings. Example embodiments may, however, be embodied in many different forms and should not be construed as limited to the 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 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 disclosure. One skilled in the relevant art will recognize, however, that the subject matter of the present disclosure can be practiced without one or more of the specific details, or with other methods, components, devices, steps, and the like. In other instances, well-known technical solutions have not been shown or described in detail to avoid obscuring aspects of the present disclosure.
Further, the drawings are merely schematic illustrations of the present disclosure, and the same or similar parts are denoted by the same reference numerals in the drawings, and thus their repetitive description 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 the form of 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 a web page generation method and a 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 used to provide a medium for communication links between the terminals 101, 102, 103 and the server 105, so that the terminals 101, 102, 103 can transmit information to the server 105 or receive information transmitted by the server 105. Network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, to name a few.
It should be understood that the number of terminals, networks, and servers in fig. 1 are merely illustrative. There may be any number of terminals, networks, and servers, as desired for an implementation. For example, server 105 may be a server cluster comprised of multiple servers, or the like. The terminals 101, 102, 103 may be various electronic devices having a display screen, including but not limited to smart phones, tablet computers, portable computers, desktop computers, and the like.
In some embodiments, the terminal 101 may be, for example, a web page user terminal, which 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, which is provided with a development environment of content components in the web page data for developing the content components and their styles; the server 105 may set 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 terminal 101 with the web page data, the styles of the content components, the content data of the content components, providing the terminal 102 with the developed content components and their styles, data sources and content data of the optional content components, and providing the terminal 103 with a content component storage service, for example. In some embodiments, the server 105 may also be used as a front-end development end, which is not particularly limited by this disclosure.
The following detailed description of exemplary embodiments of the disclosure refers 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, a web page generation method 200 may include:
step S1, obtaining a dragging instruction of a target content assembly, and setting the target content assembly in an assembly editing area according to the dragging instruction.
Step 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.
Step S3, responding to the edit ending instruction, generating 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 content component, so that the browser can load the web page data to generate a web page.
According to the method and the device for generating the webpage data, the style source and the data source of the content component are set, the webpage data which can be loaded by the browser and can be used for pulling the latest style and the latest data from the server in real time are generated, the programming work of a front-end development end can be reduced, the dynamic update of the webpage content is realized under the condition that the front-end webpage code is not modified as far as possible, the coding and modifying cost existing in the front-end development process is reduced, and the front-end development efficiency is effectively improved.
The steps of the embodiment shown in FIG. 2 will be described in detail below.
Step S1, obtaining a dragging instruction of a target content assembly, and setting the target content assembly in an assembly editing area according to the dragging instruction.
Different from the prior 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 developers through commonalities of products in a statistical group and componentization of each module of a page, and are stored on a server for being called by front-end developers. The types of content components may include, for example, text boxes, page headers, page footers, sidebars, advertising banners, operator slots, and the like, or a combination of arrangements 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 may include, for example, 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 comprises a configured interface and data, the configured interface comprises an interface link and interface parameters, and the data can comprise one or more of a button file, text and a picture link.
In the embodiment of the present disclosure, in addition to setting the position of the content component in the component editing area through a drag operation, the content component may also be moved through clicking, pressing, setting coordinates, and the like, which is not limited in the present disclosure.
Step 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 the embodiment of the present disclosure, a property edit box may be presented in response to a property edit instruction, where the property edit box includes a size data field, a style selection field, and a data source input field, and the data source input field is used to add, modify, and delete a data source.
The size data in the size data column can be modified and defined by developers, and in addition, the same or different fixed sizes can be set for different types of content components in order to facilitate management and layout, reduce the calculation amount during webpage generation and reduce the debugging difficulty. When the content assembly is set to be a fixed size, both the length and the width may be set to be fixed sizes, or one of the length and the width may be set to be a fixed size. When the content assembly is set to be of a fixed size, the number of the data sources may be set to be fixed to a preset value, and the number of the data sources is not allowed to exceed the preset value, and the data sources may also be displayed in the content assembly in a sliding, rolling, paging or other form, which is not limited by the disclosure.
In one embodiment, the size data in the size data column may be set to increase as the number of data sources increases and decrease as the number of data sources decreases. That is, the appearance of the set content component varies with the number of data sources. For example, one link class data source corresponds to a content component length of 5pt, one banner 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 image field refers to banner image field, and may include image files of various formats (often represented in the form of motion pictures), and is generally used for vividly representing advertising contents or publicity contents such as headlines and the like. Due to the wide variety of data sources, the data sources are not listed 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 bar can be used for selecting the existing style and modifying and storing the existing style. However, it should be noted that, because the webpage data in the embodiment of the present disclosure is mainly used for recording the style source, the content component style newly created or custom-modified by the developer may be saved to the server, and the storage address is added to the style selection bar of the content component as the style source.
Because the style data and the content data of the content assembly are stored on the server, the browser can pull the style 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 assembly; when the development end needs to update the content assemblies in large scale, webpage codes do not need to be modified, and only the style data corresponding to the style source and the content data corresponding to the data source need to be modified, so that the webpages loaded with the same content assembly can be updated to the latest style and the latest content data of the content assembly, the update workload of front-end developers is greatly reduced, and the development efficiency is improved.
Step S3, responding to the edit ending instruction, generating 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 content component, so that the browser can load the web page data to generate a web page.
In the embodiment of the present disclosure, the web page data records the arrangement order information of the content components rather than the area coordinates of each content component. The arrangement information of the content components may be generated, for example, according to the numbers of the content components from top to bottom, left to right (or other sequences) in the component editing area, for example, in the form of an array including the numbers of the content components, so that the browser loading the web page data may sequentially load the content components in real time according to the numbers of the content components recorded in the array. The data volume of the webpage data is smaller than that of the related technology, the response speed of the server to the browser to access the webpage can be improved, and the storage pressure of the server is reduced.
In one embodiment, the data type of the web page data is, for example, an HTML file, so that the web page data can be loaded and parsed without changing a browser, and then the web page is generated. Html (hypertext markup language), hypertext markup language, is a specification under a standard universal markup language. It marks the various parts of the web page to be displayed by means of a marker symbol. The HTML web page data itself is a text file, and by adding a tag to the text file, the browser can be told how to display the content (e.g., how to process the words, how to arrange the pictures, how to display the pictures, etc.). The browser reads the web page data in order and then interprets and displays the contents of its markup according to the markup.
In other embodiments of the present disclosure, the data type of the web page data may also be other data types that can be recognized by the browser without hindrance, such as JavaScript, which is not limited in this disclosure. (JavaScript is an interpreted scripting language that is a dynamic, weak, prototype-based language with built-in support types the JavaScript language was originally used on HTML pages to add dynamic functionality to the HTML pages.)
FIG. 3 is a flow diagram of a web page data loading process in one embodiment of the disclosure.
Referring to fig. 3, in an embodiment of the present disclosure, a web page data loading process may include, for example:
step S31, providing the web page data to 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 the web page display code of the content component according to the style data and the content data, the browser generates a web page according to the arrangement order information of the content component and the web page display code of the content component.
Different from a scheme in which style data and content data are directly loaded and recorded by a browser in the related art, the webpage data in the embodiment of the disclosure only records the arrangement sequence information of the content components, the style source and the data source of the content components, so that when the webpage data are acquired, the browser acquires the latest style data and content data of each content component from a server in real time according to the description of the webpage data, thereby realizing large-scale update without changing the webpage data or only modifying the style source, the data source and the arrangement sequence information of the content components of the webpage data, lowering the technical threshold of webpage maintenance, efficiently managing a plurality of webpages even if front-end webpage editors have little or no knowledge about programming, and providing favorable conditions for realizing artificial intelligent webpage arrangement in the follow-up process.
FIG. 4 is a schematic diagram of managing content components in one embodiment of the present disclosure.
In the embodiment of the disclosure, the usage frequency of the plurality of content components may be acquired from a client or a server, and then the plurality of content components may be presented in the component library according to the usage frequency 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 developers during front-end development, and clicked on by users during browser loading, the server can record the frequency of use of each content component and provide this 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 may be presented from large to small in terms of frequency of use.
The content components with high use frequency of developers are displayed at obvious positions in the component library, so that front-end developers can select the content components with high use frequency conveniently, the content components can be reused more times, the storage pressure of the server is further reduced, and the development efficiency is improved. The content assemblies with higher user click frequency are displayed at obvious positions in the assembly library, so that front-end developers can know the user preference degrees of various content assemblies conveniently, and the webpage development quality is improved. The content arrangement and display component can be determined according to user setting or default setting, or the content arrangement and display component can be set according to user-defined grouping and position of the content components in the component library, which is not limited in the disclosure.
The frequency may be set as the number of clicks in a unit time, which may be, for example, one day, one week, one month or half year, one year, etc., and may be set by the person skilled in the art according to the actual situation.
In some embodiments, a content component with a usage frequency less than a preset value may also be set to be in a to-be-cleaned state (e.g., the content component 6 in fig. 4), so that a front-end developer or a back-end content component developer/manager can find a content component with less usage of the developer and less clicks of a user in time, and perform maintenance such as cleaning and modifying on the component in time.
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 movement trajectory, and step S1 includes:
and step S11, determining the setting position of the target content assembly according to the end point of the dragging point position moving track.
Step S12, if the setting of the target content component with the set position as coordinates would cause the target content component to at least partially overlap with other content components, automatically adjusting the position of at least one content component to set all content components to be non-overlapping.
When the position of the target content assembly is set, the set position of the target content assembly can be determined according to the end point of the moving track of the position of the dragging point, and the arrangement of the content assembly is automatically adjusted to improve the development efficiency of front-end developers.
In addition, when the layout management is carried out on the content assembly, the new construction of the content assembly can be realized through dragging. For example, if the starting point of the position movement track of the drag point 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 starting point of the position moving track of the dragging point corresponds to the content component in the component editing area, the content component can be moved in response to the dragging instruction.
FIG. 6 is a diagram illustrating a preview of the effect 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 may be provided for the front-end developer to check whether the web page generated by the web page data conforms to expectations.
The style data and the content data of each content component may be loaded according to the style source and the data source of each content component within the component editing region in response to a page preview instruction (e.g., a click signal of a "preview" button in the editing interface in fig. 6), and a preview page may be generated according to the style data and the content data.
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 is generated in real time, so that the front-end developer can be helped to obtain the setting feedback of the content component in time, 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, a control area 74.
The 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 editing area 72 includes a plurality of content components that have been set, and a property editing box 721 corresponding to the current content component is shown in the upper right corner. The property edit box 721 includes a size data field for adding, modifying, and deleting data sources, a style selection field, and a data source input field in which size data in the size data field increases as the number of data sources increases and decreases as the number of data sources decreases.
The live preview area 73 presents the preview page in real time according to the content components already set in the component edit area.
The control area 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 switch between a real-time preview mode and a response click preview mode; component statistics control 742 is used to control the content components auto-sort function by frequency of use; the web page data generation control 743 is used for responding to the click to generate the web page data which can be loaded by the browser according to the setting and arrangement of the current content component.
As can be seen from fig. 7, the web page editing tool provided by the present disclosure has the advantages of low operation threshold, convenient operation, and the like, and can embody the simplicity and the ease of use of the web page generating method 200.
In summary, the webpage generating 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 content component arrangement order, the data source and the style source, reduce labor cost and time cost caused by batch modification in the related art, and have the advantages of simplicity, easy use, high efficiency and convenience.
Corresponding to the method embodiment, the present disclosure further provides a web page generating device, which can be used to execute the method embodiment.
Fig. 8 is a block diagram of a web page generation apparatus in an exemplary embodiment of the present disclosure.
Referring to fig. 8, the web page generation apparatus 800 may include:
the component layout management module 81 may be configured to acquire a drag instruction of a target content component, and set the target content component in a component editing region according to the drag instruction;
a component attribute management module 82, configured to obtain an attribute editing instruction record of the target content component, and according to the attribute editing instruction, obtain a style source and a data source of the target content component;
the file generating module 83 may be configured to respond to the edit ending instruction, and generate web page 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 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 frequency and user click frequency; and displaying the plurality of content components in the component library according to the use frequency from large to small.
In an exemplary embodiment, the component management module 84 is further configured to set content components having a frequency of use less than a preset value to a to-be-cleaned state.
In an exemplary embodiment of the present disclosure, the file generating 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 components and the webpage display codes of the content components after determining the webpage display codes of the content components according to the style data and the content data.
In an exemplary embodiment of the present disclosure, the data source includes a configured interface including interface links and interface parameters, and data including one or more of button copy, text, picture links.
In an exemplary embodiment of the disclosure, the component property management module 82 is configured to present a property edit box in response to the property edit instruction, the property edit box including a size data field, a style selection field, and a data source entry field for adding, modifying, and deleting data sources, wherein size data in 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: and the page preview module 85 is configured to respond to a page preview instruction, load 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 generate a preview page according to the style data and the content data.
In an exemplary embodiment of the disclosure, the component layout management module 81 is further configured to: determining the setting position of the target content assembly according to the end point of the moving track of the position of the dragging point; if setting the target content component with the set position as a coordinate would cause the target content component to at least partially overlap with other content components, automatically adjusting the position of at least one content component to set all content components to be non-overlapping.
In an exemplary embodiment of the present disclosure, the web page data is an HTML file.
Since the functions of the apparatus 800 have been 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 the 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, according to embodiments of the present disclosure. Conversely, the features and functions of one module or unit described above may be further divided into embodiments by a plurality of modules or units.
In an exemplary embodiment of the present disclosure, an electronic device capable of implementing the above method is also provided.
As will be appreciated by one skilled in the art, aspects of the present invention may be embodied as a system, method or program product. Thus, various aspects of the invention may be embodied in the form of: an entirely hardware embodiment, an entirely software embodiment (including firmware, microcode, etc.) or an embodiment combining hardware and software aspects that may all generally be referred to herein as a "circuit," module "or" system.
An electronic device 900 according to this embodiment of the invention is described below with reference to fig. 9. The electronic device 900 shown in fig. 9 is only an example and should not bring any limitations to the function and scope of use of the 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 memory unit 920, and a bus 930 that couples various system components including the memory unit 920 and the processing unit 910.
Wherein the storage unit stores program code that is executable by the processing unit 910 to cause the processing unit 910 to perform steps according to various exemplary embodiments of the present invention described in the above section "exemplary methods" of the present specification. For example, the processing unit 910 may perform a method as shown in fig. 2.
The storage unit 920 may include a readable medium in the form of a volatile storage unit, such as a random access memory unit (RAM)9201 and/or a cache memory unit 9202, and may further include a read only memory unit (ROM) 9203.
Storage unit 920 may also include a program/utility 9204 having a set (at least one) of program modules 9205, such program modules 9205 including but not limited to: an operating system, one or more application programs, other program modules, and program data, each of which, or some combination thereof, may comprise an implementation of a network environment.
Bus 930 can be any 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 devices (e.g., router, modem, etc.) that enable the electronic device 900 to communicate with one or more other computing devices. Such communication may occur via input/output (I/O) interface 950. Also, the electronic device 900 may communicate with one or more networks (e.g., a Local Area Network (LAN), a Wide Area Network (WAN) and/or a public network, such as the Internet) via the network adapter 960. As shown, the network adapter 960 communicates with the other modules of the electronic device 900 via the bus 930. It should be appreciated that although not shown, other hardware and/or software modules may be used in conjunction with the electronic device 900, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems, among others.
Through the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein may be implemented by software, or by software in combination with necessary hardware. Therefore, 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 (which may be a CD-ROM, a usb disk, a removable hard disk, etc.) or on a network, and includes several instructions to enable a computing device (which may be a personal computer, a server, a terminal device, or a network device, etc.) to execute the method according to the embodiments of the present disclosure.
The above-described figures are merely schematic illustrations of the processes involved in the method according to an exemplary embodiment of the invention, and are not intended to be limiting. It will be readily understood that the processes shown in the above figures are not intended to indicate or limit the chronological order of the processes. In addition, it is also readily understood that these processes may be performed synchronously or asynchronously, e.g., in multiple 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 variations, 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 (12)

1. A method for generating a web page, comprising:
obtaining a dragging instruction of a target content assembly, and setting the target content assembly in an assembly editing area according to the dragging instruction;
acquiring a property editing instruction of the target content assembly, and recording a style source and a data source of the target content assembly according to the property editing instruction;
and responding to an 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 load the webpage data by a browser to generate a webpage.
2. The web page generation method of claim 1, further comprising:
obtaining usage frequencies of a plurality of content components, the usage frequencies including developer usage frequencies and user click frequencies;
and displaying the plurality of content components in the component library according to the use frequency from large to small.
3. The web page generation method of claim 2, further comprising:
and setting the content assembly with the use frequency less than the preset value as a state to be cleaned.
4. The method for generating a web page according to claim 1, wherein the step of allowing a browser to load the web page data to generate the web page comprises:
providing the webpage data to a 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 a data source loading request and a style source loading request sent by the browser, so that the browser can determine a webpage display code of the content component according to the style data and the content data and then generate a webpage according to the arrangement sequence information of the content component and the webpage display code of the content component.
5. A method for generating a web page as claimed in any one of claims 1 to 4, wherein the data source comprises a configured interface comprising interface links and interface parameters and data comprising one or more of button scripts, text and picture links.
6. The method for generating web pages according to claim 1, wherein recording style sources and data sources of the target content components according to the property editing instructions comprises:
and displaying a property editing box in response to the property editing instruction, wherein the property 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, and the size data in the size data field is increased along with the increase of the number of the data sources and is reduced along with the reduction of the number of the data sources.
7. The web page generation method of claim 1, further comprising:
and responding to a page preview instruction, loading the style data and the content data of each content assembly from a server or a cache according to the style source and the data source of each content assembly in the assembly editing area, and generating a preview page according to the style data and the content data.
8. The method for generating a web page according to claim 1, wherein the drag instruction includes a drag point position movement trajectory, and setting the target content component in the component editing region according to the drag instruction includes:
determining the setting position of the target content assembly according to the end point of the moving track of the position of the dragging point;
if setting the target content component with the set position as a coordinate would cause the target content component to at least partially overlap with other content components, automatically adjusting the position of at least one content component to set all content components to be non-overlapping.
9. The web page generation method according to claim 1, wherein the web page data is an HTML file.
10. A web page data generating apparatus, comprising:
the component layout management module is used for acquiring a dragging instruction of a target content component and setting the target content component in a component editing area according to the dragging 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;
and the file generation module is set to respond to an editing ending instruction and generate 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 a browser to load the webpage data and generate a webpage.
11. 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-9 based on instructions stored in the memory.
12. A computer-readable storage medium, on which a program is stored which, when being executed by a processor, carries out the method according to any one of claims 1 to 9.
CN201910960381.0A 2019-10-10 2019-10-10 Webpage generation method and device and electronic equipment Active CN110781423B (en)

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 true CN110781423A (en) 2020-02-11
CN110781423B 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)

Cited By (27)

* Cited by examiner, † Cited by third party
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
CN111679827A (en) * 2020-04-28 2020-09-18 平安国际智慧城市科技股份有限公司 H5 page generation method, device, equipment and 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
CN112015410A (en) * 2020-07-16 2020-12-01 深圳市大富网络技术有限公司 Webpage editing method, device and system and computer 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
CN112433724A (en) * 2020-11-09 2021-03-02 北京达佳互联信息技术有限公司 Target component style generation method and device, electronic equipment and storage medium
CN112528204A (en) * 2020-12-22 2021-03-19 北京搜房科技发展有限公司 Method and device for making special topic webpage
CN112540759A (en) * 2020-12-08 2021-03-23 杭州讯酷科技有限公司 Basic element construction method for visual UI interface generation
CN112540760A (en) * 2020-12-08 2021-03-23 杭州讯酷科技有限公司 UI (user interface) quick construction method based on data source field
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
CN112558964A (en) * 2020-11-27 2021-03-26 华帝股份有限公司 Webpage generation method, computer equipment and storage medium
CN112579929A (en) * 2020-11-04 2021-03-30 京信数据科技有限公司 Visual block chain browser page construction method and device
CN112667218A (en) * 2020-12-22 2021-04-16 北京锐安科技有限公司 Processing method, device, equipment and storage medium
CN113076499A (en) * 2021-04-30 2021-07-06 北京字节跳动网络技术有限公司 Page interaction method, device, equipment, medium and program product
CN113220386A (en) * 2021-04-06 2021-08-06 北京健康之家科技有限公司 Instrument board publishing method and related equipment
CN113239672A (en) * 2021-05-18 2021-08-10 北京京东振世信息技术有限公司 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
CN113343157A (en) * 2021-07-05 2021-09-03 湖南快乐阳光互动娱乐传媒有限公司 Content editing method and device based on domain-specific language
CN113760269A (en) * 2020-07-17 2021-12-07 北京沃东天骏信息技术有限公司 Configuration method and device, and component rendering method, device and system
CN114547525A (en) * 2022-04-26 2022-05-27 成都瑞华康源科技有限公司 Large-data-volume tree structure rendering system and method under Web browser
CN114675910A (en) * 2020-12-24 2022-06-28 广东飞企互联科技股份有限公司 Distributed service-oriented component layout method and system
WO2023071452A1 (en) * 2021-10-28 2023-05-04 北京字跳网络技术有限公司 Component control method and apparatus, electronic device, and storage medium
CN116952253A (en) * 2023-09-21 2023-10-27 松灵机器人(深圳)有限公司 Method for adjusting moving path, terminal device and storage medium
CN112540762B (en) * 2020-12-08 2024-05-28 杭州讯酷科技有限公司 UI (user interface) quick making method based on table and field optimized sorting

Citations (3)

* Cited by examiner, † Cited by third party
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

Patent Citations (3)

* Cited by examiner, † Cited by third party
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

Cited By (36)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111679827A (en) * 2020-04-28 2020-09-18 平安国际智慧城市科技股份有限公司 H5 page generation method, device, equipment and storage medium
CN111679827B (en) * 2020-04-28 2024-04-26 深圳赛安特技术服务有限公司 H5 page generation method, device, equipment and storage medium
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
CN113760269A (en) * 2020-07-17 2021-12-07 北京沃东天骏信息技术有限公司 Configuration method and device, and component rendering method, device and system
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
CN112579929A (en) * 2020-11-04 2021-03-30 京信数据科技有限公司 Visual block chain browser page construction method and device
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
CN112540760A (en) * 2020-12-08 2021-03-23 杭州讯酷科技有限公司 UI (user interface) quick construction method based on data source field
CN112540762A (en) * 2020-12-08 2021-03-23 杭州讯酷科技有限公司 UI (user interface) quick manufacturing method based on table and field optimization sorting
CN112540762B (en) * 2020-12-08 2024-05-28 杭州讯酷科技有限公司 UI (user interface) quick making method based on table and field optimized sorting
CN112540758B (en) * 2020-12-08 2024-05-07 杭州讯酷科技有限公司 Intelligent UI (user interface) construction method based on voice recognition
CN112540758A (en) * 2020-12-08 2021-03-23 杭州讯酷科技有限公司 UI intelligent construction method based on voice recognition
CN112540759A (en) * 2020-12-08 2021-03-23 杭州讯酷科技有限公司 Basic element construction method for visual UI interface generation
CN112540759B (en) * 2020-12-08 2024-03-26 杭州讯酷科技有限公司 Basic element construction method for visual UI interface generation
CN112540760B (en) * 2020-12-08 2024-05-28 杭州讯酷科技有限公司 UI (user interface) quick construction method based on data source field
CN112528204B (en) * 2020-12-22 2024-02-06 北京搜房科技发展有限公司 Method and device for manufacturing thematic webpage
CN112528204A (en) * 2020-12-22 2021-03-19 北京搜房科技发展有限公司 Method and device for making special topic webpage
CN112667218A (en) * 2020-12-22 2021-04-16 北京锐安科技有限公司 Processing method, device, equipment and storage medium
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
CN113239672A (en) * 2021-05-18 2021-08-10 北京京东振世信息技术有限公司 Target file editing method and device, electronic equipment and storage medium
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
CN113343157A (en) * 2021-07-05 2021-09-03 湖南快乐阳光互动娱乐传媒有限公司 Content editing method and device based on domain-specific language
WO2023071452A1 (en) * 2021-10-28 2023-05-04 北京字跳网络技术有限公司 Component control method and apparatus, electronic device, and storage medium
CN114547525A (en) * 2022-04-26 2022-05-27 成都瑞华康源科技有限公司 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
CN116952253A (en) * 2023-09-21 2023-10-27 松灵机器人(深圳)有限公司 Method for adjusting moving path, terminal device and storage medium

Also Published As

Publication number Publication date
CN110781423B (en) 2024-02-06

Similar Documents

Publication Publication Date Title
CN110781423B (en) Webpage generation method and device and electronic equipment
CN112800370B (en) Processing method and device of business document, computer equipment and storage medium
CN102937979A (en) User-defined optimization of webpage
CN110609681A (en) System, method, device and medium for visually configuring and generating WEB application
US10417317B2 (en) Web page profiler
CN113535164A (en) Front-end interface generation method and device, electronic equipment and storage medium
CN111651966A (en) Data report file generation method and device and electronic equipment
CN107451163B (en) Animation display method and device
US10956658B2 (en) Digital content editing of a document object model (DOM) based on object model comparison
CN113094144A (en) Display screen interface control method and electronic equipment
CN114756228A (en) Page processing method, device, equipment and storage medium
US11126410B2 (en) Method and apparatus for building pages, apparatus and non-volatile computer storage medium
CN110162301B (en) Form rendering method, form rendering device and storage medium
EP3819760A1 (en) Methods and apparatus for generating a platform-agnostic mobile application configuration data structure with a dynamic quiz
CN113220297A (en) Webpage style dynamic generation method and device, storage medium and electronic equipment
CN111435300A (en) Web system development method, device, equipment and storage medium
CN115408002A (en) Webpage generation method, system, electronic equipment and storage medium
KR101976306B1 (en) Web page creation support device, and storage medium
CN113849257A (en) Page processing method, device, medium and electronic equipment
CN114356291A (en) Method, device, equipment and medium for generating form based on configuration file
CN113656041A (en) Data processing method, device, equipment and storage medium
CN114168875A (en) Page program generation method and device, computer equipment and storage medium
CN113419711A (en) Page guiding method and device, electronic equipment and storage medium
CN113296759A (en) User interface processing method, user interface processing system, user interface processing device, and storage medium
CN113934959A (en) Program preview method and device, computer equipment and storage medium

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