Data processing method, device and equipment
By obtaining and generating document object model fragments to render the display effect of page components, it solves the problem that developers need to write rendering code to modify the display effect of complex components, reduces skill requirements and expands the user base.
Patent Information
- Application Number
- CN202010738151.2
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2020-07-28
- Publication Date
- 2025-02-18
- Estimated Expiration
- 2040-07-28
AI Technical Summary
During the visualization process of the page, for complex components that need to receive input data, developers need to write rendering code to modify the default display effect, which requires high skills for developers.
By obtaining the attribute configuration operation of the target attributes of the component in the page, a corresponding document object model fragment is generated, and the target attributes are rendered and displayed on the page based on the document object type structure when the preset conditions are met.
It realizes that the DOM field that determines the display effect of component attributes is opened to developers in the form of attribute configuration, so that developers do not need to write rendering code, reduces skill requirements, and expands the user range of the page visualization platform.
Smart Images
Figure CN114003213B_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of computer technology, and in particular to a data processing method, device and equipment. Background Art
[0002] During the visual construction process, developers can build pages by dragging and dropping configuration components, making the construction of front-end pages more convenient and shortening the development process.
[0003] For some complex components that need to receive input data, their display is related to the input data. During the visual construction of the page, if you want to modify the default display effect of this type of component, for example, you need to modify a column in the table component to display a tag with white text on a gray background, then the developer needs to write the rendering code of this type of component to modify the rendering effect of this type of component in the page to the method specified by the rendering code.
[0004] However, the above method has the problem of high requirements on developers. Summary of the invention
[0005] The embodiments of the present application provide a data processing method, device and equipment to solve the problem that the visualization construction of pages in the prior art has high requirements for developers.
[0006] In a first aspect, an embodiment of the present application provides a data processing method, including:
[0007] In the process of visually building a page, obtaining an attribute configuration operation for a target attribute of a component in the page, wherein the attribute configuration operation is used to configure a subcomponent under the target attribute to configure a display effect of the target attribute;
[0008] Generate a document object model fragment corresponding to the attribute configuration operation;
[0009] When a preset condition is met, the target attribute is rendered and displayed on the page according to the document object type structure.
[0010] In a second aspect, an embodiment of the present application provides a data processing method, including:
[0011] Obtaining the page code of the page; the page is obtained by visual construction, and the visual construction of the page includes an attribute configuration operation for a target attribute of a component in the page, the attribute configuration operation is used to configure a subcomponent under the target attribute, and the rendering code of the target attribute in the page code is obtained based on a document object model fragment corresponding to the attribute configuration operation;
[0012] Based on the page code, the page is displayed.
[0013] In a third aspect, an embodiment of the present application provides a data processing device, including:
[0014] An acquisition module, used to acquire, during the visual construction process of a page, an attribute configuration operation for a target attribute of a component in the page, wherein the attribute configuration operation is used to configure a subcomponent under the target attribute to configure a display effect of the target attribute;
[0015] A generating module, used for generating a document object model fragment corresponding to the attribute configuration operation;
[0016] A rendering and display module is used to render and display the target attribute in the page according to the document object type structure when a preset condition is met.
[0017] In a fourth aspect, an embodiment of the present application provides a data processing device, including:
[0018] an acquisition module, used for acquiring a page code of a page; the page is obtained by visual construction, and the visual construction of the page includes an attribute configuration operation for a target attribute of a component in the page, the attribute configuration operation is used to configure a subcomponent under the target attribute, and the rendering code of the target attribute in the page code is obtained based on a document object model fragment corresponding to the attribute configuration operation;
[0019] The display module is used to display the page based on the page code.
[0020] In a fifth aspect, an embodiment of the present application provides a terminal, comprising: a memory and a processor; wherein the memory is used to store one or more computer instructions, wherein the one or more computer instructions, when executed by the processor, implement the method described in any one of the first aspects.
[0021] In a sixth aspect, an embodiment of the present application provides a terminal, comprising: a memory, a processor; wherein the memory is used to store one or more computer instructions, wherein the one or more computer instructions, when executed by the processor, implement the method as described in any one of the second aspects.
[0022] An embodiment of the present application also provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, wherein the computer program includes at least one section of code, and the at least one section of code can be executed by a computer to control the computer to execute the method as described in any one of the first aspects.
[0023] An embodiment of the present application also provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, wherein the computer program includes at least one section of code, and the at least one section of code can be executed by a computer to control the computer to execute a method as described in any one of the second aspects.
[0024] An embodiment of the present application further provides a computer program, which, when executed by a computer, is used to implement the method as described in any one of the first aspects.
[0025] An embodiment of the present application further provides a computer program, which, when executed by a computer, is used to implement the method as described in any one of the second aspects.
[0026] The data processing method, apparatus and device provided in the embodiments of the present application obtain the attribute configuration operation for the target attribute of the component in the page, generate a document object model fragment corresponding to the attribute configuration operation, and render and display the target attribute in the page based on the document object type structure under the preset conditions. For complex components that need to receive input data, the DOM fields that determine the display effect of their attributes can be opened to developers in the form of attribute configuration, so that developers do not need to modify the display effect of the component by writing rendering code, thereby reducing the skill requirements for developers and helping to expand the user range of the page visualization building platform. BRIEF DESCRIPTION OF THE DRAWINGS
[0027] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, a brief introduction will be given below to the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.
[0028] Figure 1 A schematic diagram of an application scenario of an embodiment of the present application;
[0029] Figure 2A and Figure 2B A schematic diagram of the display effect of the components provided in the embodiment of the present application;
[0030] Figure 3 A flowchart of a data processing method provided in one embodiment of the present application;
[0031] Figure 4A-4F A schematic diagram of the interface of the visual building platform provided in the embodiment of the present application;
[0032] Figure 5 A flowchart of a data processing method provided by another embodiment of the present application;
[0033] Figure 6 A schematic diagram of the structure of a data processing device provided in one embodiment of the present application;
[0034] Figure 7 A schematic diagram of the structure of a data processing device provided in another embodiment of the present application;
[0035] Figure 8 A schematic diagram of the structure of a terminal provided in an embodiment of the present application;
[0036] Fig. 9 A schematic diagram of the structure of a terminal provided in another embodiment of the present application. DETAILED DESCRIPTION
[0037] In order to make the purpose, technical solution and advantages of the embodiments of the present application clearer, 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 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 are within the scope of protection of this application.
[0038] The terms used in the embodiments of the present application are only for the purpose of describing specific embodiments, and are not intended to limit the present application. The singular forms of "a", "said", and "the" used in the embodiments of the present application and the appended claims are also intended to include plural forms, unless the context clearly indicates other meanings, and "multiple" generally includes at least two, but does not exclude the inclusion of at least one.
[0039] It should be understood that the term "and / or" used in this article is only a description of the association relationship of associated objects, indicating that there can be three relationships. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. In addition, the character " / " in this article generally indicates that the associated objects before and after are in an "or" relationship.
[0040] As used herein, the words "if" and "if" may be interpreted as "at the time of" or "when" or "in response to determining" or "in response to detecting", depending on the context. Similarly, the phrases "if it is determined" or "if (stated condition or event) is detected" may be interpreted as "when it is determined" or "in response to determining" or "when detecting (stated condition or event)" or "in response to detecting (stated condition or event)", depending on the context.
[0041] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a product or system including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such a product or system. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the product or system including the elements.
[0042] In addition, the step sequence in the following method embodiments is only an example and not a strict limitation.
[0043] In order to facilitate those skilled in the art to understand the technical solution provided by the embodiments of the present application, the technical environment in which the technical solution is implemented is described below.
[0044] In the related art, for some complex components that need to receive input data, if the default display effect needs to be modified, the developer needs to write rendering code to modify the default display effect. Since the requirements for developers are high, a processing method that can reduce the requirements for developers is urgently needed in the related art.
[0045] Based on actual technical requirements similar to those described above, the data processing method provided in this application can use technical means to reduce the requirements for developers.
[0046] The data processing methods provided in various embodiments of the present application are described in detail below through an exemplary application scenario.
[0047] like Figure 1 As shown, the application scenario of the embodiment of the present application may include a terminal 11 and a server 12. The terminal 11 and the server 12 are communicatively connected, and the developer can use the terminal 11 to visually build the page. In the process of using the terminal 11 for visual construction, the terminal 11 can interact with the server 12 as needed to obtain corresponding data from the server 12, or send the data to be stored to the server 12 for storage. Among them, the terminal 11 can be, for example, a tablet computer, a personal computer (Personal Computer, PC), etc. Of course, in other embodiments, the terminal 11 can also be other types, which is not limited in this application. The server 12 may include any form of data storage server such as a cloud server and a distributed server.
[0048] Terminal 11 can provide developers with a visual operation interface, in which developers can drag and drop components. Components can be native elements in Hyper Text Markup Language (HTML), that is, Document Object Model (DOM) elements. Components can also be components provided by a component library after certain encapsulation of DOM elements, such as buttons with white text on a blue background and developer-defined components. Among them, the component library can be, for example, antd, which is a React user interface (User Interface, UI) component library based on the Ant Design system. Of course, in other embodiments, the component library can also be other types, which is not limited in this application.
[0049] The components usually include complex components that need to receive input data, such as a table component in the antd component library, a drop-down component in the antd component library, a select component in the antd component library, etc. Of course, in other embodiments, the complex components can also be other types, which is not limited in this application.
[0050] Taking the Table component as an example, when the user drags the Table component to the page, the default display effect of the Table component on the page can be as follows: Figure 2A As shown in the figure, the default number of rows of the Table component is 2, and the data displayed in the component is also the default data. After the developer binds the input data to the Table component, the Table component can display the bound data with the default display effect. The display result can be as follows Figure 2B In traditional technology, when developers further need a default display effect, such as Figure 2B When the "Age" column is displayed as a button with white text on a gray background, you need to add corresponding rendering code to the current code of the page to achieve it.
[0051] It should be noted that Figure 2A and Figure 2B The visual interface shown is only an example. Figure 2A and Figure 2B The data in the table are just examples.
[0052] Figure 1The terminal 11 in the embodiment of the present application can execute the method provided by the embodiment of the present application, by obtaining the attribute configuration operation for the target attribute of the component in the page, the attribute configuration operation is used to configure the sub-component under the target attribute to configure the display effect of the target attribute, generate a document object model fragment corresponding to the attribute configuration operation, and render and display the target attribute in the page based on the document object type structure under the preset conditions. For complex components that need to receive input data, the DOM fields that determine the display effect of their attributes can be opened to developers in the form of attribute configuration, so that developers do not need to modify the display effect of the component by writing rendering code, thereby reducing the skill requirements for developers and helping to expand the user range of the page visualization building platform.
[0053] In conjunction with the accompanying drawings, some embodiments of the present application are described in detail below. In the absence of conflict, the following embodiments and features in the embodiments can be combined with each other.
[0054] Figure 3 This is a flow chart of a data processing method provided in an embodiment of the present application. The execution subject of this embodiment may be Figure 1 Terminal 11 in. Figure 3 As shown, the method of this embodiment may include:
[0055] Step 31, during the visual construction process of the page, obtaining an attribute configuration operation for a target attribute of a component in the page, wherein the attribute configuration operation is used to configure a subcomponent under the target attribute to configure a display effect of the target attribute;
[0056] Step 32, generating a document object model fragment corresponding to the attribute configuration operation;
[0057] Step 33: When a preset condition is met, the target attribute is rendered and displayed on the page according to the document object type structure.
[0058] In the embodiment of the present application, the component is a component that requires data input, and the target attribute is any type of attribute in the component that requires data input and needs to modify the default display effect. Taking the component as a Table component as an example, the target attribute can be a column attribute, for example, Figure 2A .
[0059] For example, Figure 4AAs shown, the interface of the visual building platform may include three areas, namely, a component selection area 41, a building area 42, and a configuration area 43. Among them, the component selection area 41 can be used to display the components that can be provided by the visual building platform, and the developer can select the component from the component selection area 41. The building area 42 is used as a page building area, and the developer can select the component that needs to be built in the page from the component selection area 41 and drag it to the page building area. The developer can also select the component that needs to be configured in the page building area, and accordingly, the developer in the configuration area 43 can configure the component selected in the page building area. It should be noted that Figure 4A The interface of the visual building platform shown is only an example.
[0060] In one embodiment, after a developer selects a component in the page building area, a component configuration interface for the component may be displayed in the configuration area 43, and the component configuration interface may include a property configuration entry. When the component requires data input, the component configuration interface may also include a data input setting entry to facilitate the developer to configure the input data of the component. For example, when a developer drags a Table component to the page building area and selects the Table component in the page building area, Figure 4B As shown, the default display effect of the Table component can be displayed in the page building area, and the configuration area 43 can be used as the component configuration interface of the Table component. The component configuration interface can include two entrances: "column configuration" of the table column and "edit" of the data source, among which "column configuration" can be used as the attribute configuration entrance, and "edit" can be used as the setting entrance for inputting data. Of course, the component configuration interface can also include other contents, such as the setting entrance of the component border, the setting entrance of the component background, etc., which are not limited in this application.
[0061] It should be noted that Figure 4B The dashed border of the Table component indicates that the Table component is currently selected, and the configuration area can display "Currently selected: Table" accordingly. Figure 4B The interface of the visual building platform shown is only an example.
[0062] Exemplarily, after obtaining the trigger operation for the attribute configuration entry in the component configuration interface, the terminal may display the attribute configuration interface in the configuration area 43, and the attribute configuration interface may include at least one attribute operation entry. Figure 4B Based on the developer click Figure 4B After clicking "Column Configuration" in the visualization platform interface, the following Figure 4C See Figure 4CThe attribute configuration interface may include operation entries for three attributes titled "name", "age" and "gender", and the operation entry includes an editing entry. Of course, the attribute configuration interface may also include other content, such as an entry for adding table columns, an entry for deleting attributes, etc., which is not limited in this application. It should be noted that Figure 4C The interface of the visual building platform shown is only an example.
[0063] Alternatively, in another embodiment, after the developer selects a component in the page building area, a configuration interface may be displayed in the configuration area 43 , and the configuration interface may directly include an operation entry for at least one attribute of the component.
[0064] After the terminal obtains the developer's trigger operation for the editing entry of at least one attribute, the corresponding setting interface can be displayed in the interface of the visual construction platform to obtain the attribute configuration operation. Thus, the developer can change the display effect of the attribute by setting the attribute, thereby changing the default display effect of the component.
[0065] Considering that when setting the display effect of a certain attribute, it is usually necessary to further set components under the attribute, and finally set the display effect of the attribute by means of subcomponents under the attribute. In order to facilitate developers to set the display effect of the attribute, the attribute configuration operation may include a visual construction operation of the subcomponents under the target attribute, that is, the developer can set the display effect of the target attribute by means of visual construction.
[0066] In one embodiment, the property configuration operation may specifically include a drag operation on the subcomponent under the target property; before the property configuration operation of obtaining the target property of the component in the page, it may also include: displaying a property building area for the target property, and the property building area is used to obtain the drag operation on the subcomponent under the target property.
[0067] Optionally, the construction area 42 can be used as an attribute construction area. Figure 4C Based on the developer click Figure 4C After clicking the edit button on the right side of "Age", the interface of the visual building platform can be as follows Figure 4D See Figure 4D , build area 42 as an attribute building area for age attributes, Figure 4D In the component selection area, table components, tag components, etc. can be provided. It can be understood that, based on the construction area 42 being used as the attribute construction area, it can be switched from being used as the attribute construction area to being used as the page construction area according to needs, for example, it can be switched from being used as the attribute construction area to being used as the page construction area. Figure 4DThe "Back" button implementation provided in the property building area.
[0068] Furthermore, the developer can select at least one component in the component selection area 41 by dragging and drop and drag it to the property building area, such as Figure 4D As shown, the developer can select the label component and drag it to the property building area. The default display result of the label component is, for example, a label with white text on a gray background and the label content is "Please enter content".
[0069] In the case where the default display effect of the subcomponent under the target attribute does not meet the needs of the developer, the terminal can also allow the developer to further modify the default display effect of the subcomponent under the target attribute, which is conducive to improving flexibility. Based on this, the attribute configuration operation can also include configuration operations for the subcomponents under the target attribute. Correspondingly, the method provided in the embodiment of the present application can also include: when a component is selected in the attribute building area, a component configuration interface for the component is displayed, and the component configuration interface can be used to obtain configuration operations for the subcomponents under the target attribute.
[0070] like Figure 4D As shown, when the developer selects a label component in the property building area, the configuration area can display a component configuration interface for the selected label component. The developer can enter configuration operations for the label component in the component configuration interface of the label component. It should be noted that Figure 4D The dotted border of the label component indicates that the label component is currently selected, and the configuration area may display "Currently selected: label" accordingly.
[0071] Exemplarily, the configuration operation may specifically include a style configuration operation for the subcomponent under the target attribute, and the style configuration operation is used to configure the style of the subcomponent under the target attribute, such as background, border, etc. Of course, in other embodiments, the style configuration operation may also configure other styles of the subcomponent under the target attribute, and this application does not limit this. Thus, the structure of the DOM fragment can be opened to developers in the form of drag-and-drop construction, wherein the DOM fragment determines the display effect of the target attribute.
[0072] For example, Figure 4D As shown, the component configuration interface of the label component can display configuration entries such as "background", "text", and "border", so that developers can further configure the style of the label component, for example, modify the background color, font color, border color, etc. of the label component. It is understandable that if a component is not styled, the style of the component can be the default style, for example Figure 4D The gray background and white text style of the label component.
[0073] And / or, the configuration operation may specifically include a data configuration operation for the subcomponent under the target attribute. The data configuration operation may be used to bind the input data of the subcomponent under the target attribute. Thus, the data of the DOM fragment may be opened to the developer in a data binding manner.
[0074] It should be noted that the input data of the subcomponent under the target attribute may be data of at least some fields in the input data of the component to which the target attribute belongs. FIG. 4B to FIG. 4D For example, Figure 4D The input data for the label component shown can be Figure 4B Data of at least some fields of input data of the table component shown.
[0075] For example, Figure 4D As shown, the component configuration interface of the label component can also display the setting entry for input data, that is, the input box to the right of "label content", in which the developer can set the input data of the label component by entering an expression. It should be noted that Figure 4D The interface of the visual building platform shown is only an example.
[0076] It should be noted that the number of subcomponents under the target attribute can be one or more. When the number of subcomponents under the target attribute is multiple, the developer can select any one or more of the multiple components for data binding according to the developer's needs. It is understandable that when a component is not data bound, the input data of the component can be default data.
[0077] In the embodiment of the present application, after obtaining the attribute configuration operation for the target attribute of the component in the page, a document object model fragment (i.e., DOM fragment) corresponding to the attribute configuration operation can be generated. The document object model fragment is used to describe the document object model under the target attribute. Figure 4D The input data of the label component dragged in the attribute building area is as follows Figure 4B and Figure 4C The default data shown in the figure, the document object model described by the DOM fragment corresponding to the attribute configuration operation can be specifically that there are two parallel tags under the gender column, one of which has a gray background with white text and the text is "female", and the other has a gray background with white text and the text is "male". It should be noted that the root element of the DOM fragment corresponding to the attribute configuration operation is not html.
[0078] In order to facilitate subsequent processing, after the DOM fragment is generated, the document object model fragment and the target attribute can also be stored in correspondence. In one embodiment, the document object model fragment and the target attribute are stored in correspondence, which can specifically include: storing the document object model fragment in the attribute data of the target attribute. In this way, the document object model fragment obtained by the attribute configuration method can be further stored as attribute data.
[0079] In order to facilitate data processing, the attributes that allow input data configuration can be distinguished. That is, the attributes that allow input data configuration can belong to a preset type, and the attributes that do not belong to the preset type can indicate that input data configuration is not allowed. Based on this, in the case where the target attribute belongs to a preset type, the attribute data has a first preset field, and the first preset field is used to store the document object model fragment, and the preset type is used to characterize that the target attribute allows binding input data. Among them, the preset type can be defined as a ui Render type, for example. Of course, in other embodiments, the preset type can also be identified by other names, and this application does not limit this.
[0080] Some special components need to have their sub-items wrapped by other components, such as the aforementioned Select component and Dropdown component, among which all sub-items of the Select component need to be wrapped by an Option sub-component, and all sub-items of the Dropdown component need to be wrapped by a Menu sub-component. For such special components, the attribute data of the target attribute may also include the identifiers of other components. Based on this, when the component includes other components and the other components include the target attribute, the attribute data has a second preset field, and the second preset field is used to store the identifiers of the other components to which the document object model fragment belongs.
[0081] In the embodiment of the present application, the component can be expressed by a protocol to reduce the customization of the component. The protocol expression of the component can be, for example, as follows:
[0082]
[0083] Among them, componentName is used to record the component name. dataSource is used to mark the data source of the component. The data source in such components is generally an array type. props is used to mark a series of properties of the component. Since the component may have many properties, it is an object array here. Each item in the props array is a description of a property, where name is the name of the property and type is used to mark the type of the property. When the property is of uiRender type, a dom field can be provided to record the DOM structure returned by the user dragging. Params is used to record which fields of the data source will be passed to the DOM structure recorded by the dom field, so that the DOM fragment can bind data to obtain the DOM fragment. hookDOMWraper is used to record other components that wrap the DOM structure.
[0084] It can be understood that, in the above protocol expression, the dom field+Params field is the aforementioned first preset field, and the hookDOMWraper field is the aforementioned second preset field.
[0085] In an embodiment of the present application, after a DOM fragment corresponding to an attribute configuration operation is generated, the target attribute can be rendered and displayed on the page based on the DOM fragment under a preset condition. Exemplarily, a rendering code corresponding to the DOM fragment can be obtained by parsing through a preset protocol parsing process, and the target attribute can be rendered and displayed on the page based on the rendering code. Thus, the rendering code for the target attribute can be obtained by parsing instead of the developer writing the rendering code for the target attribute.
[0086] Among them, the preset condition may be, for example, obtaining a click operation on a refresh button, or obtaining a click operation on a save button, etc. Of course, in other embodiments, the preset condition may also be other types of conditions, which is not limited in this application.
[0087] To configure the operation with properties such as Figure 4D As shown, dragging the label component to the attribute building area is taken as an example. The result of rendering the target attribute on the page based on the DOM fragment can be as follows Figure 4E As shown. It can be seen that Figure 4E In the example, the input data of the three columns of attributes are all default data, and the display mode of the gender column is changed from the default display to a label-style gray-background white text display.
[0088] It should be noted that Figure 4D The example above takes the input data of the Table component as the default data. Assume that the attribute configuration operation also sets the input data of the Table component to Figure 2BAs shown, the result of rendering the target attribute based on the DOM fragment and displaying it on the page can be as follows Figure 4F As shown. It can be seen that Figure 4F In the example, the input data of the three columns of attributes are all data set by the attribute configuration operation, and the display mode of the gender column is changed from the default display to the label style gray background white text display.
[0089] It should be noted that Figure 4E and Figure 4F The interface of the visual building platform shown in is only an example. Figure 4E and Figure 4F The display effects of the name column and age column can also be set using the method provided in the embodiment of the present application, which will not be repeated here.
[0090] The data processing method provided in the embodiment of the present application obtains the attribute configuration operation for the target attribute of the component in the page, generates a document object model fragment corresponding to the attribute configuration operation, and renders and displays the target attribute in the page based on the document object type structure under preset conditions. For complex components that need to receive input data, the DOM fields that determine the display effect of their attributes can be opened to developers in the form of attribute configuration, so that developers do not need to modify the display effect of the component by writing rendering code, thereby reducing the skill requirements for developers and helping to expand the user range of the page visualization building platform.
[0091] Figure 5 This is a flow chart of a data processing method provided by another embodiment of the present application. The execution subject of this embodiment can be a display using Figure 3 The terminal of the page built by the method shown, such as a smart phone, a wearable device, etc. Figure 5 As shown, the method of this embodiment may include:
[0092] Step 51, obtaining the page code of the page; the page is obtained by visual construction, and the visual construction of the page includes an attribute configuration operation for a target attribute of a component in the page, the attribute configuration operation is used to configure a subcomponent under the target attribute, and the rendering code of the target attribute in the page code is obtained based on a document object model fragment corresponding to the attribute configuration operation;
[0093] Step 52: display the page based on the page code.
[0094] It should be noted that for details on how to obtain the above page through visual construction, please refer to Figure 3 The detailed description of the illustrated embodiment will not be repeated here.
[0095] The data processing method provided in the embodiment of the present application obtains the page code of the page and displays the page based on the page code, wherein the page is obtained by visual construction, and the visual construction of the page includes attribute configuration operations for target attributes of components in the page, and the rendering code of the target attributes in the page code is obtained based on the document object model fragment corresponding to the attribute configuration operation, so that the display effect of complex components in the page displayed by the terminal can be obtained by the developer in the form of attribute configuration, thereby reducing the skill requirements for the developer.
[0096] Figure 6 A schematic diagram of the structure of a data processing device provided in one embodiment of the present application; Figure 6 As shown, this embodiment provides a data processing device, which can execute the above data processing method. Specifically, the data processing device may include:
[0097] The acquisition module 61 is used to acquire the attribute configuration operation for the target attribute of the component in the page during the visual construction of the page, and the attribute configuration operation is used to configure the subcomponent under the target attribute to configure the display effect of the target attribute;
[0098] A generating module 62, used to generate a document object model fragment corresponding to the attribute configuration operation;
[0099] The rendering and display module 63 is used to render and display the target attribute in the page according to the document object type structure when a preset condition is met.
[0100] Optionally, the attribute configuration operation includes a visual construction operation of subcomponents under the target attribute.
[0101] Optionally, the attribute configuration operation specifically includes the dragging operation on the subcomponent under the target attribute;
[0102] The device further includes: a display module, which is used to display an attribute construction area for the target attribute, and the attribute construction area is used to obtain a drag operation for a subcomponent under the target attribute.
[0103] Optionally, the attribute configuration operation also includes configuration operations for sub-components under the target attribute; the display module is also used to display a component configuration interface for the component when a component is selected in the attribute building area, and the component configuration interface is used to obtain configuration operations for sub-components under the target attribute.
[0104] Optionally, the configuration operation specifically includes a data configuration operation for the subcomponent under the target attribute, and / or a style configuration operation for the subcomponent under the target attribute.
[0105] Optionally, the generating module 62 is further configured to store the document object model fragments and the target attributes in correspondence with each other.
[0106] Optionally, the generating module 62 is specifically configured to store the document object model fragment in the attribute data of the target attribute.
[0107] Optionally, when the target attribute is of a preset type, the attribute data has a first preset field, the first preset field is used to store the document object model fragment, and the preset type is used to indicate that the target attribute allows binding of input data.
[0108] Optionally, when the component includes other components and the other components include the target attribute, there is a second preset field in the attribute data, and the second preset field is used to store the identifier of the other component to which the document object model fragment belongs.
[0109] Optionally, the rendering and display module 63 is specifically used to parse and obtain a rendering code corresponding to the document object type structure, and render and display the target attribute on the page based on the rendering code.
[0110] Figure 6 The device shown can perform Figure 3 For the method of the embodiment shown in the figure, the part not described in detail in this embodiment can be referred to Figure 3 The implementation process and technical effects of this technical solution refer to Figure 3 The description in the illustrated embodiment will not be repeated here.
[0111] In one possible implementation, Figure 6 The structure of the data processing device shown can be realized as a terminal. Figure 7 As shown, the terminal may include: a processor 71 and a memory 72. The memory 72 is used to store the support terminal to execute the above Figure 3 The program of the data processing method provided in the illustrated embodiment, the processor 71 is configured to execute the program stored in the memory 72.
[0112] The program includes one or more computer instructions, wherein when the one or more computer instructions are executed by the processor 61, the following steps can be implemented:
[0113] In the process of visually building a page, obtaining an attribute configuration operation for a target attribute of a component in the page, wherein the attribute configuration operation is used to configure a subcomponent under the target attribute to configure a display effect of the target attribute;
[0114] Generate a document object model fragment corresponding to the attribute configuration operation;
[0115] When a preset condition is met, the target attribute is rendered and displayed on the page according to the document object type structure.
[0116] Optionally, the processor 71 is further configured to execute the aforementioned Figure 3 All or part of the steps in the illustrated embodiments.
[0117] The structure of the terminal may also include a communication interface 73 for the terminal to communicate with other devices or a communication network.
[0118] Figure 8 A schematic diagram of the structure of a data processing device provided in another embodiment of the present application; see attached Figure 8 As shown, this embodiment provides a data processing device, which can execute the above data processing method. Specifically, the data processing device may include:
[0119] The acquisition module 81 is used to acquire the page code of the page; the page is obtained by visual construction, and the visual construction of the page includes an attribute configuration operation for a target attribute of a component in the page, the attribute configuration operation is used to configure a subcomponent under the target attribute, and the rendering code of the target attribute in the page code is obtained based on a document object model fragment corresponding to the attribute configuration operation;
[0120] The display module 82 is used to display the page based on the page code.
[0121] Figure 8 The device shown can perform Figure 5 For the method of the embodiment shown in the figure, the part not described in detail in this embodiment can be referred to Figure 5 The implementation process and technical effects of this technical solution refer to Figure 5 The description in the illustrated embodiment will not be repeated here.
[0122] In one possible implementation, Figure 8 The structure of the data processing device shown can be realized as a terminal. Fig. 9 As shown, the terminal may include: a processor 91 and a memory 92. The memory 92 is used to store the support terminal to execute the above Figure 5 The program of the data processing method provided in the illustrated embodiment, the processor 91 is configured to execute the program stored in the memory 92.
[0123] The program includes one or more computer instructions, wherein when the one or more computer instructions are executed by the processor 91, the following steps can be implemented:
[0124] Obtaining the page code of the page; the page is obtained by visual construction, and the visual construction of the page includes an attribute configuration operation for a target attribute of a component in the page, the attribute configuration operation is used to configure a subcomponent under the target attribute, and the rendering code of the target attribute in the page code is obtained based on a document object model fragment corresponding to the attribute configuration operation;
[0125] Based on the page code, the page is displayed.
[0126] Optionally, the processor 91 is further configured to execute the aforementioned Figure 5 All or part of the steps in the illustrated embodiments.
[0127] The structure of the terminal may also include a communication interface 93 for the terminal to communicate with other devices or a communication network.
[0128] In addition, the present application embodiment provides a computer storage medium for storing computer software instructions used by the terminal, which includes instructions for executing the above Figure 3 The program involved in the data processing method in the method embodiment shown.
[0129] The present application embodiment provides a computer storage medium for storing computer software instructions used by a terminal, which includes instructions for executing the above Figure 5 The program involved in the data processing method in the method embodiment shown.
[0130] The device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Ordinary technicians in this field can understand and implement it without paying creative labor.
[0131] Through the description of the above embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by adding a necessary general hardware platform, and of course can also be implemented by combining hardware and software. Based on such an understanding, the above technical solution is essentially or the part that contributes to the prior art can be embodied in the form of a computer product, and the present application can be in the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program codes.
[0132] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable device to generate a machine, so that the instructions executed by the processor of the computer or other programmable device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.
[0133] These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable device to work in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture including an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.
[0134] These computer program instructions may also be loaded onto a computer or other programmable device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for executing on the computer or other programmable device to implement the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.
[0135] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.
[0136] The memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.
[0137] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.
[0138] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit it. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or replace some or all of the technical features therein with equivalents. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present application.
Claims
1. A data processing method, characterized in that: include: In the process of visually building the page, a style configuration operation and a data configuration operation of a subcomponent for setting at least one of a background style, a font style or a border style of the target attribute and data under a target attribute of a component in the page are obtained; Generate a corresponding document object model DOM structure according to the style configuration operation, record the DOM structure in a field under the target attribute of the component, determine a field in the data source of the component that needs to be transferred to the field according to the data configuration operation, and record the field in another field under the target attribute for the DOM structure to bind data, thereby obtaining a corresponding DOM fragment; Under the preset conditions, the rendering code corresponding to the DOM fragment is parsed, and the target attribute is rendered and displayed on the page based on the rendering code.
2. The method according to claim 1, characterized in that Before obtaining the sample configuration operation and data configuration operation of the subcomponent under the target attribute of the component in the page, it also includes: An attribute building area for the target attribute is displayed, and the attribute building area is used to obtain a drag operation for a subcomponent under the target attribute.
3. The method according to claim 2, characterized in that The method further comprises: When a component is selected in the property building area, a component configuration interface for the component is displayed, and the component configuration interface is used to obtain style configuration operations and data configuration operations of the subcomponent under the target property.
4. The method according to claim 1, characterized in that: In the case that the target attribute belongs to a preset type, the attribute data has a first preset field, the first preset field is the one field and the other field, and the preset type is used to indicate that the target attribute allows binding of input data.
5. The method according to claim 2, characterized in that: In the case where the component includes other components and the other components include the target attribute, there is a second preset field in the attribute data, and the second preset field is used to store the identifier of the other component to which the document object model fragment belongs.
6. A data processing method, characterized in that: include: Get the page code of the page; The page is obtained by visual construction, and the visual construction of the page includes: obtaining a style configuration operation and a data configuration operation for setting at least one of the background style, font style or border style of the target attribute and the data subcomponent under the target attribute of the component in the page, generating a corresponding document object model DOM structure according to the style configuration operation, recording the DOM structure in a field under the target attribute of the component, and determining a field in the data source of the component that needs to be passed to the field according to the data configuration operation, recording the field in another field under the target attribute for the DOM structure to bind data, thereby obtaining a corresponding DOM fragment, and the rendering code of the target attribute in the page code is obtained by parsing the DOM fragment; Based on the page code, the page is displayed.
7. A data processing device, characterized in that: include: An acquisition module, used for acquiring, during the visual construction process of a page, a style configuration operation and a data configuration operation of a subcomponent for setting at least one of a background style, a font style or a border style of a target attribute and data of a target attribute under a target attribute of a component in the page; A generation module, configured to generate a corresponding document object model DOM structure according to the style configuration operation, record the DOM structure in a field under the target attribute of the component, and determine a field in the data source of the component that needs to be transferred to the field according to the data configuration operation, and record the field in another field under the target attribute for the DOM structure to bind data, thereby obtaining a corresponding document object model DOM fragment; The rendering and display module is used to parse the rendering code corresponding to the DOM fragment under preset conditions, and render and display the target attribute in the page based on the rendering code.
8. A data processing device, characterized in that: include: The acquisition module is used to obtain the page code of the page; The page is obtained by visual construction, and the visual construction of the page includes: obtaining a style configuration operation and a data configuration operation for setting at least one of the background style, font style or border style of the target attribute and the data subcomponent under the target attribute of the component in the page, generating a corresponding document object model DOM structure according to the style configuration operation, recording the DOM structure in a field under the target attribute of the component, and determining a field in the data source of the component that needs to be passed to the field according to the data configuration operation, recording the field in another field under the target attribute for the DOM structure to bind data, thereby obtaining a corresponding DOM fragment, and the rendering code of the target attribute in the page code is obtained by parsing the DOM fragment; The display module is used to display the page based on the page code.
9. A terminal, characterized in that: include: A memory, a processor; wherein the memory is used to store one or more computer instructions, wherein the one or more computer instructions, when executed by the processor, implement the method as described in any one of claims 1 to 5.
10. A terminal, characterized in that: include: A memory, a processor; wherein the memory is used to store one or more computer instructions, wherein the one or more computer instructions, when executed by the processor, implement the method as claimed in claim 6.