A data processing method and apparatus

Abstract

The application discloses a data processing method and device, and relates to the technical field of computers. A specific implementation of the method comprises the following steps: in response to a calling request of an application component, an interface request address is acquired, and parameters required to be transmitted into the interface request; a data request is sent according to the interface request address, and data returned by the interface is acquired based on the parameters required to be transmitted into the interface request; a query condition parameter or / and a rendering table header parameter is acquired, and is transmitted to a preset query component or / and a preset table component, a query area or / and a table area is generated based on the data returned by the interface, and the query area or / and the table area is combined and displayed on a page. Thus, the implementation of the application can solve the problems of high complexity of existing form production and poor user experience.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a data processing method and apparatus. Background Technology

[0002] Currently, the demand for automated office work is increasing, and different forms need to be created based on various business scenarios, thus requiring form configuration and management.

[0003] In the process of developing this application, the applicant discovered at least the following problems in the prior art:

[0004] Currently, creating forms requires users to call a component and then send an AJAX (Asynchronous Web Page Update) request through methods exposed by the application component to retrieve data before passing it to the application component, thus increasing the complexity of using the application component. Furthermore, it typically requires exposing two components for form queries: one for querying the table header and another for rendering the table body. This means users need to call two separate components for different functions to create the form, further increasing the complexity of using the application component. Summary of the Invention

[0005] In view of this, embodiments of this application provide a data processing method and apparatus that can solve the problems of high complexity in existing form creation and poor user experience.

[0006] To achieve the above objectives, according to one aspect of the embodiments of this application, a data processing method is provided, including responding to a call request from an application component, obtaining an interface request address and parameters required to be passed in the interface request; sending a data request according to the interface request address, obtaining data returned by the interface based on the parameters required to be passed in the interface request; obtaining query condition parameters and / or rendering table header parameters, passing them through to a preset query component and / or a preset table component, rendering a query area and / or a table area based on the data returned by the interface, and combining the query area and / or the table area to display on the page.

[0007] Optionally, the data returned by the interface can be obtained based on the parameters required to be passed in the interface request, including: obtaining the pagination field and the number of queries per page field according to the parameters required to be passed in the interface request, performing data queries, and obtaining the data returned by the interface.

[0008] Optionally, data can be retrieved by obtaining the pagination field and the number of queries per page field, including: calling the component library and retrieving data using the methods corresponding to the pagination field and the number of queries per page field, respectively.

[0009] Optionally, this includes: passing query condition parameters and / or rendering table header parameters as an array to a preset query component and / or a preset table component.

[0010] Optionally, before passing the query condition parameters and / or rendering table header parameters in the form of an array to the preset query component and / or preset table component, the method includes: identifying the type of the fields in the query condition parameters or rendering table header parameters, and configuring default values ​​or display methods for the fields based on the call request.

[0011] Optionally, obtaining query condition parameters and / or rendering table header parameters includes: identifying the application scenario based on the call request, determining the field information corresponding to the query condition parameters and / or rendering table header parameters, and generating the query condition parameters and / or rendering table header parameters.

[0012] Optionally, displaying the query area and table area together on the page includes: generating output information based on the query area and table area, and displaying the output information on the page.

[0013] In addition, this application also provides a data processing apparatus, including an acquisition module, used to respond to a call request from an application component, acquire an interface request address and parameters required to be passed in the interface request; send a data request according to the interface request address, and acquire the data returned by the interface based on the parameters required to be passed in the interface request; and a processing module, used to acquire query condition parameters and / or rendering table header parameters, pass them through to a preset query component and / or a preset table component, render and generate a query area and / or a table area based on the data returned by the interface, and combine the query area and / or the table area to display on the page.

[0014] An embodiment of the above application has the following advantages or beneficial effects: This application only requires passing the interface request address and interface input parameters as parameters to the component, which then processes them internally to achieve functions such as data request, query, and pagination. It eliminates the need to rely on component callback methods to perform data requests, thus improving development efficiency. Furthermore, only one component needs to be installed, and form query and pagination capabilities can be implemented by passing parameters through the interface.

[0015] The further effects of the aforementioned unconventional alternative methods will be explained below in conjunction with specific implementation methods. Attached Figure Description

[0016] The accompanying drawings are provided to better understand this application and do not constitute an undue limitation thereof. Wherein:

[0017] Figure 1 This is a schematic diagram of the main flow of the data processing method according to the first embodiment of this application;

[0018] Figure 2 This is a schematic diagram illustrating the rendering effect of the query component according to an embodiment of this application;

[0019] Figure 3 This is a schematic diagram illustrating the rendering effect of a table component according to an embodiment of this application;

[0020] Figure 4 This is a schematic diagram of the output page effect according to an embodiment of this application;

[0021] Figure 5 This is a timing diagram of a data processing method according to a second embodiment of this application;

[0022] Figure 6 This is a schematic diagram of the main modules of a data processing apparatus according to an embodiment of this application;

[0023] Figure 7 This is an exemplary system architecture diagram to which embodiments of this application can be applied;

[0024] Figure 8 This is a schematic diagram of the structure of a computer system suitable for implementing terminal devices or servers in the embodiments of this application. Detailed Implementation

[0025] The following description, in conjunction with the accompanying drawings, illustrates exemplary embodiments of this application, including various details to aid understanding. These should be considered merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of this application. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.

[0026] Figure 1 This is a schematic diagram of the main flow of the data processing method according to the first embodiment of this application, as shown below. Figure 1 As shown, the data processing method includes:

[0027] Step S101: In response to the application component's call request, obtain the interface request address and the parameters required to be passed in the interface request.

[0028] In some embodiments, application components can be installed using npm before performing step S101. npm is a package manager primarily used for JavaScript package management.

[0029] Furthermore, you can reference and globally register the application component in the `main.js` file within your Vue (Vue is a progressive JavaScript framework) project. This allows the application component to be used in any file within the Vue project, responding to application component requests throughout the Vue project. Example methods for referencing and registering application components:

[0030] import vTable from'@jdpop / v-table'

[0031] Vue.use(vTable)

[0032] Step S102: Send a data request according to the interface request address, and obtain the data returned by the interface based on the parameters required to be passed in the interface request.

[0033] In some embodiments, obtaining the data returned by the interface based on the parameters required by the interface request includes: obtaining the pagination field and the number of queries per page field according to the parameters required by the interface request, performing data queries, and obtaining the data returned by the interface. It can be seen that the user only needs to pass in the interface request address, and the application component internally handles data request processing and pagination queries. For example, the two parameters passed are: apiUrl is the interface request address, and apiParams is the parameter required by the interface request. After these two parameters are passed to the application component, the application component can send an interface request to obtain the data returned by the interface. Simultaneously, the application component internally can perform pagination queries and change the number of queries per page through the pageParam and pageSizeParam fields in the apiParams object, respectively, to change the page number and the number of queries per page, thereby realizing query and page number changing functions.

[0034] In a further embodiment, data retrieval is performed by obtaining the pagination field and the number of queries per page field, including calling the component library and performing data retrieval through the methods corresponding to the pagination field and the number of queries per page field, respectively. For example, the size-change method and current-change method exposed by the el-pagination component provided by elementUI (elementUI is a UI component library based on Vue) are called to implement pagination and change the number of queries per page, respectively.

[0035] Step S103: Obtain query condition parameters and / or rendering table header parameters, pass them through to the preset query component and / or preset table component, render and generate the query area and / or table area based on the data returned by the interface, and combine the query area and / or table area to display on the page.

[0036] In this embodiment, step S103 allows for the installation of only one application component, meaning only one application component is exposed. There's no need to assemble the query component and table component; only the input parameters need to be passed through to the query component (header) and the table component (body). Furthermore, the application component of this application acts as a receiver, distributing query conditions, table column display information, interface request addresses, and interface request parameters. Query condition parameters are passed to the query component, and table header rendering parameters are passed to the table component.

[0037] It should be noted that this application can obtain query condition parameters to pass through to the query component for rendering and generating a query area, which is then displayed on the page. It can also obtain table header parameters to pass through to the table component for rendering and generating a table area, which is then displayed on the page. Furthermore, it can obtain both query condition parameters and table header parameters to pass through to the query component and table component respectively for rendering and generating the query area and table area, and then combine the query area and table area to display on the page.

[0038] In some embodiments, query condition parameters and / or rendering table header parameters may be passed through as an array to a preset query component and / or a preset table component.

