Page processing method, device, medium and electronic device

Abstract

The embodiments of the present disclosure provide a page processing method, device, medium and electronic device, which relate to the field of computer technology. The method includes: in response to an update operation on a page element in a preview view component, obtaining update data corresponding to the update operation; modifying element data corresponding to the page element based on the update data; and synchronously updating element data corresponding to the page element in a configuration form component based on the modified element data. According to the technical solution of the embodiments of the present disclosure, bidirectional synchronization of data between the configuration form and the preview view can be achieved, thereby enabling visual editing.

Description

Background Art

[0002] With the development of Internet technology, more and more content can be presented through web pages. HTML5 (HyperTextMarkup Language 5) is the next generation standard for building and presenting Internet content. HTML5 can process web page content more conveniently.

[0003] In the relevant technical solution, taking the web page system for online production of HTML5 games as an example, the user usually selects the element to be edited by clicking the mouse in the preview view, and then sets the properties of the selected page element through the configuration form, such as the width, height, position and size of the page element. After editing is completed, the preview view is updated through DOM (Document Object Model) operations.

[0004] However, in this technical solution, the page elements in the game page are set through the configuration form, and the preview view is updated each time the element data after setting is read. Therefore, this technical solution can only realize the one-way flow of data from the configuration form to the preview view, which is difficult to achieve visualization and convenience.

[0005] It should be noted that the information disclosed in the above background technology section is only used to enhance the understanding of the background of the present disclosure, and therefore may include information that does not constitute the prior art known to ordinary technicians in the field. Summary of the invention

[0006] The purpose of the embodiments of the present disclosure is to provide a page processing method, a page processing device, a computer-readable medium and an electronic device, so as to achieve two-way synchronization of data between the configuration form and the preview view at least to a certain extent, thereby enabling visual editing.

[0007] Other features and advantages of the present disclosure will become apparent from the following detailed description, or may be learned in part by the practice of the present disclosure.

[0008] According to a first aspect of an embodiment of the present disclosure, a page processing method is provided, wherein the page includes a preview view component and a configuration form component, wherein the preview view component and the configuration form component bidirectionally bind element data of page elements of the page, and the method includes: in response to an update operation on a page element in the preview view component, obtaining update data corresponding to the update operation; modifying the element data corresponding to the page element based on the update data; and synchronously updating the element data corresponding to the page element in the configuration form component based on the modified element data.

[0009] According to the first aspect, in some example embodiments of the present disclosure, the method further includes: in response to an update operation on a page element in the configuration form component, obtaining update data corresponding to the update operation; modifying the element data corresponding to the page element based on the update data; and synchronously updating the page element in the preview view component based on the modified element data.

[0010] According to the first aspect, in some example embodiments of the present disclosure, the preview view component and the configuration form component have a common parent component, the parent component is used to save element data of the page elements of the page, and modifying the element data corresponding to the page elements based on the update data includes: passing the update data to the parent component by way of a callback; and modifying the element data corresponding to the page elements by means of the parent component.

[0011] According to the first aspect, in some example embodiments of the present disclosure, synchronously updating the element data corresponding to the page element in the configuration form component based on the modified element data includes: passing the modified element data into the configuration form component through the parent component; synchronously updating the element data corresponding to the page element in the configuration form component.

[0012] According to the first aspect, in some example embodiments of the present disclosure, the method further includes: passing element data of the page element of the page into the preview view component and the configuration form component through the parent component, the element data including: width attribute, height attribute, left position attribute, top position attribute, and element value attribute.

[0013] According to the first aspect, in some exemplary embodiments of the present disclosure, the method further includes: using JSON format to communicate data between the parent component and the preview view component and between the parent component and the configuration form component.

[0014] According to the first aspect, in some example embodiments of the present disclosure, the method further includes: monitoring update operations of page elements in the preview view component by monitoring events, wherein the update operations include one or more of dragging and dropping, zooming, and editing content.

[0015] According to a second aspect of an embodiment of the present disclosure, a page processing device is provided, wherein the page includes a preview view component and a configuration form component, wherein the preview view component and the configuration form component are bidirectionally bound to element data of page elements of the page, and the device includes: a first update data acquisition module, for responding to an update operation on a page element in the preview view component, to acquire update data corresponding to the update operation; a first data modification module, for modifying the element data corresponding to the page element based on the update data; and a first synchronous update module, for synchronously updating the element data corresponding to the page element in the configuration form component based on the modified element data.

