A method, device, equipment and storage medium for multiplexing list data

Abstract

A method, device, equipment and storage medium for implementing the reuse of list data, including registering an‑table‑toolbar component in a component based on a Vue front-end framework; wrapping the list data with a template tag; introducing the component into a front-end page with an import statement, and registering the component in a component, and quoting different values ​​through component parameter passing to control the front-end page to display the corresponding list data. The present invention creates a set of common code files with different types of components, designs different parameters received by different components, controls the part of the code used by each page, and realizes different displays for each page. Through reuse, the amount of code is reduced, the running speed is increased, the memory overhead is saved, the code looks more concise, and it is more convenient to centrally modify the presentation effects of different pages. It is easy to use and greatly improves work efficiency.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method, device, equipment and storage medium for implementing multiplexing of list data. Background Art

[0002] At present, the company is vigorously developing a backend management system to improve the company's digital level. The system involves many basic operations on list data, such as adding list data, displaying list data, and exporting list data, etc. However, there are problems of code redundancy and repeated writing, and there is no good and usable list data operation component. Summary of the invention

[0003] In view of the problems of code redundancy and repeated writing in the above-mentioned list data reuse, the present invention provides a method, device, equipment and storage medium for implementing the reuse of list data, which reduces the amount of code, is easy to use and greatly improves work efficiency.

[0004] To achieve the above purpose, the present invention selects the following technical solutions: a method for implementing the reuse of list data, registering an-table-toolbar component in component based on Vue front-end framework, and configuring the list data in the data function;

[0005] Wrap the list data with a template tag, and set unique identifiers in the corresponding list data respectively;

[0006] Use the import statement to introduce the component into the front-end page, register the component in component, and reference different values ​​through component parameters to control the display of corresponding list data on the front-end page.

[0007] Preferably, the reuse implementation method further includes: writing through the Vue front-end framework, naming the component name attribute as an-table-toolbar, and registering it in component, wherein the an-table-toolbar component is encapsulated again based on other components.

[0008] Preferably, the reuse implementation method also includes: the list data used by the an-table-toolbar component is configured in the data function, other data obtains corresponding data through vuex, and the corresponding method is written in methods, and the data of data is accessed in the methods method.

[0009] Preferably, the multiplexing implementation method further includes: the list data includes a list new creation data part, a list export data part and a list data quantity display part, which are respectively wrapped with template tags and unique identifiers are set therein.

[0010] Preferably, the multiplexing implementation method further includes: the relationship between the functions of the list new data part, the list export data part and the list data volume display part is independent, and the display and / or hiding are controlled by v-if instructions.

[0011] Preferably, the reuse implementation method also includes: introducing the component to be used into the front-end page through the import statement, registering the component to be used in the components, and passing different parameters through the parent-child components to control the display content of the front-end page.

[0012] Preferably, the reuse implementation method also includes: the parent-child components pass different parameters using props, the values ​​received through the props configuration items affect the functions of each list data part, and the props configuration items receive unique identifiers and / or data transmitted by different pages.

[0013] On the other hand, the present invention adopts the following technical solution: a multiplexing implementation device for list data, comprising:

[0014] A registration unit is used to register different types of components through Vue.component, and use a packaging tool to package the different types of components, including registering an-table-toolbar component in component, configuring list data in a data function, wrapping the list data with a template tag, and setting unique identifiers in the corresponding list data;

[0015] The calling unit is used to access the data in the methods method and obtain the corresponding data through vuex;

[0016] The import unit is used to import components into the front-end page with the import statement, and reference different values ​​through component parameter passing to control the front-end page to display the corresponding list data;

[0017] The display unit is used to display the list data on the front-end page, and the display and / or hiding are controlled by the v-if instruction.

[0018] On the other hand, the present invention selects the following technical solution: a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the above-mentioned method for multiplexing list data when executing the computer program.

[0019] On the other hand, the present invention selects the following technical solution: a computer-readable storage medium having a computer program stored thereon, which implements the above-mentioned method for multiplexing list data when executed by a processor.

[0020] Compared with the prior art, the present invention has the following beneficial effects:

[0021] The present invention creates a set of common code files with different types of components, designs different parameters received by different components, controls the part of the code used by each page, and realizes different displays of each page. Through reuse, the amount of code is reduced, the running speed is improved, the memory overhead is saved, the code looks more concise, and the presentation effects of different pages can be modified more conveniently. It is easy to use and greatly improves work efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] In order to more clearly illustrate the technical solution, the drawings required for use in the implementation will be briefly introduced below. Obviously, the drawings described below are only some implementation methods of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative labor.

[0023] Figure 1 It is a functional flow diagram of the present invention. DETAILED DESCRIPTION

[0024] In order to enable a clear and complete understanding of the technical solution, the present invention is further described in conjunction with the embodiments and drawings. Obviously, the described embodiments are only some embodiments of the present invention, and all other embodiments obtained by technicians in the relevant field without making creative work are within the scope of protection of the present invention.

[0025] In order to facilitate understanding of the embodiments of the present application, some terms involved in the present application are explained below.