[0039] Preferably, the query condition parameters and the table header rendering parameters are represented by two-dimensional arrays, where the first parameter in the two-dimensional array represents the content displayed in the first row of the query component or table component, the second parameter in the two-dimensional array represents the content in the second row of the query component or table component, and so on.

[0040] Furthermore, query condition parameters are passed to the query component, which reads these parameters in a loop to render the data returned by the API onto the page based on the `type` parameter. Figure 2 As shown. The table header parameters are passed to the table component, and the component iterates through these parameters to render the data returned by the API onto the page based on the `type` parameter. Figure 3 As shown.

[0041] In some other embodiments, before passing the query condition parameters and / or rendering table header parameters in the form of an array to a preset query component and / or a preset table component, the method includes: identifying the type of the fields in the query condition parameters or rendering table header parameters, and configuring default values ​​or display methods for the fields based on the call request.

[0042] Ideally, the query condition parameters may include, but are not limited to: a `label` field, used to store the query condition name (e.g., the coupon name in the example); a `labelWidth` field, used to control the width of the query condition name (the default value in the example is '80px'); a `type` field, used to store the type of query condition (the example configuration displays it as an input box, supporting input boxes, dropdown lists, and time selection boxes); and an `attr` field, used to store the fields in the query interface for use by the query function. It can also include the number of rows for 'expand' and 'collapse' buttons (the default value is that these buttons are not displayed within 3 rows). And so on, not listed here.

[0043] The parameters for rendering the table header can include, but are not limited to: The `label` field, used to store the header text (e.g., coupon name, coupon validity period in the example); the `align` field, used to specify the alignment of the header text (the default in the example is center alignment); the `prop` field, used to store the corresponding data in the header (e.g., coupon ID: 391833105, testing a regular store coupon), and the data for the discount information is "X coupon"); It can also include whether to display pagination sub-segments (default is displayed); whether to support multi-select (default is not supported); and the page number setting field, specifying the number of data items displayed per page (default values ​​are 10, 50, 100, 200). And so on, not listed here.

[0044] In some further embodiments, obtaining query condition parameters and / or rendering table header parameters includes: identifying the application scenario based on the call request, determining the field information corresponding to the query condition parameters and / or rendering table header parameters, and generating the query condition parameters and / or rendering table header parameters.

[0045] As can be seen, this application allows for setting different query condition parameters and table header rendering parameters for different application scenarios. For example, corresponding query condition fields and table header rendering fields can be set for coupon application scenarios and new product update application scenarios, respectively. Therefore, this application allows for more flexible configuration of query condition parameters and table header rendering parameters, enabling dynamic form page display.

[0046] It is worth noting that displaying the query range and table range together on the page includes: generating output information based on the query range and table range, and then displaying the output information on the page. For example, as shown... Figure 4 As shown, the query area is set above the table area. It can be seen that this application can present the query area and table area in different ways according to different application scenarios and business needs.

[0047] Figure 5 This is a schematic diagram of the main flow of the data processing method according to the second embodiment of this application, as shown below. Figure 5 As shown, the data processing method includes:

[0048] Step S501: In response to the application component's call request, obtain the interface request address and the parameters required to be passed in the interface request.

[0049] Step S502: Send a data request according to the interface request address, and obtain the data returned by the interface based on the parameters required to be passed in the interface request.

[0050] Step S503: Based on the call request, identify the application scenario and determine the field information corresponding to the query condition parameters and the rendering table header parameters.

[0051] Step S504: Generate query condition parameters and render table header parameters.

[0052] Step S505: Identify the type of the field in the query condition parameters or the rendering table header parameters, and configure a default value or display method for the field based on the call request.

[0053] Step S506: Pass the query condition parameters and the rendered table header parameters to the preset query component and the preset table component in the form of an array.

[0054] Step S507: Render and generate the query area and table area based on the data returned by the interface.

[0055] Step S508: Generate output information based on the query area and table area, and display the output information on the page.

[0056] Figure 6 This is a schematic diagram of the main modules of a data processing apparatus according to an embodiment of this application, such as... Figure 6 As shown, the data processing device 600 includes an acquisition module 601 and a processing module 602. The acquisition module 601, in response to a call request from an application component, acquires the interface request address and the parameters required to be passed to the interface request; it sends a data request based on the interface request address and acquires the data returned by the interface based on the parameters required to be passed to the interface request. The processing module 602 acquires query condition parameters and / or rendering table header parameters, passes them through to a preset query component and / or a preset table component, renders and generates a query area and / or a table area based on the data returned by the interface, and combines the query area and / or the table area for display on the page.