[0016] According to the second aspect, in some example embodiments of the present disclosure, the device also includes: a second update data acquisition module, used to obtain update data corresponding to the update operation in response to an update operation on the page element in the configuration form component; a second data modification module, used to modify the element data corresponding to the page element based on the update data; and a second synchronous update module, used to synchronously update the page element in the preview view component based on the modified element data.

[0017] According to the second aspect, in some example embodiments of the present disclosure, the preview view component and the configuration form component have a common parent component, and the first data modification module is further used to: pass the update data to the parent component by way of callback; and modify the element data corresponding to the page element by means of the parent component.

[0018] According to the second aspect, in some exemplary embodiments of the present disclosure, the first synchronous update module is further used to: transfer the modified element data to the configuration form component through the parent component; and synchronously update the element data corresponding to the page element in the configuration form component.

[0019] According to the second aspect, in some example embodiments of the present disclosure, the device further includes: a data transmission module, used to transfer element data of the page elements of the page to the preview view component and the configuration form component through the parent component, the element data including: width attribute, height attribute, left position attribute, top position attribute, element value attribute.

[0020] According to the second aspect, in some example embodiments of the present disclosure, the apparatus further comprises: a communication module for performing data communication between the parent component and the preview view component and between the parent component and the configuration form component using a JSON format.

[0021] According to the second aspect, in some example embodiments of the present disclosure, the device further includes: a monitoring module, configured to monitor update operations of page elements in the preview view component by monitoring events, wherein the update operations include one or more of dragging and dropping, zooming, and editing content.

[0022] According to a third aspect of an embodiment of the present disclosure, a computer-readable medium is provided, on which a computer program is stored. When the program is executed by a processor, the page processing method as described in the first aspect of the embodiment is implemented.

[0023] According to a fourth aspect of an embodiment of the present disclosure, an electronic device is provided, comprising: one or more processors; a storage device for storing one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the page processing method as described in the first aspect of the above embodiment.

[0024] The technical solution provided by the embodiments of the present disclosure may have the following beneficial effects:

[0025] In some embodiments of the present disclosure, on the one hand, the preview view component and the configuration form component are bidirectionally bound to the element data of the page elements of the page. Since the preview view component and the configuration form component inherit the same data, bidirectional synchronization of the view and form data can be achieved, thereby improving the user interaction experience. On the other hand, based on the update data corresponding to the update operation of the page elements in the preview view component, the element data corresponding to the page elements are modified; based on the modified element data, the element data corresponding to the page elements in the configuration form component are synchronously updated, which not only enables more convenient visual editing of the page, but also enables data-driven preview view updates without the need for a large number of manual DOM operations, thereby improving the maintainability of the code.

[0026] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0027] The drawings herein are incorporated into the specification and constitute a part of the specification, showing embodiments consistent with the present disclosure, and together with the specification, are used to explain the principles of the present disclosure. Obviously, the drawings described below are only some embodiments of the present disclosure, and for ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work. In the drawings:

[0028] Figure 1 A schematic diagram showing an application scenario of the page processing method in an exemplary embodiment of the present disclosure;

[0029] Figure 2A schematic diagram showing a flow chart of a page processing method according to some example embodiments of the present disclosure;

[0030] Figure 3 A schematic diagram showing a page processing method according to some other example embodiments of the present disclosure;

[0031] Figure 4 A schematic flow chart of a page processing method according to some further example embodiments of the present disclosure is shown;

[0032] Figure 5 A schematic diagram of the structure of a page processing device according to an embodiment of the present disclosure is shown;

[0033] Figure 6 A schematic structural diagram of an electronic device in an exemplary embodiment of the present disclosure is shown. DETAILED DESCRIPTION

[0034] Example embodiments will now be described more fully with reference to the accompanying drawings. However, example embodiments can be implemented in a variety of forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be more comprehensive and complete and will fully convey the concept of the example embodiments to those skilled in the art.

[0035] In addition, the described features, structures or characteristics may be combined in one or more embodiments in any suitable manner. In the following description, many specific details are provided to provide a full understanding of the embodiments of the present disclosure. However, those skilled in the art will appreciate that the technical solutions of the present disclosure may be practiced without one or more of the specific details, or other methods, components, devices, steps, etc. may be adopted. In other cases, known methods, devices, implementations or operations are not shown or described in detail to avoid blurring the various aspects of the present disclosure.

[0036] The block diagrams shown in the accompanying drawings are merely functional entities and do not necessarily correspond to physically independent entities. That is, these functional entities may be implemented in software form, or in one or more hardware modules or integrated circuits, or in different networks and / or processor devices and / or microcontroller devices.

[0037] The flowcharts shown in the accompanying drawings are only exemplary and do not necessarily include all the contents and operations / steps, nor must they be executed in the order described. For example, some operations / steps can be decomposed, and some operations / steps can be combined or partially combined, so the actual execution order may change according to actual conditions.

[0038] In order to clearly illustrate the technical solutions in the embodiments of the present disclosure, before specifically describing the embodiments of the present disclosure, some terms used in the embodiments are first described.

[0039] The page processing method in the exemplary embodiment of the present disclosure is described in detail below with reference to the accompanying drawings.

[0040] Figure 1 A schematic diagram of an application scenario provided according to some embodiments of the present disclosure is shown. The game background production system 105 generally includes: a system login page 110, a game list page 115, a game details page 120, a game production page 125, my game list 130 and other pages. Among them, the game production page 125 includes: a page menu component 135, a preview view component 140 and a configuration form component 145.

[0041] Furthermore, the page menu component 135 refers to a navigation menu of all sub-pages contained in the game. For example, a game usually includes a home page, a winning result page, a game rule description page, a winning history page, etc. The page menu component 135 is used to switch different game pages by clicking, so that the corresponding page can be displayed in the preview view component 140 for users to perform visual editing and preview. For example, the nav tag in HTML (Hyper Text Markup Language) can be used to implement it, and then several a tags are wrapped in the nav element to represent the menu list.

[0042] The preview view component 140 is used for game preview and visual editing. For example, a div tag can be used as the preview view component, and the div tag is set with a CSS style, and the position of the div is set to relative.

[0043] The configuration form component 145 is used to customize game-related parameters, such as setting the winning probability, prize awards, daily participation times, etc. For example, the form tag can be used to implement the configuration form component 145, and the input input box and other form tags can be configured according to business requirements.

[0044] It should be noted that although the game production page is taken as an example, ordinary technicians in this field should understand that the technical solutions in the embodiments of the present disclosure can also be applied to other appropriate page processing such as recruitment advertisement page processing, application page, etc., which is also within the scope of protection of the present disclosure.

[0045] Figure 2A schematic flow chart of a page processing method according to some example embodiments of the present disclosure is shown. The execution subject of the page processing method provided in the embodiment of the present disclosure may be a computing device with computing processing functions, such as a desktop computer. The page processing method includes steps S210 to S230. The page processing method in the example embodiment is described in detail below in conjunction with the accompanying drawings.

[0046] Reference Figure 2 As shown, in step S210, in response to an update operation on a page element in a preview view component, update data corresponding to the update operation is obtained.

[0047] In an example embodiment, a page includes a preview view component and a configuration form component. The preview view component is used to preview and visually edit the page, and the configuration form component is used to customize the relevant parameters of the page elements according to business requirements. The preview view component and the configuration form component are bidirectionally bound to the element data of the page elements of the page. For example, the preview view component and the configuration form component both inherit the element data of the page elements of the page.

[0048] When an update operation is performed on a page element in a preview view component, in response to the update operation, update data corresponding to the update operation is obtained, and the update operation includes one or more of drag and drop, zooming, and editing content. For example, when a page element in a preview view component is zoomed, in response to the zooming operation, the zoomed position element data is obtained.

[0049] In step S220, the element data corresponding to the page element is modified based on the update data.

[0050] In an exemplary embodiment, the element data corresponding to the page element is determined according to the identification information of the update data, and the element data corresponding to the page element is modified by the update data.

[0051] For example, in an example embodiment, the preview view component and the configuration form component have a common parent component, and the parent component is used to save element data of page elements of the page, and modify the element data corresponding to the page elements based on update data, including: passing the update data to the parent component via a callback; determining the element data corresponding to the page element according to identification information of the update data by the parent component, and modifying the element data corresponding to the page element.

[0052] In step S230, based on the modified element data, the element data corresponding to the page element in the configuration form component is synchronously updated.

[0053] In an example embodiment, the modified element data is passed into the configuration form component, and the element data corresponding to the page element in the configuration form component is synchronously updated. For example, in an example embodiment, the preview view component and the configuration form component have a common parent component, and the parent component is used to store the element data of the page element of the page, and based on the modified element data, the element data corresponding to the page element in the configuration form component is synchronously updated, including: passing the modified element data into the configuration form component through the parent component; synchronously updating the element data corresponding to the page element in the configuration form component.

[0054] according to Figure 2 According to the technical solution in the example embodiment, on the one hand, the preview view component and the configuration form component are bidirectionally bound to the element data of the page elements of the page. Since the preview view component and the configuration form component inherit the same data, bidirectional synchronization of the view and the form data can be achieved, thereby improving the user interaction experience; on the other hand, based on the update data corresponding to the update operation of the page element in the preview view component, the element data corresponding to the page element is modified; based on the modified element data, the element data corresponding to the page element in the configuration form component is synchronously updated, which not only makes it more convenient to visually edit the page, but also enables data-driven preview view updates without the need for a large number of manual DOM operations, thereby improving the maintainability of the code.

[0055] Figure 3 A schematic diagram of a page processing method according to some other example embodiments of the present disclosure is shown.

[0056] In step S310, the data structure of the element data of the page elements of the page is designed.

[0057] In the example embodiment, the element data includes the content of various page elements of the page. Taking the game page as an example, the element data may include the display element content of each game page, the attribute data and configuration data of each game element, etc. The element data is also the data directly saved to the server, and is also the data used for rendering on the H5 mobile terminal.

[0058] Take the banner element of the game as an example. The element data structure of the page element can be designed as {width:200,height:50,left:40,top:100,value:'banner.png'}, and this data is used as the initial element data of the page element. Then the element data of the banner element is stored in the state of the react component, such as state = {banner:width:200,height:50,left:40,top:100,value:'banner.png'}. When the user performs visual editing and uses the form to set elements, he only needs to modify the data in the state of the banner element to achieve two-way data synchronization.

[0059] It should be noted that although react is used as the technology stack to implement the visual editing system, those skilled in the art should understand that the embodiments of the present disclosure are not limited to any technology stack, as long as the technology framework supports data-driven views, it is applicable. For example, it can also be implemented through vue and angular.

[0060] In step S320, a preview view component is implemented.

[0061] In the example embodiment, the width of the preview view is first set to 375px wide and 667px high. This size is the current mainstream design size for mobile terminals. In a real mobile H5 page, the units need to be converted into dynamic units according to this size ratio to achieve screen adaptation on the mobile terminal.

[0062] In this example embodiment, a draggable and scalable component is encapsulated, such as dragging a Draw component, which is a preview view component. The Draw component can support double-clicking to enter the editing mode. When the Draw component is double-clicked, it is determined whether the current component contains an image or text. If it is an image, a dialog box for uploading the image is called up. If it is text, the contentEditable attribute of the element is set to true to enter the editing mode.

[0063] Furthermore, in the exemplary embodiment, an onChange event is set for the Draw component, which is called once each time the page element of the Draw component is dragged, dropped, scaled, or the content is edited, and the changed new data is passed to the parent component.

[0064] After implementing the Draw component, pass the above banner element to the Draw component as an image tag, and also pass its element data to the Draw component, such as<Draw data={this.props.banner}> <img src＝{this.props.banner.value}> .

[0065] In step S330, the form component is configured.

[0066] In the example embodiment, the configuration form component is used to set relevant parameters of the page. Taking the game page as an example, the configuration form component can set parameters such as the game's winning probability, prizes, number of user daily participations, and activity time.

[0067] Taking the banner element as an example, add an input tag with the type attribute of file in the configuration form component to upload and modify the image of the banner element. At the same time, write a span tag to display the name of the image of the banner element after upload to achieve two-way synchronization of data.

[0068] In step S340, data is bound to the preview view component and the configuration form component.

[0069] In the exemplary embodiment, the preview view component and the configuration form component have a common parent component. The parent component is used to store the element data of the page elements of the page. The parent component is the top-level component of the page. The element data will be placed in this parent component and then displayed by introducing the element data into the preview view component and the configuration form component.

[0070] Furthermore, both the preview view component and the configuration form component receive the element data of the banner element defined in step S310 as the initialization value. The parent component passes the value of the element data to the preview view component and the configuration form component by means of attributes, and reads the value through the method this.props in the preview view component and the configuration form component. At the same time, the method for updating the element data of the banner element is passed to the preview view component and the configuration form component in the parent component, and the method for updating the element data of the banner element is a callback function.

[0071] Since both the preview view component and the configuration form component use the element data of the banner element passed in from the parent component, when the preview view component uses the callback function passed in by the parent component to update the data of the banner element, the content displayed by the configuration form component is refreshed synchronously. When the configuration form component uses the callback function passed in by the parent component to update the element data of the banner element, the content of the preview view component is also refreshed synchronously, thus achieving two-way data synchronization.

[0072] Since the child component will automatically re-render whenever the data of the parent component changes, there is no need to use DOM-based operations to update the page, allowing developers to focus more on business logic and improve page development efficiency.

[0073] In step S350, the data is saved to the server.

[0074] In the example embodiment, the defined or updated element data is submitted to the server in JSON format, for example, the element data is transmitted to the server using the JSON.stringify method, and the server is communicated using ajax. Since the JSON format has the advantages of being lightweight, easy to read, efficient, and easy to parse, and no data packaging is required.

[0075] according to Figure 3 The technical solution in the example embodiment, on the one hand, updates the page by modifying the internal data without manual DOM operation, which reduces the amount of code development and improves the maintainability of the project; on the other hand, the preview view component and the configuration form component inherit the same data, thereby realizing a two-way synchronization of data, making page editing more convenient and enabling visual editing; on the other hand, the JSON format has the advantages of being lightweight, easy to read, efficient, and easy to parse, and no data packaging is required.

[0076] Figure 4 A schematic flow chart of a page processing method according to some further example embodiments of the present disclosure is shown.

[0077] Reference Figure 4 As shown, in step S405, the preview view of the game production page is operated.

[0078] In an example embodiment, modification operations such as dragging and dropping, scaling, and editing content can be performed on the page elements of the preview view of the game production page, and non-modification operations such as previewing and viewing can also be performed on the page elements.

[0079] In step S410, it is determined whether it is a modification operation.

[0080] In an exemplary embodiment, it is determined whether the above operation is a modification operation, and if so, the process proceeds to step S415; if not, the process proceeds to step S420.

[0081] In step S415, the modified data is acquired and the original data is overwritten with the modified data.

[0082] In an exemplary embodiment, modification data corresponding to the modification operation is obtained, and the original data corresponding to the page element is updated with the modification data. Further, based on the modified original data, the element data corresponding to the page element in the configuration form is synchronously updated.

[0083] In step S420, original data of the page element is obtained.

[0084] In step S425, in response to the editing operation on the configuration form, the corresponding original data is updated.

[0085] In an example embodiment, the editing operation on the page elements in the configuration form can be a property editing operation, such as changing the property information of the page element, obtaining update data corresponding to the editing operation, modifying the original data corresponding to the page element based on the updated data; based on the modified original data, synchronously updating the page elements in the preview view.

[0086] In step S430 , in response to the preview operation, a preview view is displayed.

[0087] In step S435, the element data is uploaded to the server.

[0088] In an exemplary embodiment, the defined or updated element data is submitted to the server in JSON format.

[0089] In step S440, the server generates a QR code corresponding to the page.

[0090] In step S445, the server returns the QR code corresponding to the page to the client.

[0091] In step S450, the client displays the QR code corresponding to the page.

[0092] In step S455, the page is previewed by scanning the QR code.

[0093] according to Figure 4 The technical solution in the example embodiment, on the one hand, realizes visual editing and improves the user interaction experience through bidirectional synchronization of data in the preview view and the configuration form; on the other hand, based on data-driven preview view updates, a large amount of manual DOM operations are no longer required, thereby improving the maintainability of the code; on the other hand, based on data communication in JSON format, the basic data of the game elements is defined, and can be directly submitted to the server after editing without additional packaging.

