Method, system and device for displaying list data in page in card mode and medium

Abstract

The invention discloses a method, a system, equipment and a medium for displaying list data in a card mode in a page, belongs to the technical field of computer interface data display, and aims to solve the technical problem of how to improve the definition of list data information presented in the page, ensure that a user can obtain related information more quickly and clearly and improve user experience. According to the technical scheme, a foreground interface is built; transmitting data needing to be displayed in a card form in the list data to a foreground through a background interface; the foreground converts the received data which needs to be displayed in a card form into a finalInfoList array; and the foreground displays the card content of the finalInfoList array by using a card component in the Element-UI, and generates a plurality of cards through dynamic rendering in a loop.

Description

Technical Field

[0001] The present invention relates to the technical field of computer interface data display technology, and in particular to a method, system, device and medium for displaying list data in a card-like manner on a page. Background Art

[0002] In modern web applications, the display of list data is a very common requirement. Traditionally, this data is usually presented on the page in the form of tables or ordinary lists. However, with the increase in the amount of information and the increasing importance of user experience, the traditional list display method has revealed some limitations. Although the traditional list can display all the detailed data, it is not very readable, and the form presented to users is not clear or intuitive enough.

[0003] Therefore, how to improve the clarity of list data information presented on the page, ensure that users can obtain relevant information more quickly and clearly, and improve user experience is a technical problem that needs to be solved urgently. Summary of the invention

[0004] The technical task of the present invention is to provide a method, system, device and medium for displaying list data in a card-like manner on a page, so as to solve the problem of how to improve the clarity of list data information presented on the page, ensure that users can obtain relevant information more quickly and clearly, and improve the user experience.

[0005] The technical task of the present invention is achieved in the following manner: a method for displaying list data in a card-like manner on a page, the method is specifically as follows:

[0006] Build the front-end interface;

[0007] The data in the list data that needs to be displayed in the form of cards is transferred to the front end through the back end interface;

[0008] The front desk converts the received data that needs to be displayed in the form of cards into the finalInfoList array;

[0009] The front end uses the card component in Element-UI to display the card content in the finalInfoList array, and generates multiple cards by dynamically rendering in a loop.

[0010] As a preferred option, the front-end interface is constructed as follows:

[0011] Use Java language for interface connection to obtain analysis data;

[0012] Use HTML and JavaScript as the WEB front-end programming language;

[0013] Use Vue.js to provide reactive data binding and combined view components through a simple API;

[0014] Provide rich visualization components and styles through the Element UI component library to quickly build interfaces.

[0015] More preferably, multiple cards are dynamically rendered and generated in a loop as follows:

[0016] Use the v-for loop to iterate through the finalInfoList array to generate a card for each array item;

[0017] Use the activated function to perform data reloading operations and update the data to be displayed on the card in real time.

[0018] More preferably, each card includes a left component part and a right component part. The left component part includes a background color block and a picture. The background color block is dynamically set according to the data. When the data to be displayed is 0, the background color block is set to gray; when the data is non-zero, the background color is displayed as the set color;

[0019] The right component part includes the management module information to be displayed; among them, the module information to be displayed includes the module name and the business order data corresponding to the module.

[0020] More preferably, the card style is set as follows:

[0021] Customize the card style: including setting the width, height and internal layout of the card;

[0022] Define the card style through Less syntax: including the style settings of the left module and the right module.

[0023] More preferably, a click event is bound to the card. When the card is clicked, the declared method in the method is called to jump to the corresponding detail page to ensure accurate jump logic.

[0024] More preferably, each card includes specific fields of the list data and is customized according to the user's preferences to visually display the content shown on each card; among them, the content shown on each card includes the format of displaying specific fields, adding or deleting specific fields, and adjusting the size and style of the fields.

[0025] A system for displaying list data in a card format on a page, which is used to implement the method of displaying list data in a card format on a page as described above; the system includes:

[0026] A building module for building the front-end interface;

[0027] A transfer module, which is used to transfer the data that needs to be displayed in the form of cards in the list data to the front end through the background interface;

[0028] A conversion module, which is used for the front end to convert the received data that needs to be displayed in the form of cards into the finalInfoList array;

[0029] A display module, which is used for the front end to use the card component in Element-UI to display the card content of the finalInfoList array, and generate multiple cards by dynamically rendering in a loop.

[0030] Among them, Vue.js is a popular open-source JavaScript framework for building interactive web interfaces. It focuses on the view layer and provides a reactive data binding and composable view component system. Vue.js provides a simple and powerful reactive system that can automatically update the view according to data changes. When the data changes, the associated view will be automatically updated without manually operating the DOM. Vue.js can provide an activated lifecycle hook function, which will be called when the component is activated.

[0031] Element UI is a powerful, easy-to-use and highly customizable Vue.js UI component library suitable for projects of various scales, helping developers quickly build modern user interfaces. Element UI provides a rich set of components. In this article, the card component in Element UI is used for the method of displaying list data in a modular way on the page to display some intuitive information and other content.

[0032] An electronic device, comprising: a memory and at least one processor;

[0033] Wherein, a computer program is stored on the memory;

[0034] The at least one processor executes the computer program stored in the memory, so that the at least one processor executes the method of displaying list data in the form of cards on the page as described above.

[0035] A computer-readable storage medium, in which a computer program is stored, and the computer program can be executed by a processor to implement the method of displaying list data in the form of cards on the page as described above.

[0036] The method, system, device and medium for displaying list data in the form of cards in the present invention have the following advantages:

[0037] (1) The present invention displays list data in a card - based layout on a page, which can present the list data in a more aesthetic form on the page, improve the clarity of information presentation, and enhance the user experience; and it will bring a more intuitive and personalized data browsing experience to users, thereby enhancing the overall user satisfaction and the readability of data.

[0038] (2) The card of the present invention contains a picture and some text information, ensuring that the layout of the card is clear, the content is easy to read, and there is an appropriate spacing and arrangement between the picture and the text information.

[0039] (3) The present invention displays specific information in the content area of the card, which can attract the user's attention and effectively convey the required information. The content is reasonably laid out to be clear and easy to read, which helps users understand and use.

[0040] (4) The data displayed on the card of the present invention is updated in real - time, so that the real - time nature of the card content can be maintained and the latest data can be shown.

[0041] (5) A click event is set on each card of the present invention, realizing the function of jumping to different pages when the card is clicked. According to the different content of the card, it jumps to the corresponding detail page, ensuring accurate jump logic and smooth user experience.

[0042] (6) The present invention classifies according to any attribute and displays it in the form of cards. The user's visual effect will be more intuitive and clear, improving the clarity of information presentation and enabling users to obtain information more quickly.

[0043] (7) The list data presented in a card - based manner by the present invention can be applied to various application scenarios, including the display of dynamic messages in social media applications, the display of product lists in e - commerce applications, the display of article summaries in news applications, etc. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] The present invention will be further described below with reference to the accompanying drawings.

[0045] FIG. Figure 1 is a flowchart of a method for displaying list data in a card - based manner on a page;

[0046] FIG. Figure 2 is a screenshot of the interface for classifying Operation Log list information by the Module field;

[0047] FIG. Figure 3 is a screenshot of the interface for jumping to different pages when clicking on a card;

[0048] FIG. Figure 4 is a screenshot of the interface for displaying order form data statistics on the system Dashboard page. DETAILED DESCRIPTION OF THE INVENTION

[0049] The method, system, device and medium for displaying list data in a card form on a page of the present invention will be described in detail below with reference to the accompanying drawings of the specification and specific embodiments.

[0050] Embodiment 1:

[0051] As shown in the Figure 1 accompanying drawings, this embodiment provides a method for displaying list data in a card form on a page, and the method is as follows:

[0052] S1. Build the front-end interface;

[0053] S2. Transmit the data that needs to be displayed in card form in the list data to the front-end through the back-end interface;

[0054] S3. The front-end converts the received data that needs to be displayed in card form into the finalInfoList array;

[0055] S4. The front-end uses the card component in Element-UI to display the card content, and dynamically renders multiple cards through a loop.

[0056] The specific steps for building the front-end interface in step S1 of this embodiment are as follows:

[0057] S101. Use the Java language for interface connection to obtain analysis data;

[0058] S102. Use html and JavaScript as the WEB front-end programming languages;

[0059] S103. Use Vue.js to provide reactive data binding and combined view components through simple APIs;

[0060] S104. Provide rich visualization components and styles through the Element UI component library to quickly build the interface.

[0061] The specific steps for dynamically rendering multiple cards through a loop in step S4 of this embodiment are as follows:

