CN112925520A - Method and device for building visual page and computer equipment - Google Patents
Method and device for building visual page and computer equipment Download PDFInfo
- Publication number
- CN112925520A CN112925520A CN202110342352.5A CN202110342352A CN112925520A CN 112925520 A CN112925520 A CN 112925520A CN 202110342352 A CN202110342352 A CN 202110342352A CN 112925520 A CN112925520 A CN 112925520A
- Authority
- CN
- China
- Prior art keywords
- target
- component
- target component
- page
- attribute
- 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
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application discloses a method and a device for building a visual page and computer equipment, relates to the technical field of data processing, and can solve the technical problems that the workload is large and the visual page is single in form when the visual page is built at present. The method comprises the following steps: determining a target component for constructing a target page based on a configuration file, wherein attribute information and configuration information of the target page are defined in the configuration file, the attribute information comprises a first attribute representing basic component information and a second attribute representing incremental component information, and the target component at least comprises a first target component under a first attribute, a second target component and/or a third target component under a second attribute; establishing an interaction relation between the target components according to the configuration information, wherein the interaction relation is used for defining the coupling between the first target component and the second target component and/or between the first target component and the third target component; and rendering the target assembly for creating the interactive relationship to obtain a target page.
Description
Technical Field
The application relates to the technical field of data processing, in particular to a method and a device for building a visual page and computer equipment.
Background
With the development of computer technology, more and more industries select a mode of creating a visual page by combining a plurality of components to spread information and popularize services.
At present, when a visual page is built, a large number of codes are often required to be written to realize configuration of basic components such as charts and the like aiming at different business scenes, and therefore the workload is large. And the interaction between the components is less, so that the visual page is single in form and cannot meet the application requirements of users.
Disclosure of Invention
In view of this, the application provides a method and a device for building a visual page, and a computer device, and mainly aims to solve the technical problems that a large number of codes need to be written when a visual page is built at present, so that the workload is large, the interaction between components is small, the visual page is single in form, and the application requirements of a user cannot be met.
According to one aspect of the application, a method for building a visual page is provided, and the method comprises the following steps:
determining a target component for constructing a target page based on a configuration file, wherein attribute information and configuration information of the target page are defined in the configuration file, the attribute information comprises a first attribute representing basic component information and a second attribute representing incremental component information, and the target component at least comprises a first target component under the first attribute, a second target component and/or a third target component under the second attribute;
creating an interaction relationship between the target components according to the configuration information, the interaction relationship being used to define the first target component and the second target component, and/or a coupling between the first target component and the third target component;
and rendering the target assembly for creating the interactive relationship to obtain the target page.
According to another aspect of the application, a device for building a visual page is provided, which comprises:
the determining module is used for determining a target component for constructing a target page based on a configuration file, wherein the configuration file is defined with attribute information and configuration information of the target page, the attribute information comprises a first attribute representing basic component information and a second attribute representing incremental component information, and the target component at least comprises a first target component under the first attribute, a second target component and/or a third target component under the second attribute;
a creating module, configured to create an interaction relationship between the target components according to the configuration information, where the interaction relationship is used to define the first target component and the second target component, and/or a coupling between the first target component and the third target component;
and the processing module is used for rendering the target assembly for creating the interactive relationship to obtain the target page.
According to yet another aspect of the present application, there is provided a storage medium having stored thereon a computer program which, when executed by a processor, implements the method of building a visualization page as described above.
According to still another aspect of the present application, a computer device is provided, which includes a storage medium, a processor, and a computer program stored on the storage medium and executable on the processor, where the processor implements the method for building the visual page when executing the program.
By means of the technical scheme, the method, the device and the computer equipment for building the visual page can determine the target component for building the target page by analyzing the attribute information and the configuration information defined in the configuration file after receiving the configuration file; and then, adaptively modifying the target components according to a specific service scene, such as creating an interactive relation among the target components according to the configuration information to enable the target components to have different display forms, and finally, rendering the target components with the interactive relation created to obtain a target page. According to the technical scheme, the page component which is completely matched with the service scene does not need to be generated by rewriting codes, and only data interaction and event interaction between the existing components need to be established according to service requirements, so that a new service component is formed, and the page generated by configuration can better meet the actual requirements of users while enriching the component expression form. In addition, through low-cost learning, non-developers such as products and the like can also directly realize the configuration and modification of the page, only one component needs to be developed in the component library, and only the component needs to be quickly iterated according to requirements subsequently, and new functions and new configuration items of the component are added, so that the repeated development of the front-end component is reduced, the development efficiency is effectively improved, and the development cost is reduced.
Drawings
The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the application and not to limit the application to the disclosed embodiment. In the drawings:
fig. 1 shows a flow diagram of a method for building a visual page provided by an embodiment of the present application;
fig. 2 is a flow chart diagram illustrating another method for building a visualization page provided by the embodiment of the present application;
fig. 3 shows a schematic structural diagram of a building device for a visual page provided by an embodiment of the application;
fig. 4 shows a schematic structural diagram of another building device for a visual page provided by the embodiment of the application.
Detailed Description
The present application will be described in detail below with reference to the accompanying drawings in conjunction with embodiments. It should be noted that the embodiments and features of the embodiments in the present application may be combined with each other without conflict.
The method aims at solving the technical problems that when a visual page is built at present, a large number of codes need to be written, so that the workload is large, the interaction between assemblies is small, the visual page is single in form, and the application requirements of users cannot be met. The embodiment of the application provides a method for building a visual page, as shown in fig. 1, the method comprises the following steps:
101. and determining a target component for constructing a target page based on a configuration file, wherein the attribute information and the configuration information of the target page are defined in the configuration file.
The configuration file generates requirements for pages uploaded by a user side, such as a page requirement text in a text form and a UI visual draft in a picture form. When the configuration file is a page requirement text in a character form, characters in the page requirement text can be processed in a keyword extraction mode, and attribute information and configuration information corresponding to a target page are extracted and obtained; when the configuration file is a UI visual manuscript in a picture form, page information in the UI visual manuscript may be first identified through an Optical Character Recognition (OCR) technique, and then attribute information and configuration information in the configuration file may be extracted from the page information in a keyword extraction manner. And then, directly screening target components which are matched with the attribute information and the configuration information and have the selection rate higher than a preset threshold value in the fragmentation database.
The attribute information defined in the configuration file may be an attribute tag, and the attribute tag corresponds to different component types, and may include a first attribute tag corresponding to a basic component such as a chart class, a table class, a filtering class, and the like, and may further include a second attribute tag corresponding to an incremental service component such as an a service, a B service, and the like. Accordingly, the attribute information may include a first attribute characterizing the base component information and a second attribute characterizing the delta component information. The configuration information defined in the configuration file may include parameter configuration information, component interaction information, page structure information, and the like, and is used to provide data references for parameter configuration of components, interaction relationship configuration, and overall layout of the target page. The method comprises the steps that a component library can be specifically a fragmented component library, a plurality of fragmented components corresponding to different attribute labels can be stored in the fragmented component library, each fragmented component is a minimum display unit configured with a single display function or an auxiliary display function, a service page capable of displaying complete data can be further obtained by associating the fragmented components of related services, the fragmented components can be divided according to attributes and comprise basic fragmented components under a first attribute label and service fragmented components under a second attribute label, the basic fragmented components are common functional components such as general chart components, table components and screening components and are not generally associated with a service scene; the business fragment component is an incremental component related to a business application scene, such as a shopping component, a lottery component, a training component, a navigation component and the like, and is used for establishing an interactive relation with the basic fragment component so as to obtain a brand new presentation form of the component.
In order to conveniently and accurately search the fragment components, in a specific application scenario, a component group corresponding to each component type can be determined in advance according to historical buried point data, each component group contains different fragment components of the same component type or the same fragment component in different display forms, and also contains the selection frequency of each fragment component, the selection frequency is used for determining the selection priority of the fragment component, and the selection frequency is higher, and the corresponding selection priority is higher. In this embodiment, a target component for constructing a target page may be screened in a fragmented component library based on configuration information, and according to the division of attribute information, the target component at least includes a basic fragmented component (a first target component) under a first attribute and a business fragmented component (a second target component and/or a third target component) under a second attribute, so as to create an interaction relationship between each basic fragmented component and a related business fragmented component according to business requirements, and finally generate a business component adapted to a specific business scenario.
The execution subject of the present application may be a terminal device, such as a mobile phone, a computer, etc., for executing the page visualization configuration operation, but is not limited thereto. In a specific application scene, the terminal device is used for receiving a configuration file uploaded by a user, analyzing to obtain attribute information and configuration information of a target page, screening target components for building the target page based on the configuration information, creating an interactive relation between the target components to ensure that the target components are consistent with the specific service scene, and finally rendering the target components for creating the interactive relation to obtain the target page.
102. An interaction relationship between the target components is created based on the configuration information, the interaction relationship being used to define the first target component and the second target component, and/or the coupling between the first target component and the third target component.
The configuration information may include component interaction information, and the component interaction information may specifically include data interaction information and event interaction information.
For the embodiment, in order to obtain a service component completely adapted to a service scene, after the target component is extracted, an interaction relationship between the target components may be created according to the configuration information, that is, a data interaction relationship and/or an event interaction relationship between each target basic fragment component and a related target service fragment component may be created according to component interaction information in the configuration information. By iterating the target business fragment assembly into the target basic fragment assembly, new functions and new configuration items of the target basic fragment assembly are added, so that incremental configuration of the target basic fragment assembly can be realized, the expression form of the assembly is enriched, and repeated development of a front-end assembly is reduced.
103. And rendering the target assembly for creating the interactive relationship to obtain a target page.
For this embodiment, in a specific application scenario, if it is determined that the target component is adjusted according to the configuration information and the requirement of the business application scenario is met, the target component may be further rendered according to the page layout between the components, and a target page matched with the page generation request is obtained.
By the method for building the visual page, after the configuration file is received, the target assembly for building the target page can be determined by analyzing the attribute information and the configuration information defined in the configuration file; and then, adaptively modifying the target components according to a specific service scene, such as creating an interactive relation among the target components according to the configuration information to enable the target components to have different display forms, and finally, rendering the target components with the interactive relation created to obtain a target page. According to the technical scheme, the page component which is completely matched with the service scene does not need to be generated by rewriting codes, and only data interaction and event interaction between the existing components need to be established according to service requirements, so that a new service component is formed, and the page generated by configuration can better meet the actual requirements of users while enriching the component expression form. In addition, through low-cost learning, non-developers such as products and the like can also directly realize the configuration and modification of the page, only one component needs to be developed in the component library, and only the component needs to be quickly iterated according to requirements subsequently, and new functions and new configuration items of the component are added, so that the repeated development of the front-end component is reduced, the development efficiency is effectively improved, and the development cost is reduced.
Further, as a refinement and an expansion of the specific implementation of the above embodiment, in order to fully describe the specific implementation process in this embodiment, another method for building a visualization page is provided, as shown in fig. 2, the method includes:
201. and screening a first target component for building a target page, a second target component for performing data interaction with the first target component and/or a third target component for performing event interaction with the first target component in a component library according to the configuration file.
The configuration file is defined with attribute information and configuration information of a target page, wherein the attribute information can comprise a first attribute and a second attribute, the first attribute is a configurable attribute corresponding to the basic component and is used for representing the basic component information, and the first attribute can comprise different component types such as a general diagram type, a table type, a screening type and the like; the second attribute is a specific service attribute and is used for representing incremental attribute information, such as different component types including shopping type, lottery type, training type and the like. Usually, the first attribute is not associated with the service scenario, and the second attribute is used as an incremental attribute of the first attribute and is often matched with the specific service scenario. The component library is developed in advance according to a service scene, and may specifically be a fragmented component library, or may also be in other forms, such as an interactive component library, and the like, which is not specifically limited herein. In the embodiment of the present application, a fragmentation component library is taken as an example, fragmentation components matched with each attribute information and configuration information may be stored in the fragmentation component library in the form of a component group, and the fragmentation component library includes, in addition to basic fragmentation components under a first attribute such as a general chart class, a table class, a filtering class, and the like, business fragmentation components under a part of a second attribute, such as a shopping class component, a lottery class component, a training class component, and the like. For the basic fragment component under the first attribute and the service fragment component under the second attribute, the basic fragment component and the service fragment component under the first attribute can be divided into a plurality of component groups according to component types, for example, the basic fragment component under the first attribute can be further divided: the service fragment component under the second attribute can be divided into: a shopping-like component family, a lottery-like component family, a training-like component family, etc. Specifically, after receiving the configuration file, the terminal device screens the fragmented components with the matching degree higher than the preset threshold value in the fragmented component library according to the attribute information and the configuration information, and outputs the fragmented components for the user to select.
In a specific application scenario, when a target component is screened, a system operation interface is output and established by responding to a page generation request sent by a user, and the target component is selected on the system operation interface. When a target component for building a target page is selected, as an optional mode, a selection instruction of a user can be received, and the target component is determined according to the selection instruction, wherein the selection instruction is sent when the user selects the component and continuously triggers to move to a preset position, and in a specific application scene, the selection instruction can be sent when the user selects the component in a dragging component list to a building area. As another optional mode, the terminal device may implement automatic selection of the target component according to a configuration file uploaded by a user, specifically, may extract attribute information and configuration information of a target page based on the configuration file, further determine a first target component type under a first attribute and a second target component type under a second attribute according to the configuration information, then screen a basic fragmented component having a higher selection rate than a preset threshold value from a component group of the fragmented component library corresponding to the first target component type, and screen a service fragmented component having a higher selection rate than the preset threshold value from a component group of the fragmented component library corresponding to the second target component type. Correspondingly, the embodiment steps may specifically include: determining a first target component type under the first attribute and a second target component type under the second attribute according to the configuration information; the method comprises the steps of screening a first target assembly with the utilization rate higher than a first preset threshold value in an assembly group with a first target assembly type corresponding to an assembly library, screening a second target assembly and/or a third target assembly with the utilization rate higher than a second preset threshold value in an assembly group with a second target assembly type corresponding to an assembly library, wherein the second target assembly is used for carrying out data interaction with the first target assembly, and the third target assembly is used for carrying out event interaction with the first target assembly. The first target component is a basic fragment component used for building a target page, the second target component is a business fragment component used for carrying out event interaction with the first target component, and the third target component is a business fragment component used for carrying out event interaction with the first target component. The numerical values of the first preset threshold and the second preset threshold can be set according to an actual application scene, the value ranges of the first preset threshold and the second preset threshold are both between 0 and 1, and the closer the set numerical value is to 1, the more the first target component, the second target component and/or the third target component which are screened out can meet the configuration requirements of a user on a target page.
In a specific application scenario, a component family under a first target component type and a component family under a second target component type may be first located in a fragmented component library according to configuration information, each component family includes different fragmented components with the same attribute label or the same fragmented component under different display forms, and also includes selection frequencies of the respective fragmented components, and specifically, a first target component with a higher availability than a first preset threshold may be selected from the component family under the first target component type, and a second target component and/or a third target component with a higher availability than a second preset threshold may be selected from the component family under the second target component type. The first target component corresponds to a basic fragment component which is not associated with a business scene, such as common functional components of general charts, tables, screening and the like, and the second target component and the third target component are incremental components which are associated with a business application scene, such as shopping components, lottery components, training components and the like, and are used for establishing an interactive relation with the basic fragment component so as to obtain a brand new display form of the component. For example, the first target component type is determined to be a chart type according to configuration information contained in the configuration file, the second target component type is determined to be a shopping type and a lottery type, page display requirements can be determined to be displaying of shopping information in image display of a visual page according to the configuration information, and a lottery popup window appears on the visual page according to a trigger instruction so as to conduct random lottery in order users contained in the shopping information. Therefore, when the target component is determined, the fragment component with the highest utilization rate can be screened from the component group of the graph class corresponding to the fragmentation database to be used as a first target component, the fragment component with the highest utilization rate can be screened from the component group of the shopping class corresponding to the fragmentation database to be used as a second target component, the fragment component with the highest utilization rate is screened from the component group of the lottery class corresponding to the fragmentation database to be used as a third target component, the second target component is used for carrying out data interaction with the first target component, shopping information can be led into the first target component according to the second target component and is displayed on a page, and the third target component is used for carrying out event interaction with the first target component and is used for establishing a popup window task related to lottery in the first target component according to the third target component to realize random lottery for an order user.
202. A first interaction relationship of the first target component and the second target component and/or a second interaction relationship of the first target component and the third target component is created.
The first interaction relation is used for defining coupling between the first target assembly and the second target assembly and supporting the first target assembly to acquire parameter data of the second target assembly; the second interaction relation is used for defining the coupling between the first target component and the third target component and supporting the first target component to listen to the global event of the third target component.
In a specific application scenario, when the interactive relationship of the target component is created, a page configuration template with the matching degree with the configuration information higher than a preset threshold value can be screened from the fragment component library, and if a selection instruction of a user for the page configuration template is received, the corresponding interactive relationship of the target component can be rapidly configured according to the configuration rule of the page configuration template. The page configuration template is specifically an interactive component style template stored in a historical development process, and the method for rapidly configuring the target component is realized by directly selecting the corresponding interactive component style template.
However, in an actual application scenario, it is often difficult to screen a page configuration template that completely matches with a user's requirement, so that it is an alternative, and if a page configuration template that matches with a target page is not screened out or a selection instruction of the page configuration template by a user is not received, automatic creation of an interaction relationship between target components can be executed directly according to component interaction information included in the configuration information, and a target page is generated according to the target components with the interaction relationship created.
For this embodiment, after determining a first target component that needs to create an interaction relationship and a second target component that is to implement data interaction with the first target component, a data interaction relationship (first interaction relationship) between the first target component and the second target component may be created further based on the component interaction information. Specifically, when the first interaction relation related to data interaction between the first target component and the second target component is created according to the component interaction information, as for each fragmented component in the fragmented component library, the unified global processing stores the following steps in developing and packaging: the fragment component ID, the corresponding thrown parameter of the fragment component and the thrown global event. Therefore, the embodiment can extract the unique identifier of the second target assembly at first; further judging whether the historical data interaction relation currently established by the first target assembly is matched with the unique identifier of the second target assembly; if the historical data interaction relation is matched with the second interaction relation, the historical data interaction relation can be directly used as the second interaction relation between the first target assembly and the second target assembly, and data interaction connection is reestablished; otherwise, if the historical data interaction relation is judged not to be matched with the unique identifier of the second target component, the unique identifier bound by the first target component in the historical data interaction relation can be modified, and then the first target component is bound with the second target component. After the first interaction relation is successfully established, the first target assembly can monitor and acquire parameter data thrown by the second target assembly, and when the assembly library monitors that the parameters change, new data can be requested again by using the new parameters, so that the first target assembly can acquire the data in the second target assembly, and further data interaction is realized. Correspondingly, the embodiment steps may specifically include: extracting a first unique identifier of a second target component; judging whether a historical data interaction relation containing a first unique identifier exists in a first target assembly; if yes, determining the historical data interaction relationship as a first interaction relationship between the first target assembly and the second target assembly; if not, a first interaction relation bound with the first unique identifier is created in the first target component.
For example, for a service scenario in which service data in different time periods need to be displayed by using a line graph, when configuring a parameter filtering field, for a first attribute component (a first target component) of the line graph, a data interaction relationship (a first interaction relationship) between the first attribute component and a second attribute component (a second target component) of the "selection time" needs to be created, and when configuring the parameter field, only an Identity (ID) of the second attribute component of the "selection time" needs to be bound at an interface of the first attribute component of the line graph corresponding to the data interaction, that is, service data interaction can be realized, so that when different times are selected in a visualization page, the line graph can query new data based on the new time, and then update the line graph, and if a plurality of components need to be bound, the line graph can be updated.
For this embodiment, after determining the first target component that needs to create the interaction relationship and the third target component that is to implement the event interaction with the first target component, the event interaction relationship (second interaction relationship) between the first target component and the third target component may be further created based on the component interaction information. Specifically, when the second interaction relationship between the first target component and the third target component is created according to the component interaction information, as for each fragmented component in the fragmented component library, the unified global processing stores: the ID of the fragment component, the corresponding thrown parameter of the fragment component and the thrown global event, and if the event is thrown by the component, the event can be set as the thrown global event, so that other fragment components can conveniently monitor in real time; therefore, the event needing to be monitored can be modified and selected in the first target component by modifying the ID of the fragment component bound in the third target component, and the event interaction between the first target component and the third target component can be realized. Specifically, the unique identifier of the first target component and the global event of the third target component may be extracted first; and then selecting a global event matched with a third target component in the first target component, inputting the unique identification of the first target component in the third target component, and further creating a second interaction relation with the first target component about the event. Correspondingly, the embodiment steps may specifically include: extracting a second unique identifier of the first target assembly, and determining a global event to be monitored in a third target assembly based on the assembly interaction information; and generating a second interactive relation for supporting the first target component to listen to the global event by creating a listening task related to the global event in the first target component and binding a second unique identifier in a third target component.
In view of the current major event interactions common pop-up events: namely, the display of the popup window is monitored. Therefore, in the embodiment, a popup event is taken as an example, for example, the component interaction information includes that popup interaction is required when a user clicks and views a yesterday total call component; as the components are developed, some global events are thrown, and pop-up events exist in the global events; configuration binding for event interaction can be accomplished by the following steps: 1) configuring and selecting an event to be thrown when the total amount fragment component (a first target component) is called yesterday, wherein a popup event (popBox event) is selected; 2) an ID of 'yesterday call total amount fragment component' is input at a binding fragment ID in the configuration of the popup component (third target component); 3) through the steps, the fact that the event interaction relation between the total fragment component and the popup component is called yesterday can be bound, and the popup can appear when the total fragment component is called yesterday when clicking is carried out.
In a specific application scenario, the configuration information may further include parameter configuration information, and the parameter configuration information may specifically include location configuration information, a background map of the component, a color, a size of a font size, a size of the component, a display effect, and the like. Therefore, before or after the interactive relation between the target components is established according to the configuration information, the parameter configuration operation of the target components can be executed according to the parameter configuration information. Specifically, a parameter form of the target component can be called; judging whether a first parameter value in the parameter form is matched with a second parameter value in the parameter configuration information; if not, the first parameter value is replaced and updated to be the second parameter value. The first parameter value is a default parameter value corresponding to each target assembly, the second parameter value is a service parameter value matched with user requirements, and adjustment of assembly display effects such as color, font and size of the target assembly can be achieved by adjusting the default parameter value in the target assembly to be matched with the service parameter value, so that the desired page layout is achieved.
203. And rendering the target assembly for creating the first interaction relation and/or the second interaction relation to obtain a target page.
In a specific application scenario, the configuration information further includes page structure information, the page structure information is used for providing a page layout, when a target component is rendered, a page rendering instance may be created based on the page structure information, a display form of each target component is planned in the page rendering instance, and then each target component is added to the page rendering instance for instantiation processing. The display form may include an arrangement manner of the target components, such as a position arrangement relationship between the target components; and the display mode of the target component can be further included, such as direct display, indirect display or hidden display. And finally, performing page rendering by calling the first interactive relationship and/or the second interactive relationship among the target components to obtain a target page, wherein the specific rendering process can be a recursive process, and the nesting relationship is formed by nesting according to the first interactive relationship and/or the second interactive relationship among the target components. The rendering example is a PRT file with rendering, and the purpose of creating the rendering example is to restore the rendering effect and repeatedly adjust the rendering effect each time the PRT file is opened by saving the rendering parameters.
By the aid of the visual page building method, after the configuration file is received, the target assembly for building the target page can be determined by analyzing the attribute information and the configuration information defined in the configuration file; and then, adaptively modifying the target components according to a specific service scene, such as creating an interactive relation among the target components according to the configuration information to enable the target components to have different display forms, and finally, rendering the target components with the interactive relation created to obtain a target page. According to the technical scheme, the page component which is completely matched with the service scene does not need to be generated by rewriting codes, and only data interaction and event interaction between the existing components need to be established according to service requirements, so that a new service component is formed, and the page generated by configuration can better meet the actual requirements of users while enriching the component expression form. In addition, through low-cost learning, non-developers such as products and the like can also directly realize the configuration and modification of the page, only one component needs to be developed in the component library, and only the component needs to be quickly iterated according to requirements subsequently, and new functions and new configuration items of the component are added, so that the repeated development of the front-end component is reduced, the development efficiency is effectively improved, and the development cost is reduced.
Further, as a specific implementation of the method shown in fig. 1 and fig. 2, an embodiment of the present application provides a device for building a visual page, as shown in fig. 3, the device includes: a determining module 31, a creating module 32, and a processing module 33;
the determining module 31 is configured to determine a target component for building a target page based on a configuration file, where the configuration file defines attribute information and configuration information of the target page, the attribute information includes a first attribute representing information of a basic component and a second attribute representing information of an incremental component, and the target component includes at least a first target component under a first attribute, a second target component under a second attribute, and/or a third target component;
a creation module 32 operable to create an interaction relationship between the target components according to the configuration information, the interaction relationship being used to define a coupling between the first target component and the second target component, and/or between the first target component and the third target component;
the processing module 33 may be configured to perform rendering processing on the target component for creating the interaction relationship, so as to obtain a target page.
In a specific application scenario, the determining module 31 is specifically configured to determine, according to the configuration information, a first target component type under the first attribute and a second target component type under the second attribute; the method comprises the steps of screening a first target assembly with the utilization rate higher than a first preset threshold value in an assembly group with a first target assembly type corresponding to an assembly library, screening a second target assembly and/or a third target assembly with the utilization rate higher than a second preset threshold value in an assembly group with a second target assembly type corresponding to an assembly library, wherein the second target assembly is used for carrying out data interaction with the first target assembly, and the third target assembly is used for carrying out event interaction with the first target assembly.
Correspondingly, the creating module 32 is specifically configured to create a first interaction relationship between the first target component and the second target component, where the first interaction relationship is used to support the first target component to obtain parameter data of the second target component; and/or creating a second interactive relation between the first target component and the third target component, wherein the second interactive relation is used for enabling the first target component to monitor the global event of the third target component.
In a specific application scenario, when creating a first interaction relationship between a first target component and a second target component, the creating module 32 may be specifically configured to extract a first unique identifier of the second target component; judging whether a historical data interaction relation containing a first unique identifier exists in a first target assembly; if yes, determining the historical data interaction relationship as a first interaction relationship between the first target assembly and the second target assembly; if not, a first interaction relation bound with the first unique identifier is created in the first target component.
Correspondingly, when creating the second interaction relationship between the first target component and the third target component, the creating module 32 may be specifically configured to extract the second unique identifier of the first target component, and determine, based on the component interaction information, a global event to be monitored in the third target component; and generating a second interactive relation for supporting the first target component to listen to the global event by creating a listening task related to the global event in the first target component and binding a second unique identifier in a third target component.
In a specific application scenario, the configuration information includes parameter configuration information, and as shown in fig. 4, the apparatus further includes: a calling module 34, a judging module 35 and an updating module 36;
a calling module 34, configured to call a parameter form of the target component;
the judging module 35 is configured to judge whether a first parameter value in the parameter form matches a second parameter value in the parameter configuration information;
and the updating module 36 may be configured to, if not, update the first parameter value to the second parameter value instead.
Correspondingly, the configuration information further comprises page structure information, and the page structure information is used for providing page layout;
the processing module 33 is specifically configured to create a page rendering example based on the page structure information; adding each target component to a page rendering instance; and calling the first interaction relation and/or the second interaction relation among the target components, and rendering the page to obtain the target page.
It should be noted that other corresponding descriptions of the functional units related to the device for building a visual page provided in this embodiment may refer to the corresponding descriptions in fig. 1 to fig. 2, and are not described herein again.
Based on the method shown in fig. 1 to fig. 2, correspondingly, the present embodiment further provides a storage medium, on which computer readable instructions are stored, and when the computer readable instructions are executed by a processor, the method for building the visualization page shown in fig. 1 to fig. 2 is implemented.
Based on such understanding, the technical solution of the present application may be embodied in the form of a software product, which may be stored in a storage medium (which may be a CD-ROM, a usb disk, a removable hard disk, or the like), and includes several instructions to enable a computer device (which may be a personal computer, a server, or a network device, or the like) to execute the method of the embodiments of the present application.
Based on the method shown in fig. 1 to fig. 2 and the virtual device embodiments shown in fig. 3 and fig. 4, in order to achieve the above object, the present embodiment further provides a computer device, where the computer device includes a storage medium and a processor; a storage medium for storing a computer program; and a processor for executing a computer program to implement the method for constructing the visualization page shown in fig. 1 to 2.
Optionally, the computer device may further include a user interface, a network interface, a camera, Radio Frequency (RF) circuitry, a sensor, audio circuitry, a WI-FI module, and so forth. The user interface may include a Display screen (Display), an input unit such as a keypad (Keyboard), etc., and the optional user interface may also include a USB interface, a card reader interface, etc. The network interface may optionally include a standard wired interface, a wireless interface (e.g., WI-FI interface), etc.
It will be understood by those skilled in the art that the present embodiment provides a computer device structure that is not limited to the physical device, and may include more or less components, or some components in combination, or a different arrangement of components.
The storage medium may further include an operating system and a network communication module. The operating system is a program that manages the hardware and software resources of the computer device described above, supporting the operation of information handling programs and other software and/or programs. The network communication module is used for realizing communication among components in the storage medium and communication with other hardware and software in the information processing entity device.
Through the above description of the embodiments, those skilled in the art will clearly understand that the present application can be implemented by software plus a necessary general hardware platform, and can also be implemented by hardware.
By applying the technical scheme of the application, compared with the prior art, the application can determine the target assembly for constructing the target page by analyzing the attribute information and the configuration information defined in the configuration file after receiving the configuration file; and then, adaptively modifying the target components according to a specific service scene, such as creating an interactive relation among the target components according to the configuration information to enable the target components to have different display forms, and finally, rendering the target components with the interactive relation created to obtain a target page. According to the technical scheme, the page component which is completely matched with the service scene does not need to be generated by rewriting codes, and only data interaction and event interaction between the existing components need to be established according to service requirements, so that a new service component is formed, and the page generated by configuration can better meet the actual requirements of users while enriching the component expression form. In addition, through low-cost learning, non-developers such as products and the like can also directly realize the configuration and modification of the page, only one component needs to be developed in the component library, and only the component needs to be quickly iterated according to requirements subsequently, and new functions and new configuration items of the component are added, so that the repeated development of the front-end component is reduced, the development efficiency is effectively improved, and the development cost is reduced.
Those skilled in the art will appreciate that the figures are merely schematic representations of one preferred implementation scenario and that the blocks or flow diagrams in the figures are not necessarily required to practice the present application. Those skilled in the art will appreciate that the modules in the devices in the implementation scenario may be distributed in the devices in the implementation scenario according to the description of the implementation scenario, or may be located in one or more devices different from the present implementation scenario with corresponding changes. The modules of the implementation scenario may be combined into one module, or may be further split into a plurality of sub-modules.
The above application serial numbers are for description purposes only and do not represent the superiority or inferiority of the implementation scenarios. The above disclosure is only a few specific implementation scenarios of the present application, but the present application is not limited thereto, and any variations that can be made by those skilled in the art are intended to fall within the scope of the present application.
Claims (10)
1. A method for building a visual page is characterized by comprising the following steps:
determining a target component for constructing a target page based on a configuration file, wherein attribute information and configuration information of the target page are defined in the configuration file, the attribute information comprises a first attribute representing basic component information and a second attribute representing incremental component information, and the target component at least comprises a first target component under the first attribute, a second target component and/or a third target component under the second attribute;
creating an interaction relationship between the target components according to the configuration information, the interaction relationship being used to define the first target component and the second target component, and/or a coupling between the first target component and the third target component;
and rendering the target assembly for creating the interactive relationship to obtain the target page.
2. The method of claim 1, wherein determining a target component for building a target page based on a configuration file comprises:
determining a first target component type under a first attribute and a second target component type under a second attribute according to the configuration information;
and screening a first target assembly with the utilization rate higher than a first preset threshold value from the assembly group of the assembly library corresponding to the first target assembly type, screening a second target assembly and/or a third target assembly with the utilization rate higher than a second preset threshold value from the assembly group of the assembly library corresponding to the second target assembly type, wherein the second target assembly is used for carrying out data interaction with the first target assembly, and the third target assembly is used for carrying out event interaction with the first target assembly.
3. The method of claim 2, wherein the creating the interaction relationship between the target components according to the configuration information comprises:
creating a first interactive relation between the first target component and the second target component, wherein the first interactive relation is used for supporting the first target component to acquire parameter data of the second target component; and/or the presence of a gas in the gas,
and creating a second interactive relation between the first target component and the third target component, wherein the second interactive relation is used for supporting the first target component to monitor the global event of the third target component.
4. The method of claim 3, wherein creating the first interaction relationship between the first target component and the second target component comprises:
extracting a first unique identification of the second target component;
judging whether a historical data interaction relation containing the first unique identifier exists in the first target assembly;
if yes, determining the historical data interaction relationship as a first interaction relationship between the first target assembly and the second target assembly;
and if not, creating a first interactive relation bound with the first unique identifier in the first target component.
5. The method of claim 3, wherein creating the second interaction relationship between the first target component and the third target component comprises:
extracting a second unique identifier of the first target assembly, and determining a global event to be monitored in the third target assembly based on the assembly interaction information;
generating a second interactive relation for supporting the first target component to monitor the global event by creating a monitoring task related to the global event in the first target component and binding the second unique identifier in the third target component.
6. The method according to any one of claims 1 to 5, wherein the configuration information comprises parameter configuration information, and before creating the interaction relationship between the target components according to the configuration information, the method further comprises:
calling a parameter form of the target component;
judging whether a first parameter value in the parameter form is matched with a second parameter value in the parameter configuration information;
and if not, replacing and updating the first parameter value to the second parameter value.
7. The method of claim 3, wherein the configuration information further comprises page structure information, the page structure information being used to provide a page layout;
the rendering processing is performed on the target component for creating the interaction relationship to obtain the target page, and the rendering processing includes:
creating a page rendering instance based on the page structure information;
adding each of the target components to the page rendering instance;
and calling the first interaction relation and/or the second interaction relation among the target components, and rendering the page to obtain the target page.
8. A device of buildding of visual page which characterized in that includes:
the determining module is used for determining a target component for constructing a target page based on a configuration file, wherein the configuration file is defined with attribute information and configuration information of the target page, the attribute information comprises a first attribute representing basic component information and a second attribute representing incremental component information, and the target component at least comprises a first target component under the first attribute, a second target component and/or a third target component under the second attribute;
a creating module, configured to create an interaction relationship between the target components according to the configuration information, where the interaction relationship is used to define the first target component and the second target component, and/or a coupling between the first target component and the third target component;
and the processing module is used for rendering the target assembly for creating the interactive relationship to obtain the target page.
9. A storage medium on which a computer program is stored, which program, when executed by a processor, implements the method of building a visualization page according to any of claims 1 to 7.
10. A computer device comprising a storage medium, a processor and a computer program stored on the storage medium and executable on the processor, wherein the processor implements the method of building a visualization page according to any one of claims 1 to 7 when executing the program.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110342352.5A CN112925520A (en) | 2021-03-30 | 2021-03-30 | Method and device for building visual page and computer equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110342352.5A CN112925520A (en) | 2021-03-30 | 2021-03-30 | Method and device for building visual page and computer equipment |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112925520A true CN112925520A (en) | 2021-06-08 |
Family
ID=76176687
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110342352.5A Pending CN112925520A (en) | 2021-03-30 | 2021-03-30 | Method and device for building visual page and computer equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112925520A (en) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113626030A (en) * | 2021-06-28 | 2021-11-09 | 大唐互联科技(武汉)有限公司 | Method and system for quickly building data visualization large screen |
| CN113791784A (en) * | 2021-09-15 | 2021-12-14 | 中国工商银行股份有限公司 | Method and device for generating form template page |
| CN114911535A (en) * | 2022-04-22 | 2022-08-16 | 青岛海尔科技有限公司 | Application program component configuration method, storage medium and electronic device |
| CN114926143A (en) * | 2022-05-16 | 2022-08-19 | 三峡高科信息技术有限责任公司 | Method and platform for configuring enterprise workflow based on business components and process engine |
| CN115357696A (en) * | 2022-08-11 | 2022-11-18 | 北京至臻云智能科技有限公司 | Dynamic chart billboard display method based on components and related equipment |
| CN117707512A (en) * | 2023-12-15 | 2024-03-15 | 北京当境科技有限责任公司 | Method and system for realizing selection of data through popup window |
| CN117806617A (en) * | 2023-12-29 | 2024-04-02 | 北京领雁科技股份有限公司 | Interactive assembly for page building and building method |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20050097579A1 (en) * | 2003-11-04 | 2005-05-05 | Karlheinz Dorn | Method and system for dynamically generating user interfaces |
| CN110489116A (en) * | 2018-05-15 | 2019-11-22 | 优酷网络技术（北京）有限公司 | A kind of rendering method of the page, device and computer storage medium |
| CN111443911A (en) * | 2020-03-24 | 2020-07-24 | 五八有限公司 | Page development method and device, electronic equipment and computer storage medium |
| CN111475160A (en) * | 2020-03-13 | 2020-07-31 | 深圳壹账通智能科技有限公司 | Method and device for generating product page and computer equipment |
-
2021
- 2021-03-30 CN CN202110342352.5A patent/CN112925520A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20050097579A1 (en) * | 2003-11-04 | 2005-05-05 | Karlheinz Dorn | Method and system for dynamically generating user interfaces |
| CN110489116A (en) * | 2018-05-15 | 2019-11-22 | 优酷网络技术（北京）有限公司 | A kind of rendering method of the page, device and computer storage medium |
| CN111475160A (en) * | 2020-03-13 | 2020-07-31 | 深圳壹账通智能科技有限公司 | Method and device for generating product page and computer equipment |
| CN111443911A (en) * | 2020-03-24 | 2020-07-24 | 五八有限公司 | Page development method and device, electronic equipment and computer storage medium |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113626030A (en) * | 2021-06-28 | 2021-11-09 | 大唐互联科技(武汉)有限公司 | Method and system for quickly building data visualization large screen |
| CN113791784A (en) * | 2021-09-15 | 2021-12-14 | 中国工商银行股份有限公司 | Method and device for generating form template page |
| CN114911535A (en) * | 2022-04-22 | 2022-08-16 | 青岛海尔科技有限公司 | Application program component configuration method, storage medium and electronic device |
| CN114911535B (en) * | 2022-04-22 | 2023-12-19 | 青岛海尔科技有限公司 | Application program component configuration method, storage medium and electronic device |
| CN114926143A (en) * | 2022-05-16 | 2022-08-19 | 三峡高科信息技术有限责任公司 | Method and platform for configuring enterprise workflow based on business components and process engine |
| CN115357696A (en) * | 2022-08-11 | 2022-11-18 | 北京至臻云智能科技有限公司 | Dynamic chart billboard display method based on components and related equipment |
| CN117707512A (en) * | 2023-12-15 | 2024-03-15 | 北京当境科技有限责任公司 | Method and system for realizing selection of data through popup window |
| CN117707512B (en) * | 2023-12-15 | 2024-05-10 | 北京当境科技有限责任公司 | Method and system for realizing selection of data through popup window |
| CN117806617A (en) * | 2023-12-29 | 2024-04-02 | 北京领雁科技股份有限公司 | Interactive assembly for page building and building method |
| CN117806617B (en) * | 2023-12-29 | 2024-06-07 | 北京领雁科技股份有限公司 | Interactive assembly for page building and building method |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112925520A (en) | Method and device for building visual page and computer equipment | |
| CN111814089B (en) | Page rendering method and device, rendering server and storage medium | |
| CN113268226B (en) | Page data generation method, device, storage medium and equipment | |
| CN111596852B (en) | Content editing method, system, computer readable storage medium and terminal device | |
| CN100444163C (en) | Configuration method for webpage display | |
| CN109388506B (en) | Data processing method and electronic equipment | |
| CN110609957B (en) | Global searching method, terminal and server | |
| US11829667B2 (en) | Creation of component templates and removal of dead content therefrom | |
| CN107832041B (en) | Method, device and equipment for making thematic page and readable storage medium | |
| CN113253880B (en) | Method and device for processing pages of interaction scene and storage medium | |
| CN113268303A (en) | Interface element configuration method and device, storage medium and electronic equipment | |
| CN114612279A (en) | Watermark adding method and device | |
| CN114416056A (en) | Page generation method, system, computer equipment and readable storage medium | |
| CN106383705B (en) | Method and device for setting mouse display state in application thin client | |
| CN102142004B (en) | Service processing method and service engine | |
| CN110765296A (en) | Image searching method, terminal device and storage medium | |
| CN109120783A (en) | Information acquisition method and device, mobile terminal and computer readable storage medium | |
| CN114579128A (en) | Visual page building method and device, storage medium and computer equipment | |
| KR20190094879A (en) | Method and apparatus for producing modular content for outdoor augmented reality services | |
| KR20230111873A (en) | Method, computer device, and computer program for real-time inspector on live commerce platform | |
| CN113806596B (en) | Operation data management method and related device | |
| CN110730379B (en) | Video information processing method, device and storage medium | |
| CN113706209B (en) | Operation data processing method and related device | |
| US20240370652A1 (en) | Method, computer device, and computer program for real-time inspector in live commerce platform | |
| CN117055792A (en) | Interface presentation method, apparatus, device, medium, and program product |
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 |