CN112507273B - Web page generation method, device and electronic device - Google Patents
Web page generation method, device and electronic deviceInfo
- Publication number
- CN112507273B CN112507273B CN202011482379.6A CN202011482379A CN112507273B CN 112507273 B CN112507273 B CN 112507273B CN 202011482379 A CN202011482379 A CN 202011482379A CN 112507273 B CN112507273 B CN 112507273B
- Authority
- CN
- China
- Prior art keywords
- component
- style
- information
- target
- display
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; 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
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明提供了一种网页页面的生成方法、装置和电子设备，该方法包括：响应针对于目标组件的选中指令，显示该目标组件，该目标组件中包括待配置的组件信息；响应针对于组件信息的配置指令，生成配置后的目标组件；基于配置后的目标组件生成网页页面。该方式中，用户可以根据业务需求选择组件并配置组件的组件信息，进而基于配置完成的组件生成网页页面；这种组件化的网页生成方式更加灵活，可以满足各类业务需求，同时也提高了页面开发效率。
The present invention provides a method, apparatus, and electronic device for generating a web page. The method comprises: responding to a selection instruction for a target component, displaying the target component, wherein the target component includes component information to be configured; responding to a configuration instruction for the component information, generating a configured target component; and generating a web page based on the configured target component. In this method, users can select components and configure component information based on business needs, and then generate a web page based on the configured components. This componentized web page generation method is more flexible, can meet various business needs, and also improves page development efficiency.
Description
Technical Field
The present invention relates to the field of page design technologies, and in particular, to a method and an apparatus for generating a web page, and an electronic device.
Background
Cloud computing companies help to push cloud computing to land in various industries by pushing out services such as cloud servers, cloud databases, cloud storage, CDNs (Content Delivery Network, content delivery networks), big data and various industry solutions, and help traditional industries to smoothly transform and upgrade. To serve more users, cloud computing companies expose various services and industry solutions through a cloud computing network.
In the related art, in the services provided by the cloud computing network, all services share a set of HTML (Hyper Text Markup Language ) pages, and data in the pages are filled with different services (also referred to as product lines), and codes of the set of HTML pages used in the method cannot be shared with pages with different forms, so that in the process of project development, the universality and flexibility of page codes are low, and the development efficiency is low.
Disclosure of Invention
The invention aims to provide a webpage generation method, device and electronic equipment so as to improve the webpage development efficiency.
In a first aspect, an embodiment of the invention provides a webpage generating method, which comprises the steps of responding to a selected instruction aiming at a target component, displaying the target component, wherein the target component comprises component information to be configured, responding to a configuration instruction aiming at the component information, generating a configured target component, and generating a webpage based on the configured target component.
In an alternative embodiment, the component information to be configured includes a component name, a component code, a component classification, a component state and a component content, and the step of generating the configured target component in response to the configuration instruction for the component information includes extracting the component name, the component code, the component classification, the component state and the component content carried in the configuration instruction of the target component if the configuration instruction of the target component is received, and configuring the target component according to the extracted component name, the component code, the component classification, the component state and the component content to obtain the configured target component.
In an alternative embodiment, the component content comprises at least one content list, each content list comprises a list title, a list code and a content description, and before the step of extracting the component name, the component code, the component classification, the component state and the component content carried in the configuration instruction of the target component if the configuration instruction of the target component is received, the method further comprises the step of responding to the content list configuration instruction of the target component and generating the content lists of a plurality of target components according to the preset limit number of the content lists.
In an alternative embodiment, after the step of generating the configured target component in response to the configuration instruction for the component information, the method further includes displaying the display style in response to the selected instruction for the display style of the configured target component, where the display style includes style information to be configured, and generating the configured display style in response to the configuration instruction for the style information.
In an alternative embodiment, the style information to be configured includes a style name, a client side supported by the style, a computer side style code, a mobile side style code and a style state, and the step of generating a configured display style in response to a configuration instruction for the style information includes extracting style information in the configuration instruction for the display style if the configuration instruction for the display style is received, and configuring the display style according to the extracted style information to obtain the configured display style.
In an alternative embodiment, the step of generating the webpage based on the configured target component includes packaging the configured target component into a functional component, previewing the display effect of the functional component according to the display style configured by the target component, and generating the webpage containing the display effect of the functional component in response to the issuing instruction of the functional component.
In an alternative embodiment, after the step of encapsulating the configured target component into the functional component, the method further includes storing component information corresponding to the functional component and style information of a display style corresponding to the functional component in a preset database, and the step of generating a webpage including a display effect of the functional component in response to an issue instruction of the functional component includes the steps of acquiring the component information of the functional component and the style information of the display style corresponding to the functional component from the preset database by invoking a preset interface through a node technology if the issue instruction of the functional component is received, and analyzing the acquired information to generate the webpage.
In an alternative embodiment, the plurality of functional components are provided, component information of the functional components comprises component codes, the step of generating the webpage comprising the display effect of the functional components according to the issuing instruction of the functional components comprises the steps of extracting component codes corresponding to the plurality of functional components from the issuing instruction if the issuing instruction is received, and acquiring the component information of the functional components matched with the component codes and the style information of display styles corresponding to the functional components from a preset database according to the component codes corresponding to the functional components by invoking a preset interface through node technology according to each functional component, and analyzing the acquired information corresponding to each functional component to generate the webpage.
In a second aspect, an embodiment of the invention provides a device for generating a webpage, which comprises a component selection model, a component configuration module and a webpage generation module, wherein the component selection model is used for responding to a selection instruction aiming at a target component and displaying the target component, the target component comprises component information to be configured, the component configuration module is used for responding to a configuration instruction aiming at the component information and generating the configured target component, and the webpage generation module is used for generating the webpage based on the configured target component.
In a third aspect, an embodiment of the present invention provides an electronic device, where the electronic device includes a processor and a memory, where the memory stores machine executable instructions that can be executed by the processor, and the processor executes the machine executable instructions to implement the method for generating a web page described above.
In a fourth aspect, embodiments of the present invention provide a machine-readable storage medium storing machine-executable instructions that, when invoked and executed by a processor, cause the processor to implement the method of generating a web page described above.
The embodiment of the invention has the following beneficial effects:
The webpage generating method, the webpage generating device and the electronic equipment are characterized in that firstly, a target component comprising component information to be configured is displayed in response to a selection instruction aiming at the target component, then, the configured target component is generated in response to a configuration instruction aiming at the component information, and then, the webpage is generated based on the configured target component. In the method, a user can select the components according to the service requirements and configure the component information of the components, and further, the webpage is generated based on the configured components, the generation mode of the componentized webpage is more flexible, various service requirements can be met, and meanwhile, the page development efficiency is improved.
Additional features and advantages of the invention will be set forth in the description which follows, or in part will be obvious from the description, or may be learned by practice of the invention.
In order to make the above objects, features and advantages of the present invention more comprehensible, preferred embodiments accompanied with figures are described in detail below.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings that are needed in the description of the embodiments or the prior art will be briefly described, and it is obvious that the drawings in the description below are some embodiments of the present invention, and other drawings can be obtained according to the drawings without inventive effort for a person skilled in the art.
FIG. 1 is a flowchart of a method for generating a web page according to an embodiment of the present invention;
FIG. 2 is a flowchart of another method for generating a web page according to an embodiment of the present invention;
FIG. 3 is a flowchart of another method for generating a web page according to an embodiment of the present invention;
FIG. 4 is a schematic diagram showing a display effect of a functional component according to an embodiment of the present invention;
Fig. 5 is a schematic structural diagram of a device for generating a web page according to an embodiment of the present invention;
Fig. 6 is a schematic structural diagram of an electronic device according to an embodiment of the present invention.
Detailed Description
For the purpose of making the objects, technical solutions and advantages of the embodiments of the present invention more apparent, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention, and it is apparent that the described embodiments are some embodiments of the present invention, but not all embodiments of the present invention. The components of the embodiments of the present invention generally described and illustrated in the figures herein may be arranged and designed in a wide variety of different configurations.
Thus, the following detailed description of the embodiments of the invention, as presented in the figures, is not intended to limit the scope of the invention, as claimed, but is merely representative of selected embodiments of the invention. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
With the continuous development of technology, cloud service applications gradually permeate from the internet industry to traditional industries of manufacture, government affairs, finance, education, medical treatment and the like, and a plurality of typical enterprises appear in each vertical industry. Cloud computing companies help to push cloud computing to land in various vertical industries by pushing out services such as cloud servers, cloud databases, cloud storage, CDNs, big data and various industry solutions, and help traditional industries to smoothly transform and upgrade. To serve more users, cloud computing companies expose various services and industry solutions through a cloud computing network.
In the related art, a cloud computing network for providing services is generally designed in the following two ways:
In the first mode, a form that one page corresponds to one file is adopted, when a product line is required to be newly added in the cloud computing network, an HTML page is required to be newly added, namely, data in an original HTML page is modified, so that the newly added HTML page is obtained, and then the newly added HTML page and the original HTML page are integrally connected. With the increase or change of business, the complexity of the system can increase exponentially, and cloud computing networks have hundreds of product lines, and hundreds of HTML pages are required to be maintained, so that the development and maintenance costs are high.
In the second mode, a mode that all services share one set of HTML page is adopted, the whole product web page uses one set of HTML, different services (can also be called as a product line) are filled with data in the page, codes of the set of HTML page used in the mode cannot be shared with pages in different other forms, and therefore in the project development process, the universality and flexibility of the page codes are low, the development efficiency is low, and the labor cost consumption is high.
Based on the above problems, the embodiments of the present invention provide a method, an apparatus, and an electronic device for generating a web page, where the technology is applied to a web page design scene for providing services, especially a web page design scene of a cloud computing network. For the sake of understanding the present embodiment, first, a method for generating a web page disclosed in the present embodiment of the present invention is described in detail, as shown in fig. 1, where the method includes the following steps:
and step S102, responding to a selected instruction aiming at a target component, and displaying the target component, wherein the target component comprises component information to be configured.
The target component is typically a component to be configured including component information to be configured, and the selection instruction may be an operation of selecting the target component in a preset component library by a user, for example, clicking the target component in the component library or clicking an edit button corresponding to the target component. The component information may be set in advance according to the development requirements of the developer, and the component information may be standardized information, that is, each component configured by each user must include the component information, specifically, the component information may include a component name, a component identifier, a component classification, a component content, and the like, which is not limited herein.
Step S104, responding to the configuration instruction aiming at the component information, and generating the configured target component.
The configuration instruction of the component information may be sent by the user through the terminal device, where the configuration instruction carries component information configured by the user on the target component, where the component information is generally information input by the user on the component information to be configured in the displayed target component, for example, an input component name is "core advantage", a component identifier is "123456", a component is classified as a "custom component" and a component content is "x", and then the component information configured by the user on the target component carried in the configuration instruction is "core advantage", a component identifier is "123456", a component is classified as a "custom component" and a component content is "x", and further, the target component is configured according to the information carried in the configuration instruction, so as to obtain the configured target component.
And step S106, generating a webpage based on the configured target component.
When the configuration of the target component is completed, the user may send an issue instruction to the target component to generate a web page according to the configured target component, where the web page displays the configured target component. The configured target component displayed in the webpage can provide a specified service outwards, and the service logic of the specified service is determined according to the component information of the target component.
In a specific implementation, the target component corresponds to a default display style, and the user may configure one or more display styles for the target component according to the requirement, so as to display the target component in the web page according to the default display style corresponding to the target component or the display style configured by the user.
In some embodiments, the number of the target components may be multiple, each target component may be configured according to the steps S102-S104 to obtain a configured target component, and when the configuration of the multiple target components is completed, the multiple configured target components may be freely combined to generate a web page containing the multiple target components. In some embodiments, a target component may correspond to a specific service or may correspond to a product line, so that content displayed in a web page may be divided into multiple components, that is, the web page may be modularized.
The webpage generating method includes the steps of firstly, responding to a selection instruction aiming at a target component, displaying the target component comprising component information to be configured, further responding to a configuration instruction aiming at the component information, generating a configured target component, and then generating the webpage based on the configured target component. In the method, a user can select the components according to the service requirements and configure the component information of the components, and further, the webpage is generated based on the configured components, the generation mode of the componentized webpage is more flexible, various service requirements can be met, and meanwhile, the page development efficiency is improved.
The embodiment of the invention also provides another webpage generating method, which is realized on the basis of the method of the embodiment, wherein the method mainly describes the specific process of responding to the configuration instruction aiming at the component information to generate the configured target component (realized by the following steps S204-S206), and the method comprises the following steps:
and step S202, displaying the target component in response to a selected instruction aiming at the target component, wherein the target component comprises component information to be configured, and the component information to be configured comprises a component name, a component code, a component classification, a component state and component content.
The component name is used for indicating the name of the target component, the component code is used for indicating the code of the target component, the component classification is used for indicating the category of the target component, for example, the component classification can be a basic component, a marketing component, a custom component and the like, the component state can comprise an on state or an off state and is used for indicating whether the target component is available currently, and the component content is used for indicating the business logic provided by the target component.
Step S204, if a configuration instruction of a target component is received, extracting a component name, a component code, a component classification, a component state and a component content carried in the configuration instruction of the target component.
The component information carried in the configuration instruction of the target component is information input by a user aiming at the component information to be configured in the target component.
Step S206, configuring the target component according to the extracted component name, component code, component classification, component state and component content to obtain the configured target component.
When the component name, the component code, the component classification, the component state and the component content carried in the configuration instruction are extracted, the component name, the component code, the component classification, the component state and the component content are configured into the component information of the target component, and the configured target component is obtained.
In some embodiments, the component content comprises at least one content list, each content list comprises a list title, a list code, a content description and the like, and the mode of generating the component content in the configuration instruction is that the content list configuration instruction for the target component is responded, and the content list of a plurality of target components is generated according to the preset limit number of the content list.
The number of the preset limiting strips of the content list can be preset by a developer, for example, the number of the limiting strips which are not used is set according to different component classifications, or the number of the limiting strips of the content list can be freely set by a user according to requirements, wherein the number of the limiting strips of the content list can be a numerical range, a specified numerical value or the like, for example, the number of the limiting strips of the content list can be 8, or a minimum of 2 and a maximum of 9. The list title included in the content list is used to indicate the name of the content list, the list code is used to identify the content list, and the content description is used to indicate the available functions or effects of the content list.
Step S208, generating a webpage based on the configured target component.
The webpage generating method includes the steps of firstly, responding to a selected instruction aiming at a target component, displaying the target component comprising a component name to be configured, a component code, a component classification, a component state and a component content, extracting the component name, the component code, the component classification, the component state and the component content carried in the configuration instruction of the target component if the configuration instruction of the target component is received, configuring the target component according to the extracted component name, the component code, the component classification, the component state and the component content, obtaining the configured target component, and then generating the webpage based on the configured target component. In the mode, each component has own iteration and design process, and by configuring component information for the component, service personnel can freely select each component to assemble different webpage pages, so that the automatic page configuration by the service personnel according to service requirements is finally realized, the service pages are rapidly online, the component information structure display standardization is realized, the deployment cost is greatly reduced, the development efficiency is improved, and the coupling degree is reduced.
The embodiment of the invention also provides another webpage generating method, which is realized on the basis of the method of the embodiment, and the method mainly describes the specific process of generating the webpage based on the configured target component (realized by the following steps S310-S314), as shown in FIG. 3, and comprises the following steps:
And step S302, the target component is displayed in response to a selected instruction aiming at the target component, wherein the target component comprises component information to be configured.
Step S304, responding to the configuration instruction aiming at the component information, and generating the configured target component.
And step S306, responding to a selected instruction of the configured display style of the target component, and displaying the display style, wherein the display style comprises style information to be configured.
The display style of the target component is usually a to-be-configured style including style information to be configured, and the selection instruction may be an operation of selecting the display style of the target component in a preset component library by a user, for example, clicking the display style of the target component in the component library, or triggering an editing button of the display style of the target component, etc. The style information can be set in advance according to the research and development requirements of research and development personnel, and the style information can be standardized information, namely, the display style of each component configured by each user must contain the style information, so that the user can configure the display style of the component.
Step S308, responding to the configuration instruction aiming at the style information, and generating the configured display style.
The configuration instruction of the style information may be sent by the user through the terminal device, where the configuration instruction carries style information configured by the user on the display style of the target component, and the style information is generally information input by the user on style information to be configured of the display style, so that the display style of the target component is configured according to the style information carried in the configuration instruction, and the configured display style of the target component is obtained.
The style information to be configured comprises a style name, a client supported by a style, a computer end style code, a mobile end style code, a style state and the like, wherein the style name is used for indicating the name of the display style, the client supported by the style is used for indicating whether the display style supports the computer end or the mobile end, the computer end style code is used for indicating the identification when the computer end is supported, the mobile end style code is used for indicating the identification when the mobile end is supported, and the style state can comprise an opening state and a closing state and is used for indicating whether the display style is currently available. In some embodiments, the style information may further include other information, which may be set according to the needs of the developer, for example, a computer-side display style thumbnail, a mobile-side display style thumbnail, description information, etc.
In specific implementation, the step S308 may be implemented by the following steps 10-11:
Step 10, if a configuration instruction for a display style is received, style information in the configuration instruction for the display style is extracted. The style information carried in the configuration instruction of the display style is information input by a user aiming at the style information to be configured in the display style.
And 11, configuring a display style according to the extracted style information to obtain a configured display style.
Step S310, the configured target component is packaged into a functional component.
In specific implementation, the front end vue framework and JavaScript technology can be used to package the configured target component into a functional component. The vue framework is typically a versatile and high-performance JavaScript framework that can help users create code libraries with greater maintainability and testability, the vue framework is typically a progressive JavaScript framework, and like other frameworks, the vue framework allows users to split a web page into reusable components, each containing its own HTML, CSS (CASCADING STYLE SHEETS ), javaScript for rendering corresponding places in the web page, where JavaScript is a lightweight, interpreted or just-in-time compiled high-level programming language with functional preference. The JavaScript technology is usually a special effect of JavaScript script codes, is an interpreted script language, is a dynamic type, weak type and prototype-based language, is internally provided with a support type, is called a JavaScript engine, is a part of a browser, is widely used in a script language of a client, is used on an HTML webpage, and is used for adding dynamic functions to the HTML webpage.
Step S312, previewing the display effect of the functional component according to the display style of the target component configuration.
The display style of the target component configuration may be the display style configured in steps S306 to S308, or may be a default display style. The display effect of the functional component on the computer end or the mobile end can be previewed according to the display style of the target component configuration.
In a specific implementation, the number of display modes of the target component configuration may be multiple, so that a user may preview the display effect of the functional component under each display mode at the same time, or may select one of the display modes for previewing, so that the user may change the display mode of the functional component at will, or adjust the display mode of the functional component. In some embodiments, the display effect of the plurality of content lists corresponding to the functional component may be previewed, so that the user may adjust the display style of the plurality of content lists according to the requirement, where the display style of the content list corresponds to the display style of the functional component.
In step S314, in response to the issue instruction for the functional component, a web page containing the display effect of the functional component is generated.
When the display effect of the functional component meets the user expectation, the user can trigger an instruction for issuing the functional component to generate a webpage containing the functional component meeting the user expectation, and can understand that the functional component meeting the user expectation is issued to the webpage for display.
In the specific implementation, after the configuration of the display style of the target component is completed and the configured target component is packaged into the functional component, component information corresponding to the functional component (corresponding to the component information corresponding to the target component) and style information of the display style corresponding to the functional component (corresponding to the display style corresponding to the target component) may be stored in a preset database. The component information corresponding to the functional component and the style information of the corresponding display style of the functional component can be stored in a preset database in the form of component examples, the data structure of the component example corresponding to each functional component is defined and stored through the back end, the data structure of each component example is the same, the instantiation data of the functional component defines a JSON format through the front end, and the following is an example of the component example in the JSON format:
* Field interpretation:
id, unique property of component instance, self-increment;
show whether pc (corresponding to whether the computer terminal is supported) or h5 (corresponding to whether the mobile terminal is supported);
name, renaming components, and adding numbers to the same components after default to distinguish the components;
sequencing;
Table list data, uniformly using two-dimensional array, and many components may have multiple content lists;
support, whether pc is supported or not, and whether h5 is supported or not;
Content, other data of the component;
component_class: data of component class (component code, component state, component class label, etc.);
style_class: data of style class (style coding, component status, clients supported by style, etc.).
In a specific implementation, the step S314 may be implemented by, if an issue instruction of a functional component is received, calling a preset interface through a node technology to obtain component information of the functional component and style information of a display style corresponding to the functional component from a preset database, analyzing the obtained information, and generating a web page.
The node technology described above may generally be a development tool that provides a simple way to create a high performance server and various applications that may run in the server. The method comprises the steps that a preset interface is called through a node technology, component information of a function component and style information of a display style corresponding to the function component can be obtained and analyzed from a preset database, then an HTML file is obtained, namely an HTML page is generated, the HTML page is the webpage, and the preset interface can be an https interface.
For the sake of understanding the embodiments of the present invention, fig. 4 shows a schematic diagram of a display effect of a functional component, where a plurality of component instances in JSON format may be stored in preset data, where a component instance is defined as { title: core advantage, list [ { name: security controllable, desc: user exclusive computing resource, in the underlying resource. The title in the component instance may represent a component name, the list identifies a content list (fig. 4 includes 4 content lists), the name may represent a list name of the content list, the desc may identify a content description, and the like. The component names of the functional component in fig. 4 are core advantages, the functional component includes 4 content lists, the list names of the 4 content lists are respectively safe, controllable, efficient, easy to implement and low in cost, in fig. 4, the 4 content lists are written into four blocks, and are displayed according to 2 display modes of each row, of course, the four blocks can be displayed according to other display modes set by the target component, and the four blocks can be freely selected by a user.
In a specific implementation, a user may configure a plurality of target components according to a service requirement, so as to obtain a plurality of functional components, where component information of each functional component includes component codes, where step S314 may be implemented by the following steps 20-21:
And step 20, if the issuing instruction is received, extracting component codes corresponding to the functional components from the issuing instruction.
Step 21, for each functional component, based on the component code corresponding to the functional component, calling a preset interface through a node technology to acquire component information of the functional component matched with the component code and style information of a display style corresponding to the functional component from a preset database, analyzing the acquired information corresponding to each functional component, and generating a webpage.
Each component configured by a user in the embodiment of the invention has own iteration and design process, the component information of the configured components is complementary with the service design, each design iteration is just the component of each iteration, the component information of each component is assembled into a JSON protocol by a developer to be bound to each component, the service personnel (equivalent to the user) can freely select each component to be assembled into different service pages, finally, the service personnel can automatically complete the page configuration according to the service requirements, the service pages can be rapidly brought on line, the content structure can be displayed and standardized, the deployment cost can be greatly reduced, the development efficiency can be improved, and the coupling degree can be reduced. The method has the specific advantages that:
the method has the advantages that the page configuration can be independently completed for business personnel, namely, the business personnel can complete the page configuration according to business requirements without depending on research personnel, the business page is rapidly online, namely, the business personnel can freely select components, the page can be immediately released to the outside after the component configuration is completed, the content structure display is standardized, namely, the styles of the components are bound with the components, and different display styles can be selected.
For developers, the code coupling degree is reduced, namely, the modularization of page contents can lead codes to be low in coupling, all codes do not need to be rubbed together like the traditional development, so that the development efficiency is greatly improved, the maintenance cost is reduced, namely, the modularization can avoid repeatedly manufacturing wheels, the components can be reused on different pages, the code quality is improved, the maintenance cost is reduced, the debugging is convenient, namely, the error checking speed of the developers can be accelerated, if the page has a problem, each related component can be found out, and the related components can be pulled out one by one until the normal state is recovered, so that the error occurrence position can be rapidly locked, and the modification is convenient.
According to the webpage generation method, the flexible computer end and mobile end display style configuration is provided by setting the component information and the style information of the component display style, the component display style is supported to be quickly adjusted, and different components are freely combined to meet the use scenes of different services, so that cloud products and solutions can be quickly brought on line, the content structure display standardization can be realized, the system has great flexibility and expansibility, repeated secondary development of a background can be reduced, the working efficiency is improved, and the coupling degree is reduced.
Corresponding to the embodiment of the method, the embodiment of the invention provides a device for generating a webpage, as shown in fig. 5, the device comprises:
The component selection model 50 is used for responding to a selected instruction aiming at a target component, and displaying the target component, wherein the target component comprises component information to be configured.
The component configuration module 51 is configured to generate a configured target component in response to a configuration instruction for component information.
The page generating module 52 is configured to generate a web page based on the configured target component.
The webpage generating device firstly responds to a selected instruction aiming at the target component to display the target component comprising the component information to be configured, further responds to a configuration instruction aiming at the component information to generate a configured target component, and then generates the webpage based on the configured target component. In the method, a user can select the components according to the service requirements and configure the component information of the components, and further, the webpage is generated based on the configured components, the generation mode of the componentized webpage is more flexible, various service requirements can be met, and meanwhile, the page development efficiency is improved.
The component information to be configured includes a component name, a component code, a component classification, a component state and a component content, and the component configuration module 51 is configured to extract the component name, the component code, the component classification, the component state and the component content carried in a configuration instruction of a target component if the configuration instruction of the target component is received, and configure the target component according to the extracted component name, the component code, the component classification, the component state and the component content, so as to obtain the configured target component.
The device further comprises a content list configuration module, wherein the content list configuration module is used for responding to a content list configuration instruction aiming at the target components and generating the content lists of the target components according to the preset limit number of the content lists.
The device further comprises a style configuration module, wherein the style configuration module is used for responding to the configuration instruction aiming at the component information, after generating the configured target component, responding to the selected instruction aiming at the display style of the configured target component, displaying the display style, the display style comprises style information to be configured, and responding to the configuration instruction aiming at the style information, and generating the configured display style.
The style information to be configured comprises a style name, a client supported by a style, a computer end style code, a mobile end style code and a style state, wherein the style configuration module is further used for extracting style information in a configuration instruction of a display style if the configuration instruction of the display style is received, and configuring the display style according to the extracted style information to obtain the configured display style.
Further, the page generating module 52 is configured to encapsulate the configured target component into a functional component, preview the display effect of the functional component according to the display style configured by the target component, and generate a web page including the display effect of the functional component in response to the issue instruction for the functional component.
The device further comprises an information storage module for storing the component information corresponding to the functional component and the style information of the display style corresponding to the functional component into a preset database, and the page generation module 52 is further used for acquiring the component information of the functional component and the style information of the display style corresponding to the functional component from the preset database by invoking a preset interface through a node technology if an issuing instruction of the functional component is received, and analyzing the acquired information to generate a webpage.
The page generation module 52 is further configured to extract component codes corresponding to the plurality of functional components from the issuing instruction if the issuing instruction is received, call a preset interface through a node technology for each functional component based on the component code corresponding to the functional component to acquire component information of the functional component matched with the component code and style information of a display style corresponding to the functional component from a preset database, and parse the acquired information corresponding to each functional component to generate a webpage.
The device for generating a web page provided by the embodiment of the present invention has the same implementation principle and technical effects as those of the foregoing method embodiment, and for brevity description, reference may be made to corresponding contents in the foregoing method embodiment where the device embodiment is not mentioned.
The embodiment of the present invention further provides an electronic device, as shown in fig. 6, where the electronic device includes a processor 101 and a memory 100, where the memory 100 stores machine executable instructions that can be executed by the processor 101, and the processor 101 executes the machine executable instructions to implement the method for generating a web page described above.
Further, the electronic device shown in fig. 6 further includes a bus 102 and a communication interface 103, and the processor 101, the communication interface 103, and the memory 100 are connected through the bus 102.
The memory 100 may include a high-speed random access memory (RAM, random Access Memory), and may further include a non-volatile memory (non-volatile memory), such as at least one disk memory. The communication connection between the system network element and at least one other network element is implemented via at least one communication interface 103 (which may be wired or wireless), and may use the internet, a wide area network, a local network, a metropolitan area network, etc. Bus 102 may be an ISA bus, a PCI bus, an EISA bus, or the like. The buses may be classified as address buses, data buses, control buses, etc. For ease of illustration, only one bi-directional arrow is shown in FIG. 6, but not only one bus or type of bus.
The processor 101 may be an integrated circuit chip with signal processing capabilities. In implementation, the steps of the above method may be performed by integrated logic circuits of hardware in the processor 101 or instructions in the form of software. The Processor 101 may be a general-purpose Processor, including a central processing unit (Central Processing Unit, CPU), a network Processor (Network Processor, NP), a digital signal Processor (DIGITAL SIGNAL Processor, DSP), an Application Specific Integrated Circuit (ASIC), a Field-Programmable gate array (FPGA) or other Programmable logic device, discrete gate or transistor logic device, or discrete hardware components. The disclosed methods, steps, and logic blocks in the embodiments of the present invention may be implemented or performed. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like. The steps of the method disclosed in connection with the embodiments of the present invention may be embodied directly in the execution of a hardware decoding processor, or in the execution of a combination of hardware and software modules in a decoding processor. The software modules may be located in a random access memory, flash memory, read only memory, programmable read only memory, or electrically erasable programmable memory, registers, etc. as well known in the art. The storage medium is located in the memory 100 and the processor 101 reads information in the memory 100 and in combination with its hardware performs the steps of the method of the previous embodiments.
The embodiment of the invention also provides a machine-readable storage medium, which stores machine-executable instructions that, when being called and executed by a processor, cause the processor to implement the method for generating the web page, and the specific implementation can be referred to the method embodiment and will not be described herein.
The method, the device and the computer program product of the electronic device for generating the web page provided by the embodiments of the present invention include a computer readable storage medium storing program codes, and the instructions included in the program codes may be used to execute the method described in the foregoing method embodiment, and specific implementation may refer to the method embodiment and will not be repeated herein. The functions, if implemented in the form of software functional units and sold or used as a stand-alone product, may be stored in a computer-readable storage medium.
Based on this understanding, the technical solution of the present invention may be embodied essentially or in a part contributing to the prior art or in a part of the technical solution, in the form of a software product stored in a storage medium, comprising several instructions for causing a computer device (which may be a personal computer, an electronic device, or a network device, etc.) to perform all or part of the steps of the method according to the embodiments of the present invention. The storage medium includes a U disk, a removable hard disk, a Read-Only Memory (ROM), a random access Memory (RAM, random Access Memory), a magnetic disk, an optical disk, or other various media capable of storing program codes.
It should be noted that the foregoing embodiments are merely illustrative embodiments of the present invention, and not restrictive, and the scope of the invention is not limited to the embodiments, and although the present invention has been described in detail with reference to the foregoing embodiments, it should be understood by those skilled in the art that any modification, variation or substitution of some of the technical features of the embodiments described in the foregoing embodiments may be easily contemplated within the scope of the present invention, and the spirit and scope of the technical solutions of the embodiments do not depart from the spirit and scope of the embodiments of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.
Claims (7)
1. A method for generating a web page, the method comprising:
The method comprises the steps of responding to a selection instruction aiming at a target component, displaying the target component, wherein the target component comprises component information to be configured, the component information to be configured comprises a component name, a component code, a component class, a component state and component content, and the component content comprises at least one content list, wherein each content list comprises a list title, a list code and a content description;
Responding to a configuration instruction aiming at the component information, and generating the configured target component;
Responding to a selected instruction of the configured display style of the target component, and displaying the display style, wherein the display style comprises style information to be configured, and the style information to be configured comprises a style name, a client supported by a style, a computer-side style code, a mobile-side style code and a style state;
Responding to a configuration instruction aiming at the style information, and generating the configured display style;
The method comprises the steps of packaging the configured target components into a plurality of functional components, wherein component information of the functional components comprises component codes, storing the component information corresponding to the functional components and style information of display styles corresponding to the functional components into a preset database, previewing the display effect of the functional components according to the display styles configured by the target components, extracting the component codes corresponding to the functional components from the issuing instructions if the issuing instructions are received, calling a preset interface through a node technology according to the component codes corresponding to the functional components, acquiring the component information of the functional components matched with the component codes and the style information of the display styles corresponding to the functional components from the preset database, analyzing the acquired information corresponding to each functional component, and generating the webpage.
2. The method of claim 1, wherein the step of generating the configured target component in response to a configuration instruction for the component information comprises:
If a configuration instruction of the target component is received, extracting a component name, a component code, a component classification, a component state and component content carried in the configuration instruction of the target component;
and configuring the target component according to the extracted component name, the component code, the component classification, the component state and the component content to obtain the configured target component.
3. The method according to claim 2, wherein if the configuration instruction of the target component is received, before the step of extracting the component name, the component code, the component classification, the component status and the component content carried in the configuration instruction of the target component, the method further comprises:
and responding to a content list configuration instruction aiming at the target component, and generating a plurality of content lists of the target component according to the limit number of the preset content lists.
4. The method according to claim 1, wherein the step of generating the configured display style in response to a configuration instruction for the style information includes:
extracting style information in the configuration instruction of the display style if the configuration instruction of the display style is received;
And configuring the display style according to the extracted style information to obtain the configured display style.
5. A device for generating a web page, the device comprising:
The system comprises a component selection model, a component selection model and a target component selection model, wherein the component selection model is used for responding to a selection instruction aiming at the target component, and the target component comprises component information to be configured, wherein the component information to be configured comprises a component name, a component code, a component classification, a component state and component content, and the component content comprises at least one content list;
The component configuration module is used for responding to a configuration instruction aiming at the component information and generating the configured target component; the method comprises the steps of responding to a selected instruction of a configured display style of a target component, displaying the display style, wherein the display style comprises style information to be configured, and the style information to be configured comprises a style name, a client-side supported by a style, a computer-side style code, a mobile-side style code and a style state;
the webpage page generation module is used for packaging the configured target components into a plurality of functional components, component codes are contained in component information of the functional components, the component information corresponding to the functional components and style information of display styles corresponding to the functional components are stored in a preset database, the display effect of the functional components is previewed according to the display styles configured by the target components, if an issuing instruction is received, the component codes corresponding to the functional components are extracted from the issuing instruction, a preset interface is called through a node technology for each functional component based on the component codes corresponding to the functional components, the component information of the functional components matched with the component codes and style information of the display styles corresponding to the functional components are obtained from the preset database, and the obtained information corresponding to each functional component is analyzed to generate the webpage page.
6. An electronic device comprising a processor and a memory, the memory storing machine executable instructions executable by the processor, the processor executing the machine executable instructions to implement the method of generating a web page of any one of claims 1 to 4.
7. A machine-readable storage medium storing machine-executable instructions which, when invoked and executed by a processor, cause the processor to implement the method of generating a web page of any one of claims 1 to 4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011482379.6A CN112507273B (en) | 2020-12-15 | 2020-12-15 | Web page generation method, device and electronic device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011482379.6A CN112507273B (en) | 2020-12-15 | 2020-12-15 | Web page generation method, device and electronic device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112507273A CN112507273A (en) | 2021-03-16 |
| CN112507273B true CN112507273B (en) | 2025-09-05 |
Family
ID=74972355
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011482379.6A Active CN112507273B (en) | 2020-12-15 | 2020-12-15 | Web page generation method, device and electronic device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112507273B (en) |
Families Citing this family (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113094049A (en) * | 2021-04-29 | 2021-07-09 | 北京金山云网络技术有限公司 | Page generation method, page display method and device and electronic equipment |
| CN113254016A (en) * | 2021-05-21 | 2021-08-13 | 四川金熊猫新媒体有限公司 | Interface generation method, interface information processing method, equipment and storage medium |
| CN113282863B (en) * | 2021-06-11 | 2023-04-21 | 上海哔哩哔哩科技有限公司 | Service page generation method and device |
| CN113448577A (en) * | 2021-06-25 | 2021-09-28 | 未鲲(上海)科技服务有限公司 | Page generation method and device and storage medium |
| CN113391808B (en) * | 2021-07-08 | 2026-02-13 | 北京沃东天骏信息技术有限公司 | Page configuration methods, devices and electronic equipment |
| CN113535315A (en) * | 2021-08-05 | 2021-10-22 | 北京字跳网络技术有限公司 | Background graph generation method and device, electronic equipment and storage medium |
| CN116069308A (en) * | 2021-11-04 | 2023-05-05 | 腾讯科技（深圳）有限公司 | Message configuration method and related device |
| CN114760509B (en) * | 2022-06-14 | 2022-09-20 | 飞狐信息技术（天津）有限公司 | Video distribution method, system, storage medium and electronic equipment |
| CN115344769A (en) * | 2022-07-22 | 2022-11-15 | 广西瀚特信息产业股份有限公司 | Method, system and storage medium for rapidly constructing Web application webpage based on configuration |
| CN116881596A (en) * | 2023-05-17 | 2023-10-13 | 深圳市星卡科技股份有限公司 | Webpage design method and device |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110795666A (en) * | 2019-10-18 | 2020-02-14 | 腾讯科技（深圳）有限公司 | A web page generation method, device, terminal and storage medium |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| DE102013202782A1 (en) * | 2012-02-20 | 2013-08-22 | Wixpress Ltd | Server-based web page design system that integrates dynamic layout and dynamic content |
| CN110781423B (en) * | 2019-10-10 | 2024-02-06 | 腾讯科技（深圳）有限公司 | Webpage generation method and device and electronic equipment |
| CN111241454B (en) * | 2020-01-21 | 2024-05-07 | 合肥优荃信息科技有限公司 | Method, system and device for generating webpage codes |
| CN111488148B (en) * | 2020-03-09 | 2023-07-21 | 北京水滴科技集团有限公司 | Method and device for generating web page source code |
-
2020
- 2020-12-15 CN CN202011482379.6A patent/CN112507273B/en active Active
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110795666A (en) * | 2019-10-18 | 2020-02-14 | 腾讯科技（深圳）有限公司 | A web page generation method, device, terminal and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112507273A (en) | 2021-03-16 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112507273B (en) | Web page generation method, device and electronic device | |
| US10726195B2 (en) | Filtered stylesheets | |
| CN103389895B (en) | A kind of generation method and system of front end page | |
| US9646103B2 (en) | Client-side template engine and method for constructing a nested DOM module for a website | |
| CN108228180A (en) | Real time workshop method and system based on visual interface design | |
| CN111694565A (en) | Data visualization application development method and system | |
| CN111125605B (en) | Page element acquisition method and device | |
| US20160012144A1 (en) | Javascript-based, client-side template driver system | |
| CN112947900B (en) | Web application development method and device, server and development terminal | |
| US20160012147A1 (en) | Asynchronous Initialization of Document Object Model (DOM) Modules | |
| CN110968314A (en) | Page generation method and device | |
| CN106933887A (en) | A kind of data visualization method and device | |
| CN109840083A (en) | Web pages component template construction method, device, computer equipment and storage medium | |
| CN111752565A (en) | An interface generation method, apparatus, computer device and readable storage medium | |
| CN112764757A (en) | Applet processing method, device, equipment and storage medium | |
| CN106843901B (en) | A method and device for page rendering and verification | |
| CN110928540A (en) | Page generation method and device | |
| US20160012023A1 (en) | Self-Referencing of Running Script Elements in Asynchronously Loaded DOM Modules | |
| CN114706580A (en) | Front-end webpage development method and device, storage medium and electronic equipment | |
| CN112486378B (en) | Graphics generation method, device, terminal and storage medium | |
| CN117270847A (en) | Front-end page generation method and device, equipment and storage medium | |
| CN114721642A (en) | Data display method and device, storage medium and electronic equipment | |
| CN112114788A (en) | Method and system for realizing front-end and back-end separation development based on angularjs | |
| US20160012146A1 (en) | Client Web Browser and Method for Constructing a Website DOM Module With Client-Side Functional Code | |
| Gündoğan | Robotic Process Automation im Desktop-Publishing |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |