CN118689465A - Application page processing method, device, electronic device and storage medium - Google Patents

Abstract

The present application relates to the field of computer technology, and in particular to an application page processing method, device, electronic device and storage medium, the method comprising: in response to an application page editing instruction, displaying an application editing page; the application editing page includes a candidate function component display area and a page editing area; in response to a function component selection instruction triggered based on any component identifier, displaying a selected target function component in the page editing area, and at least one attribute configuration component corresponding to the target function component; in response to an attribute configuration instruction triggered based on any attribute configuration component, configuring any attribute configuration component based on an attribute expression to obtain a configured attribute configuration component; generating page information of an application page based on the target function component and the configured attribute configuration component. The present application can improve page development efficiency.

Description

Application page processing method, device, electronic device and storage medium

Technical Field

The present application relates to the field of computer technology, and in particular to an application page processing method, device, electronic device and storage medium.

Background Art

In the existing application page development process, developers are required to manually write corresponding business codes according to business needs; for example, in order to display the required page data in the application page, developers need to write the data source and data display fields in the code, which leads to low efficiency of application page development and cumbersome operations.

Summary of the invention

The technical problem to be solved by the present application is to provide an application page processing method, device, electronic device and storage medium, which can improve the efficiency of page development.

In order to solve the above technical problems, on the one hand, an embodiment of the present application provides an application page processing method, including:

In response to the application page editing instruction, displaying the application editing page; the application editing page includes a candidate functional component display area and a page editing area, and the candidate functional component display area includes a component identifier of at least one candidate functional component;

In response to a function component selection instruction triggered based on any component identifier, displaying a selected target function component and at least one property configuration component corresponding to the target function component in the page editing area;

In response to an attribute configuration instruction triggered based on any attribute configuration component, any attribute configuration component is configured based on an attribute expression to obtain a configured attribute configuration component; each attribute expression corresponds to attribute configuration components of multiple target functional components;

Based on the target function component and the configured property configuration component, page information of the application page is generated.

On the other hand, an embodiment of the present application provides an application page processing device, including:

A first response module, configured to display an application editing page in response to an application page editing instruction; the application editing page includes a candidate functional component display area and a page editing area, the candidate functional component display area includes a component identifier of at least one candidate functional component;

A second response module, configured to respond to a function component selection instruction triggered based on any component identifier, and display the selected target function component and at least one property configuration component corresponding to the target function component in the page editing area;

A third response module, configured to respond to an attribute configuration instruction triggered based on any attribute configuration component, configure any attribute configuration component based on an attribute expression, and obtain a configured attribute configuration component; each attribute expression corresponds to attribute configuration components of multiple target functional components;

The page information generation module is used to generate page information of the application page based on the target function component and the configured attribute configuration component.

On the other hand, the present application provides an electronic device, comprising a processor and a memory, wherein the memory stores at least one instruction or at least one program, and the at least one instruction or the at least one program is loaded and executed by the processor to implement the application page processing method as described above.

On the other hand, the present application provides a computer storage medium, in which at least one instruction or at least one program is stored, and the at least one instruction or the at least one program is loaded by a processor and executed as the above-mentioned application page processing method.

Implementing the embodiments of the present application has the following beneficial effects:

When editing an application page, the present application can determine the selected target function component based on the function component selection instruction, and then display the target function component and at least one property configuration component corresponding to the target function component in the page editing area, and the property configuration component is used to configure the properties of the target function component; when it is necessary to configure any property of the target function component, the property configuration component corresponding to the property can be triggered, and the property configuration component can be configured based on the property expression, and then the page information of the application page can be generated based on the configured property configuration component and the target function component; thereby, page development is achieved by visually selecting the function component and visually configuring the property configuration component, avoiding the need to develop the page by writing code, and improving the efficiency of page development and page display; further, each property expression can correspond to the property configuration components of multiple target function components, so that for different property configuration components that need to configure the same property, the property configuration can be performed based on the same property expression, that is, each property expression is reusable, avoiding the problem of repeated operations when configuring the same property for multiple functions, improving the configuration efficiency of the function component properties, and further improving the efficiency of page development and page display.

BRIEF DESCRIPTION OF THE DRAWINGS

In order to more clearly illustrate the technical solutions and advantages in the embodiments of the present application or the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

FIG1 is a schematic diagram of an implementation environment provided by an embodiment of the present application;

FIG2 is a flow chart of an application page processing method provided in an embodiment of the present application;

FIG3 is a schematic diagram of an application editing page provided in an embodiment of the present application;

FIG4 is a schematic diagram of a page area provided in an embodiment of the present application and a display area for candidate functional components;

FIG5 is a flow chart of a configuration method of a property configuration component provided in an embodiment of the present application;

FIG6 is a schematic diagram of a property configuration window provided in an embodiment of the present application;

FIG. 7 is a schematic diagram of a table component and a chart component provided in an embodiment of the present application;

FIG8 is a schematic diagram showing various interface information provided in an embodiment of the present application;

FIG9 is a schematic diagram showing a configuration instruction triggering control provided in an embodiment of the present application;

10 is a flow chart of a method for generating page information of an application page provided in an embodiment of the present application;

11 is a schematic diagram of the corresponding relationship between the attributes of the functional components and the attribute configuration components provided in an embodiment of the present application;

12 is a flow diagram of configuration information of a property configuration component provided in an embodiment of the present application;

FIG13 is a functional component development attribute configuration protocol code provided in an embodiment of the present application;

FIG14 is a property configuration component definition protocol code provided in an embodiment of the present application;

FIG15 is a schematic diagram of an application page processing device provided in an embodiment of the present application;

FIG16 is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application;

FIG. 17 is a schematic diagram of the structure of another electronic device provided in an embodiment of the present application.