[0026] Vue component: Vue is a front-end development framework. In a Vue project created using vue-cli, each file ending with .vue represents a Vue component. Vue component is an important concept in the Vue framework. It can expand hypertext markup language (HTML) elements and encapsulate reusable code. In short, Vue component is a reusable Vue instance. In the development process, frequently repeated functions, such as "count button" and "drop-down box" in web pages, are developed as Vue components to achieve the purpose of convenient development. In the Vue framework, the Vue.component() function is usually used to declare and create a Vue component. The Vue components created by the Vue.component() function are all globally registered, that is, after the Vue component is registered, a Vue instance is created by new Vue, and then the Vue component can be used in the Vue instance. Vue also provides a local registration mechanism. By declaring a components property in the Vue() function, the Vue component can be locally registered internally.

[0027] The import statement imports an external namespace into the current namespace. The import statement first searches for an object with the same name in the current namespace. The namespace metamethod is not triggered during the search. If an object with the same name already exists and does not refer to the same library, an error is reported. Import ensures that the same library is not loaded repeatedly in the same thread. The code in the external library is only run once in a thread.

[0028] like Figure 1As shown, a method for implementing the reuse of list data is used. Based on the Vue front-end framework, the an-table-toolbar component is registered in the component, and the list data is configured in the data function. Written through the Vue front-end framework, the component name attribute is named an-table-toolbar and registered in the component. The an-table-toolbar component is encapsulated again based on other components. The list data used by the an-table-toolbar component is configured in the data function. Other data obtains corresponding data through Vuex, and the corresponding methods are written in methods. The data of data is accessed in the methods method. Vuex is a state management mode developed specifically for Vue.js applications. It uses centralized storage to manage the status of all components of the application, and uses corresponding rules to ensure that the status changes in a predictable manner. The acquisition of core data can be more conveniently maintained through the Vuex state management tool. Because it is responsive data, there is no need to worry about the rendering operation of the data, which is easy to develop.

[0029] The list data is wrapped with a template tag, and a unique identifier is set in each corresponding list data. The template tag is a new tag provided by HTML5, which is more standardized and semantic. List items can be put into the template tag and then batch rendered. The list data includes a list new data part, a list export data part and a list data quantity display part, which are wrapped with template tags and unique identifiers are set therein.

[0030] The relationship between the functions of the newly created data part of the list, the exported data part of the list and the display part of the data quantity of the list is independent, and the display and / or hiding are controlled by the v-if instruction. The relationship between these three parts of the function is independent and has no influence on each other. Only the value received by props will affect their respective functions. The props configuration item is used to receive the unique identifier and / or some data transmitted from different pages. The parent and child components use props to pass different parameters. The value received by the props configuration item affects the function of each list data part. The communication between the parent and child components is props down and events up. The parent component passes data to the child component downward through (property props), and the child component sends a message to the parent component through (event events). If the child component needs some data, a prop attribute is defined internally, and then the parent component specifies the characteristic value of the html element, and passes its own data attribute to this attribute of the child component; and when an event occurs inside the child component, the data involved in the event is displayed through a custom event for the parent component to process. As another preferred option of this implementation case, the list data part can replace the instructions for controlling the display and hiding of each part with v-show, but this instruction only controls the display attribute of the element. The DOM element will be rendered when the page is loaded, and the page performance will be slightly reduced.

[0031] Use the import statement to introduce components into the front-end page and register the components in component. The import statement can be used anywhere in the program. The same module can be imported multiple times in the program, but the code in the module is only executed when the module is imported for the first time. The subsequent import statements simply create a reference to the module namespace.

[0032] Different values ​​are referenced through component parameter passing to control the corresponding list data displayed on the front-end page. The components to be used are introduced into the front-end page through the import statement, and the components to be used are registered in the components. Different parameters are passed through the parent-child components to control the content displayed on the front-end page. Different pages provide unique identifiers for components. The components judge based on this value. If the recognition is successful, the page will display this part of the content. If the recognition fails, this part will not be displayed. By writing data directly in the component tag, different data and unique identifiers are successfully transmitted, which affects the different displays of the page. The page logic function cannot be controlled by passing pre-defined custom events to the component.

[0033] On the other hand, the present invention provides another implementation example: a multiplexing implementation device for list data, comprising:

[0034] The registration unit is used to register different types of components through Vue.component, and use the packaging tool to package the different types of components, including registering an-table-toolbar component in component, configuring the list data in the data function, wrapping the list data with the template tag, and setting a unique identifier in the corresponding list data. Different pages provide unique identifiers for components. The component judges based on this value. If the recognition is successful, the page will display this part of the content. If the recognition fails, this part will not be displayed.

[0035] The calling unit is used to access the data in the methods method, and obtain the corresponding data through vuex. The acquisition of core data can be more conveniently maintained through the Vuex state management tool. Because it is responsive data, there is no need to worry about the rendering operation of the data, which is easy to develop.

[0036] The import unit is used to import components into the front-end page with the import statement, and reference different values ​​through component parameter passing to control the front-end page to display the corresponding list data;