[0094] It should be noted that the above figures are only schematic illustrations of the processes included in the method according to the exemplary embodiment of the present disclosure, and are not intended to be limiting. It is easy to understand that the processes shown in the above figures do not indicate or limit the time sequence of these processes. In addition, it is also easy to understand that these processes can be performed synchronously or asynchronously, for example, in multiple modules.

[0095] The following introduces an embodiment of a device of the present disclosure, which can be used to execute the above-mentioned page processing method of the present disclosure.

[0096] Figure 5 A schematic structural diagram of a page processing device according to an embodiment of the present disclosure is shown.

[0097] Reference Figure 5As shown, this example embodiment provides a page processing device 500, wherein the page includes a preview view component and a configuration form component, wherein the preview view component and the configuration form component are bidirectionally bound to element data of page elements of the page, and the device 500 includes: a first update data acquisition module 510, for responding to an update operation on a page element in the preview view component, acquiring update data corresponding to the update operation; a first data modification module 520, for modifying the element data corresponding to the page element based on the update data; and a first synchronous update module 530, for synchronously updating the element data corresponding to the page element in the configuration form component based on the modified element data.

[0098] In some example embodiments of the present disclosure, the device 500 also includes: a second update data acquisition module, used to obtain update data corresponding to the update operation in response to an update operation on the page element in the configuration form component; a second data modification module, used to modify the element data corresponding to the page element based on the update data; and a second synchronous update module, used to synchronously update the page element in the preview view component based on the modified element data.

[0099] In some example embodiments of the present disclosure, the preview view component and the configuration form component have a common parent component, and the first data modification module 520 is further used to: pass the update data to the parent component by way of callback; and modify the element data corresponding to the page element by means of the parent component.

[0100] In some exemplary embodiments of the present disclosure, the first synchronous update module 530 is further used to: transfer the modified element data to the configuration form component through the parent component; and synchronously update the element data corresponding to the page element in the configuration form component.

[0101] In some example embodiments of the present disclosure, the device 500 further includes: a data transmission module, used to transfer element data of the page elements of the page to the preview view component and the configuration form component through the parent component, the element data including: a width attribute, a height attribute, a left position attribute, a top position attribute, and an element value attribute.

[0102] In some example embodiments of the present disclosure, the apparatus 500 further includes: a communication module for performing data communication between the parent component and the preview view component and between the parent component and the configuration form component using the JSON format.

[0103] In some example embodiments of the present disclosure, the apparatus 500 further includes: a monitoring module for monitoring update operations of page elements in the preview view component by monitoring events, wherein the update operations include one or more of dragging and dropping, zooming, and editing content.

[0104] Since the various functional modules of the page processing device of the exemplary embodiment of the present disclosure correspond to the steps of the exemplary embodiment of the above-mentioned page processing method, for details not disclosed in the embodiment of the device of the present disclosure, please refer to the embodiment of the above-mentioned page processing method of the present disclosure.

[0105] It should be noted that, although several modules or units of the device for action execution are mentioned in the above detailed description, this division is not mandatory. In fact, according to the embodiments of the present disclosure, the features and functions of two or more modules or units described above can be embodied in one module or unit. On the contrary, the features and functions of one module or unit described above can be further divided into multiple modules or units to be embodied.

[0106] In addition, although the steps of the method in the present disclosure are described in a specific order in the drawings, this does not require or imply that the steps must be performed in this specific order, or that all the steps shown must be performed to achieve the desired results. Additionally or alternatively, some steps may be omitted, multiple steps may be combined into one step, and / or one step may be decomposed into multiple steps, etc.

[0107] Through the description of the above implementation, it is easy for those skilled in the art to understand that the example implementation described here can be implemented by software, or by software combined with necessary hardware. Therefore, the technical solution according to the implementation of the present disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.) or on a network, including several instructions to enable a computing device (which can be a personal computer, a server, a mobile terminal, or a network device, etc.) to execute the method according to the implementation of the present disclosure.