DETAILED DESCRIPTION

To make the purpose, technical solutions and advantages of the present application clearer, the present application will be further described in detail below in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present application, rather than all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of the present application.

It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or server that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

First, the following explanations are given for the relevant terms involved in the embodiments of this specification:

Component: An independent unit that includes interface, interaction, and data, and has a high degree of cohesion.

Functional module: A large-grained component consisting of components and source code.

Property configuration component: abstracts the dynamic properties that can be opened by the functional component into form item components and marks them. The platform identifies the property widget through the label and uses the property widget to render the effect.

Attribute form: A form composed of N attribute widgets. The data submitted by this form is the input parameter of the functional component.

Data source: the source of data that the static page needs to display. Currently, the data source can be: variables, models, interfaces, etc.

Model: It consists of a table structure and the add, delete, modify, and query interfaces generated around this table structure. If the data source property of the functional component is set to model, it means that the query interface is called by default.

Running state: refers to the effect of executing the code after the page designer designs the page. The running state can respond to the interaction on the page, experience the effect of the complete application being displayed to the customer, and the effect of the declared variables being assigned and executed.

Design state: refers to the state of the page designer when the product manager or operation staff is designing, that is, how they want the current page to be designed, what the interactive behavior will be when clicking a button, which variables to declare to save data, which variable to render on the page, etc.

Pagelets: refers to the JSON file generated by dragging and dropping pages on the editing area. This JSON file is used to describe the entire page, describing its events, styles, displays, and actions.

Renderer: Rendering engine, which converts the Pagelets JSON file into a displayable page.

Designer: The overall processing object of the editor design state.

Please refer to Figure 1, which shows a schematic diagram of the implementation environment provided by an embodiment of the present application. The implementation environment may include: a page development end 110, an application server 120 and a user terminal 130; wherein the page development end 110 can communicate data with the application server 120 through a network; the user terminal 130 can communicate data with the application server 120 through a network.

Specifically, the page development end 110 can develop application pages in a visual manner based on business requirements, generate page information of the application pages, and send the page information of the application pages to the application server 120 .

When using the target application, the user terminal 130 can view the relevant application pages of the target application. When the application page needs to be viewed, a page view request for the application page can be sent to the application server 120. The application server 120 can return corresponding page information to the user terminal 130 based on the page view request; the user terminal 130 can render based on the page information to display the application page.

The page development end 110 can communicate with the application server 120 based on the browser/server mode (B/S) or the client/server mode (C/S). The page development end 110 may include: physical devices such as smart phones, tablet computers, laptops, digital assistants, smart wearable devices, vehicle terminals, servers, etc. The operating system running on the page development end 110 in the embodiment of the present application may include but is not limited to Android system, IOS system, Linux, Windows, etc.

The user terminal 130 can communicate with the application server 120 based on the browser/server mode (B/S) or the client/server mode (C/S). The user terminal 130 may include: a smart phone, a tablet computer, a laptop computer, a digital assistant, a smart wearable device, a vehicle terminal, a server and other types of physical devices. The operating system running on the user terminal 130 in the embodiment of the present application may include but is not limited to Android system, IOS system, Linux, Windows and the like.

The application server 120 can establish a communication connection with the page development end 110 via wired or wireless communication, and the application server 120 can establish a communication connection with the user terminal 130 via wired or wireless communication. The application server 120 can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, as well as big data and artificial intelligence platforms.

In order to solve the problem of low efficiency and cumbersome operation of page application page development in the prior art, the embodiment of the present application provides an application page processing method, the execution subject of the method can be the above-mentioned page development end, please refer to Figure 2, the method may specifically include:

S210. In response to the application page editing instruction, display an application editing page; the application editing page includes a candidate functional component display area and a page editing area, and the candidate functional component display area includes a component identifier of at least one candidate functional component.

Each application may include multiple application pages, and each application page may display corresponding page data, so that when creating an application, it may include the creation of an application page; specifically, when it is necessary to create an application, an application creation page may be displayed, and the application creation page may be a page for performing various creation operations on the application to be created, and the various creation operations on the application to be created include application page creation, application image creation, application name creation, etc. The application creation page may include an application page creation control, and the application page creation control may be identified by a text name, for example, the text "application page creation" may be displayed on the application page creation control; the application page creation control may also be identified by an image, for example, the image of the application page creation control may be an image representing the page identification. By touching the application page creation control, the corresponding application page editing instruction may be triggered.

In one example, each time an application page needs to be created, the corresponding application page editing instruction can be triggered by triggering a page creation control in the application creation page, that is, one application page can correspond to one application page editing instruction.

In another example, if the creation of the current application page has been completed and it is necessary to continue to create the next application page, an application page editing instruction can be triggered based on the application page creation control in the current application page to enter the creation process of the next application page.

When the page development end responds to the application page editing instruction, the application editing page can be displayed. The application editing page is a page used to perform various creation operations on the application page; the various creation operations on the application page may include page name creation, page control creation, page style creation, etc. When responding to the application page editing instruction, the displayed application editing page may include a candidate functional component display area and a page editing area. At this time, the candidate functional component display area may display the component logo of the candidate functional component. The component logo can be a text logo or an image logo, which is not limited here; at this time, the page editing area can be a blank area, that is, an area where no specific page information is displayed. Please refer to Figure 3. The candidate functional component display area displays functional component 1, functional component 2, functional component 3, functional component 4, etc., and the page area is an area adjacent to the candidate functional component display area.

S220. In response to a function component selection instruction triggered based on any component identifier, display a selected target function component and at least one property configuration component corresponding to the target function component in the page editing area.

In this embodiment, the function component selection instruction triggered based on any component identifier can be triggered by a selection operation on any component identifier. The selection operation on any component identifier may include dragging, single-clicking, double-clicking, long pressing and other operations. Taking the drag operation as an example, when it is necessary to select the target function component, the component identifier of the target function component can be dragged, and the dragging direction can point to the page editing area to realize dragging the function component to the page editing area, and automatically trigger the display of the selected target function component in the page editing area, as well as at least the attribute configuration component corresponding to the target function component.

In this embodiment, a functional component selection instruction may be triggered for one or more component identifiers, that is, a single or multiple component identifiers may be selected each time, thereby realizing the selection of one or more functional components. In the case where multiple functional components need to be selected at the same time, the component identifiers of the multiple functional components may be selected first, and then the functional component selection instruction may be triggered based on the component identifiers of the multiple functional components.

The display form of the target functional component can be displayed in the page editing area, and the corresponding attribute configuration component can correspond to multiple dynamically configurable attributes corresponding to the target functional component. The so-called dynamically configurable attributes can refer to the dynamic configuration of attributes based on specific business needs (for example, displaying data of different structures in different situations, etc.) to achieve the adaptation of page display data to business needs. In this embodiment, when developing each functional component, the dynamically configurable attributes of the functional component to be developed can be pre-set, and for each dynamically configurable attribute, an attribute configuration component can be generated accordingly, so that when developing a page based on the developed functional component, the attributes of the functional component can be dynamically configured based on the attribute configuration component corresponding to the functional component.

Specifically, displaying the selected target function component and at least one property configuration component corresponding to the target function component in the page editing area may include:

In response to a function component selection instruction triggered based on any one of the component identifiers, displaying a page area and a component attribute editing area in the page editing area;

Display the target functional component in the page area;

The at least one property configuration component is displayed in the component property editing area.

According to the above content, when responding to the application page editing instruction, the displayed application editing page may include a candidate functional component display area and a page editing area. At this time, the candidate functional component display area may display the component identification of the candidate functional component; at this time, the page editing area may be a blank area, that is, an area where no specific page information is displayed. On this basis, please refer to Figure 4. When responding to the functional component selection instruction, the page editing area may dynamically display the page editing area and the component attribute editing area, and the target functional component is displayed in the page editing area, and at least one attribute configuration component corresponding to the target functional component is displayed in the component attribute editing area.

Thus, by responding to the function component selection instruction, the page editing area and the component property editing area are dynamically displayed in the page editing area, so that on-demand display of the page editing area and the component property editing area can be achieved, and by displaying the target function components and property configuration components in different display areas, cross-display of function components and property configuration components can be avoided, which facilitates unified management of property configuration components, thereby improving the configuration efficiency of function component properties.

S230. In response to the attribute configuration instruction triggered by any attribute configuration component, configure any attribute configuration component based on the attribute expression to obtain a configured attribute configuration component; each attribute expression corresponds to the attribute configuration components of multiple target functional components.

The same property configuration component may have one or more property configuration methods. For property configuration components that support property configuration using property expressions, property expressions can be used for configuration; the property expressions in this embodiment may be constants, variables, or variable expressions formed based on variable combinations, etc., which are not specifically limited in this embodiment. The property expression may specifically be an expression that can represent the property configuration information. The property expression cannot represent the specific display effect in the page design state, but will display the corresponding effect in the page running state.

Each attribute expression corresponds to multiple target functional components, which means that multiple target functional components can reuse the same attribute expression to achieve that multiple target functional components are configured with the same attribute. For example, for target functional component A and target functional component B, both can support attribute configuration using attribute expressions. Both target functional component A and target functional component B need to obtain the same data source, so that the configured data source attributes are the same, so that the data source attributes of target functional component A and target functional component B can be set to the same attribute expression, thereby achieving the reuse of attribute expressions.

Furthermore, the multiple target functional components corresponding to each attribute expression may be functional components in the same application page, or may be functional components in different application pages but belonging to the same application.

S240. Generate page information of an application page based on the target function component and the configured property configuration component.

The configured property configuration component may be obtained by configuring at least one property configuration component corresponding to the target functional component, which means that at least one property of the target functional component has been configured, so that the configured property configuration component can characterize functional component description information such as a method for obtaining display data in the target functional component, access rights to display data in the target functional component, and a display style of the target functional component, thereby generating page information of an application page based on the target functional component and the configured property configuration component corresponding to the target functional component, that is, the page information of the application page may include description information of the target functional component in the application page.

The target function components may be displayed in the application page generated based on the page information of the application page, and the specific display form of each target function component is determined based on the configuration of the attribute configuration component of the target function component.

When editing an application page, the present application can determine the selected target function component based on the function component selection instruction, and then display the target function component and at least one property configuration component corresponding to the target function component in the page editing area, and the property configuration component is used to configure the properties of the target function component; when it is necessary to configure any property of the target function component, the property configuration component corresponding to the property can be triggered, and the property configuration component can be configured based on the property expression, and then the page information of the application page can be generated based on the configured property configuration component and the target function component; thereby, page development is achieved by visually selecting the function component and visually configuring the property configuration component, avoiding the need to develop the page by writing code, and improving the efficiency of page development and page display; further, each property expression can correspond to the property configuration components of multiple target function components, so that for different property configuration components that need to configure the same property, the property configuration can be performed based on the same property expression, that is, each property expression is reusable, avoiding the problem of repeated operations when configuring the same property for multiple functions, improving the configuration efficiency of the function component properties, and further improving the efficiency of page development and page display.

According to the above content, although the attribute expression does not represent a specific display result, it can represent the target configuration information, and the corresponding configuration can be performed based on the target configuration information in the running state, so as to display the corresponding effect; accordingly, in response to the attribute configuration instruction triggered based on any attribute configuration component, any attribute configuration component is configured based on the attribute expression, and before obtaining the configured attribute configuration component, the method further includes:

Assign the target configuration information to the predefined attribute expression to obtain the assigned target attribute expression.

That is, when using attribute expressions to configure attribute configuration components, you can first predefine the attribute expressions, and then assign the target configuration information to the predefined attribute expressions, thereby obtaining the assigned target attribute expressions. The same attribute expressions represent the same target configuration information, and different attribute expressions represent different target configuration information.

Further, in response to the attribute configuration instruction triggered based on any attribute configuration component, configuring any attribute configuration component based on the attribute expression to obtain the configured attribute configuration component includes:

In the case where the property of any one of the property configuration components needs to be configured as the target configuration information, in response to the property configuration instruction triggered based on any one of the property configuration components, any one of the property configuration components is configured based on the target property expression to obtain the configured property configuration component.

That is, the target attribute expression can represent the target configuration information, and the attribute configuration components that need to perform attribute configuration based on the target configuration information can all be configured using the target attribute expression.

Therefore, when it is necessary to use attribute expressions to configure attribute configuration components, attribute expressions can be predefined and assigned based on target configuration information. Thus, for any attribute component that needs to be configured using target configuration information, the assigned attribute expression can be used, thereby achieving the reuse of attribute expressions and avoiding repeated operations for configuring the same information for multiple attribute configuration components, thereby improving attribute configuration efficiency.

Specifically, please refer to FIG5 , which shows a configuration method of a property configuration component. The method may include:

S510. In response to the attribute configuration instruction, display an attribute configuration window; the attribute configuration window includes an expression display area and a candidate expression list; the candidate expression list includes at least one assigned attribute expression.

The property configuration instruction can be triggered based on the property configuration component that needs to be configured, for example, by triggering the property configuration component, or by triggering the configuration instruction trigger control corresponding to the property configuration component. Please refer to Figure 6. In response to the property configuration instruction, the property configuration window can be displayed. The property configuration window can be a window independent of the application editing page; the property configuration window includes an expression display area and a candidate expression list, wherein the expression display area can be used to display the determined property expression corresponding to the property configuration component. When it is not determined or configured, the display content of the expression display area is empty. The candidate expression list may include at least one assigned property expression. For the method of assigning the property expression, please refer to the above content of this embodiment, which will not be repeated here.

Furthermore, for the property expression corresponding to the property configuration component, it can be an assigned property expression selected from a candidate expression list, or it can be a directly determined constant, and the constant can be true, false, or 0, 1, etc.

S520. In response to a selection instruction for the target attribute expression in the candidate expression list, display the target attribute expression in the expression display area.

In this embodiment, a corresponding target attribute expression may be selected from the candidate expression list, so that the target attribute expression may be displayed in the expression display area.

After the target attribute expression is displayed in the expression display area, the target attribute expression can be further adjusted or modified in a visual manner based on the business logic to obtain a target attribute expression that matches the business logic.

S530. Configure any one of the attribute configuration components based on the target attribute expression to obtain the configured attribute configuration component.

Once the target attribute expression is determined, any attribute configuration component can be configured based on the target attribute expression. Specifically, the attribute configuration window may also include a confirmation configuration control. When the confirmation configuration control is touched, the target attribute expression can be configured to the corresponding attribute configuration component, thereby obtaining the configured attribute configuration component.

In this embodiment, the attribute expression can be configured through the attribute configuration window, and a list of candidate expressions is displayed in the attribute configuration window, which facilitates the selection of expressions from the assigned attribute expressions when configuring the attribute expression, thereby improving the efficiency of expression configuration; and the corresponding attribute expression can also be displayed in the expression display area in the attribute configuration window, which facilitates the modification and adjustment of the attribute expression based on the business implementation logic, thereby improving the flexibility and adaptability of the expression configuration.

Through the above configurations of the attribute configuration components, the attribute configurations of the attributes of the target functional components are realized, and the page information of the application page can be obtained accordingly; in the process of configuring the attribute configuration components, if the same target attribute expression is used when configuring the attributes of multiple target functional components, the page information of the corresponding application page can represent that the attribute configuration components of the multiple target functional components are configured based on the same target attribute expression; based on this, this embodiment provides a page data rendering method, which may include:

In response to the application page display instruction, when the page information of the application page represents that the attribute configuration components of multiple target functional components are configured based on the target attribute expression, acquiring target page data based on the target configuration information corresponding to the target attribute expression;

The target page data are rendered respectively at the multiple target functional components.

The page display instruction here can be triggered by the developer when previewing the page, or it can be triggered by the user when viewing the page when using the application. In the case where the page information of the application page represents that the attribute configuration components of multiple target functional components are configured based on the target attribute expression, the target page data can be obtained based on the target configuration information corresponding to the target attribute expression. Here, for the target attribute expression corresponding to the same target configuration information, the target page data only needs to be obtained once, and can be used in multiple places.

When the page information of an application page indicates that multiple target functional components are on the same application page, and the attribute configuration components of the multiple target functional components are configured based on the target attribute expressions, the target page data can be rendered separately at the multiple target functional components of the application page when displaying the application page.

When the page information of the application page indicates that multiple target function components are located in different application pages, and the attribute configuration components of the multiple target function components are configured based on the target attribute expression, when the corresponding application page is displayed and the application page contains at least one target function component, the target page data can be rendered at the at least one target function component. That is, whichever application page is displayed, the target page data can be rendered at the target function component of the application page accordingly.

Taking multiple target functional components in the same application page as an example, please refer to Figure 7. The target application page may specifically include a table component and a chart component, and the table component and the chart component need to display the same data, so that the same target page data can be rendered in the table component and the chart component respectively.

In this embodiment, when rendering page data, for multiple target function components with the same target attribute expression, the corresponding target page data is the same, so the page data only needs to be obtained once and used in multiple places, thereby avoiding the waste of resources caused by obtaining page data multiple times and improving data acquisition efficiency; obtaining it once and using it in multiple places can further improve the efficiency of page data rendering.

Specifically, the target configuration information can characterize the page data acquisition path, which can be characterized by the data source attributes of the target functional component, and the data source attributes can be configured by the data source attribute configuration component. The data source attribute configuration component can support configuration in the form of models, interfaces, attribute expressions, etc. When the target configuration information does not need to be reused, the corresponding data source attribute configuration can be directly based on the selected model option or interface option. The interface option is used as an example for explanation, please refer to Figure 8. After selecting the interface option, the interface selection list can be further displayed. A variety of interface information can be displayed in the interface selection list, and different interface information corresponds to different data structures. When the target configuration information needs to be reused, the corresponding attribute configuration component can be configured in the form of the above-mentioned attribute expression, which will not be repeated here.

In the case where the target configuration information represents a page data acquisition path, the page information of the application page may include a first data acquisition function corresponding to the page data acquisition path. Different data sources may correspond to different data acquisition methods and different data structures, so that different page data acquisition paths have corresponding first data acquisition functions, and target page data with corresponding data structures may be acquired through the first data acquisition function; thus, based on the target configuration information corresponding to the target attribute expression, acquiring the target page data includes:

Based on the first data acquisition function, the target page data is acquired.

For example, the target configuration information is to configure the data source attribute as interface 1, and the page data acquisition path corresponding to interface 1 may include data acquisition function 1, and the target page data of data structure 1 can be acquired through data acquisition function 1.

Therefore, when the target configuration information represents the page data acquisition path, the target page data can be acquired based on the first data acquisition function corresponding to the page data acquisition path; the attribute expression is assigned based on the target configuration information, thereby realizing the reuse of attribute expressions in the scenario of configuring the attributes representing the data acquisition path, thereby improving the configuration efficiency of the attributes representing the data acquisition path.

Furthermore, the target configuration information can also represent the page data access rights. Different request objects have different access rights to data. For example, an administrator can view the data of all users, while an independent user can only view his or her own user data. If the target configuration information does not need to be reused, the attribute configuration component representing the page data access rights can be directly configured; if the target configuration information needs to be reused, the corresponding attribute configuration component can be configured by means of the above attribute expression, which will not be repeated here.

In the case where the target configuration information represents the page data access permission, the page information of the application page may include a second data acquisition function corresponding to the page data access permission; accordingly, acquiring the target page data based on the target configuration information corresponding to the target attribute expression includes:

The target page data is acquired based on the object identifier of the request object and the second data acquisition function.

Since different target page data needs to be returned for different request objects, the second data acquisition function has the ability to obtain different page data according to different request objects. The second data acquisition function can specifically receive the object identifier of the request object and obtain the target page data corresponding to the request object based on the object identifier of the request object.

For example, when displaying the user's order data, the order data corresponding to the requesting user can be displayed; the order data can be displayed through the table component and the chart component respectively, thereby obtaining the order data through the second data acquisition function and rendering the order data in the table component and the chart component respectively.

Therefore, when the target configuration information represents the access rights to page data, the target page data can be obtained based on the second data acquisition function corresponding to the page data access rights; the attribute expression is assigned based on the target configuration information, thereby realizing the reuse of attribute expressions in the scenario of configuring attributes representing the access rights to page data, thereby improving the configuration efficiency of the attributes representing the access rights to page data.

The property configuration instruction can be triggered based on the configuration instruction trigger control. Each property configuration component has a corresponding configuration instruction trigger control. Generally, the configuration instruction trigger control of the property configuration component can be hidden and displayed when property configuration is required. Therefore, this embodiment provides a method for generating a property configuration instruction, which may include:

In the case where a trigger operation for any of the attribute configuration components is detected, displaying a configuration instruction trigger control in a display area corresponding to any of the attribute configuration components;

In response to a touch operation of a control triggered by the configuration instruction, the property configuration instruction corresponding to any one of the property configuration components is generated.

The trigger operation for any of the property configuration components may include the mouse pointer being located in the component area to which any of the property configuration components belongs and staying there for longer than a preset time, or any of the property configuration components being selected, etc., then it is determined that there is a configuration intention for the property configuration component, so that the configuration instruction trigger control corresponding to the property configuration component can be displayed; in response to a touch operation based on the configuration instruction trigger control, a property configuration instruction for the property configuration component can be generated.

Please refer to Figure 9, wherein Figure 9(a) shows a schematic diagram when the property configuration component is not triggered, in which the configuration instruction trigger control is hidden; Figure 9(b) shows a schematic diagram when the property configuration component is triggered, in which the configuration instruction trigger control is displayed in the display area corresponding to the property configuration component.

Therefore, when there is a configuration intention for a property configuration component, the configuration instruction trigger control of the property configuration component is displayed, thereby avoiding false triggering of the configuration instruction trigger control and improving the configuration efficiency and configuration accuracy of the property configuration component.

After configuring the property configuration component of the target functional component, the page information of the application page may be generated accordingly; please refer to FIG. 10 for details, which shows a method for generating the page information of the application page, and the method may include:

S1010. Generate a configuration component list based on the configured attribute configuration components.

The configured attribute configuration components are components whose attribute configuration information has been updated. A configuration component list is generated based on the configured attribute components, that is, scattered configured attribute configuration components are combined together to facilitate subsequent unified processing.

When developing each functional component, the dynamically configurable properties of the functional component to be developed can be set in advance. For each dynamically configurable property, a property configuration component can be generated accordingly. Therefore, when developing a page based on the developed functional component, the properties of the functional component can be dynamically configured based on the property configuration component corresponding to the functional component.

Please refer to Figure 11, which shows a schematic diagram of the correspondence between the attributes of the functional component and the attribute configuration component. Different open attributes can be rendered using the same attribute widget; for the functional component to be able to realize dynamic data display, it is necessary to open up several attributes, and these attributes are rendered by the attribute configuration component, and finally a configuration component list will be formed. This configuration component list is the input parameter of the functional component, and the attribute configuration component value can be set as the attribute expression.

S1020. Update the target functional component based on the configuration component list to obtain an updated target functional component.

The property modification of the property configuration component will be synchronized to the function component, that is, after the property of the property configuration component is modified, it will be sent out through this.$emit("change", data), and when the function component detects the property change, it will update the function component. Before the target function component is updated, the target function component may correspond to some template data or default data, so when the configuration data is detected, it can be updated accordingly based on the configuration data.

Currently, data communication is one-way, that is, the property modification of the property configuration component will be transmitted to the functional component and passed in as the parameter of the functional component. Then, after the functional component receives these change data, it will call the public processing method to process and transform the properties. The specific flow diagram is shown in Figure 12.

S1030. Update the page description information based on the updated target functional component to obtain page information of the application page.

After the target functional component is updated, the corresponding page description information will also be updated accordingly to obtain updated page data.

Therefore, after configuring the attributes of the functional component, the configured attribute information is sent to the target functional component in a timely manner, so that the target functional component can be updated accordingly, thereby realizing the update of the page information of the application page; thereby improving the timeliness of the page information update.

The following uses application orchestration as an example to illustrate the specific implementation process of this embodiment. Application orchestration has two states: design state and running state. The design state can be understood as a visual simulation of traditional coding, that is, allowing product managers or operators to write a page in a visual way in the design state. For example, by dragging a function module to complete the static display of the page, and then by configuring the open properties of this function module to achieve the purpose of dynamic rendering of data.

The specific implementation process may include:

1. Create an application on the creation platform, display the application creation page, and fill in application-related information such as the application name.

2. Trigger the application page creation control in the application creation page to display the application editing page. As shown in FIG3 , the application editing page includes a candidate functional component display area and a page editing area, and the candidate functional component display area includes a component identifier of at least one candidate functional component.

3. Drag the table component from the candidate functional component display area, and display the table component and the corresponding property configuration component of the table component in the page editing area.

4. Configure the data source properties of the table component. Specifically, you can select an interface as the data source and assign the interface to the attribute expression. Configure the data source property configuration component based on the assigned attribute expression.

First, drag in a table component as a static display, and then set its corresponding dynamic data through the properties exposed by this table component. For example, if the data source property is set as an interface, the data source property will eventually pass the data structure and call function returned by the interface to the functional component. The functional component displays the table header according to the data structure, and obtains data by calling the function to render the table row data, solving the problem of the source of dynamic data in the list. The data source property can also be set to a model. In fact, the model ultimately calls a background interface. When the data source is configured as a model, you can set the current table component to have a single-row or multi-select menu, which is similar to the traditional development of writing the current table form in the code.

5. Drag the chart component from the candidate functional component display area, and display the chart component and the property configuration component corresponding to the chart component in the page editing area.

6. Configure the data source properties of the chart component and configure the data source property configuration component based on the assigned property expression.

7. In the running state, the table component and chart component are displayed in the application page and the data obtained based on the interface is rendered.

When developing all functional components, developers decide for themselves what attributes to expose and whether these attributes support dynamic settings. For functional component developers, this is to add a configuration item, and these configuration items are abstracted into attribute configuration components. A functional component can expose multiple attributes, that is, configure multiple attribute configuration components for rendering, and then allow product managers or operations personnel to visually configure these attributes when assembling pages. By configuring variables/expressions for these attributes, the functional component can dynamically display data.

Currently supported property widget configurations are:

Property widget identifier: add-act (action add pop-up window); add-button (button add); bind-label-value (field binding); button-actLists (button list); button-ico (button ico); color-column (column color); data-source (data source); menu-setting (navigation setting); tree-listid (tree field binding); tab-list (page card list).

The implementation steps for the property configuration protocol for functional component development may include:

1. Create a configuration file in the specified folder;

2. Set the configuration logo and Chinese name;

3. Set the propsSchema properties that need to be opened;

4. Set the icon address of this functional component;

5. Save;

6. Then write the main file of the functional component/module and import the configuration in the main file;

7. Write the specific code logic maintained by this functional component/module.

The specific code implementation can be found in Figure 13.

The implementation steps for defining the protocol for the property configuration component may include:

1. Create a meta.js configuration file in the specified folder;

2. Configuration properties configure the component's identification;

3. Configure the corresponding input property propsSchema of this property configuration component;

4. Save and complete the configuration;

5. Start to implement the main code of the property configuration component;

6. Import the meta.js file.

The specific implementation code can be found in Figure 14.

This application allows the data displayed on the functional modules/components to be visually configured through the attribute configuration component, which is convenient for product managers or operation personnel to operate and understand, lowers the usage threshold, and allows non-professionals to configure pages with dynamic data; the attributes that need to be opened by the functional modules/components are abstracted into attribute configuration components, which improves the development efficiency of functional module/component developers and unifies the operational interaction and display form of the page designer product.

This embodiment also provides an application page processing device, see FIG. 15 , the device may include:

The first response module 1510 is used to display an application editing page in response to an application page editing instruction; the application editing page includes a candidate functional component display area and a page editing area, and the candidate functional component display area includes a component identifier of at least one candidate functional component;

The second response module 1520 is used to display the selected target function component and at least one property configuration component corresponding to the target function component in the page editing area in response to the function component selection instruction triggered based on any component identifier;

The third response module 1530 is used to respond to the attribute configuration instruction triggered by any attribute configuration component, configure any attribute configuration component based on the attribute expression, and obtain the configured attribute configuration component; each attribute expression corresponds to the attribute configuration components of multiple target functional components;

The page information generating module 1540 is used to generate page information of an application page based on the target function component and the configured property configuration component.

Further, the second response module 1520 includes:

A first display module, configured to display a page area and a component attribute editing area in the page editing area in response to a function component selection instruction triggered based on any one of the component identifiers;

A second display module, used to display the target functional component in the page area;

The third display module is used to display the at least one property configuration component in the component property editing area.

Furthermore, the device also includes:

An assignment module, used to assign target configuration information to a predefined attribute expression to obtain an assigned target attribute expression;

The third response module 1530 includes:

The first configuration module is used to configure any attribute configuration component based on the target attribute expression in response to the attribute configuration instruction triggered based on any attribute configuration component when it is necessary to configure the attribute of any attribute configuration component as the target configuration information, so as to obtain the configured attribute configuration component.

Furthermore, the first configuration module includes:

A fourth display module, for displaying an attribute configuration window in response to the attribute configuration instruction; the attribute configuration window includes an expression display area and a candidate expression list; the candidate expression list includes at least one attribute expression that has been assigned a value;

A fifth display module, configured to display the target attribute expression in the expression display area in response to a selection instruction for the target attribute expression in the candidate expression list;

The second configuration module is used to configure any of the attribute configuration components based on the target attribute expression to obtain the configured attribute configuration component.

Furthermore, the device also includes:

A first acquisition module is used for, in response to an application page display instruction, acquiring target page data based on the target configuration information corresponding to the target attribute expression when the attribute configuration components of the multiple target function components represented in the page information of the application page are configured based on the target attribute expression;

A rendering module is used to render the target page data respectively at the multiple target functional components.

Further, the target configuration information represents a page data acquisition path; the page information of the application page includes a first data acquisition function corresponding to the page data acquisition path;

The first acquisition module is used to acquire the target page data based on the first data acquisition function.

Further, the target configuration information represents the page data access permission; the page information of the application page includes a second data acquisition function corresponding to the page data access permission;

The first acquisition module is used to acquire the target page data based on the object identifier of the request object and the second data acquisition function.

Furthermore, the device also includes:

A sixth display module, configured to display a configuration instruction trigger control in a display area corresponding to any of the attribute configuration components when a trigger operation for the any of the attribute configuration components is detected;

The instruction generation module is used to generate the property configuration instruction corresponding to any property configuration component in response to the touch operation of the control triggered by the configuration instruction.

Furthermore, the page information generating module 1440 includes:

A list generation module, used to generate a configuration component list based on the configured attribute configuration components;

A first updating module, configured to update the target functional component based on the configuration component list to obtain an updated target functional component;

The second updating module is used to update the page description information based on the updated target functional component to obtain the page information of the application page.

The device provided in the above embodiment can execute the method provided in any embodiment of the present application, and has the corresponding functional modules and beneficial effects of executing the method. For technical details not described in detail in the above embodiment, please refer to the method provided in any embodiment of the present application.

This embodiment further provides a computer-readable storage medium, in which at least one instruction or at least one program is stored. The at least one instruction or at least one program is loaded by a processor and executed as any of the above methods of this embodiment.

According to one aspect of the present application, a computer program product or a computer program is provided, the computer program product or the computer program comprising computer instructions, the computer instructions being stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device performs any of the above methods.

FIG16 is a block diagram of an electronic device for application page processing according to an exemplary embodiment. The electronic device may be a terminal, and its internal structure diagram may be shown in FIG16. The electronic device includes a processor, a memory, a network interface, a display screen, and an input device connected via a system bus. Among them, the processor of the electronic device is used to provide computing and control capabilities. The memory of the electronic device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the electronic device is used to communicate with an external terminal through a network connection. When the computer program is executed by the processor, an application page processing method is implemented. The display screen of the electronic device may be a liquid crystal display screen or an electronic ink display screen, and the input device of the electronic device may be a touch layer covered on the display screen, or a key, trackball or touchpad provided on the housing of the electronic device, or an external keyboard, touchpad or mouse, etc.

Figure 17 is a block diagram of an electronic device for application page processing according to an exemplary embodiment. The electronic device may be a server, and its internal structure diagram may be as shown in Figure 17. The electronic device includes a processor, a memory, and a network interface connected via a system bus. Among them, the processor of the electronic device is used to provide computing and control capabilities. The memory of the electronic device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the electronic device is used to communicate with an external terminal through a network connection. When the computer program is executed by the processor, an application page processing method is implemented.

Those skilled in the art will understand that the structures shown in FIGS. 16 and 17 are merely block diagrams of partial structures related to the scheme of the present disclosure, and do not constitute a limitation on the electronic device to which the scheme of the present disclosure is applied. The specific electronic device may include more or fewer components than shown in the figures, or combine certain components, or have a different arrangement of components.

This specification provides method operation steps as described in the embodiments or flow charts, but more or fewer operation steps may be included based on conventional or non-creative labor. The steps and sequence listed in the embodiments are only one way of executing the sequence of many steps and do not represent the only execution sequence. When the actual system or interrupt product is executed, it can be executed in sequence or in parallel according to the method shown in the embodiments or the drawings (for example, in a parallel processor or multi-threaded processing environment).