[0037] The display unit is used to display the list data on the front-end page, and the display and / or hiding are controlled by the v-if instruction. As another preferred option of this implementation case, the list data part can replace the instructions for controlling the display and hiding of each part with v-show, but this instruction only controls the display attribute of the element. The DOM element will be rendered when the page is loaded, and the page performance will be slightly reduced.

[0038] Different values ​​are referenced through component parameter passing to control the corresponding list data displayed on the front-end page. The components to be used are introduced into the front-end page through the import statement, and the components to be used are registered in the components. Different parameters are passed through the parent-child components to control the content displayed on the front-end page. Different pages provide unique identifiers for components. The components judge based on this value. If the recognition is successful, the page will display this part of the content. If the recognition fails, this part will not be displayed. By writing data directly in the component tag, different data and unique identifiers are successfully transmitted, which affects the different displays of the page. The page logic function cannot be controlled by passing pre-defined custom events to the component.

[0039] On the other hand, the present invention provides another implementation case: a computer device, including a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor implements the above-mentioned multiplexing implementation method of list data when executing the computer program. The steps of the method or algorithm described in conjunction with the embodiments disclosed herein may be directly embodied in hardware, in a software module executed by a processor, or in a combination of the two. The software module may reside in a RAM memory, a flash memory, a ROM memory, an EPROM memory, an EEPROM memory, a register, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art. An exemplary storage medium is coupled to a processor so that the processor can read and write information from / to the storage medium. In an alternative solution, the storage medium may be integrated into the processor. The processor and the storage medium may reside in an ASIC. The ASIC may reside in a user terminal. In an alternative solution, the processor and the storage medium may reside in a user terminal as discrete components.

[0040] On the other hand, the present invention provides another implementation case: a computer-readable storage medium having a computer program stored thereon, which implements the above-mentioned multiplexing implementation method of list data when the program is executed by a processor. Computer-readable media include both computer storage media and communication media, which include any media that facilitate the transfer of computer programs from one place to another. The storage medium can be any available medium that can be accessed by a computer. As an example and not limitation, such computer-readable media may include RAM, ROM, EEPROM, CD-ROM or other optical disk storage, magnetic disk storage or other magnetic storage devices, or any other medium that can be used to carry or store a desired program code in the form of an instruction or data structure and can be accessed by a computer. Any connection is also properly referred to as a computer-readable medium.

[0041] The above disclosure is only one or more preferred embodiments of the present invention, which are used to help understand the inventive concept of the technical solution, and is not intended to limit the present invention in other forms. Technical personnel in the relevant field may make other equivalent or customary replacement schemes based on the features defined by the present invention, which still fall within the scope of the present invention.

Claims

1. A method for implementing multiplexing of list data, characterized in that: include: Based on the Vue front-end framework, register the an-table-toolbar component in Vue.component and configure the list data in the data function; The list data is wrapped with a template tag, wherein the list data includes a list new data part, a list export data part and a list data quantity display part, which are respectively wrapped with template tags and unique identifiers are set therein; the relationship between the functions of the list new data part, the list export data part and the list data quantity display part is independent, and display and / or hiding are controlled by a v-if instruction; Use the import statement to introduce the component into the front-end page, register the component in components, and reference different values ​​through parent-child component parameters to control the display of corresponding list data on the front-end page. The parent-child component uses props to pass different parameters. The value received through the props configuration item affects the function of each list data part. The props configuration item receives the unique identifier and / or data transmitted by different pages; Control the content displayed on the front-end page. Different pages provide unique identifiers for components. The component judges based on this value. If the recognition is successful, the page will display the content of this part of the list data. If the recognition fails, this part of the list data content will not be displayed.

2. A method for implementing multiplexing of list data according to claim 1, characterized in that: The reuse implementation method also includes: writing through the Vue. front-end framework, naming the component name attribute as an-table-toolbar, and registering it in Vue.component, wherein the an-table-toolbar component is encapsulated again based on other components.

3. A method for implementing multiplexing of list data according to claim 2, characterized in that: The reuse implementation method also includes: the list data used by the an-table-toolbar component is configured in the data function, other data obtains corresponding data through vuex, and the corresponding method is written in methods, and the data of data is accessed in the methods method.

4. A device for implementing multiplexing of list data, characterized in that: A method for implementing multiplexing of list data according to any one of claims 1 to 3, comprising: A registration unit, used to register different types of components through Vue.component, and use a packaging tool to package the different types of components, including registering an-table-toolbar component in Vue.component, configuring list data in a data function, using a template tag to wrap the list data, and setting unique identifiers in the corresponding list data respectively; The calling unit is used to access the data in the methods method and obtain the corresponding data through vuex; The import unit is used to import components into the front-end page with the import statement, and reference different values ​​through component parameter passing to control the front-end page to display the corresponding list data; The display unit is used to display the list data on the front-end page, and the display and / or hiding are controlled by the v-if instruction.

5. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, a method for multiplexing list data according to any one of claims 1 to 3 is implemented.

6. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, a method for multiplexing list data as claimed in any one of claims 1 to 3 is implemented.

Images