CN114564270B - List component rendering and front-end display method, device, equipment and medium of page - Google Patents
List component rendering and front-end display method, device, equipment and medium of page Download PDFInfo
- Publication number
- CN114564270B CN114564270B CN202210201563.1A CN202210201563A CN114564270B CN 114564270 B CN114564270 B CN 114564270B CN 202210201563 A CN202210201563 A CN 202210201563A CN 114564270 B CN114564270 B CN 114564270B
- Authority
- CN
- China
- Prior art keywords
- target
- list
- header
- rendering
- component
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 140
- 238000000034 method Methods 0.000 title claims abstract description 61
- 230000006870 function Effects 0.000 claims description 178
- 238000013507 mapping Methods 0.000 claims description 18
- 238000012216 screening Methods 0.000 claims description 14
- 230000004044 response Effects 0.000 claims description 11
- 238000012163 sequencing technique Methods 0.000 claims description 10
- 238000012545 processing Methods 0.000 claims description 7
- 238000004590 computer program Methods 0.000 claims description 6
- 238000010276 construction Methods 0.000 claims description 3
- 238000004458 analytical method Methods 0.000 claims description 2
- 230000000694 effects Effects 0.000 description 7
- 238000010586 diagram Methods 0.000 description 6
- 238000012827 research and development Methods 0.000 description 4
- 238000011161 development Methods 0.000 description 3
- 238000011160 research Methods 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000007726 management method Methods 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000008707 rearrangement Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The embodiment of the invention discloses a method, a device, equipment and a medium for rendering a list component and displaying the front end of a page. The rendering method of the list component comprises the following steps: responding to a target list component rendering request of a client, and acquiring header attribute configuration information matched with the target list component; analyzing the header attribute configuration information, and determining a target database associated field and a target header configuration function corresponding to each header field in the target list component; rendering to obtain a standardized list skeleton matched with the target list component according to the configuration function of each target header, and obtaining list display data corresponding to the associated fields of each target database; and providing the standardized list skeleton and the list display data to the client so that the client can assemble the target display list according to the standardized list skeleton and the list display data to carry out front-end display. The technical scheme of the embodiment of the invention can simply and conveniently realize the custom function configuration and rendering display of the header fields.
Description
Technical Field
The embodiment of the invention relates to a page rendering technology, in particular to a method, a device, equipment and a medium for rendering a list component and displaying the front end of a page.
Background
In the current various business systems or management platforms, almost every page needs to use a list component for displaying data, and the list component is very widely used. After the data is presented in the form of a list, the user typically needs to sort or filter the data in the list corresponding to a specific header field, that is, functionally configure one or more header fields included in the list, in the face of the data that is numerous in the list.
In the prior art, a list user is used as a list demand party, a header configuration function is lifted to a research and development personnel, and the research and development personnel program a list required to be displayed by the list user in the development process of a front-end page according to the header configuration function, and a matching function is set for a specific header field in the list. Such as a sorting function or a screening function, etc.
The inventors have found that the following drawbacks exist in the prior art in the process of implementing the present invention: in the use process of the list user for the developed list, if the ordering or screening function is required to be added to a certain header field in the list, the requirement is required to be lifted to the research personnel again, and the required function can be realized after waiting for the research personnel to program the page again and reissue the version. The process is long in time consumption and low in efficiency; meanwhile, aiming at the lists with similar page structures and same partial inquiry and sequencing fields, the research and development personnel still need to redevelop, so that a great deal of code repetition and manpower waste are caused, and the overall delivery schedule of the system is influenced; in addition, the interface effects and styles developed by different research and development personnel may be inconsistent, and a list user may feel a system confusion during actual use, so that the operation efficiency is affected, and the learning and adaptation cost is increased.
Disclosure of Invention
The embodiment of the invention provides a method, a device, equipment and a medium for rendering a list component and displaying the front end of a page, which are used for simply and conveniently realizing the custom function configuration and rendering display of header fields.
In a first aspect, an embodiment of the present invention provides a method for rendering a list component, including:
responding to a target list component rendering request of a client, inquiring a header configuration database, and acquiring header attribute configuration information matched with the target list component;
analyzing the header attribute configuration information, and determining a target database associated field and a target header configuration function corresponding to each header field in the target list component;
rendering to obtain a standardized list skeleton matched with the target list component according to the target header configuration function, and obtaining list display data corresponding to the associated fields of the target databases;
and providing the standardized list skeleton and the list display data for the client so that the client can assemble the target display list according to the standardized list skeleton and the list display data to display the front end.
In a second aspect, an embodiment of the present invention further provides a front end display method for a page, including:
Responding to a display request of a target page, and loading and displaying each page element included in the target page;
when the target list component is loaded into the target page, a target list component rendering request is constructed, and the target list component rendering request is sent to a server;
according to the standardized list skeleton fed back by the server and the matched list display data, assembling to obtain a target display list, and performing front-end display on the target display list;
the server is used for determining target database associated fields and target header configuration functions respectively corresponding to the header fields in the target list component according to header attribute configuration information matched with the target list component, rendering to obtain a standardized list skeleton matched with the target list component, and acquiring list display data respectively corresponding to the target database associated fields.
In a third aspect, an embodiment of the present invention further provides a rendering apparatus of a list component, including:
the system comprises a header attribute configuration information acquisition module, a target list component rendering request module and a header configuration database, wherein the header attribute configuration information acquisition module is used for responding to a target list component rendering request of a client and inquiring the header configuration database to acquire header attribute configuration information matched with the target list component;
The header attribute configuration information analysis module is used for analyzing the header attribute configuration information and determining a target database associated field and a target header configuration function corresponding to each header field in the target list component;
the list display data acquisition module is used for rendering to obtain a standardized list skeleton matched with the target list component according to the configuration function of each target header, and acquiring list display data corresponding to each target database association field;
and the information providing module is used for providing the standardized list skeleton and the list display data for the client so that the client can assemble the target display list according to the standardized list skeleton and the list display data to carry out front-end display.
In a fourth aspect, an embodiment of the present invention further provides a front-end display apparatus for a page, including:
the page loading module is used for responding to a display request of a target page and loading and displaying each page element included in the target page;
the rendering request construction module is used for constructing a rendering request of the target list component when the rendering request is loaded to the target list component in the target page, and sending the rendering request of the target list component to a server;
The display list assembling module is used for assembling a target display list according to the standardized list skeleton fed back by the server and the matched list display data, and performing front-end display on the target display list;
the server is used for determining target database associated fields and target header configuration functions respectively corresponding to the header fields in the target list component according to header attribute configuration information matched with the target list component, rendering to obtain a standardized list skeleton matched with the target list component, and acquiring list display data respectively corresponding to the target database associated fields.
In a fifth aspect, an embodiment of the present invention further provides a computer apparatus, including:
one or more processors;
storage means 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 a method for rendering a list component according to any one of the embodiments of the present invention, or implement a method for displaying a front end of a page according to any one of the embodiments of the present invention.
In a sixth aspect, an embodiment of the present invention further provides a computer readable storage medium, where a computer program is stored, where the program when executed by a processor implements a method for rendering a list component according to any one of the embodiments of the present invention, or implements a method for displaying a front end of a page according to any one of the embodiments of the present invention.
According to the technical scheme, a header configuration database is inquired according to a target list component rendering request of a client, and header attribute configuration information matched with the target list component is obtained; analyzing the header attribute configuration information, and determining a target database associated field and a target header configuration function corresponding to each header field in the target list component; rendering to obtain a standardized list skeleton matched with the target list component according to the target header configuration function, and obtaining list display data corresponding to the associated fields of the target databases; the standardized list skeleton and the list display data are provided for the client, so that the client can assemble the target display list according to the standardized list skeleton and the list display data to obtain a front-end display scheme, the header configuration functions of each header field in the list control are stored in advance according to a list demand party, and further, when the rendering display of the list component is carried out, the standardized list skeleton is generated according to the header configuration functions, so that the technical effects of simply and conveniently realizing the custom function configuration and rendering display of the header fields are achieved.
Drawings
FIG. 1 is a flow chart of a method of rendering a list component in accordance with a first embodiment of the present invention;
FIG. 2 is a flow chart of another method for rendering list components in a second embodiment of the invention;
FIG. 3 is a flow chart of a front end display method of a page in a third embodiment of the present invention;
FIG. 4 is a block diagram of a rendering device of a list component in a fourth embodiment of the present invention;
FIG. 5 is a block diagram of a front end display device for a page in a fifth embodiment of the present invention;
fig. 6 is a schematic structural diagram of a computer device in a sixth embodiment of the present invention.
Detailed Description
Embodiments of the present invention will be described in further detail below with reference to the drawings and examples. It should be understood that the particular embodiments described herein are illustrative only and are not limiting of embodiments of the invention. It should be further noted that, for convenience of description, only some, but not all of the structures related to the embodiments of the present invention are shown in the drawings.
Example 1
Fig. 1 is a flowchart of a rendering method of a list component according to a first embodiment of the present invention, where the present embodiment is applicable to a case where a list component included in a page is rendered and displayed in a browser, and the method may be performed by a rendering device of the list component, where the device may be implemented by software and/or hardware, and may be generally integrated in a rendering server and used in cooperation with a browser client. Specifically, referring to fig. 1, the method specifically includes the following steps:
S110, responding to a target list component rendering request of a client, inquiring a header configuration database, and acquiring header attribute configuration information matched with the target list component.
In this embodiment, the client is generally referred to as a browser client, and the browser client is configured to request a page from a browser server, and render and display the page requested from the server. The page can display various data forms of contents, such as text, images, audios and videos, lists and the like.
When a list needs to be displayed in one page, a list component is added in the page when the page is constructed, and corresponding header functions are configured for one or more headers included in the list component. Specifically, if the sorting function is set for a header, sorting of the preset sorting rule can be performed according to each table content corresponding to the header. For example, if the sorting function is set for the header of "score", the table content data may be sorted in the order from large to small or in the order from small to large of the respective data items under the header of "score".
That is, in the prior art, when performing configuration of the header function of the list component, it is necessary to develop settings individually in units of pages, and write the header function configuration items into the pages. Further, it may cause the following problems in the prior art: aiming at the problems that the list with similar page structure needs to be redeveloped, the interface effects of the lists developed by different developers are inconsistent, and the like.
Based on the above, the inventor proposes a technical scheme that according to a rendering request of a client for a list component in a page, header attribute configuration information pre-stored for the list component is obtained, a standardized list skeleton matched with the list component and list display data are rendered and obtained based on the header attribute configuration information, and the standardized list skeleton and the list display data are assembled by the client to obtain a matched display list for front-end display.
Accordingly, in this embodiment, the rendering request of the target list component refers to a rendering request sent by the client for the target list component in the page to be displayed, where the rendering request is used to request the server to provide a standardized list skeleton and list display data matched with the target list component. Specifically, after the client obtains the page to be displayed, the client may sequentially perform local rendering and loading display on each page element included in the page, but when the client processes the page to the target list component included in the page, the client does not perform local rendering on the target list component any more, and generates a target list component rendering request for the target list component, so as to deliver the rendering task on the target list component to the server for execution.
Specifically, the target list component is any list component included in the page, and correspondingly, the target list component rendering request includes identification information for uniquely identifying the target list component.
The header configuration database generally stores mapping relationships between list components and header attribute configuration information, where the header attribute configuration information refers to header attribute information configured by a developer for one or more headers included in a list component. The header attribute configuration information may include: a database associated field corresponding to the header field, and a header configuration function corresponding to the header field.
In this embodiment, the developer does not need to independently develop the corresponding header function for each list in each page, and can realize convenient and standardized header function development only by configuring header attribute information and storing the header attribute information in the header configuration database.
S120, analyzing the header attribute configuration information, and determining a target database associated field and a target header configuration function corresponding to each header field in the target list component.
The header attribute configuration information is analyzed to obtain the target database associated field and the target header configuration function corresponding to each header field of the target list component. The target database association field refers to a database association field corresponding to the target list component, and the target header configuration function refers to a header configuration function corresponding to the target list component.
The database association field refers to a standardized storage field used when data is stored in a database. It can be understood that a developer can flexibly set the header field according to the actual requirement of a user, but finally, the matched database data is required to be obtained from the database for list display aiming at the header field, and then, the mapping relation between the header field and the associated database field is required to be established in advance so as to ensure that the database data can be accurately obtained from the database in the follow-up process.
In a specific example, if a list is required to be selected for province, a developer can flexibly set a header field named as "province", "province and city" or "province and score" for user display at the front end of the page, and only by mapping the header field with a database associated field actually storing each province name in the database, the corresponding database data can be accurately obtained for front end display.
The header configuration function refers to a header function required to be provided by one or more header fields. The header configuration function may include: a single header configuration function and a global header configuration function. The single header configuration function may be a header function set for a particular header field in the list component, and the global header configuration function may be a header function set for all header fields in the list component. In an alternative implementation of this embodiment, the single header configuration function may include at least one of:
Sorting, multi-selection, radio selection, keyword query, date query, status identification enabled display of sorting or selection status, and kilobit segmenter processing;
the global header configuration function may include: query or reset of ordering conditions.
The function of enabling display of the status identifier of the sorting or selecting status means that when a header field is in the sorting or selecting status, the sorting or selecting status can be displayed so as to avoid that a user viewing data misses the key information. The query or the reset of the ordering condition refers to a function of one-touch clearing of all the query conditions set for each header field and/or a function of one-touch clearing of all the ordering conditions set for each header field.
In an optional implementation manner of this embodiment, the parsing the header attribute configuration information to determine a target database associated field and a target header configuration function corresponding to each header field in the target list component may include:
analyzing the mapping relation among fields in the header attribute configuration information to obtain target database associated fields respectively corresponding to each header field in the target list component;
Analyzing the function configuration field in the header attribute configuration information to obtain a target single header configuration function corresponding to at least one header field in the target list component and/or a target global header configuration function corresponding to the target list component.
S130, rendering to obtain a standardized list skeleton matched with the target list component according to the target header configuration function, and obtaining list display data corresponding to the associated fields of the target databases.
In this embodiment, after obtaining the target header configuration function set for each header field in the target list component, the server may render a standardized list skeleton that matches the target list component.
The standardized list skeleton is formed for the target list component and comprises a plurality of basic lists of data items to be filled, and each header field in the standardized list skeleton has a corresponding single header configuration function or a global header configuration function. Correspondingly, after obtaining the list display data corresponding to each target database association field, the list display data and the standardized list skeleton may be combined to obtain a final target display list.
In an optional implementation manner of this embodiment, according to each target header configuration function, rendering to obtain a standardized list skeleton matched with the target list component may include:
and calling a pre-built header rendering interface, and rendering by adopting rendering processing logic corresponding to each target header configuration function respectively to obtain a standardized list skeleton matched with the target list component.
In this embodiment, matching rendering logic may be pre-written for different header configuration functions, and each rendering logic is encapsulated in a pre-built header rendering interface, and by calling the header rendering interface, a standardized list skeleton matched with the target list component may be rendered.
Alternatively, the standardized list skeleton matched with the target list component can be rendered by adding function codes respectively corresponding to the target header configuration functions into the basic component codes matched with the target list component,
in this embodiment, by aiming at the same header configuration function, the problems that the same header configuration function in different pages needs to be redeveloped, and list interface effects obtained by developing different developers aiming at the same header configuration function are inconsistent in the prior art can be solved.
And S140, providing the standardized list skeleton and the list display data for the client so that the client can assemble the target display list according to the standardized list skeleton and the list display data to display the front end.
In this embodiment, the server provides the standardized list skeleton and the list display data together to the client that sends the rendering request of the target list component, and the client assembles the standardized list skeleton and the list display data to obtain a target display list matched with the target list component according to the actual display requirement, so as to display the list of the client.
According to the technical scheme, a header configuration database is inquired according to a target list component rendering request of a client, and header attribute configuration information matched with the target list component is obtained; analyzing the header attribute configuration information, and determining a target database associated field and a target header configuration function corresponding to each header field in the target list component; rendering to obtain a standardized list skeleton matched with the target list component according to the target header configuration function, and obtaining list display data corresponding to the associated fields of the target databases; the standardized list skeleton and the list display data are provided for the client, so that the client can assemble the target display list according to the standardized list skeleton and the list display data to obtain a front-end display scheme, the header configuration functions of each header field in the list control are stored in advance according to a list demand party, and further, when the rendering display of the list component is carried out, the standardized list skeleton is generated according to the header configuration functions, so that the technical effects of simply and conveniently realizing the custom function configuration and rendering display of the header fields are achieved.
In addition, by applying the technical scheme of the embodiments of the invention, the display style of each list in the page can be unified, for example, the styles of various query input frames, selection frames or drop-down frames are unified, the colors and the sizes of the popup frames are the same, the use habit of the user is unified, and the experience of the user is improved; in addition, the dynamic configuration of the list components in the page can be realized, the list components with similar functions do not need to be repeatedly developed for different pages, only the operation is needed to be performed by modifying the header attribute configuration information of the list components, the development cost can be well saved, meanwhile, the real-time adjustment can be performed according to the actual needs of the user, and the requirements of deleting fields, adding and sorting, modifying query types and the like of the user can be responded in time, so that the flexibility is high and the real-time performance is strong.
Example two
Fig. 2 is a flowchart of a rendering method of a list component in the second embodiment of the present invention, where the technical solutions in the present embodiment are further refined, and the technical solutions in the present embodiment may be combined with each of the alternatives in the one or more embodiments. In this embodiment, the header attribute configuration information is analyzed, and a target database associated field and a target header configuration function corresponding to each header field in the target list component are determined, which is specifically: analyzing the mapping relation among fields in the header attribute configuration information to obtain target database associated fields respectively corresponding to each header field in the target list component; analyzing the function configuration field in the header attribute configuration information to obtain a target single header configuration function corresponding to at least one header field in the target list component and/or a target global header configuration function corresponding to the target list component.
In addition, before responding to the rendering request of the target list component of the client, the method queries the header configuration database and acquires header attribute configuration information matched with the target list component, and specifically comprises the following steps: responding to a configuration request of a target list component, calling a header rendering interface, and displaying each alternative single header configuration function and each alternative global header configuration function; generating a function configuration field in response to a target single header configuration function selected for at least one header field in the target list component and/or a target global header configuration function selected for the target list component; establishing a mapping relation between fields in response to a database associated field configured for each header field in the target list component; and storing the function configuration fields and the mapping relations among the fields corresponding to the target list component in the header configuration database.
As shown in fig. 2, the method according to the embodiment of the present invention may include the following steps:
s210, calling a header rendering interface in response to a configuration request of the target list component, and displaying each alternative single header configuration function and each alternative global header configuration function.
In this embodiment, the user may configure header attribute configuration information of different list components according to actual requirements on the component list, and store the header attribute configuration information in a header configuration database, so as to invoke and use the header attribute configuration information when rendering the list components in the page is actually performed. In the present embodiment, the above-described process is described in detail taking the configuration of the target list component as an example.
When a demand user wants to perform self-defined configuration on the target list component, the demand user can trigger to generate a configuration request matched with the target list component, and the server calls a header rendering interface according to the configuration request to perform user display on all the alternative single header configuration functions and all the alternative global header configuration functions which can be configured by the demand user.
The single header configuration function of each alternative and the global header configuration function of each alternative refer to each header configuration function of the corresponding rendering logic pre-packaged in the header rendering interface.
By displaying the above-mentioned alternative single header configuration functions and the alternative global header configuration functions to the requesting user, the requesting user may set one or more single header configuration functions for one or more header fields in the target list component according to actual needs, or set matched global header configuration functions for all header fields in the target list component.
S220, generating a function configuration field in response to a target single header configuration function selected for at least one header field in the target list component and/or a target global header configuration function selected for the target list component.
S230, establishing a mapping relation between fields in response to the database associated fields configured for each header field in the target list component.
S240, storing the function configuration fields and the mapping relations among the fields corresponding to the target list component in the header configuration database.
After generating the function configuration field and the mapping relation between the fields corresponding to the target list component, the function configuration field and the mapping relation between the fields may be used as header attribute configuration information of the target list component, and the header attribute configuration information and the identity identification information of the target list component are stored together in the header configuration database.
S250, responding to a target list component rendering request of the client, inquiring a header configuration database, and acquiring header attribute configuration information matched with the target list component.
S260, analyzing the mapping relation among the fields in the header attribute configuration information to obtain target database associated fields corresponding to the header fields in the target list component.
S270, analyzing the function configuration field in the header attribute configuration information to obtain a target single header configuration function corresponding to at least one header field in the target list component and/or a target global header configuration function corresponding to the target list component.
S280, rendering to obtain a standardized list skeleton matched with the target list component according to the target header configuration function, and obtaining list display data corresponding to the associated fields of the target databases.
And S290, providing the standardized list skeleton and the list display data for the client so that the client can assemble the target display list according to the standardized list skeleton and the list display data to display the front end.
According to the technical scheme, a header configuration database is inquired according to a target list component rendering request of a client, and header attribute configuration information matched with the target list component is obtained; analyzing the header attribute configuration information, and determining a target database associated field and a target header configuration function corresponding to each header field in the target list component; rendering to obtain a standardized list skeleton matched with the target list component according to the target header configuration function, and obtaining list display data corresponding to the associated fields of the target databases; the standardized list skeleton and the list display data are provided for the client, so that the client can assemble the target display list according to the standardized list skeleton and the list display data to obtain a front-end display scheme, the header configuration functions of each header field in the list control are stored in advance according to a list demand party, and further, when the rendering display of the list component is carried out, the standardized list skeleton is generated according to the header configuration functions, so that the technical effects of simply and conveniently realizing the custom function configuration and rendering display of the header fields are achieved.
On the basis of the above embodiments, after providing the standardized list skeleton and the list presentation data to the client, it may further include:
responding to a header function application request corresponding to a target header field in a target display list, and acquiring function application configuration information matched with the header function application request; acquiring a target database associated field corresponding to the target header field; and acquiring new list display data corresponding to the relevant field of the target database according to the type of the function application configuration information, and providing the new list display data for the client for front-end display.
Further, according to the type of the function application configuration information, obtaining new list display data corresponding to the target database association field may include:
if the type of the function application configuration information is determined to be data sequencing, sequencing the list display data corresponding to the target header field; providing the new list display data obtained after sequencing for the client for front-end display;
or alternatively
If the type of the function application configuration information is determined to be data screening, screening the list display data corresponding to the target header field according to screening conditions in the function application configuration information; and providing the new list display data obtained after screening for the client for front-end display.
Example III
Fig. 3 is a flowchart of a front-end display method of a page according to a third embodiment of the present invention, where the present embodiment is applicable to a case where a browser performs client-side display on a page including a component list, and the method may be performed by a front-end display device of the page, where the device may be implemented by software and/or hardware, and may be generally integrated in a browser client-side and used in cooperation with a rendering server for rendering the component list. Specifically, referring to fig. 3, the method specifically includes the following steps:
s310, responding to a display request of a target page, and loading and displaying each page element included in the target page.
S320, when the target list component in the target page is loaded, a target list component rendering request is constructed, and the target list component rendering request is sent to a server.
S330, assembling to obtain a target display list according to the standardized list skeleton and the matched list display data fed back by the server, and performing front-end display on the target display list.
The server is used for determining target database associated fields and target header configuration functions respectively corresponding to the header fields in the target list component according to header attribute configuration information matched with the target list component, rendering to obtain a standardized list skeleton matched with the target list component, and acquiring list display data respectively corresponding to the target database associated fields.
According to the technical scheme, the client responds to the display request of the target page, the page elements included in the target page are loaded and displayed, when the page elements are loaded to the target list component in the target page, a target list component rendering request is constructed, the target list component rendering request is sent to the server, the server determines target database associated fields and target header configuration functions respectively corresponding to all header fields in the target list component according to header attribute configuration information matched with the target list component, then a standardized list skeleton matched with the target list component is rendered, list display data respectively corresponding to all the target database associated fields are obtained, the client assembles the standardized list skeleton and the matched list display data fed back by the server to obtain a target display list, and the front-end display scheme of the target display list is achieved, so that the user-defined function configuration and rendering of the header fields are realized simply and conveniently, the use habit of a user is unified, and the experience sense of the user is improved.
Example IV
Fig. 4 is a schematic structural diagram of a list component rendering apparatus according to a fourth embodiment of the present invention, which may perform the list component rendering method according to the above embodiments. Referring to fig. 4, the apparatus includes: header attribute configuration information acquisition module 410, header attribute configuration information parsing module 420, list presentation data acquisition module 430, and information providing module 440. Wherein:
a header attribute configuration information obtaining module 410, configured to respond to a target list component rendering request of a client, query a header configuration database, and obtain header attribute configuration information matched with the target list component;
the header attribute configuration information parsing module 420 is configured to parse the header attribute configuration information and determine a target database associated field and a target header configuration function corresponding to each header field in the target list component;
the list display data obtaining module 430 is configured to render, according to each of the target header configuration functions, a standardized list skeleton that matches the target list component, and obtain list display data corresponding to each of the target database association fields;
the information providing module 440 is configured to provide the standardized list skeleton and the list display data to the client, so that the client can assemble the target display list for front-end display according to the standardized list skeleton and the list display data.
According to the technical scheme, a header configuration database is inquired according to a target list component rendering request of a client, and header attribute configuration information matched with the target list component is obtained; analyzing the header attribute configuration information, and determining a target database associated field and a target header configuration function corresponding to each header field in the target list component; rendering to obtain a standardized list skeleton matched with the target list component according to the target header configuration function, and obtaining list display data corresponding to the associated fields of the target databases; the standardized list skeleton and the list display data are provided for the client, so that the client can assemble the target display list according to the standardized list skeleton and the list display data to obtain a front-end display scheme, the header configuration functions of each header field in the list control are stored in advance according to a list demand party, and further, when the rendering display of the list component is carried out, the standardized list skeleton is generated according to the header configuration functions, so that the technical effects of simply and conveniently realizing the custom function configuration and rendering display of the header fields are achieved.
Based on the above embodiments, the list-display data acquisition module 430 may be specifically configured to:
and calling a pre-built header rendering interface, and rendering by adopting rendering processing logic corresponding to each target header configuration function respectively to obtain a standardized list skeleton matched with the target list component.
Based on the above embodiments, the header attribute configuration information parsing module 420 may be specifically configured to:
analyzing the mapping relation among fields in the header attribute configuration information to obtain target database associated fields respectively corresponding to each header field in the target list component;
analyzing the function configuration field in the header attribute configuration information to obtain a target single header configuration function corresponding to at least one header field in the target list component and/or a target global header configuration function corresponding to the target list component.
On the basis of the above embodiments, the method may further include: the header attribute configuration information configuration module is used for:
before responding to a target list component rendering request of a client, inquiring a header configuration database and acquiring header attribute configuration information matched with the target list component, responding to the configuration request of the target list component, calling a header rendering interface, and displaying each alternative single header configuration function and each alternative global header configuration function;
Generating a function configuration field in response to a target single header configuration function selected for at least one header field in the target list component and/or a target global header configuration function selected for the target list component;
establishing a mapping relation between fields in response to a database associated field configured for each header field in the target list component;
and storing the function configuration fields and the mapping relations among the fields corresponding to the target list component in the header configuration database.
On the basis of the above embodiments, the method may further include:
a function application configuration information obtaining unit, configured to obtain, after providing the standardized list skeleton and the list display data to the client, function application configuration information matched with a header function application request corresponding to a target header field in a target display list in response to the header function application request;
a target database associated field obtaining unit, configured to obtain a target database associated field corresponding to the target header field;
and the list display data updating and acquiring unit is used for acquiring new list display data corresponding to the target database associated field according to the type of the function application configuration information, and providing the new list display data for the client for front-end display.
On the basis of the above embodiments, the list display data update acquisition unit may be specifically configured to:
if the type of the function application configuration information is determined to be data sequencing, sequencing the list display data corresponding to the target header field;
providing the new list display data obtained after sequencing for the client for front-end display;
or alternatively
If the type of the function application configuration information is determined to be data screening, screening the list display data corresponding to the target header field according to screening conditions in the function application configuration information;
and providing the new list display data obtained after screening for the client for front-end display.
Based on the above embodiments, the single header configuration function may include at least one of:
sorting, multi-selection, radio selection, keyword query, date query, status identification enabled display of sorting or selection status, and kilobit segmenter processing;
the global header configuration function includes: query or reset of ordering conditions.
The list component rendering device provided by the embodiment of the invention can execute the list component rendering method provided by any embodiment of the invention, and has the corresponding functional modules and beneficial effects of the execution method.
Example five
Fig. 5 is a schematic structural diagram of a front-end display device for a page according to a fifth embodiment of the present invention, where the front-end display device can perform the front-end display method for a page according to the foregoing embodiments. Referring to fig. 5, the apparatus includes: a page load module 510, a render request build module 520, and a display list assembly module 530. Wherein:
the page loading module 510 is configured to respond to a display request for a target page, and load and display each page element included in the target page;
a rendering request construction module 520, configured to construct a target list component rendering request when loaded into a target list component in the target page, and send the target list component rendering request to a server;
the display list assembling module 530 is configured to assemble a target display list according to the standardized list skeleton and the matched list display data fed back by the server, and perform front-end display on the target display list;
the server is used for determining target database associated fields and target header configuration functions respectively corresponding to the header fields in the target list component according to header attribute configuration information matched with the target list component, rendering to obtain a standardized list skeleton matched with the target list component, and acquiring list display data respectively corresponding to the target database associated fields.
According to the technical scheme, the client responds to the display request of the target page, the page elements included in the target page are loaded and displayed, when the page elements are loaded to the target list component in the target page, a target list component rendering request is constructed, the target list component rendering request is sent to the server, the server determines target database associated fields and target header configuration functions respectively corresponding to all header fields in the target list component according to header attribute configuration information matched with the target list component, then a standardized list skeleton matched with the target list component is rendered, list display data respectively corresponding to all the target database associated fields are obtained, the client assembles the standardized list skeleton and the matched list display data fed back by the server to obtain a target display list, and the front-end display scheme of the target display list is achieved, so that the user-defined function configuration and rendering of the header fields are realized simply and conveniently, the use habit of a user is unified, and the experience sense of the user is improved.
Example six
Fig. 6 is a schematic structural diagram of a computer device according to a sixth embodiment of the present invention, and as shown in fig. 6, the computer device includes a processor 60, a memory 61, an input device 62 and an output device 63; the number of processors 60 in the computer device may be one or more, one processor 60 being taken as an example in FIG. six; the processor 60, the memory 61, the input means 62 and the output means 63 in the computer device may be connected by a bus or by other means, in fig. six by way of example.
The memory 61 is a computer readable storage medium, and may be used to store software programs, computer executable programs, and modules, such as program instructions/modules (e.g., a header attribute configuration information acquisition module 410, a header attribute configuration information parsing module 420, a list presentation data acquisition module 430, and an information providing module 440) corresponding to a rendering method of a list component in an embodiment of the present invention. As another example, program instructions/modules (e.g., a page loading module 510, a rendering request constructing module 520, and a display list assembling module 530) corresponding to the front-end display method of the page in the embodiment of the present invention.
The processor 60 executes various functional applications of the computer device and data processing, i.e., implements the above-described rendering method of the list component or the front-end presentation method of the page, by running software programs, instructions, and modules stored in the memory 61.
The memory 61 may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, at least one application program required for functions; the storage data area may store data created according to the use of the terminal, etc. In addition, the memory 61 may include high-speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other non-volatile solid-state storage device. In some examples, memory 61 may further comprise memory remotely located relative to processor 60, which may be connected to the computer device via a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.
The input device 62 is operable to receive input numeric or character information and to generate key signal inputs related to user settings and function control of the computer device. The output 63 may comprise a display device such as a display screen.
Example seven
A seventh embodiment of the present invention also provides a storage medium containing computer-executable instructions, which when executed by a computer processor, are for performing a method of rendering a list component, the method comprising:
Responding to a target list component rendering request of a client, inquiring a header configuration database, and acquiring header attribute configuration information matched with the target list component;
analyzing the header attribute configuration information, and determining a target database associated field and a target header configuration function corresponding to each header field in the target list component;
rendering to obtain a standardized list skeleton matched with the target list component according to the target header configuration function, and obtaining list display data corresponding to the associated fields of the target databases;
and providing the standardized list skeleton and the list display data for the client so that the client can assemble the target display list according to the standardized list skeleton and the list display data to display the front end.
Alternatively, the computer executable instructions, when executed by a computer processor, are for performing a method of front-end rendering of a page, the method comprising:
responding to a display request of a target page, and loading and displaying each page element included in the target page;
when the target list component is loaded into the target page, a target list component rendering request is constructed, and the target list component rendering request is sent to a server;
According to the standardized list skeleton fed back by the server and the matched list display data, assembling to obtain a target display list, and performing front-end display on the target display list;
the server is used for determining target database associated fields and target header configuration functions respectively corresponding to the header fields in the target list component according to header attribute configuration information matched with the target list component, rendering to obtain a standardized list skeleton matched with the target list component, and acquiring list display data respectively corresponding to the target database associated fields.
Of course, the storage medium containing the computer executable instructions provided in the embodiments of the present invention is not limited to the above-described method operations, and may also perform related operations in the rendering method of the list component or the front-end displaying method of the page provided in any embodiment of the present invention.
From the above description of embodiments, it will be clear to a person skilled in the art that the present invention may be implemented by means of software and necessary general purpose hardware, but of course also by means of hardware, although in many cases the former is a preferred embodiment. Based on such understanding, the technical solution of the present invention may be embodied essentially or in a part contributing to the prior art in the form of a software product, which may be stored in a computer readable storage medium, such as a floppy disk, a Read-Only Memory (ROM), a random access Memory (Random Access Memory, RAM), a FLASH Memory (FLASH), a hard disk or an optical disk of a computer, etc., and include several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the method according to the embodiments of the present invention.
It should be noted that, in the embodiment of the rendering device of the list component or the front-end display device of the page, each unit and module included are only divided according to the functional logic, but not limited to the above-mentioned division, so long as the corresponding functions can be implemented; in addition, the specific names of the functional units are also only for distinguishing from each other, and are not used to limit the protection scope of the present invention.
Note that the above is only a preferred embodiment of the present invention and the technical principle applied. It will be understood by those skilled in the art that the present invention is not limited to the particular embodiments described herein, but is capable of various obvious changes, rearrangements and substitutions as will now become apparent to those skilled in the art without departing from the scope of the invention. Therefore, while the invention has been described in connection with the above embodiments, the invention is not limited to the embodiments, but may be embodied in many other equivalent forms without departing from the spirit or scope of the invention, which is set forth in the following claims.
Claims (12)
1. A method of rendering a list component, comprising:
responding to a target list component rendering request of a client, inquiring a header configuration database, and acquiring header attribute configuration information matched with the target list component;
Analyzing the header attribute configuration information, and determining a target database associated field and a target header configuration function corresponding to each header field in the target list component;
rendering to obtain a standardized list skeleton matched with the target list component according to the target header configuration function, and obtaining list display data corresponding to the associated fields of the target databases;
and providing the standardized list skeleton and the list display data for the client so that the client can assemble the target display list according to the standardized list skeleton and the list display data to display the front end.
2. The method of claim 1, wherein rendering a standardized list skeleton that matches the target list component according to each of the target header configuration functions comprises:
and calling a pre-built header rendering interface, and rendering by adopting rendering processing logic corresponding to each target header configuration function respectively to obtain a standardized list skeleton matched with the target list component.
3. The method of claim 1, wherein parsing the header attribute configuration information to determine a target database association field and a target header configuration function corresponding to each header field in the target list component comprises:
Analyzing the mapping relation among fields in the header attribute configuration information to obtain target database associated fields respectively corresponding to each header field in the target list component;
analyzing the function configuration field in the header attribute configuration information to obtain a target single header configuration function corresponding to at least one header field in the target list component and/or a target global header configuration function corresponding to the target list component.
4. The method of claim 3, further comprising, prior to querying a header configuration database in response to a target list component rendering request of a client to obtain header attribute configuration information matching the target list component:
responding to a configuration request of a target list component, calling a header rendering interface, and displaying each alternative single header configuration function and each alternative global header configuration function;
generating a function configuration field in response to a target single header configuration function selected for at least one header field in the target list component and/or a target global header configuration function selected for the target list component;
Establishing a mapping relation between fields in response to a database associated field configured for each header field in the target list component;
and storing the function configuration fields and the mapping relations among the fields corresponding to the target list component in the header configuration database.
5. The method of claim 1, further comprising, after providing the standardized list skeleton and the list presentation data to the client:
responding to a header function application request corresponding to a target header field in a target display list, and acquiring function application configuration information matched with the header function application request;
acquiring a target database associated field corresponding to the target header field;
and acquiring new list display data corresponding to the relevant field of the target database according to the type of the function application configuration information, and providing the new list display data for the client for front-end display.
6. The method of claim 5, wherein obtaining new list display data corresponding to the target database association field according to the type of the function application configuration information, comprises:
If the type of the function application configuration information is determined to be data sequencing, sequencing the list display data corresponding to the target header field;
providing the new list display data obtained after sequencing for the client for front-end display; or alternatively
If the type of the function application configuration information is determined to be data screening, screening the list display data corresponding to the target header field according to screening conditions in the function application configuration information;
and providing the new list display data obtained after screening for the client for front-end display.
7. The method of claim 3 or 4, wherein the single header configuration function comprises at least one of:
sorting, multi-selection, radio selection, keyword query, date query, status identification enabled display of sorting or selection status, and kilobit segmenter processing;
the global header configuration function includes: query or reset of ordering conditions.
8. The front-end display method of the page is characterized by comprising the following steps of:
responding to a display request of a target page, and loading and displaying each page element included in the target page;
When the target list component is loaded into the target page, a target list component rendering request is constructed, and the target list component rendering request is sent to a server;
according to the standardized list skeleton fed back by the server and the matched list display data, assembling to obtain a target display list, and performing front-end display on the target display list;
the server is used for determining target database associated fields and target header configuration functions respectively corresponding to the header fields in the target list component according to header attribute configuration information matched with the target list component, rendering to obtain a standardized list skeleton matched with the target list component, and acquiring list display data respectively corresponding to the target database associated fields.
9. A rendering apparatus of a list component, comprising:
the system comprises a header attribute configuration information acquisition module, a target list component rendering request module and a header configuration database, wherein the header attribute configuration information acquisition module is used for responding to a target list component rendering request of a client and inquiring the header configuration database to acquire header attribute configuration information matched with the target list component;
the header attribute configuration information analysis module is used for analyzing the header attribute configuration information and determining a target database associated field and a target header configuration function corresponding to each header field in the target list component;
The list display data acquisition module is used for rendering to obtain a standardized list skeleton matched with the target list component according to the configuration function of each target header, and acquiring list display data corresponding to each target database association field;
and the information providing module is used for providing the standardized list skeleton and the list display data for the client so that the client can assemble the target display list according to the standardized list skeleton and the list display data to carry out front-end display.
10. A front end display device for a page, comprising:
the page loading module is used for responding to a display request of a target page and loading and displaying each page element included in the target page;
the rendering request construction module is used for constructing a rendering request of the target list component when the rendering request is loaded to the target list component in the target page, and sending the rendering request of the target list component to a server;
the display list assembling module is used for assembling a target display list according to the standardized list skeleton fed back by the server and the matched list display data, and performing front-end display on the target display list;
The server is used for determining target database associated fields and target header configuration functions respectively corresponding to the header fields in the target list component according to header attribute configuration information matched with the target list component, rendering to obtain a standardized list skeleton matched with the target list component, and acquiring list display data respectively corresponding to the target database associated fields.
11. A computer device, comprising:
one or more processors;
storage means for storing one or more computer programs,
the rendering method of the list component of any of claims 1-7, or the front-end presentation method of the page of claim 8, when the one or more computer programs are executed by the one or more processors, cause the one or more processors to execute the computer programs.
12. A computer readable storage medium, on which a computer program is stored, characterized in that the computer program, when being executed by a processor, implements a method of rendering a list component according to any one of claims 1-7, or a front-end presentation method of a page according to claim 8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210201563.1A CN114564270B (en) | 2022-03-03 | 2022-03-03 | List component rendering and front-end display method, device, equipment and medium of page |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210201563.1A CN114564270B (en) | 2022-03-03 | 2022-03-03 | List component rendering and front-end display method, device, equipment and medium of page |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114564270A CN114564270A (en) | 2022-05-31 |
| CN114564270B true CN114564270B (en) | 2024-02-06 |
Family
ID=81718773
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210201563.1A Active CN114564270B (en) | 2022-03-03 | 2022-03-03 | List component rendering and front-end display method, device, equipment and medium of page |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114564270B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115469960A (en) * | 2022-11-14 | 2022-12-13 | 北京搜狐新动力信息技术有限公司 | Data list rendering method and related device |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109918067A (en) * | 2019-01-23 | 2019-06-21 | 中国平安人寿保险股份有限公司 | Report Customization method, apparatus, client and storage medium |
| CN111596984A (en) * | 2020-04-24 | 2020-08-28 | 西安震有信通科技有限公司 | List data display method |
| CN112363794A (en) * | 2020-11-30 | 2021-02-12 | 华云数据控股集团有限公司 | Rendering method of front-end list type component and electronic equipment |
| CN112558845A (en) * | 2019-09-25 | 2021-03-26 | 北京国双科技有限公司 | Form operation method and form operation device |
| CN113361241A (en) * | 2021-06-21 | 2021-09-07 | 深圳平安智汇企业信息管理有限公司 | Table configuration method and device, computer equipment and storage medium |
| CN113656487A (en) * | 2021-07-28 | 2021-11-16 | 北京数码大方科技股份有限公司 | Object data display method and object data display device in information system |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2000029932A1 (en) * | 1998-11-18 | 2000-05-25 | Fujitsu Limited | Data item listing device and method, and computer-readable recording medium recording data item listing program |
| US8312366B2 (en) * | 2009-02-11 | 2012-11-13 | Microsoft Corporation | Displaying multiple row and column header areas in a summary table |
-
2022
- 2022-03-03 CN CN202210201563.1A patent/CN114564270B/en active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109918067A (en) * | 2019-01-23 | 2019-06-21 | 中国平安人寿保险股份有限公司 | Report Customization method, apparatus, client and storage medium |
| CN112558845A (en) * | 2019-09-25 | 2021-03-26 | 北京国双科技有限公司 | Form operation method and form operation device |
| CN111596984A (en) * | 2020-04-24 | 2020-08-28 | 西安震有信通科技有限公司 | List data display method |
| CN112363794A (en) * | 2020-11-30 | 2021-02-12 | 华云数据控股集团有限公司 | Rendering method of front-end list type component and electronic equipment |
| CN113361241A (en) * | 2021-06-21 | 2021-09-07 | 深圳平安智汇企业信息管理有限公司 | Table configuration method and device, computer equipment and storage medium |
| CN113656487A (en) * | 2021-07-28 | 2021-11-16 | 北京数码大方科技股份有限公司 | Object data display method and object data display device in information system |
Non-Patent Citations (1)
| Title |
|---|
| 基于Java的Web通用DataGrid组件设计;金保华 等;郑州轻工业学院学报(自然科学版);24(05);39-43 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114564270A (en) | 2022-05-31 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110310034B (en) | Service arrangement and business flow processing method and device applied to SaaS | |
| CN110263275B (en) | Method and device for accessing webpage, mobile terminal and storage medium | |
| CN111104635B (en) | Method and device for generating form webpage | |
| CN110688598B (en) | Service parameter acquisition method and device, computer equipment and storage medium | |
| CN110209377B (en) | Interface message processing method, device, equipment and storage medium based on factory class | |
| CN111177081A (en) | Game log content query method and device, computer equipment and storage medium | |
| US20190050376A1 (en) | Automatic value formatting based on intrinsic structural semantics | |
| CN111831542B (en) | API application debugging method and device and storage medium | |
| CN110717647A (en) | Decision flow construction method and device, computer equipment and storage medium | |
| CN113031951B (en) | Menu generation method, menu generation device, computer equipment and storage medium | |
| CN114416075A (en) | Service processing method and device | |
| CN114564270B (en) | List component rendering and front-end display method, device, equipment and medium of page | |
| CN110941779A (en) | Page loading method and device, storage medium and electronic equipment | |
| CN109086158B (en) | Abnormal cause analysis method and device and server | |
| CN111294288A (en) | Traffic identification method and device, application program interface gateway and storage medium | |
| CN113923181B (en) | Group message processing method, device, system and storage medium | |
| CN110941634A (en) | Data processing method and device, storage medium and electronic device | |
| CN110930105B (en) | Task list processing method and device, computer equipment and storage medium | |
| CN112487163A (en) | Execution method of automation process and acquisition method and device of interface data of automation process | |
| CN111740850A (en) | Group chat creating method and device, electronic equipment and readable storage medium | |
| CN114116712A (en) | Extended field processing method and device, electronic equipment and storage medium | |
| CN113923250B (en) | Method, device and system for assisting network service arrangement | |
| CN111400060B (en) | Equipment linkage method, device, server and medium | |
| CN114546220A (en) | Page configuration method and device, storage medium and computer equipment | |
| CN114706580A (en) | Front-end webpage development method and device, storage medium and electronic equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |