CN117270847A - Front-end page generation method and device, equipment and storage medium - Google Patents

Front-end page generation method and device, equipment and storage medium Download PDF

Info

Publication number
CN117270847A
CN117270847A CN202311193190.9A CN202311193190A CN117270847A CN 117270847 A CN117270847 A CN 117270847A CN 202311193190 A CN202311193190 A CN 202311193190A CN 117270847 A CN117270847 A CN 117270847A
Authority
CN
China
Prior art keywords
component
preset
display
page
file
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202311193190.9A
Other languages
Chinese (zh)
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.)
China Unicom Guangdong Industrial Internet Co Ltd
Original Assignee
China Unicom Guangdong Industrial Internet 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 China Unicom Guangdong Industrial Internet Co Ltd filed Critical China Unicom Guangdong Industrial Internet Co Ltd
Priority to CN202311193190.9A priority Critical patent/CN117270847A/en
Publication of CN117270847A publication Critical patent/CN117270847A/en
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation
    • G06F8/42—Syntactic analysis
    • G06F8/427—Parsing

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Document Processing Apparatus (AREA)

Abstract

The embodiment of the application discloses a method, a device, equipment and a storage medium for generating a front-end page, which comprise the following steps: the method comprises the steps of obtaining a configuration file, wherein the configuration file comprises a page configuration sub-file and a component configuration sub-file, the page configuration sub-file comprises identification information of a plurality of preset components, the component configuration sub-file comprises component information of each preset component, the component information comprises attribute information of the preset components and attribute information of display contents corresponding to the preset components, analyzing the page configuration sub-file, obtaining a component tree corresponding to a front-end page, and according to the component configuration sub-file, adjusting display parameters of each preset component in the component tree and displaying corresponding target display contents in each preset component to obtain the front-end page. The method and the device can reduce the development threshold, accelerate the demand iteration, improve the page loading speed, help to improve the development efficiency, reduce the cost and provide better user experience.

Description

