Target page display method and device, storage medium and electronic device

Abstract

The invention discloses a target page display method and device, a storage medium and an electronic device, and relates to the technical field of smart home, the target page display method comprises the following steps: receiving an operation of a first target object, the first target object being an object allowing editing of the target page; under the condition that the operation is a first type of operation, a first canvas template currently adopted by a canvas of a user interface is updated to obtain a second canvas template, and the first type of operation is used for instructing the first target object to endow component parameters to components in the canvas of the user interface; a user access request of a second target object is received, a target page determined through the second canvas template is displayed to the second target object, and the second target object is an object allowing access to the target page.

Description

Technical Field

[0001] The present application relates to the field of smart home technology, and more specifically, to a method and device for displaying a target page, a storage medium, and an electronic device. Background Art

[0002] With the popularization of smart phones and the rapid development of mobile Internet, H5 pages have been widely used in marketing activities, product displays, e-commerce, news media and other fields due to their lightweight, cross-platform and rich interactive experience. They have become an important means for individuals and enterprises to promote, display and interact. Enterprises and individuals need to quickly generate high-quality H5 pages to meet market demand.

[0003] In the related technologies, there are many websites for online page configuration, which can realize online configuration of H5 pages, but most of these websites are implemented through global positioning, lacking functions such as custom business logic and custom templates. Therefore, the following problems may occur: 1) The positioning implementation method is basically a fixed unit px, which will cause certain differences in possible positions under different devices and increase the complexity of configuration. 2) The lack of custom business logic function will make some complex scenarios difficult to implement through configuration, and customized development is required. 3) The lack of custom template function will increase the workload of secondary configuration and increase labor costs.

[0004] Regarding the related technologies, most of the implementation methods of online configuration of pages are implemented through global positioning, lacking customized business logic and other problems, and no effective solution has been proposed yet.

[0005] Therefore, it is necessary to improve the related technology to overcome the above-mentioned defects in the related technology. Summary of the invention

[0006] The embodiments of the present application provide a method and device for displaying a target page, a storage medium and an electronic device, so as to at least solve the problem that most of the implementation methods of online configuration of pages in related technologies are implemented through global positioning and lack customized business logic.

[0007] According to one aspect of an embodiment of the present application, a method for displaying a target page is provided, comprising: receiving an operation of a first target object, wherein the first target object is an object that allows editing of the target page; when the operation is a first type of operation, updating a first canvas template currently used by a canvas of a user interface to obtain a second canvas template, wherein the first type of operation is used to instruct the first target object to assign component parameters to components in the canvas of the user interface; receiving a user access request for a second target object, and displaying a target page determined by the second canvas template to the second target object, wherein the second target object is an object that allows access to the target page.

[0008] In an exemplary embodiment, after receiving an operation of the first target object, the method further includes: when the operation is a second type of operation, updating the first canvas state of the business logic layer to a second canvas state, wherein the second type of operation is used to indicate that the first target object adds or subtracts components in the canvas of the user interface, and the business logic layer is communicatively connected to the user interface, or the business logic layer and the user interface are deployed in the same device; when the canvas state of the business logic layer is updated, rendering the canvas of the user interface according to the operation.

[0009] In an exemplary embodiment, after receiving an operation of the first target object, the method further includes: determining an operation sequence corresponding to the operation; and when the operation sequence is a preset sequence, determining that the operation is a first type of operation, wherein the preset sequence includes: selecting a component in the canvas of the user interface, and editing component parameters of the component.

[0010] In an exemplary embodiment, a first canvas template currently used by a canvas of a user interface is updated to obtain a second canvas template, including: obtaining target component parameters assigned by a first target object to a component in the canvas, wherein the component parameters include: the target component parameters; sending the target component parameters to a data storage layer to instruct the data storage layer to update the target component parameters to the first canvas template to obtain the second canvas template, wherein the data storage layer is communicatively connected to the user interface, or the data storage layer and the user interface are deployed in the same device.

[0011] In an exemplary embodiment, obtaining target component parameters assigned by the first target object to the component in the canvas includes: obtaining the target component parameters edited by the first target object on the property panel of the component; and / or obtaining the target component parameters obtained by the first target object from other devices through a third-party interface, wherein the other devices are connected or communicated with the user interface through the third-party interface.