[0057] In some embodiments, the acquisition module 601 acquires the data returned by the interface based on the parameters required to be passed in the interface request, including: acquiring the pagination field and the number of queries per page field according to the parameters required to be passed in the interface request, performing data query, and obtaining the data returned by the interface.

[0058] In some embodiments, the acquisition module 601 acquires the pagination field and the number of queries per page field to perform data queries, including: calling the component library and performing data queries using the methods corresponding to the pagination field and the number of queries per page field, respectively.

[0059] In some embodiments, the processing module 602 is further configured to:

[0060] Pass the query condition parameters and / or the rendered table header parameters as an array to the preset query component and / or the preset table component.

[0061] In some embodiments, before the processing module 602 passes the query condition parameters and / or the rendering table header parameters in the form of an array to the preset query component and / or the preset table component, it includes: identifying the type of the fields in the query condition parameters or the rendering table header parameters, and configuring default values ​​or display methods for the fields based on the call request.

[0062] In some embodiments, the processing module 602 obtains query condition parameters and / or rendering table header parameters, including: identifying the application scenario based on the call request, determining the field information corresponding to the query condition parameters and / or rendering table header parameters, and generating the query condition parameters and / or rendering table header parameters.

[0063] In some embodiments, the processing module 602 displays a combination of the query area and the table area on the page, including: generating output information based on the query area and the table area, and displaying the output information on the page.

[0064] It should be noted that the data processing method and the data processing device described in this application are related in terms of specific implementation, so repeated content will not be described again.

[0065] Figure 7 An exemplary system architecture 700 is shown that can be applied to the data processing method or data processing apparatus of the embodiments of this application.

[0066] like Figure 7 As shown, system architecture 700 may include terminal devices 701, 702, and 703, a network 704, and a server 705. Network 704 serves as the medium for providing communication links between terminal devices 701, 702, and 703 and server 705. Network 704 may include various connection types, such as wired or wireless communication links, or fiber optic cables, etc.

[0067] Users can use terminal devices 701, 702, and 703 to interact with server 705 via network 704 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 701, 702, and 703.

[0068] Terminal devices 701, 702, and 703 can be various electronic devices with data processing screens and support web browsing, including but not limited to smartphones, tablets, laptops, and desktop computers.

[0069] Server 705 can be a server that provides various services, such as a backend management server that supports users using terminal devices 701, 702, and 703 (for example only). The backend management server can analyze and process data such as received product information query requests, and feed back the processing results (such as target push information, product information - for example only) to the terminal devices.

[0070] It should be noted that the data processing method provided in the embodiments of this application is generally executed by server 705, and correspondingly, the computing device is generally located in server 705.

[0071] It should be understood that Figure 7 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.

[0072] The following is for reference. Figure 8 It shows a schematic diagram of the structure of a computer system 800 suitable for implementing a terminal device according to the embodiments of this application. Figure 8 The terminal device shown is merely an example and should not impose any limitations on the functionality and scope of use of the embodiments of this application.

[0073] like Figure 8 As shown, the computer system 800 includes a central processing unit (CPU) 801, which can perform various appropriate actions and processes based on programs stored in read-only memory (ROM) 802 or programs loaded from storage section 808 into random access memory (RAM) 803. The RAM 803 also stores various programs and data required for the operation of the computer system 800. The CPU 801, ROM 802, and RAM 803 are interconnected via a bus 804. An input / output (I / O) interface 805 is also connected to the bus 804.

[0074] The following components are connected to the I / O interface 805: an input section 805 including a keyboard, mouse, etc.; an output section 806 including a cathode ray tube (CRT), liquid crystal data processor (LCD), etc., and speakers, etc.; a storage section 808 including a hard disk, etc.; and a communication section 809 including a network interface card such as a LAN card, modem, etc. The communication section 809 performs communication processing via a network such as the Internet. A drive 810 is also connected to the I / O interface 805 as needed. A removable medium 811, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., is installed on the drive 810 as needed so that computer programs read from it can be installed into the storage section 808 as needed.

[0075] Specifically, according to the embodiments disclosed in this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments disclosed in this application include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication section 809, and / or installed from removable medium 811. When the computer program is executed by central processing unit (CPU) 801, it performs the functions defined above in the system of this application.