Front-end page generation method and device, equipment and storage medium
Technical Field
The embodiment of the application relates to a front-end development technology, and relates to a method, a device, equipment and a storage medium for generating a front-end page.
Background
In the front-end development process, a fully customized or configured scheme is generally used, the requirement of personalized development is carried out on complex service scenes in the fully customized scheme, and the coding development is carried out independently, so that the high-level adaptation of the requirement can be realized. In the configuration scheme, a developer describes each part of the page in detail and designates corresponding attribute and style, and the front-end page can be generated only by modifying the content in the configuration file. However, under fully customized conditions, when the number of pages is large and the number of developers is large, the rationality of component packaging, intra-team coordination and team personal technology capability level will become bottlenecks for system function development and maintenance. Under the configuration condition, through fine granularity component type configuration, complicated style configuration and complicated page interaction, particularly when the platform component is in a missing condition, the choice is needed, and the page access performance is affected by a plurality of redundant functions.
Therefore, how to ensure that development efficiency can be improved, cost can be reduced, and better user experience can be provided is a problem to be solved.
Disclosure of Invention
In view of this, the method, the device, the equipment and the storage medium for generating the front-end page provided by the embodiment of the application can improve the development efficiency, reduce the cost and provide better user experience. The method, the device, the equipment and the storage medium for generating the front-end page are realized in the following way:
the method for generating the front-end page provided by the embodiment of the application comprises the following steps:
acquiring a configuration file, wherein the configuration file comprises a page configuration sub-file and a component configuration sub-file, the page configuration sub-file comprises identification information of a plurality of preset components, the component configuration sub-file comprises component information of each preset component, and the component information comprises attribute information of the preset components and attribute information of display contents corresponding to the preset components;
analyzing the page configuration sub-file to obtain a component tree corresponding to the front-end page;
and according to the component configuration subfile, adjusting display parameters of each preset component in the component tree and displaying corresponding target display contents in each preset component to obtain the front-end page.
In some embodiments, the configuration file includes the page configuration subfile, the plurality of preset components includes a preset layout component, a preset interaction component, and a preset presentation component, and the obtaining the configuration file includes:
Acquiring demand information, wherein the demand information comprises a service scene;
determining a preset layout component from a plurality of layout components according to the service scene and a preset page design rule;
determining the preset interaction assembly from a plurality of interaction assembly according to the service scene, and determining the preset display assembly from a plurality of display assembly;
and acquiring the page configuration subfile according to the preset layout component, the preset interaction component and the preset display component.
In some embodiments, the obtaining the page configuration subfile according to the preset layout component, the preset interaction component, and the preset display component includes:
and taking the preset layout component as a trunk of the component tree, taking the preset interaction component as a branch of the component tree and taking the preset display component as a leaf of the component tree to obtain the page configuration subfile in the form of the component tree.
In some embodiments, the adjusting, according to the component configuration sub-file, a display parameter of each preset component in the component tree and displaying corresponding target display content in each preset component to obtain the front-end page includes:
Analyzing the component tree to obtain the layout structure of the component tree;
according to the layout structure, traversing and loading the preset components;
configuring corresponding components according to the component information comprising each preset component in the component configuration sub-file to obtain a document object model tree corresponding to the front-end page;
and obtaining the front page according to the document object model tree.
In some embodiments, the attribute information of the display content corresponding to the preset components includes display content information and display logic information, and the configuring the corresponding components according to the component configuration sub-file including the component information of each preset component to obtain a document object model tree corresponding to the front-end page includes:
configuring display parameters of all preset components in the component tree according to attribute information of all preset components in the component configuration subfiles;
configuring formats of display contents in each preset display assembly according to display content information corresponding to each preset display assembly in the assembly configuration sub-file;
configuring display logic of display contents in each preset display assembly according to display logic information corresponding to each preset display assembly in the assembly configuration sub-file;
And generating a document object model tree corresponding to the front-end page according to the configured preset components.
In some embodiments, the obtaining the front page according to the document object model tree includes:
acquiring the display content in each display component in the front-end page according to the application program interface of each display content corresponding to the display content information;
and obtaining the front-end page according to the document object model tree and the display content in each display component.
In some embodiments, the presentation content information includes a target data structure of the presentation content, and the obtaining the front page according to the document object model tree and the presentation content in each presentation component includes:
processing the acquired display content in each display assembly, wherein the data structure of the display content of each display assembly after processing is the target data structure;
and obtaining the front-end page according to the document object model tree and the display content of each processed display component.
In some embodiments, after the obtaining the front-end page according to the document object model tree and the display content in each display component, the method further includes:
Acquiring updated display content;
and updating the front-end page according to the updated display content.
The device for generating the front-end page provided by the embodiment of the application comprises:
the device comprises an acquisition module, a display module and a display module, wherein the acquisition module is used for acquiring a configuration file, the configuration file comprises a page configuration sub-file and a component configuration sub-file, the page configuration sub-file comprises identification information of a plurality of preset components, the component configuration sub-file comprises component information of each preset component, and the component information comprises attribute information of the preset components and attribute information of display contents corresponding to the preset components;
the acquisition module is also used for analyzing the page configuration subfiles and acquiring the component tree corresponding to the front-end page;
and the generating module is used for adjusting the display parameters of each preset component in the component tree and displaying corresponding target display contents in each preset component according to the component configuration subfile to obtain the front-end page.
The computer device provided by the embodiment of the application comprises a memory and a processor, wherein the memory stores a computer program capable of running on the processor, and the processor realizes the method described by the embodiment of the application when executing the program.
The computer readable storage medium provided in the embodiments of the present application stores a computer program thereon, which when executed by a processor implements the method provided in the embodiments of the present application.
According to the method, the device, the computer equipment and the computer readable storage medium for generating the front-end page, the configuration file comprises the page configuration subfile and the component configuration subfile, the page configuration subfile comprises identification information of a plurality of preset components, the component configuration subfile comprises component information of each preset component, the component information comprises attribute information of the preset component and attribute information of display content corresponding to the preset component, the page configuration subfile is analyzed, a component tree corresponding to the front-end page is obtained, and display parameters of each preset component in the component tree and display of corresponding target display content in each preset component are adjusted according to the component configuration subfile, so that the front-end page is obtained. Therefore, the development threshold can be reduced, the demand iteration is accelerated, the page loading speed is improved, the development efficiency is improved, the cost is reduced, and better user experience is provided.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the application and, together with the description, serve to explain the technical aspects of the application.
Fig. 1 is an application scenario diagram of a method for generating a front end page disclosed in an embodiment of the present application;
fig. 2 is a flow chart of a method for generating a front-end page according to an embodiment of the present application;
FIG. 3 is a general flow chart of a method for generating a front-end page disclosed in an embodiment of the present application;
fig. 4 is a schematic structural diagram of a front-end page generating device disclosed in an embodiment of the present application;
fig. 5 is a schematic structural diagram of an electronic device according to an embodiment of the present application.
Detailed Description
For the purposes, technical solutions and advantages of the embodiments of the present application to be more apparent, the specific technical solutions of the present application will be described in further detail below with reference to the accompanying drawings in the embodiments of the present application. The following examples are illustrative of the present application, but are not intended to limit the scope of the present application.
Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used herein is for the purpose of describing embodiments of the present application only and is not intended to be limiting of the present application.
In the following description, reference is made to "some embodiments" which describe a subset of all possible embodiments, but it is to be understood that "some embodiments" can be the same subset or different subsets of all possible embodiments and can be combined with one another without conflict.
It should be noted that the term "first/second/third" in reference to the embodiments of the present application is used to distinguish similar or different objects, and does not represent a specific ordering of the objects, it being understood that the "first/second/third" may be interchanged with a specific order or sequence, as permitted, to enable the embodiments of the present application described herein to be implemented in an order other than that illustrated or described herein.
In view of this, the embodiment of the application provides a method for generating a front-end page, which is applied to an intelligent electronic device. Fig. 1 is an application scenario diagram of a method for generating a front-end page according to an embodiment. As shown in fig. 1, a user may carry, wear, or use an electronic device 10, which electronic device 10 may include, but is not limited to, a cell phone, a wearable device (e.g., a smart watch, a smart bracelet, smart glasses, etc.), a tablet computer, a notebook computer, a vehicle-mounted terminal, a PC (Personal Computer, a personal computer), etc. The functions performed by the method may be performed by a processor in an electronic device, which may of course be stored in a computer storage medium, as will be seen, comprising at least a processor and a storage medium.
Fig. 2 is a schematic implementation flow chart of a method for generating a front-end page according to an embodiment of the present application. As shown in fig. 2, the method may include the following steps 201 to 203:
step 201, a configuration file is obtained, the configuration file comprises a page configuration sub-file and a component configuration sub-file, the page configuration sub-file comprises identification information of a plurality of preset components, the component configuration sub-file comprises component information of each preset component, and the component information comprises attribute information of the preset component and attribute information of display content corresponding to the preset component.
In this embodiment of the present application, the electronic device may request to obtain the configuration file from the server through the network, or read the locally stored configuration file through the file system, and further, parse the page configuration sub-file by using a suitable configuration file parsing tool, such as JSON (JavaScript Object Notation ) parsing library, to extract the identification information of the preset component in the page configuration sub-file, and store the parsed data in the memory or the corresponding data structure.
As an example, the configuration file includes a page configuration sub-file, the plurality of preset components includes a preset layout component, a preset interaction component, and a preset presentation component, and obtaining the configuration file includes: and acquiring the demand information, wherein the demand information comprises a service scene. Optionally, first, detailed service scenario and function requirement information are acquired. Can be obtained by face-to-face meetings, demand documents or online investigation and the like.
Further, a preset layout component is determined from the plurality of layout class components according to the service scene and a preset page design rule. Optionally, the business scene and the functional requirement are analyzed, and the overall layout form of the page is determined, and optionally, single column, double column, grid and the like are selected. According to a preset page design rule, selecting the most suitable layout components from a plurality of layout component libraries, such as a grid system of Bootstrap, a Flexbox (Flexible Box Layout, an elastic box layout) and the like. Considering responsive designs, layout components are selected that can accommodate different screen sizes and devices.
Further, a preset interaction component is determined from the plurality of interaction class components according to the service scene, and a preset display component is determined from the plurality of display class components. Optionally, according to the service scenario and the function requirement, the required interaction mode is determined, such as form input, button clicking, drop-down selection, and the like.
Suitable interaction components are selected from a plurality of interaction class component libraries, such as a form component for React, a button component for Ant Design, and the like. Further, components that meet the interface style and interaction specifications may be selected in view of user friendliness and ease of use. Further, according to the service scene and the function requirement, the type of the content to be displayed, such as text, pictures, charts and the like, is determined, a proper display component, such as a chart component of Highcharts, a text component of act and the like, is selected from a plurality of display class component libraries, and a component capable of meeting the service requirement is selected in consideration of the requirements of data visualization and information display.
Further, a page configuration sub-file is obtained according to a preset layout component, a preset interaction component and a preset display component. Optionally, the determined preset layout component, the preset interaction component and the preset display component are combined to form a component tree structure of the page, and attribute information such as a style, a size, a position and the like is set for each component. Associations and interactions between components are defined, such as event triggers, data transfers, etc. Attribute information of the presentation content, such as text content, picture links, data sources, etc., is added.
The page configuration subfiles are generated according to the above configuration and may be stored using JSON, XML, or other formats.
As an example, according to a preset layout component, a preset interaction component, and a preset presentation component, obtaining a page configuration sub-file includes: taking a preset layout component as a trunk of a component tree, taking a preset interaction component as a branch of the component tree and taking a preset display component as a leaf of the component tree to obtain a page configuration sub-file in the form of the component tree. Optionally, according to the service scene and the preset page design rule, determining the required preset layout components. Creating a component tree, taking the selected preset layout component as a root node of the component tree, and adding other preset components as child nodes into the component tree according to requirements. And selecting an applicable preset interaction component from a plurality of interaction class components according to the service scene. The selected preset interaction component is added to the component tree. And combining the preset interaction component serving as a father node or a child node of the component tree with the layout component. And selecting an applicable preset display component from a plurality of display class components according to the service scene. The selected preset presentation component is added to the leaf node of the component tree. And setting the association relation between the display component, the layout component and the interaction component, and ensuring correct display and interaction.
Step 202, analyzing the page configuration sub-file to obtain the component tree corresponding to the front-end page.
In this embodiment of the present application, further, a configuration file parsing tool is used to parse a component configuration sub-file, obtain component information of each preset component, and store the attribute information obtained by parsing and the attribute information related to the display content in a memory or a data structure.
Further, according to the identification information in the page configuration subfile and the component information in the component configuration subfile, a component tree of the front-end page is constructed. Alternatively, tree data structures such as trees, graphs, etc. may be used to represent hierarchical relationships between components.
As an example, according to the component configuration subfile, adjusting display parameters of each preset component in the component tree and displaying corresponding target display content in each preset component to obtain a front-end page, including: and analyzing the component tree to obtain the layout structure of the component tree. Optionally, each node of the component tree is recursively parsed, the position of each component on the page is determined, and specific coordinates of the components in the layout are calculated according to the relative positional relationship of the components. A layout structure is generated, for example using a grid layout, a Flexbox layout, or a custom layout, etc.
Further, according to the layout structure, a plurality of preset components are loaded in a traversing mode. Optionally, traversing each node of the component tree, and determining a preset component which should be loaded according to the component type corresponding to the node. Loading a preset component, including introducing a required style file, a script file and the like.
Further, corresponding components are configured according to the component information of each preset component included in the component configuration sub-file, and a document object model tree corresponding to the front-end page is obtained. Optionally, a corresponding HTML tag and CSS style is created from each component information in the component configuration subfile. The properties of the HTML tag, e.g., id, class, data-, etc., and the properties of the CSS style, e.g., width, height, margin, padding, etc., are set. And combining the generated HTML tags according to the nesting relation of the components and the tree structure to form a document object model tree.
As an example, the attribute information of the display content corresponding to the preset components includes display content information and display logic information, and the corresponding components are configured according to the component configuration sub-file including the component information of each preset component, so as to obtain a document object model tree corresponding to the front page, which includes: and configuring display parameters of each preset component in the component tree according to the attribute information of each preset component in the component configuration sub-file. Optionally, according to attribute information of each preset component in the component configuration sub-file, configuring display parameters of each preset component in the component tree. This includes setting appearance properties of the component, such as position, size, style, color, etc.
Further, according to the display content information corresponding to each preset display component in the component configuration sub-file, the format of the display content in each preset display component is configured. Optionally, the component tree is traversed to find a corresponding preset display component, and content and style of the display element, such as text, picture, link, etc., are set. If dynamic presentation content needs to be processed, a data request can be made according to the data source in the configuration, and the returned data is filled into the presentation elements.
Further, according to the display logic information corresponding to each preset display component in the component configuration sub-file, the display logic of the display content in each preset display component is configured. Optionally, traversing the component tree, finding a corresponding preset display component, judging whether to display or hide certain display elements according to the conditions in the configuration, monitoring user interaction events such as clicking, scrolling and the like, and triggering corresponding display content change according to the events in the configuration.
Further, according to each preset component after configuration, a document object model tree corresponding to the front-end page is generated. Optionally, a front-end framework or library, such as exact, vue, etc., is used to create corresponding component instances, the configured component instances are nested and combined with each other according to the structure of the component tree, the component tree is converted into a real HTML structure, and the real HTML structure is inserted into the target location.
Further, according to the document object model tree, a front page is obtained. Optionally, the document object model tree is converted into HTML code in the form of a string. CSS style code is inserted into the HTML code to form the complete HTML page structure. And sending the generated HTML page to a client or rendering at a server for display to a user.
And 203, according to the component configuration subfiles, adjusting display parameters of all preset components in the component tree and displaying corresponding target display contents on all preset components to obtain a front-end page.
In the embodiment of the application, traversing the component tree, and adjusting the display parameters of each preset component according to the attribute information in the component configuration subfile. Optionally, the style and layout of the preset components are adjusted by modifying the CSS (Cascading Style Sheets, cascading style sheet) style. Further, the related functions provided by the front end framework or tools such as act, vue, etc. may be used. Further, according to the display content attribute information in the component configuration sub-file, filling corresponding target display content for each preset component. Alternatively, resources such as text, pictures, etc. can be associated with the components to enable the population of content. Based on the adjusted and populated component tree, rendering and rendering of the page is performed using front-end technology and framework. Alternatively, the component tree may be converted to the final front page using an HTML (Hypertext Markup Language ) template or dynamically creating DOM (Document Object Model ) elements.
As an example, from a document object model tree, a front-end page is obtained, comprising: and acquiring the display content in each display component in the front-end page according to the application program interface of each display content corresponding to the display content information. Optionally, determining an application program interface to be called according to the display content information corresponding to each preset display component in the component configuration sub-file. And calling an application program interface to acquire corresponding display content data. The filling of the acquired presentation content data into the corresponding presentation components may be achieved by a data binding mechanism provided by the front end framework or the template engine.
Further, a front page is obtained according to the document object model tree and the display content in each display component. Optionally, using attribute information of each preset component in the component configuration sub-file, configuring display parameters of each preset component in the component tree. And configuring formats of the display contents in each preset display assembly by using the display content information corresponding to each preset display assembly in the assembly configuration sub-file. And configuring display logic of display contents in each preset display assembly by using display logic information corresponding to each preset display assembly in the assembly configuration sub-file. And combining the configured preset components with the document object model tree to generate a final front-end page. This may be achieved by a rendering mechanism provided by the front-end framework, such as component rendering using React, stencil rendering of Vue, and so on.
As an example, the presentation content information includes a target data structure of the presentation content, and the front page is obtained according to the document object model tree and the presentation content in each presentation component, including: and processing the acquired display contents in each display assembly, wherein the data structure of the display contents of each display assembly after processing is a target data structure. Optionally, the presentation content is converted from the original data format to a format required by the target data structure. For example, the presentation content is converted from JSON format to XML (eXtensible Markup Language ) format.
And processing the display content, screening and filtering according to preset rules, and ensuring that the display content meets the requirements of a target data structure. The presentation components are inserted into corresponding locations in the document object model tree. Each presentation component is embedded into an appropriate parent node or container according to the hierarchical relationship and layout rules of the components.
And applying the content to the corresponding attribute in the corresponding display component according to the processed display content. For example, the processed text content is applied to the text attribute of the text presentation component, the processed picture link is applied to the src (source code) attribute of the picture presentation component, and so on.
Further, according to the document object model tree and the display content of each processed display component, a front-end page is obtained. Optionally, the document object model tree is converted to the format of HTML or other front end pages. This may be converted using an HTML parser or rendering engine. The necessary style and layout information is added to ensure that the front page presents an appearance and user interface corresponding to the target data structure.
As an example, after obtaining the front page according to the document object model tree and the display content in each display component, the method further includes: and acquiring updated display content. Optionally, determining a data source, such as a database, an API interface, etc., required to obtain the presentation content, constructing a query or request interface, transmitting corresponding parameters to obtain updated presentation content, initiating a query or request, and obtaining returned presentation data.
Further, the front page is updated according to the updated display content. Optionally, traversing the document object model tree of the front page to find a display component of which the display content needs to be updated. And matching the display component with the acquired display data according to the identification or other unique identifications of the display component, and finding out corresponding display content. Updating display contents in a display assembly, which can be in specific display forms such as texts, pictures and links, filling acquired display data into corresponding positions of the display assembly, finding the position of the display assembly on a front page through operating a related API of a Document Object Model (DOM) according to the updated display contents, performing corresponding display and rendering operations such as updating text contents, replacing picture links, adding new links and the like according to the types of the display assembly and the updated display contents, ensuring that the updated display contents are normally displayed on the front page, and adapting page layout and style.
According to the method and the device, different front-end pages can be flexibly generated according to requirements through the configuration file. And selecting proper layout components, interaction components and display components according to service scenes and page design rules, so that different requirements are met, and a front-end page can be quickly generated through a page configuration sub-file and a component configuration sub-file, thereby reducing the workload of manually writing codes. The developer can automatically generate the front-end page meeting the requirements only by configuring the corresponding component information and the display content, so that the development efficiency is improved, the page can be conveniently maintained and updated, the display parameters and the display content of the front-end page can be quickly modified, the dependence on codes is reduced, and the maintainability of the page is improved. By means of the preset components and the component configuration mode, function expansion can be conveniently carried out, new preset components and configuration information can be added according to requirements, the continuously changing requirements are met, and therefore the expandability of the system is enhanced.
An exemplary application of the embodiments of the present application in a practical application scenario will be described below.
Fig. 3 is a general flow of a method for generating a front-end page according to an embodiment of the present application. As shown in fig. 3, the method includes the following steps 301 to 307:
In step 301, analysis is performed according to specific requirements, the requirements are defined, and components to be developed are determined according to the requirements.
Step 302, designing a development component, and packaging the developed component so that the component can be called when the component is needed later.
It should be noted that, step 301 and step 302 are not steps necessary for generating the front page each time, and in the case of generating the front page as a front step, there is no need to execute a plurality of times under the condition that the component satisfies the requirement.
In step 303, the developer sets a page configuration in the background, where the page configuration is used to determine the built framework.
In step 304, the developer sets a component configuration in the background, the component configuration being used to determine the style of the component and the format of the content presented within the component.
Step 305, obtaining components according to the page configuration and the packaged component library, loading the components according to the page configuration, and generating a component tree.
And 306, setting the attribute of the components in the component tree and the format of the display content in the components according to the component configuration according to the generated component tree, and generating a document object model.
Step 307, the document object model sends a request to the background, acquires the content displayed in the component, and renders the document object model after acquiring the content to generate a front page.
It should be understood that, although the steps in the flowcharts described above are shown in order as indicated by the arrows, these steps are not necessarily performed in order as indicated by the arrows. The steps are not strictly limited to the order of execution unless explicitly recited herein, and the steps may be executed in other orders. Moreover, at least some of the steps in the flowcharts described above may include a plurality of sub-steps or a plurality of stages, which are not necessarily performed at the same time, but may be performed at different times, and the order of execution of the sub-steps or stages is not necessarily sequential, but may be performed alternately or alternately with at least a part of the sub-steps or stages of other steps or other steps.
Based on the foregoing embodiments, the present application provides a device for generating a front-end page, where the device includes each module included, and each unit included in each module may be implemented by a processor; of course, the method can also be realized by a specific logic circuit; in an implementation, the processor may be a Central Processing Unit (CPU), a Microprocessor (MPU), a Digital Signal Processor (DSP), a Field Programmable Gate Array (FPGA), or the like.
Fig. 4 is a schematic structural diagram of a generating device for a front end page according to an embodiment of the present application, as shown in fig. 4, the device 400 includes an obtaining module 401 and a generating module 402, where:
an obtaining module 401, configured to obtain a configuration file, where the configuration file includes a page configuration sub-file and a component configuration sub-file, the page configuration sub-file includes identification information of a plurality of preset components, the component configuration sub-file includes component information of each preset component, and the component information includes attribute information of the preset component and attribute information of display content corresponding to the preset component;
the obtaining module 401 is further configured to parse the page configuration subfile, and obtain a component tree corresponding to the front-end page;
and the generating module 402 is configured to adjust display parameters of each preset component in the component tree and display corresponding target display contents in each preset component according to the component configuration subfile, so as to obtain the front-end page.
In some embodiments, the obtaining module 401 is specifically configured to obtain requirement information, where the requirement information includes a service scenario;
further, the obtaining module 401 is further specifically configured to determine, according to the service scenario and a preset page design rule, the preset layout component from a plurality of layout components;
Further, the obtaining module 401 is further specifically configured to determine the preset interaction component from a plurality of interaction components according to the service scenario, and determine the preset display component from a plurality of display components;
further, the obtaining module 401 is further specifically configured to obtain the page configuration subfile according to the preset layout component, the preset interaction component, and the preset display component.
In some embodiments, the obtaining module 401 is specifically configured to use the preset layout component as a trunk of the component tree, use the preset interaction component as a branch of the component tree, and use the preset display component as a leaf of the component tree, so as to obtain the page configuration subfile in the form of the component tree.
In some embodiments, the obtaining module 401 is specifically configured to parse the component tree, and obtain a layout structure of the component tree;
further, the obtaining module 401 is further specifically configured to load the plurality of preset components in a traversal manner according to the layout structure;
further, the generating module 402 is specifically configured to configure a corresponding component according to the component configuration sub-file including component information of each preset component, so as to obtain a document object model tree corresponding to the front end page;
Further, the generating module 402 is further specifically configured to obtain the front end page according to the document object model tree.
In some embodiments, the generating module 402 is specifically configured to configure display parameters of each preset component in the component tree according to attribute information of each preset component in the component configuration sub-file;
further, the generating module 402 is further specifically configured to configure a format of the display content in each preset display component according to the display content information corresponding to each preset display component in the component configuration sub-file;
further, the generating module 402 is further specifically configured to configure display logic of display content in each preset display component according to display logic information corresponding to each preset display component in the component configuration sub-file;
further, the generating module 402 is further specifically configured to generate a document object model tree corresponding to the front-end page according to the configured preset components.
In some embodiments, the obtaining module 401 is specifically configured to obtain, according to an application program interface of each display content corresponding to the display content information, display content in each display component in the front-end page;
Further, the generating module 402 is specifically configured to obtain the front-end page according to the document object model tree and the display content in each display component.
In some embodiments, the obtaining module 401 is specifically configured to process the obtained display content in each display component, where the data structure of the display content of each display component after the processing is a target data structure;
further, the generating module 402 is specifically configured to obtain a front-end page according to the document object model tree and the processed display content of each display component.
In some embodiments, the obtaining module 401 is specifically configured to obtain updated display content;
further, the generating module 402 is specifically configured to update the front page according to the updated display content.
The description of the apparatus embodiments above is similar to that of the method embodiments above, with similar advantageous effects as the method embodiments. For technical details not disclosed in the device embodiments of the present application, please refer to the description of the method embodiments of the present application for understanding.
It should be noted that, in the embodiment of the present application, the division of the modules by the generating device of the front-end page shown in fig. 4 is schematic, and is merely a logic function division, and another division manner may be adopted in actual implementation. In addition, each functional unit in the embodiments of the present application may be integrated in one processing unit, or may exist alone physically, or two or more units may be integrated in one unit. The integrated units may be implemented in hardware or in software functional units. Or in a combination of software and hardware.
It should be noted that, in the embodiment of the present application, if the method is implemented in the form of a software functional module, and sold or used as a separate product, the method may also be stored in a computer readable storage medium. Based on such understanding, the technical solutions of the embodiments of the present application may be essentially or part contributing to the related art, and the computer software product may be stored in a storage medium, including several instructions for causing an electronic device to execute all or part of the methods described in the embodiments of the present application. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read Only Memory (ROM), a magnetic disk, an optical disk, or other various media capable of storing program codes. Thus, embodiments of the present application are not limited to any specific combination of hardware and software.
The embodiment of the application provides a computer device, which may be a server, and an internal structure diagram thereof may be shown in fig. 5. The computer device includes a processor, a memory, and a network interface connected by a system bus. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, computer programs, and a database. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage media. The database of the computer device is for storing data. The network interface of the computer device is used for communicating with an external terminal through a network connection. Which computer program, when being executed by a processor, carries out the above-mentioned method.
The present embodiment provides a computer-readable storage medium, on which a computer program is stored, which when executed by a processor, implements the steps of the method provided in the above embodiment.
The present application provides a computer program product comprising instructions which, when run on a computer, cause the computer to perform the steps of the method provided by the method embodiments described above.
It will be appreciated by those skilled in the art that the structure shown in fig. 5 is merely a block diagram of some of the structures associated with the present application and is not limiting of the computer device to which the present application may be applied, and that a particular computer device may include more or fewer components than shown, or may combine certain components, or have a different arrangement of components.
In one embodiment, the apparatus for generating a front-end page provided in the present application may be implemented as a computer program, which may be executed on a computer device as shown in fig. 5. The memory of the computer device may store the various program modules that make up the apparatus. The computer program of each program module causes a processor to perform the steps in the methods of each embodiment of the present application described in the present specification.
It should be noted here that: the description of the storage medium and apparatus embodiments above is similar to that of the method embodiments described above, with similar benefits as the method embodiments. For technical details not disclosed in the storage medium, storage medium and device embodiments of the present application, please refer to the description of the method embodiments of the present application for understanding.
It should be appreciated that reference throughout this specification to "one embodiment" or "an embodiment" or "some embodiments" means that a particular feature, structure or characteristic described in connection with the embodiment is included in at least one embodiment of the present application. Thus, the appearances of the phrases "in one embodiment" or "in an embodiment" or "in some embodiments" in various places throughout this specification are not necessarily referring to the same embodiment. Furthermore, the particular features, structures, or characteristics may be combined in any suitable manner in one or more embodiments. It should be understood that, in various embodiments of the present application, the sequence numbers of the foregoing processes do not mean the order of execution, and the order of execution of the processes should be determined by the functions and internal logic thereof, and should not constitute any limitation on the implementation process of the embodiments of the present application. The foregoing embodiment numbers of the present application are merely for describing, and do not represent advantages or disadvantages of the embodiments. The foregoing description of various embodiments is intended to highlight differences between the various embodiments, which may be the same or similar to each other by reference, and is not repeated herein for the sake of brevity.
The term "and/or" is herein merely an association relation describing associated objects, meaning that there may be three relations, e.g. object a and/or object B, may represent: there are three cases where object a alone exists, object a and object B together, and object B alone exists.
It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.
In the several embodiments provided in this application, it should be understood that the disclosed apparatus and method may be implemented in other ways. The above-described embodiments are merely illustrative, and the division of the modules is merely a logical function division, and other divisions may be implemented in practice, such as: multiple modules or components may be combined, or may be integrated into another system, or some features may be omitted, or not performed. In addition, the various components shown or discussed may be coupled or directly coupled or communicatively coupled to each other via some interface, whether indirectly coupled or communicatively coupled to devices or modules, whether electrically, mechanically, or otherwise.
The modules described above as separate components may or may not be physically separate, and components shown as modules may or may not be physical modules; can be located in one place or distributed to a plurality of network units; some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment.
In addition, each functional module in each embodiment of the present application may be integrated in one processing unit, or each module may be separately used as one unit, or two or more modules may be integrated in one unit; the integrated modules may be implemented in hardware or in hardware plus software functional units.
Those of ordinary skill in the art will appreciate that: all or part of the steps for implementing the above method embodiments may be implemented by hardware related to program instructions, and the foregoing program may be stored in a computer readable storage medium, where the program, when executed, performs steps including the above method embodiments; and the aforementioned storage medium includes: a mobile storage device, a Read Only Memory (ROM), a magnetic disk or an optical disk, or the like, which can store program codes.
Alternatively, the integrated units described above may be stored in a computer readable storage medium if implemented in the form of software functional modules and sold or used as a stand-alone product. Based on such understanding, the technical solutions of the embodiments of the present application may be essentially or part contributing to the related art, and the computer software product may be stored in a storage medium, including several instructions for causing an electronic device to execute all or part of the methods described in the embodiments of the present application. And the aforementioned storage medium includes: various media capable of storing program codes, such as a removable storage device, a ROM, a magnetic disk, or an optical disk.
The methods disclosed in the several method embodiments provided in the present application may be arbitrarily combined without collision to obtain a new method embodiment.
The features disclosed in the several product embodiments provided in the present application may be combined arbitrarily without conflict to obtain new product embodiments.
The features disclosed in the several method or apparatus embodiments provided in the present application may be arbitrarily combined without conflict to obtain new method embodiments or apparatus embodiments.
The foregoing is merely an embodiment of the present application, but the protection scope of the present application is not limited thereto, and any person skilled in the art can easily think about changes or substitutions within the technical scope of the present application, and the changes and substitutions are intended to be covered in the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.

Claims (11)

1. A method for generating a front-end page, the method comprising:
acquiring a configuration file, wherein the configuration file comprises a page configuration sub-file and a component configuration sub-file, the page configuration sub-file comprises identification information of a plurality of preset components, the component configuration sub-file comprises component information of each preset component, and the component information comprises attribute information of the preset components and attribute information of display contents corresponding to the preset components;
analyzing the page configuration sub-file to obtain a component tree corresponding to the front-end page;
and according to the component configuration subfile, adjusting display parameters of each preset component in the component tree and displaying corresponding target display contents in each preset component to obtain the front-end page.
2. The method of claim 1, wherein the configuration file comprises the page configuration subfile, the plurality of preset components comprises a preset layout component, a preset interaction component, and a preset presentation component, and the obtaining the configuration file comprises:
Acquiring demand information, wherein the demand information comprises a service scene;
determining a preset layout component from a plurality of layout components according to the service scene and a preset page design rule;
determining the preset interaction assembly from a plurality of interaction assembly according to the service scene, and determining the preset display assembly from a plurality of display assembly;
and acquiring the page configuration subfile according to the preset layout component, the preset interaction component and the preset display component.
3. The method of claim 2, wherein the obtaining the page configuration subfile according to the preset layout component, the preset interaction component, and the preset presentation component comprises:
and taking the preset layout component as a trunk of the component tree, taking the preset interaction component as a branch of the component tree and taking the preset display component as a leaf of the component tree to obtain the page configuration subfile in the form of the component tree.
4. A method according to any one of claims 1 to 3, wherein the adjusting, according to the component configuration subfile, display parameters of each preset component in the component tree and displaying corresponding target display contents in each preset component to obtain the front-end page includes:
Analyzing the component tree to obtain the layout structure of the component tree;
according to the layout structure, traversing and loading the preset components;
configuring corresponding components according to the component information comprising each preset component in the component configuration sub-file to obtain a document object model tree corresponding to the front-end page;
and obtaining the front page according to the document object model tree.
5. The method according to claim 4, wherein the attribute information of the display content corresponding to the preset components includes display content information and display logic information, the configuring the corresponding components according to the component configuration sub-file including the component information of each preset component, and obtaining a document object model tree corresponding to the front page includes:
configuring display parameters of all preset components in the component tree according to attribute information of all preset components in the component configuration subfiles;
configuring formats of display contents in each preset display assembly according to display content information corresponding to each preset display assembly in the assembly configuration sub-file;
configuring display logic of display contents in each preset display assembly according to display logic information corresponding to each preset display assembly in the assembly configuration sub-file;
And generating a document object model tree corresponding to the front-end page according to the configured preset components.
6. The method according to claim 4 or 5, wherein said obtaining said front page from said document object model tree comprises:
acquiring the display content in each display component in the front-end page according to the application program interface of each display content corresponding to the display content information;
and obtaining the front-end page according to the document object model tree and the display content in each display component.
7. The method of claim 6, wherein the presentation content information includes a target data structure of the presentation content, and wherein the deriving the front page from the document object model tree and the presentation content in each presentation component comprises:
processing the acquired display content in each display assembly, wherein the data structure of the display content of each display assembly after processing is the target data structure;
and obtaining the front-end page according to the document object model tree and the display content of each processed display component.
8. The method of claim 7, wherein after the front page is obtained from the document object model tree and the presentation content in each presentation component, the method further comprises:
Acquiring updated display content;
and updating the front-end page according to the updated display content.
9. A front-end page generation apparatus, comprising:
the device comprises an acquisition module, a display module and a display module, wherein the acquisition module is used for acquiring a configuration file, the configuration file comprises a page configuration sub-file and a component configuration sub-file, the page configuration sub-file comprises identification information of a plurality of preset components, the component configuration sub-file comprises component information of each preset component, and the component information comprises attribute information of the preset components and attribute information of display contents corresponding to the preset components;
the acquisition module is also used for analyzing the page configuration subfiles and acquiring the component tree corresponding to the front-end page;
and the generating module is used for adjusting the display parameters of each preset component in the component tree and displaying corresponding target display contents in each preset component according to the component configuration subfile to obtain the front-end page.
10. A computer device comprising a memory and a processor, the memory storing a computer program executable on the processor, characterized in that the processor implements the steps of the method of any of claims 1 to 8 when the program is executed.
11. A computer readable storage medium, on which a computer program is stored, which computer program, when being executed by a processor, implements the method according to any one of claims 1 to 8.
CN202311193190.9A 2023-09-14 2023-09-14 Front-end page generation method and device, equipment and storage medium Pending CN117270847A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202311193190.9A CN117270847A (en) 2023-09-14 2023-09-14 Front-end page generation method and device, equipment and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202311193190.9A CN117270847A (en) 2023-09-14 2023-09-14 Front-end page generation method and device, equipment and storage medium

Publications (1)

Publication Number Publication Date
CN117270847A true CN117270847A (en) 2023-12-22

Family

ID=89218909

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202311193190.9A Pending CN117270847A (en) 2023-09-14 2023-09-14 Front-end page generation method and device, equipment and storage medium

Country Status (1)

Country Link
CN (1) CN117270847A (en)

Similar Documents

Publication Publication Date Title
US10726195B2 (en) Filtered stylesheets
CN108491205B (en) Front-end webpage development method and system based on component tree
US10318628B2 (en) System and method for creation of templates
CN110806863A (en) Interface document generation method and device, electronic equipment and storage medium
CN104025068B (en) The Conflict solving of the CSS definition from multiple sources
US8839192B2 (en) System and method for presentation of cross organizational applications
US20030037076A1 (en) Method, computer program and system for style sheet generation
EP1830275A1 (en) Information distribution system
US20160012145A1 (en) Client-Side Template Engine and Method for Constructing a Nested DOM Module for a Website
US20120233186A1 (en) Exposing and using metadata and meta-metadata
CN113535165A (en) Interface generation method and device, electronic equipment and computer readable storage medium
CN115994517A (en) Information processing method, apparatus, storage medium, device, and program product
CN112000416B (en) Card view generation method, device and computer readable storage medium
CN117270847A (en) Front-end page generation method and device, equipment and storage medium
CN114356291A (en) Method, device, equipment and medium for generating form based on configuration file
CN113190509A (en) Animation processing method and device, electronic equipment and computer readable storage medium
CN113703638A (en) Data management page processing method and device, electronic equipment and storage medium
US20160012146A1 (en) Client Web Browser and Method for Constructing a Website DOM Module With Client-Side Functional Code
CN116009863B (en) Front-end page rendering method, device and storage medium
CN112825038A (en) Visual page making method based on general component language specification and related product
CN118092914A (en) Page generation method, device, equipment, storage medium and low-code generation system
CN117348871A (en) Page control generation method and device based on template
Rabby ScrapBook: The Web Application Based On Web Scraping
CN118057305A (en) Interactive data processing method and device, electronic equipment and storage medium
CN117193728A (en) Development method and device of software as-a-service platform

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