[0012] In an exemplary embodiment, displaying a target page determined by the second canvas template to the second target object includes: sending a configuration file of the target page to the client that initiates the user access request to instruct the client to configure the page structure of the target page according to the configuration file; when receiving an attribute read request, sending attribute data corresponding to the page structure of the target page to the client to instruct the client to construct component content of the target page; and when it is determined that the component content has been constructed, instructing the client to perform a rendering operation to display the target page to the second target object.

[0013] In an exemplary embodiment, after displaying the target page determined by the second canvas template to the second target object, the method further includes: receiving the operation of the second target object on the target page; when the operation of the second target object is a third type of operation, checking the operation authority of the second target object, wherein the third type of operation is used to indicate that the second target object has modified the target page; and when the operation authority meets the requirements, updating the target page through the operation of the second target object.

[0014] According to another aspect of an embodiment of the present application, a target page display device is also provided, including: a receiving module, used to receive an operation of a first target object, wherein the first target object is an object that allows editing of the target page; an updating module, used to update a first canvas template currently used by a canvas of a user interface to obtain a second canvas template when the operation is a first type of operation, wherein the first type of operation is used to instruct the first target object to assign component parameters to components in the canvas of the user interface; a display module, used to receive a user access request for a second target object, and display the target page determined by the second canvas template to the second target object, wherein the second target object is an object that allows access to the target page.

[0015] According to another aspect of the embodiments of the present application, a computer-readable storage medium is provided, in which a computer program is stored, wherein the computer program is configured to execute the above-mentioned method for displaying the target page when running.

[0016] According to another aspect of an embodiment of the present application, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the method for displaying the target page through the computer program.

[0017] According to another aspect of the embodiments of the present application, a computer program product is provided, including a computer program, and when the computer program is executed by a processor, the method for displaying the target page is implemented.

[0018] Through the present application, an operation of a first target object is received, wherein the first target object is an object that allows editing of the target page; when the operation is a first type of operation, the first canvas template currently used by the canvas of the user interface is updated to obtain a second canvas template, wherein the first type of operation is used to instruct the first target object to assign component parameters to the components in the canvas of the user interface; a user access request of the second target object is received, and the target page determined by the second canvas template is displayed to the second target object, wherein the second target object is an object that allows access to the target page. That is to say, through the embodiment of the present application, the first target object can assign component parameters to the components in the canvas of the user interface. Therefore, the above technical solution is adopted to solve the problem that most of the implementation methods of online configuration of pages in the related art are implemented by global positioning and lack of custom business logic; thereby achieving the technical effect of configuring custom business logic for components in the canvas. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0020] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0021] Figure 1 is a hardware environment diagram of an optional target page display method according to an embodiment of the present application;

[0022] Figure 2 is a flowchart of an optional method for displaying a target page according to an embodiment of the present application;

[0023] Figure 3 is a schematic diagram of the architecture of the same device according to an embodiment of the present application;

[0024] Figure 4 is another flow chart of an optional method for displaying a target page according to an embodiment of the present application;

[0025] Figure 5 is another flow chart of an optional method for displaying a target page according to an embodiment of the present application;

[0026] Figure 6 It is a structural block diagram of an optional target page display device according to an embodiment of the present application. DETAILED DESCRIPTION

[0027] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present application.

[0028] 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 device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0029] According to one aspect of an embodiment of the present application, a method for displaying a target page is provided. The method for displaying a target page is widely used in smart home (Smart Home), smart home, smart home device ecology, smart residential (IntelligenceHouse) ecology and other whole-house intelligent digital control application scenarios. Optionally, in this embodiment, the above-mentioned method for displaying a target page can be applied to Figure 1 In the hardware environment shown in FIG. 1 , a plurality of terminal devices 102 and a server 104 are formed. Figure 1As shown, the server 104 is connected to multiple terminal devices 102 via a network, and can be used to provide services (such as application services, etc.) for the terminals or clients installed on the terminals. A database can be set on the server or independently of the server to provide data storage services for the server 104. Cloud computing and / or edge computing services can be configured on the server or independently of the server to provide data computing services for the server 104.

[0030] The network may include but is not limited to at least one of the following: wired network, wireless network. The wired network may include but is not limited to at least one of the following: wide area network, metropolitan area network, local area network, and the wireless network may include but is not limited to at least one of the following: WIFI (Wireless Fidelity), Bluetooth. The terminal device 102 may be but is not limited to a PC, a mobile phone, a tablet computer, a smart air conditioner, a smart range hood, a smart refrigerator, a smart oven, a smart stove, a smart washing machine, a smart water heater, a smart washing device, a smart dishwasher, a smart projection device, a smart TV, a smart clothes drying rack, a smart curtain, a smart audio and video, a smart socket, a smart speaker, a smart fresh air device, a smart kitchen and bathroom device, a smart bathroom device, a smart sweeping robot, a smart window cleaning robot, a smart mopping robot, a smart air purification device, a smart steamer, a smart microwave oven, a smart kitchen treasure, a smart purifier, a smart water dispenser, a smart door lock, etc.

[0031] In this embodiment, a method for displaying a target page is provided. Figure 2 : is a flowchart of a method for displaying a target page according to an embodiment of the present application, and the process includes the following steps:

[0032] Step S202: receiving an operation of a first target object, wherein the first target object is an object that allows editing of the target page;

[0033] Step S204: when the operation is a first type operation, updating a first canvas template currently used by the canvas of the user interface to obtain a second canvas template, wherein the first type operation is used to instruct the first target object to assign component parameters to components in the canvas of the user interface;

[0034] Optionally, any component parameters can be assigned to the component, which can be understood as assigning custom logic to the component.

[0035] Step S206: receiving a user access request of a second target object, and presenting a target page determined by the second canvas template to the second target object, wherein the second target object is an object that is allowed to access the target page.

[0036] Optionally, in some cases, the first target object and the second target object may be the same object or different objects, which is not limited in the embodiments of the present application.

[0037] Optionally, a target page display method provided in an embodiment of the present application includes but is not limited to being applied to a target page having Figure 3 Devices with the architecture shown.

[0038] Through the above steps, an operation of the first target object is received, wherein the first target object is an object that allows editing of the target page; when the operation is a first type of operation, the first canvas template currently used by the canvas of the user interface is updated to obtain a second canvas template, wherein the first type of operation is used to instruct the first target object to assign component parameters to the components in the canvas of the user interface; a user access request of the second target object is received, and the target page determined by the second canvas template is displayed to the second target object, wherein the second target object is an object that allows access to the target page. That is to say, through the embodiment of the present application, the first target object can assign component parameters to the components in the canvas of the user interface. Therefore, the above technical solution is adopted to solve the problem that most of the implementation methods of online configuration of pages in the related art are implemented by global positioning and lack of custom business logic; thereby achieving the technical effect of configuring custom business logic for components in the canvas.

[0039] In an exemplary embodiment, after receiving an operation of the first target object, the method further includes: when the operation is a second type of operation, updating the first canvas state of the business logic layer to a second canvas state, wherein the second type of operation is used to indicate that the first target object adds or subtracts components in the canvas of the user interface, and the business logic layer is communicatively connected to the user interface, or the business logic layer and the user interface are deployed in the same device; when the canvas state of the business logic layer is updated, rendering the canvas of the user interface according to the operation.

[0040] In some optional embodiments, the architecture of the device where the user interface in the embodiment of the present application is located can be as follows: Figure 3As shown, it includes a user interface (UI), a business logic layer, and a data storage layer. When the first target object, i.e., the page designer, operates in the user interface, if the operation of the first target object is to drag a component from the component panel of the user interface to the canvas, or to delete a component on the canvas (i.e., a second type of operation); when the first target object performs this second type of operation, it will trigger the state management module in the business logic layer to update the original first canvas state to the second canvas state; and then trigger the data storage layer to save new elements (i.e., added or deleted components), and trigger the user interface to re-render the canvas to display it to the first target object.

[0041] In an exemplary embodiment, after receiving an operation of the first target object, the method further includes: determining an operation sequence corresponding to the operation; and when the operation sequence is a preset sequence, determining that the operation is a first type of operation, wherein the preset sequence includes: selecting a component in the canvas of the user interface, and editing component parameters of the component.

[0042] It is understandable that the operation type corresponding to the operation of the first target object can be determined by the operation sequence of the operation. For the first type of operation, the preset sequence is to select a component in the canvas of the user interface and edit the component parameters of the component (selection first, editing later). For the second type of operation, the preset sequence is to select a component in the component panel of the user interface and drag the component to the canvas of the user interface; or, select a component in the canvas of the user interface and perform a deletion operation, such as dragging it out of the canvas interface.

[0043] In an exemplary embodiment, a first canvas template currently used by a canvas of a user interface is updated to obtain a second canvas template, including: obtaining target component parameters assigned by a first target object to a component in the canvas, wherein the component parameters include: the target component parameters; sending the target component parameters to a data storage layer to instruct the data storage layer to update the target component parameters to the first canvas template to obtain the second canvas template, wherein the data storage layer is communicatively connected to the user interface, or the data storage layer and the user interface are deployed in the same device.