[0076] It should be noted that the computer-readable medium shown in this application can be a computer-readable signal medium or a computer-readable storage medium, or any combination of the two. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this application, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this application, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. Computer-readable signal media can also be any computer-readable medium other than computer-readable storage media, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wireless, wire, optical fiber, RF, etc., or any suitable combination thereof.

[0077] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram or flowchart, and combinations of blocks in a block diagram or flowchart, may be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0078] The modules described in the embodiments of this application can be implemented in software or hardware. The described modules can also be housed in a processor; for example, a processor can be described as including an acquisition module and a processing module. The names of these modules do not necessarily limit the module itself.

[0079] In another aspect, this application also provides a computer-readable medium, which may be included in the device described in the above embodiments; or it may exist independently and not assembled into the device. The computer-readable medium carries one or more programs, which, when executed by the device, cause the device to: respond to a call request from an application component; obtain an interface request address and parameters required to be passed to the interface request; send a data request based on the interface request address; obtain data returned by the interface based on the parameters required to be passed to the interface request; obtain query condition parameters and / or rendering table header parameters, pass them through to a preset query component and / or a preset table component, render and generate a query area and / or a table area based on the data returned by the interface, and combine the query area and / or the table area and display them on the page.

[0080] The technical solution according to the embodiments of this application can solve the problems of high complexity in existing form creation and poor user experience.

[0081] The specific embodiments described above do not constitute a limitation on the scope of protection of this application. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can occur depending on design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this application should be included within the scope of protection of this application.

Claims

1. A data processing method, characterized in that, include: In response to a call request from an application component, obtain the API request address and the parameters required to be passed in the API request; Send a data request based on the API request address, and retrieve the data returned by the API based on the parameters required to be passed in the API request; Obtain query condition parameters and / or rendering table header parameters, pass them through to a preset query component and / or a preset table component, render and generate a query area and / or a table area based on the data returned by the interface, and display the query area or table area on the page, or display the query area and table area together on the page; wherein, obtaining query condition parameters and / or rendering table header parameters includes: identifying the application scenario according to the call request, determining the field information corresponding to the query condition parameters and / or rendering table header parameters, and generating the query condition parameters and / or rendering table header parameters.

2. The method according to claim 1, characterized in that, The data returned by the API is obtained based on the parameters required to be passed in the API request, including: Based on the parameters required by the API request, retrieve the pagination field and the number of queries per page field, perform data queries, and obtain the data returned by the API.

3. The method according to claim 2, characterized in that, Retrieve data using the pagination field and the number of queries per page field, including: The component library is invoked to perform data queries using the methods corresponding to the pagination field and the number of queries per page field, respectively.

4. The method according to claim 1, characterized in that, include: Pass the query condition parameters and / or the rendered table header parameters as an array to the preset query component and / or the preset table component.

5. The method according to claim 4, characterized in that, Before passing query condition parameters and / or rendering table header parameters as an array to the preset query component and / or preset table component, the following should be included: Identify the type of fields in the query condition parameters or table header parameters, and configure default values ​​or display methods for the fields based on the call request.

6. The method according to any one of claims 1-5, characterized in that, Combine the query range and table range and display them on the page, including: Output information is generated based on the query area and table area, and the output information is displayed on the page.

7. A data processing apparatus, characterized in that, include: The acquisition module is used to respond to the call requests of application components and obtain the interface request address and the parameters required to be passed in the interface request. Send a data request based on the API request address, and retrieve the data returned by the API based on the parameters required to be passed in the API request; The processing module is used to obtain query condition parameters and / or rendering table header parameters, pass them through to a preset query component and / or a preset table component, render and generate a query area and / or a table area based on the data returned by the interface, and display the query area or table area on the page, or combine the query area and table area on the page; wherein, obtaining query condition parameters and / or rendering table header parameters includes: identifying the application scenario according to the call request, determining the field information corresponding to the query condition parameters and / or rendering table header parameters, and generating the query condition parameters and / or rendering table header parameters.

8. An electronic device, characterized in that, include: One or more processors; Storage device for storing one or more programs. When the one or more programs are executed by the one or more processors, the one or more processors implement the method as described in any one of claims 1-6.

9. A computer-readable medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the method as described in any one of claims 1-6.

Images