[0062] S401. Use the v-for loop to traverse the finalInfoList array to generate a card for each array item;

[0063] S402. Use the activated function to execute the data reloading operation to update the data to be displayed on the card in real time.

[0064] In this embodiment, each card includes a left component part and a right component part. The left component part includes a background color block and a picture. The background color block is dynamically set according to data. When the data to be displayed is 0, the background color block is set to gray; when the data is non-zero, the background color is displayed as a set color;

[0065] The right component part includes the management module information to be displayed; among them, the module information to be displayed includes the module name and the business order data corresponding to the module. As shown in the appendix Figure 3 As shown, the leftmost card displays the total number of orders in the order center. The module name is Order Center, and the data volume corresponding to this module is the total number of orders, 9397.

[0066] The card style settings in this embodiment are specifically as follows:

[0067] ① Customize the card style: including setting the width, height and internal layout of the card;

[0068] ② Define the card style through Less syntax: including the style settings of the left module and the right module.

[0069] In this embodiment, a click event is bound to the card. When the card is clicked, the declared method in method is called to jump to the corresponding details page to ensure the accuracy of the jump logic.

[0070] In this embodiment, each card includes specific fields of the list data, and is customized according to the user's preference to visually display the content shown on each card; among them, the content shown on each card includes the format of displaying specific fields, adding or deleting specific fields, and adjusting the size and style of the fields.

[0071] Embodiment 2:

[0072] As shown in the appendix Figure 2 As shown, the Operation Log list information is classified by the Module field, and there are three types: OrderCenter, Config Center, and System Center. The total number of information corresponding to each module cannot be directly obtained from the list. If the total number information is displayed in card information, it will be intuitive and clear. This embodiment can also set a click event on the card to implement the function of jumping to different pages when the card is clicked. According to the different content of the card, it jumps to the corresponding details page, as shown in the appendix Figure 3 As shown.

[0073] As shown in the appendix Figure 4 As shown, the statistics of the number of orders in the order table are realized on the system Dashboard page, and users can intuitively see the number of in-transit orders, completed orders and abnormal orders, improving the readability.

[0074] Example 3:

[0075] This embodiment provides a system for displaying list data in a card form on a page, which is used to implement the method of displaying list data in a card form on a page as in Embodiment 1 and Embodiment 2; the system includes:

[0076] A building module, which is used to build the front-end interface;

[0077] A transmission module, which is used to transmit the data that needs to be displayed in a card form in the list data to the front-end through a back-end interface;

[0078] A conversion module, which is used for the front-end to convert the received data that needs to be displayed in a card form into a finalInfoList array;

[0079] A display module, which is used for the front-end to use the card component in Element-UI to display the card content of the finalInfoList array and generate multiple cards by dynamically rendering in a loop.

[0080] Example 4:

[0081] This embodiment also provides an electronic device, including: a memory and a processor;

[0082] Wherein, the memory stores computer-executable instructions;

[0083] The processor executes the computer-executable instructions stored in the memory, so that the processor executes the method of displaying list data in a card form on a page in any embodiment of the present invention.

[0084] The processor may be a central processing unit (CPU), or may also be other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The processor may be a microprocessor or the processor may also be any conventional processor, etc.

[0085] The memory can be used to store computer programs and / or modules. By running or executing the computer programs and / or modules stored in the memory, and by invoking the data stored in the memory, the processor realizes various functions of the electronic device. The memory mainly includes a program storage area and a data storage area. Among them, the program storage area can store an operating system, application programs required for at least one function, etc.; the data storage area can store data created according to the use of the terminal, etc. In addition, the memory can also include high-speed random access memory, and can also include non-volatile memory, such as a hard disk, a memory, a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash memory card, at least one magnetic disk storage period, a flash memory device, or other volatile solid-state storage devices.

[0086] Embodiment 5:

[0087] This embodiment also provides a computer-readable storage medium, which stores multiple instructions. The instructions are loaded by the processor to enable the processor to execute the method of presenting list data in a card form on a page in any embodiment of the present invention. Specifically, a system or device equipped with a storage medium can be provided. On this storage medium, software program codes for implementing the functions in any one of the above embodiments are stored, and the computer (or CPU or MPU) of the system or device reads and executes the program codes stored in the storage medium.

[0088] In this case, the program code read from the storage medium itself can implement the functions in any one of the above embodiments. Therefore, the program code and the storage medium storing the program code constitute a part of the present invention.

[0089] Embodiments of the storage medium for providing program codes include floppy disks, hard disks, magneto-optical disks, optical disks (such as CD-ROM, CD-R, CD-RW, DVD-ROM, DVD-RAM, DVD-RW, DVD+RW), magnetic tapes, non-volatile memory cards, and ROMs. Optionally, the program code can be downloaded from a server computer via a communication network.

[0090] In addition, it should be clear that not only can the actual operations be completed in part or in whole by executing the program code read by the computer, but also by instructions based on the program code, the operating system operating on the computer, etc., so as to implement the functions in any one of the above embodiments.

[0091] In addition, it can be understood that the program code read from the storage medium is written into the memory provided in the expansion board inserted into the computer or into the memory provided in the expansion unit connected to the computer. Subsequently, based on the instructions of the program code, the CPU, etc. installed on the expansion board or the expansion unit execute part and all of the actual operations, so as to implement the functions in any one of the above embodiments.

[0092] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions described in the foregoing embodiments, or perform equivalent replacements on some or all of the technical features; and these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for displaying list data in a card-style on a page, characterized in that: The method is as follows: Build the front-end interface; The data in the list data that needs to be displayed in the form of cards is transferred to the front end through the back end interface; The front desk converts the received data that needs to be displayed in the form of cards into the finalInfoList array; The front end uses the card component in Element-UI to display the card content in the finalInfoList array, and generates multiple cards by dynamically rendering in a loop.

2. The method for displaying list data in a card-style on a page according to claim 1, characterized in that: The details of building the front-end interface are as follows: Use Java language for interface connection to obtain analysis data; Use HTML and JavaScript as the WEB front-end programming language; Use Vue.js to provide responsive data binding and composite view components through API; The Element UI component library provides a wealth of visual components and styles to enable quick interface construction.

3. The method for displaying list data in a card-style on a page according to claim 1 or 2, characterized in that: Generate multiple cards by dynamically rendering in a loop as follows: Use v-for loop to traverse the finalInfoList array and generate a card for each array item; Use the activated function to perform data reloading operations and update the data to be displayed on the card in real time.

4. The method for displaying list data in a card-style on a page according to claim 3, characterized in that: Each card includes a left component part and a right component part. The left component part includes a background color block and a picture. The background color block is dynamically set according to the data. When the data to be displayed is 0, the background color block is set to gray; when the data is not 0, the background color is displayed as the set color. The component part on the right includes the management module information to be displayed; wherein, the module information to be displayed includes the module name and the business order data corresponding to the module.

5. The method for displaying list data in a card-style on a page according to claim 4, characterized in that: The card style settings are as follows: Set the card style by customization: including setting the width, height and internal layout of the card; Define the style of the card through Less syntax: including the style settings of the left module and the right module.

6. The method for displaying list data in a card-style on a page according to claim 5, characterized in that: Bind a click event to the card. When the card is clicked, call the declared method in the method to jump to the corresponding detail page.

7. The method for displaying list data in a card-style on a page according to claim 6, characterized in that: Each card includes specific fields of the list data, and the content displayed by each card is customized to be visually displayed according to the user's preference; wherein the content displayed by each card includes displaying the format of specific fields, adding or deleting specific fields, and adjusting the size and style of the fields.

8. A system for displaying list data in a card-like manner on a page, characterized in that: The system is used to implement the method for displaying list data in a card-like manner in a page as described in any one of claims 1 to 7; the system comprises: Build a module to build the front-end interface; The transfer module is used to transfer the data in the list data that needs to be displayed in the form of cards to the front end through the back end interface; The conversion module is used for converting the received data that needs to be displayed in the form of cards into the finalInfoList array at the front end; The display module is used to display the card content in the finalInfoList array using the card component in Element-UI on the front end, and to generate multiple cards by dynamically rendering in a loop.

9. An electronic device, characterized in that: include: memory and at least one processor; Wherein, the memory stores a computer program; The at least one processor executes the computer program stored in the memory, so that the at least one processor performs the method for displaying list data in a card-style on a page as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, which can be executed by a processor to implement the method for displaying list data in a card-like manner on a page as claimed in any one of claims 1 to 7.

Images