The structure shown in this embodiment is only a partial structure related to the scheme of the present application, and does not constitute a limitation on the device to which the scheme of the present application is applied. The specific device may include more or fewer components than shown, or combine certain components, or have different arrangements of components. It should be understood that the method, device, etc. disclosed in this embodiment can be implemented in other ways. For example, the device embodiment described above is only schematic. For example, the division of the modules is only a division of a logical function. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or unit modules.

Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, or the whole or part of the technical solution can be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk, etc., various media that can store program codes.

Those skilled in the art may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed in this specification can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in the above description according to function. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

As described above, the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit it. Although the present application has been described in detail with reference to the aforementioned embodiments, a person of ordinary skill in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features thereof may be replaced by equivalents. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application.

Claims (12)

1. A method for processing an application page, comprising: In response to the application page editing instruction, displaying the application editing page; the application editing page includes a candidate functional component display area and a page editing area, and the candidate functional component display area includes a component identifier of at least one candidate functional component; In response to a function component selection instruction triggered based on any component identifier, displaying a selected target function component and at least one property configuration component corresponding to the target function component in the page editing area; In response to an attribute configuration instruction triggered based on any attribute configuration component, any attribute configuration component is configured based on an attribute expression to obtain a configured attribute configuration component; each attribute expression corresponds to attribute configuration components of multiple target functional components; Based on the target function component and the configured property configuration component, page information of the application page is generated. 2. The method according to claim 1, characterized in that, in response to a function component selection instruction triggered based on any component identifier, displaying the selected target function component and at least one property configuration component corresponding to the target function component in the page editing area comprises: In response to a function component selection instruction triggered based on any one of the component identifiers, displaying a page area and a component attribute editing area in the page editing area; Display the target functional component in the page area; The at least one property configuration component is displayed in the component property editing area. 3. The method according to claim 1, characterized in that, in response to the attribute configuration instruction triggered by any attribute configuration component, configuring any attribute configuration component based on the attribute expression to obtain the configured attribute configuration component, the method further comprises: Assign the target configuration information to the predefined attribute expression to obtain the assigned target attribute expression; The step of responding to the attribute configuration instruction triggered by any attribute configuration component and configuring any attribute configuration component based on the attribute expression to obtain the configured attribute configuration component includes: In the case where the property of any one of the property configuration components needs to be configured as the target configuration information, in response to the property configuration instruction triggered based on any one of the property configuration components, any one of the property configuration components is configured based on the target property expression to obtain the configured property configuration component. 4. The method according to claim 3, characterized in that, in response to the attribute configuration instruction triggered based on the any attribute configuration component, configuring the any attribute configuration component based on the target attribute expression to obtain the configured attribute configuration component comprises: In response to the attribute configuration instruction, display an attribute configuration window; the attribute configuration window includes an expression display area and a candidate expression list; the candidate expression list includes at least one attribute expression that has been assigned a value; In response to a selection instruction for the target attribute expression in the candidate expression list, displaying the target attribute expression in the expression display area; The any one of the attribute configuration components is configured based on the target attribute expression to obtain the configured attribute configuration component. 5. The method according to claim 3, characterized in that the method further comprises: In response to the application page display instruction, when the page information of the application page represents that the attribute configuration components of multiple target functional components are configured based on the target attribute expression, acquiring target page data based on the target configuration information corresponding to the target attribute expression; The target page data are rendered respectively at the multiple target functional components. 6. The method according to claim 5, characterized in that the target configuration information represents a page data acquisition path; the page information of the application page includes a first data acquisition function corresponding to the page data acquisition path; The acquiring target page data based on the target configuration information corresponding to the target attribute expression includes: Based on the first data acquisition function, the target page data is acquired. 7. The method according to claim 5, characterized in that the target configuration information represents page data access rights; the page information of the application page includes a second data acquisition function corresponding to the page data access rights; The acquiring target page data based on the target configuration information corresponding to the target attribute expression includes: The target page data is acquired based on the object identifier of the request object and the second data acquisition function. 8. The method according to claim 1, characterized in that, in response to the attribute configuration instruction triggered by any attribute configuration component, configuring any attribute configuration component based on the attribute expression to obtain the configured attribute configuration component, the method further comprises: In the case where a trigger operation for any of the attribute configuration components is detected, displaying a configuration instruction trigger control in a display area corresponding to any of the attribute configuration components; In response to a touch operation of a control triggered by the configuration instruction, the property configuration instruction corresponding to any one of the property configuration components is generated. 9. The method according to claim 1, characterized in that the step of generating page information of an application page based on the target function component and the configured property configuration component comprises: Generate a configuration component list based on the configured attribute configuration components; Based on the configuration component list, the target functional component is updated to obtain an updated target functional component; The page description information is updated based on the updated target functional component to obtain page information of the application page. 10. An application page processing device, comprising: A first response module, configured to display an application editing page in response to an application page editing instruction; the application editing page includes a candidate functional component display area and a page editing area, the candidate functional component display area includes a component identifier of at least one candidate functional component; A second response module, configured to respond to a function component selection instruction triggered based on any component identifier, and display the selected target function component and at least one property configuration component corresponding to the target function component in the page editing area; A third response module, configured to respond to an attribute configuration instruction triggered based on any attribute configuration component, configure any attribute configuration component based on an attribute expression, and obtain a configured attribute configuration component; each attribute expression corresponds to attribute configuration components of multiple target functional components; The page information generation module is used to generate page information of the application page based on the target function component and the configured attribute configuration component. 11. An electronic device, characterized in that the device comprises a processor and a memory, wherein the memory stores at least one instruction or at least one program, and the at least one instruction or the at least one program is loaded and executed by the processor to implement the application page processing method according to any one of claims 1 to 9. 12. A computer storage medium, characterized in that at least one instruction or at least one program is stored in the storage medium, and the at least one instruction or the at least one program is loaded by a processor and executed by the application page processing method according to any one of claims 1 to 9.