[0044] Optional, with Figure 3 Taking the device architecture shown as an example, the user interface can actually implement data interaction with the data storage layer through the business logic layer, and send the target component parameters to the data storage layer through the business logic layer. Then the data storage layer will determine the first canvas template in the template library and update the target component parameters to the first canvas template. When the target component parameters are sent to the data storage layer, they will carry the template identifier of the first canvas template, so as to search for the first canvas template from the template library.

[0045] In an exemplary embodiment, obtaining target component parameters assigned by the first target object to the component in the canvas includes: obtaining the target component parameters edited by the first target object on the property panel of the component; and / or obtaining the target component parameters obtained by the first target object from other devices through a third-party interface, wherein the other devices are connected or communicated with the user interface through the third-party interface.

[0046] That is, the first target object can directly input the target component parameters assigned to the component in the component's property panel; can also select a parameter from the component's property drop-down list as the target component parameter; can also obtain the property drop-down list in other devices through a third-party interface to obtain the required target component parameters and assign them to the component. The property drop-down list in other devices must contain parameters that are different from those in the component's property drop-down list.

[0047] In an exemplary embodiment, displaying a target page determined by the second canvas template to the second target object includes: sending a configuration file of the target page to the client that initiates the user access request to instruct the client to configure the page structure of the target page according to the configuration file; when receiving an attribute read request, sending attribute data corresponding to the page structure of the target page to the client to instruct the client to construct component content of the target page; and when it is determined that the component content has been constructed, instructing the client to perform a rendering operation to display the target page to the second target object.

[0048] Furthermore, after displaying the target page determined by the second canvas template to the second target object, the method also includes: receiving the operation of the second target object on the target page; when the operation of the second target object is a third type of operation, checking the operation authority of the second target object, wherein the third type of operation is used to indicate that the second target object has modified the target page; and when the operation authority meets the requirements, updating the target page through the operation of the second target object.

[0049] That is to say, after the target page is displayed to the second target object, if the second target object's operation authority level is higher than the preset authority level allowed to modify the target page, the second target object's modification of the target page can be received and the target page can be updated according to the modification.

[0050] Obviously, the above-described embodiments are only a part of the embodiments of the present application, not all of the embodiments. In order to better understand the above-mentioned method for displaying the target page, the above-mentioned process is described below in conjunction with the embodiments, but it is not intended to limit the technical solutions of the embodiments of the present application, specifically:

[0051] The mainstream technical solution adopted by many websites for online page configuration is to drag or click the components provided by the system on the left to the canvas, configure the properties of the components, and place the components at the target location by positioning. The user-configured data is converted into JSON format and saved to the background. The client generates the specified page by reading the configured JSON file. However, most of these implementation methods are implemented through global positioning, lacking functions such as custom business logic and custom templates. Therefore, the following problems may occur: 1) The positioning implementation method is basically a fixed unit of px, which may cause certain differences in the possible position under different devices and increase the complexity of configuration. 2) The lack of custom business logic function will make some complex scenarios difficult to implement through configuration, and custom development is required. 3) The lack of custom template function will increase the workload of secondary configuration and increase labor costs.

[0052] The embodiment of the present application designs a new architecture mode (equivalent to the same device in the above embodiment). The configuration side uses a top-down configuration method and provides components of dynamic containers, which can not only quickly configure components but also meet the needs of dynamic positioning configuration; in addition, the configuration side provides a rich component library function, which can save the generated configuration as a template, and can directly generate pages quickly in the existing template. The client solves the problem of fixed pixels of px by dynamically calculating parameters such as dpx of the device, ensuring the uniformity of page display on different devices. The effectiveness and smoothness of client page generation are guaranteed through various methods such as CDN, preloading, and caching.

[0053] like Figure 3 As shown, the architecture model adopted in the embodiment of the present application includes: user interface, business logic layer, and data storage layer.

[0054] Specifically, the user interface (UI) is the part where the user interacts with the editor, including the canvas, toolbar, property panel, and hierarchy panel. Among them, the top navigation bar provides global navigation functions, such as creating a new page, saving a page, undoing / redoing, previewing, exporting, loading templates, etc. The component panel lists all draggable components, such as text boxes, pictures, buttons, videos, etc. Users can drag components to the canvas from here. The property panel displays and allows users to edit the properties of the selected component, such as text content, style, events, animations, custom logic, etc. The bottom status bar displays the current editing status, such as the information of the selected component, the current coordinates, the zoom ratio, etc.