[0108] In the exemplary embodiments of the present disclosure, a computer storage medium capable of implementing the above method is also provided. A program product capable of implementing the above method of the present specification is stored thereon. In some possible embodiments, various aspects of the present disclosure may also be implemented in the form of a program product, which includes a program code. When the above program product is run on a terminal device, the above program code is used to enable the above terminal device to execute the steps according to various exemplary embodiments of the present disclosure described in the above “Exemplary Method” section of the present specification.

[0109] The program product may be in a portable compact disk read-only memory (CD-ROM) and include program code, and may be run on a terminal device, such as a personal computer. However, the program product of the present disclosure is not limited thereto, and in this document, a readable storage medium may be any tangible medium containing or storing a program that may be used by or in conjunction with an instruction execution system, apparatus, or device.

[0110] The above program product can adopt any combination of one or more readable media. The readable medium can be a readable signal medium or a readable storage medium. The readable storage medium can be, for example, but not limited to, a system, device or device of electricity, magnetism, light, electromagnetic, infrared, or semiconductor, or any combination of the above. More specific examples (non-exhaustive list) of readable storage media include: an electrical connection with one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

[0111] Computer readable signal media may include data signals propagated in baseband or as part of a carrier wave, in which readable program code is carried. Such propagated data signals may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Readable signal media may also be any readable medium other than a readable storage medium, which may send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device.

[0112] The program code embodied on the readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wired, optical cable, RF, etc., or any suitable combination of the foregoing.

[0113] Program code for performing the operations of the present disclosure may be written in any combination of one or more programming languages, including object-oriented programming languages ​​such as Java, C++, etc., and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user computing device, partially on the user device, as a separate software package, partially on the user computing device and partially on a remote computing device, or entirely on a remote computing device or server. In cases involving a remote computing device, the remote computing device may be connected to the user computing device through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computing device (e.g., via the Internet using an Internet service provider).

[0114] After introducing the method, apparatus, and medium of the exemplary embodiment of the present disclosure, next, a computing device according to another exemplary embodiment of the present disclosure is introduced.

[0115] Those skilled in the art will appreciate that various aspects of the present disclosure may be implemented as systems, methods or program products. Therefore, various aspects of the present disclosure may be specifically implemented in the following forms, namely: complete hardware implementation, complete software implementation (including firmware, microcode, etc.), or a combination of hardware and software, which may be collectively referred to herein as "circuits", "modules" or "systems".

[0116] In some possible embodiments, a computing device according to an embodiment of the present disclosure may include at least one processor and at least one memory. The memory stores program code, and when the program code is executed by the processor, the processor executes the steps of the voice verification method according to various exemplary embodiments of the present disclosure described in the above “Exemplary Method” section of this specification. For example, the processor may execute the following steps: Figure 2 The steps shown in: Step S210, in response to an update operation on a page element in a preview view component, obtaining update data corresponding to the update operation; Step S220, modifying element data corresponding to the page element based on the update data; Step S230, synchronously updating element data corresponding to the page element in a configuration form component based on the modified element data.

[0117] Refer to the following Figure 6 An electronic device 600 according to an example embodiment of the present disclosure is described. Figure 6 The electronic device 600 shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present disclosure.

[0118] like Figure 6 As shown, the electronic device 600 is in the form of a general computing device. The components of the electronic device 600 may include but are not limited to: at least one processing unit 610, at least one storage unit 620, and a bus 630 connecting different system components (including the storage unit 620 and the processing unit 610).

[0119] Bus 630 represents one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, a processor, or a local bus using any of a variety of bus architectures.

[0120] The storage unit 620 may include a readable medium in the form of a volatile memory, such as a RAM (Random Access Memory) 621 and / or a cache memory 622 , and may further include a ROM (Read-Only Memory) 623 .

[0121] The storage unit 620 may also include a program / utility 625 having a set (at least one) of program modules 624, such program modules 624 including but not limited to: an operating system, one or more application programs, other program modules, and program data, each of which or some combination may include an implementation of a network environment.

[0122] The electronic device 600 may also communicate with one or more external devices 640 (e.g., keyboards, pointing devices, Bluetooth devices, etc.), may also communicate with one or more devices that enable a user to interact with the electronic device 600, and / or communicate with any device that enables the electronic device 600 to communicate with one or more other computing devices (e.g., routers, modems, etc.). Such communication may be performed via an input / output (I / O) interface 650. Furthermore, the electronic device 600 may also communicate with one or more networks (e.g., local area networks, wide area networks, and / or public networks, such as the Internet) via a network adapter 660. As shown, the network adapter 660 communicates with other modules of the electronic device 600 via a bus 630. It should be understood that, although not shown in the figure, other hardware and / or software modules may be used in conjunction with the electronic device 600, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID (Redundant Arrays of Independent Disks, independent redundant disk array) systems, tape drives, and data backup storage systems.

[0123] It should be noted that although several units or subunits of the voice verification device are mentioned in the above detailed description, this division is merely exemplary and not mandatory. In fact, according to the embodiments of the present disclosure, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided into multiple modules or units to be embodied.

[0124] In addition, although the operations of the disclosed method are described in a specific order in the drawings, this does not require or imply that the operations must be performed in this specific order, or that all the operations shown must be performed to achieve the desired results. Additionally or alternatively, some steps may be omitted, multiple steps may be combined into one step, and / or one step may be decomposed into multiple steps.

[0125] Although the spirit and principle of the present disclosure have been described with reference to several specific embodiments, it should be understood that the present disclosure is not limited to the disclosed specific embodiments, and the division of various aspects does not mean that the features in these aspects cannot be combined to benefit, and such division is only for the convenience of expression. The present disclosure is intended to cover various modifications and equivalent arrangements included in the spirit and scope of the attached claims.

Claims

1. A page processing method, characterized in that: The page includes a preview view component and a configuration form component, the preview view component and the configuration form component are bidirectionally bound to element data of page elements of the page, and the method includes: In response to an update operation on a page element in the preview view component, acquiring update data corresponding to the update operation; the update operation includes one or more of dragging and dropping, zooming, and editing content; Modify the element data corresponding to the page element based on the update data; the element data includes: width attribute, height attribute, left position attribute, top position attribute, element value attribute; The preview view component and the configuration form component have a common parent component, the parent component is used to store element data of the page element of the page, and the step of modifying the element data corresponding to the page element based on the update data includes: Passing the updated data to the parent component by way of callback; Modify the element data corresponding to the page element through the parent component; Based on the modified element data, the element data corresponding to the page element in the configuration form component is synchronously updated.

2. The method according to claim 1, characterized in that: The method further comprises: In response to an update operation on a page element in the configuration form component, obtaining update data corresponding to the update operation; Modify the element data corresponding to the page element based on the update data; Based on the modified element data, the page element in the preview view component is synchronously updated.

3. The method according to claim 1, characterized in that The synchronously updating the element data corresponding to the page element in the configuration form component based on the modified element data includes: Passing the modified element data into the configuration form component through the parent component; The element data corresponding to the page element in the configuration form component is synchronously updated.

4. The method according to claim 1, characterized in that: The method further comprises: The element data of the page elements of the page are passed into the preview view component and the configuration form component through the parent component.

5. The method according to claim 1, characterized in that The method further comprises: Data communication is performed between the parent component and the preview view component and between the parent component and the configuration form component using the JSON format.

6. The method according to any one of claims 1 to 5, characterized in that The method further comprises: The update operation of the page element in the preview view component is monitored by monitoring events.

7. A page processing device, characterized in that: The page includes a preview view component and a configuration form component, and the preview view component and the configuration form component are bidirectionally bound to element data of page elements of the page, and the device includes: A first update data acquisition module, configured to, in response to an update operation on a page element in the preview view component, acquire update data corresponding to the update operation; the update operation includes one or more of drag and drop, zoom, and edit content; A first data modification module, used to modify the element data corresponding to the page element based on the update data; the element data includes: width attribute, height attribute, left position attribute, top position attribute, element value attribute; The preview view component and the configuration form component have a common parent component, the parent component is used to save the element data of the page element of the page, and the first data modification module is used to transfer the update data to the parent component by callback; and modify the element data corresponding to the page element by the parent component; The first synchronous updating module is used to synchronously update the element data corresponding to the page element in the configuration form component based on the modified element data.

8. A computer readable medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the page processing method according to any one of claims 1 to 6 is implemented.

9. An electronic device, characterized in that: include: one or more processors; A storage device for storing one or more programs, when the one or more programs are executed by the one or more processors, enables the one or more processors to implement the page processing method as described in any one of claims 1 to 6.

Images