[0055] Business logic layer: handles the core logic of the application, such as state management, data processing, and command management. Data storage layer: manages the storage and retrieval of data, including local storage and remote storage.

[0056] based on Figure 3 The architecture shown in the figure, the timing of page (i.e. target page) configuration is as follows Figure 4 As shown, including:

[0057] The user drags an element (equivalent to dragging a component of the first target object), the UI layer updates the state to the business logic layer, the business logic layer triggers the data storage to save the new element, and triggers the UI layer to re-render the canvas to show it to the user. At this time, you can choose to update the template (i.e. the first canvas template) or not.

[0058] The user selects an element, triggering the UI layer to obtain the element properties from the business logic layer and displaying the property panel to the user; the user edits the element properties (equivalent to editing the target component parameters), triggering the UI layer to update the properties and customize the business logic to the business logic layer; the business logic layer updates and stores the updated properties to the data storage layer, and triggers the UI layer to re-render the canvas to display to the user. At this time, you can choose to update the template (i.e. the first canvas template) or not.

[0059] exist Figure 4 In the example, if the user does not need to start drawing from a blank canvas, the user can also request to download a template from the template library. After the downloaded template is sent to the business logic layer, the UI layer is triggered to generate a page for display to the user with one click, so that the user can continue to draw based on the displayed page.

[0060] Furthermore, Figure 4 It shows the operation sequence diagram of the background H5 visual configuration, allowing users to intuitively and quickly create and edit H5 pages by dragging and dropping components. Figure 4 The more detailed interaction flow includes:

[0061] 1) Startup and initialization: When the user opens the H5 drag page builder, the tool will load the predefined component library and page templates (if any); the user can start selecting a preset template (equivalent to the first canvas template) or create a new page from scratch (the first canvas template can also be a newly created page).

[0062] 2) Component selection and dragging: Users select the required components from the component library, such as text boxes, pictures, buttons, dynamic containers, etc. Users drag and drop the selected components to the specified location on the page canvas. Other components can be added to the dynamic container component, and the components in the dynamic container can be freely moved, rotated and scaled to meet different page layout and design requirements.

[0063] 3) Property setting: For each component placed on the page, the user can enter the edit mode by clicking on it. In the edit mode, the user can set various properties of the component, such as color, font, size, link, etc.

[0064] 4) Layout: Users can organize and manage components on the page by adding containers (such as div elements). Containers can help users implement complex page layouts, such as grid systems, responsive design, etc. Users can also use the alignment, distribution, and spacing functions provided by the tool to fine-tune the layout of page elements.

[0065] 5) Preview: During the design process, users can preview the page effect at any time. The preview function can help users check the display effect of the page on different devices and browsers. Users can also perform interactive tests to ensure that elements such as buttons and links on the page can work properly.

[0066] 6) Save and Export: After completing the design, users can save their page projects for future modification or sharing. They can also design custom templates and add them to the template library, so that they can import templates directly from the template library next time. The exported files can be published directly on the web or embedded in other applications.

[0067] 7) Extension and customization: Users can create their own components and add them to the component library to meet specific design requirements. The tool (equivalent to the same device in the above embodiment) can also provide API and plug-in interfaces to allow users to further expand and customize the functions of the components.

[0068] Through the above design, the functions of the H5 page generator are greatly enriched. The template library and component library solve the problem of repeated design. The addition of API and plug-ins allows users to better customize rich functions (external third-party interfaces, custom data sources, etc.). The use of data stream IndexDB and Cloud storage greatly reduces the pressure on the server and the response time of the design tool, allowing designers (the first target object) to preview the pages they design very quickly, and what you see is what you get.

[0069] Further, such as Figure 5 As shown, the H5 page (i.e., the target page) generated by the H5 page generator (equivalent to the same device in the above embodiment) is a timing diagram on the client side. The following is the interaction process of the client side:

[0070] Step 1: The user accesses the client link and enters the target page. The browser information is cached locally, and resources are preloaded through CDN, cache, etc.

[0071] Step 2: According to the link accessed by the user, a request message is sent to the server to obtain the configuration JSON file of the page (equivalent to the configuration file in the above embodiment).

[0072] Step 3: After being processed by the data center, it is returned to the client. The client will dynamically calculate the position, size and other information of the component based on the configuration information of the configuration JSON file and the browser information, and generate the corresponding HTML structure (equivalent to the page structure in the above embodiment).

[0073] Step 4: Analyze whether the component content is dynamically acquired through the component configuration information. If it is dynamically acquired, you need to initiate a request again to obtain the specific content of the component (such as Figure 3 In the process of loading the page, the user will perform operations such as embedding and request, record user behavior, interact with users, and re-render the page content.

[0074] Therefore, the embodiment of the present application can quickly generate H5 pages with responsive design and adapt to different devices and screen sizes through the background drag and drop method, thereby reducing development generation and improving operational efficiency; the cost of secondary repeated design can be reduced through custom templates, component libraries, etc.; the development of highly customized components can be more abundant through custom APIs and plug-ins; and the client experience can be smoother through various methods such as CDN, caching, preloading, dynamic loading, etc.

[0075] Based on the above content, compared with the traditional H5 page development, it is necessary to equip a special development team (product + UI + front end + back end + test), which requires developers to write a large amount of code, consuming manpower and material resources; in the embodiment of the present application, since the drag-and-drop operation is an intuitive user interface design mode, the user does not need to deeply learn complex programming or design knowledge, and can build a page by simple drag and drop, placing actions, which reduces the threshold of use and allows non-professionals to quickly get started. Thus, the H5 page visualization configuration tool in the embodiment of the present application can greatly improve development efficiency, reduce development costs, and allow non-technical personnel (such as designers, marketers) to participate in the creation and modification of pages, reduce communication costs, and improve work efficiency. In addition, the page builder provides a large number of preset components and templates, which users can use directly without designing or writing code from scratch, and can also significantly improve the efficiency of page production, saving development time and cost.

[0076] Through the description of the above implementation methods, those skilled in the art can clearly understand that the method according to the above embodiment can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, computer, server, or network device, etc.) to execute the methods of each embodiment of the present application.

[0077] In this embodiment, a display device for a target page is also provided, which is used to implement the above-mentioned embodiments and preferred implementation modes, and will not be repeated hereafter. As used below, the term "module" may be a combination of software and / or hardware that implements a predetermined function. Although the devices described in the following embodiments are preferably implemented in software, the implementation of hardware, or a combination of software and hardware, is also possible and conceivable.

[0078] Figure 6 : is a structural block diagram of an optional target page display device according to an embodiment of the present application, the device comprising:

[0079] A receiving module 62, configured to receive an operation of a first target object, wherein the first target object is an object that allows editing of the target page;

[0080] an updating module 64, configured to update a first canvas template currently used by the canvas of the user interface to obtain a second canvas template when the operation is a first type of operation, wherein the first type of operation is used to instruct the first target object to assign component parameters to components in the canvas of the user interface;

[0081] The display module 66 is used to receive a user access request of a second target object, and display the target page determined by the second canvas template to the second target object, wherein the second target object is an object that is allowed to access the target page.

[0082] Through the above-mentioned device, an operation of a first target object is received, wherein the first target object is an object that allows editing of the target page; when the operation is a first-type operation, the first canvas template currently used by the canvas of the user interface is updated to obtain a second canvas template, wherein the first-type operation is used to instruct the first target object to assign component parameters to the components in the canvas of the user interface; a user access request of the second target object is received, and the target page determined by the second canvas template is displayed to the second target object, wherein the second target object is an object that allows access to the target page. That is to say, through the embodiment of the present application, the first target object can assign component parameters to the components in the canvas of the user interface. Therefore, the above-mentioned technical solution is adopted to solve the problem that most of the implementation methods of online configuration of pages in the related art are implemented by global positioning and lack of custom business logic; thereby achieving the technical effect of configuring custom business logic for components in the canvas.

[0083] In an exemplary embodiment, the above-mentioned device also includes: a rendering module, used to receive an operation of a first target object, wherein the first target object is an object that allows editing of the target page: when the operation is a second type of operation, updating the first canvas state of the business logic layer to a second canvas state, wherein the second type of operation is used to indicate that the first target object adds or subtracts components in the canvas of the user interface, the business logic layer is communicatively connected to the user interface, or the business logic layer and the user interface are deployed in the same device; when the canvas state of the business logic layer is updated, rendering the canvas of the user interface according to the operation.

[0084] In an exemplary embodiment, the above-mentioned device also includes: a determination module, which is used to receive an operation of a first target object, wherein the first target object is an object that allows editing of the target page: determine an operation sequence corresponding to the operation; when the operation sequence is a preset sequence, determine that the operation is a first type of operation, wherein the preset sequence includes: selecting a component in the canvas of the user interface, and editing component parameters of the component.

[0085] In an exemplary embodiment, the update module 64 is further used to: obtain the target component parameters assigned by the first target object to the component in the canvas, wherein the component parameters include: the target component parameters; send the target component parameters to the data storage layer to instruct the data storage layer to update the target component parameters to the first canvas template to obtain the second canvas template, wherein the data storage layer is communicatively connected to the user interface, or the data storage layer and the user interface are deployed in the same device.

[0086] In an exemplary embodiment, the update module 64 is also used to: obtain the target component parameters edited by the first target object on the property panel of the component; and / or obtain the target component parameters obtained by the first target object from other devices through a third-party interface, wherein the other device is connected or communicates with the user interface through the third-party interface.

[0087] In an exemplary embodiment, the display module 66 is also used to: send the configuration file of the target page to the client that initiates the user access request to instruct the client to configure the page structure of the target page according to the configuration file; when receiving an attribute read request, send the attribute data corresponding to the page structure of the target page to the client to instruct the client to construct the component content of the target page; when it is determined that the component content has been constructed, instruct the client to perform a rendering operation to display the target page to the second target object.

[0088] In an exemplary embodiment, the device also includes: a modification module, which is used to: after displaying the target page determined by the second canvas template to the second target object: receive the operation of the second target object on the target page; when the operation of the second target object is a third type of operation, check the operation authority of the second target object, wherein the third type of operation is used to indicate that the second target object has modified the target page; when the operation authority meets the requirements, update the target page through the operation of the second target object.

[0089] An embodiment of the present application further provides a computer-readable storage medium, in which a computer program is stored, wherein the computer program is configured to execute the steps of any of the above method embodiments when running.

[0090] Optionally, in this embodiment, the storage medium may be configured to store a computer program for performing the following steps:

[0091] S1, receiving an operation of a first target object, wherein the first target object is an object that allows editing of the target page;

[0092] S2, when the operation is a first type operation, updating a first canvas template currently used by the canvas of the user interface to obtain a second canvas template, wherein the first type operation is used to instruct the first target object to assign component parameters to components in the canvas of the user interface;

[0093] S3, receiving a user access request of a second target object, and displaying a target page determined by the second canvas template to the second target object, wherein the second target object is an object that is allowed to access the target page.

[0094] In an exemplary embodiment, the computer-readable storage medium may include, but is not limited to, various media that can store computer programs, such as a USB flash drive, a read-only memory (ROM), a random access memory (RAM), a mobile hard disk, a magnetic disk or an optical disk.

[0095] For specific examples in this embodiment, reference may be made to the examples described in the above embodiments and exemplary implementation modes, and this embodiment will not be described in detail herein.

[0096] An embodiment of the present application further provides an electronic device, including a memory and a processor, wherein a computer program is stored in the memory, and the processor is configured to run the computer program to execute the steps in any one of the above method embodiments.

[0097] Optionally, in this embodiment, the processor may be configured to perform the following steps through a computer program:

[0098] S1, receiving an operation of a first target object, wherein the first target object is an object that allows editing of the target page;

[0099] S2, when the operation is a first type operation, updating a first canvas template currently used by the canvas of the user interface to obtain a second canvas template, wherein the first type operation is used to instruct the first target object to assign component parameters to components in the canvas of the user interface;

[0100] S3, receiving a user access request of a second target object, and displaying a target page determined by the second canvas template to the second target object, wherein the second target object is an object that is allowed to access the target page.

[0101] In an exemplary embodiment, the electronic device may further include a transmission device and an input / output device, wherein the transmission device is connected to the processor, and the input / output device is connected to the processor.

[0102] An embodiment of the present application further provides a computer program product, which includes a computer program. When the computer program is executed by a processor, the steps in any one of the above method embodiments are implemented.

[0103] An embodiment of the present application further provides another computer program product, including a non-volatile computer-readable storage medium, wherein the non-volatile computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps in any of the above method embodiments are implemented.

[0104] An embodiment of the present application also provides a computer program, which includes computer instructions, which are 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 the steps in any one of the above method embodiments.

[0105] For specific examples in this embodiment, reference may be made to the examples described in the above embodiments and exemplary implementation modes, and this embodiment will not be described in detail herein.

[0106] Obviously, those skilled in the art should understand that the above modules or steps of the present application can be implemented by a general computing device, they can be concentrated on a single computing device, or distributed on a network composed of multiple computing devices, they can be implemented by a program code executable by a computing device, so that they can be stored in a storage device and executed by the computing device, and in some cases, the steps shown or described can be executed in a different order from that herein, or they can be made into individual integrated circuit modules, or multiple modules or steps therein can be made into a single integrated circuit module for implementation. Thus, the present application is not limited to any specific combination of hardware and software.

[0107] The above is only a preferred implementation of the present application. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present application. These improvements and modifications should also be regarded as the scope of protection of the present application.

Claims

1. A method for displaying a target page, characterized in that: include: Receiving an operation of a first target object, wherein the first target object is an object that allows editing of the target page; In the case where the operation is a first type of operation, updating a first canvas template currently used by the canvas of the user interface to obtain a second canvas template, wherein the first type of operation is used to instruct the first target object to assign component parameters to components in the canvas of the user interface; A user access request of a second target object is received, and a target page determined by the second canvas template is displayed to the second target object, wherein the second target object is an object that is allowed to access the target page.

2. The method for displaying a target page according to claim 1, characterized in that: After receiving the operation of the first target object, the method further includes: In the case where the operation is a second type of operation, updating a first canvas state of the business logic layer to a second canvas state, wherein the second type of operation is used to instruct the first target object to add or reduce components in the canvas of the user interface, and the business logic layer is communicatively connected with the user interface, or the business logic layer and the user interface are deployed in the same device; When the canvas state of the business logic layer is updated, the canvas of the user interface is rendered according to the operation.

3. The method for displaying a target page according to claim 1, characterized in that: After receiving the operation of the first target object, the method further includes: Determine an operation sequence corresponding to the operation; In the case that the operation sequence is a preset sequence, it is determined that the operation is a first type operation, wherein the preset sequence includes: selecting a component in the canvas of the user interface, and editing a component parameter of the component.

4. The method for displaying a target page according to claim 1, characterized in that: The first canvas template currently used by the canvas of the user interface is updated to obtain a second canvas template, including: Obtaining target component parameters assigned by the first target object to the component in the canvas, wherein the component parameters include: the target component parameters; The target component parameters are sent to the data storage layer to instruct the data storage layer to update the target component parameters into the first canvas template to obtain the second canvas template, wherein the data storage layer is communicatively connected to the user interface, or the data storage layer and the user interface are deployed in the same device.

5. The method for displaying a target page according to claim 4, characterized in that: Obtaining target component parameters assigned by the first target object to the component in the canvas includes: Obtaining the target component parameters edited by the first target object on the property panel of the component; and / or, The target component parameter is obtained by the first target object from other devices through a third-party interface, wherein the other device is connected or communicates with the user interface through the third-party interface.

6. The method for displaying a target page according to claim 1, characterized in that: Displaying the target page determined by the second canvas template to the second target object includes: Sending the configuration file of the target page to the client that initiates the user access request, so as to instruct the client to configure the page structure of the target page according to the configuration file; In case of receiving the attribute reading request, sending the attribute data corresponding to the page structure of the target page to the client to instruct the client to construct the component content of the target page; When it is determined that the component content has been constructed, the client is instructed to perform a rendering operation to display the target page to the second target object.

7. The method for displaying a target page according to claim 1, characterized in that: After displaying the target page determined by the second canvas template to the second target object, the method further includes: receiving an operation of the second target object on the target page; In a case where the operation of the second target object is a third type of operation, checking the operation authority of the second target object, wherein the third type of operation is used to indicate that the second target object has modified the target page; When the operation authority meets the requirement, the target page is updated through the operation of the second target object.

8. A target page display device, characterized in that: include: A receiving module, configured to receive an operation on a first target object, wherein the first target object is an object that allows editing of the target page; an updating module, configured to update a first canvas template currently used by the canvas of the user interface to obtain a second canvas template when the operation is a first type of operation, wherein the first type of operation is used to instruct the first target object to assign component parameters to components in the canvas of the user interface; The display module is used to receive a user access request of a second target object, and display the target page determined by the second canvas template to the second target object, wherein the second target object is an object that is allowed to access the target page.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium includes a stored program, wherein the program executes the method according to any one of claims 1 to 7 when executed.

10. An electronic device comprising a memory and a processor, characterized in that: A computer program is stored in the memory, and the processor is configured to execute the method according to any one of claims 1 to 7 through the computer program.

Images