CN114995810A - List data multiplexing implementation method, device, equipment and storage medium - Google Patents
List data multiplexing implementation method, device, equipment and storage medium Download PDFInfo
- Publication number
- CN114995810A CN114995810A CN202210590755.6A CN202210590755A CN114995810A CN 114995810 A CN114995810 A CN 114995810A CN 202210590755 A CN202210590755 A CN 202210590755A CN 114995810 A CN114995810 A CN 114995810A
- Authority
- CN
- China
- Prior art keywords
- data
- list data
- components
- list
- 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.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
A multiplexing realization method, a device, equipment and a storage medium of list data comprise an-table-toolbar component which is registered in a component based on Vue front-end framework; wrapping the list data with a template tag; and introducing the components into the front page by using import statements, registering the components in the components, and referencing different values by using component references to control the front page to display corresponding list data. The invention realizes different displays of each page by creating a set of common code files with different types of components, designing different parameters received by the different components and controlling the code using part of each page. Through multiplexing, the code quantity is reduced, the running speed is improved, the memory overhead is saved, the code is more concise to look at, the presentation effect of different pages is more conveniently and intensively modified, the use is convenient, and the working efficiency is greatly improved.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a method, a device, equipment and a storage medium for realizing multiplexing of list data.
Background
Background management systems are developed vigorously by companies at present, and are used for improving the digitization level of the companies, a plurality of basic operations on list data are involved in the systems, such as list data addition, list data display, list data export functions and the like, but the problems of code redundancy and repeated writing exist, and no good consumable list data operation component exists.
Disclosure of Invention
Aiming at the problems of code redundancy and repeated writing existing in the list data multiplexing, the invention provides a list data multiplexing implementation method, a device, equipment and a storage medium, which can reduce the code amount, are convenient to use and greatly improve the working efficiency.
In order to achieve the purpose, the invention adopts the following technical scheme: a multiplexing implementation method of list data is characterized in that an-table-toolbar component is registered in a component based on an Vue front-end framework, and the list data is configured in a data function;
wrapping the list data by using a template label, and setting unique identifiers in the corresponding list data respectively;
and introducing the components into the front page by using import statements, registering the components in the components, and referencing different values by using component references to control the front page to display corresponding list data.
Preferably, the multiplexing implementation method further includes: writing through Vue front end framework, naming the component name attribute as an-table-toolbar, and registering in the component, which is packaged again based on other components.
Preferably, the multiplexing implementation method further includes: the list data used by the an-table-toolbar component is configured in a data function, other data obtain corresponding data through vuex, corresponding methods are written into the methods, and the data are accessed in the methods.
Preferably, the multiplexing implementation method further includes: the list data comprises a list newly-built data part, a list export data part and a list data volume display part, and the list newly-built data part, the list export data part and the list data volume display part are respectively wrapped by a template label and are provided with unique identifications.
Preferably, the multiplexing implementation method further includes: the relation among the functions of the list newly-built data part, the list exported data part and the listed list data quantity display part is independent, and display and/or hiding are controlled through a v-if instruction.
Preferably, the multiplexing implementation method further includes: and introducing the components to be used into the front-end page through import statements, registering the components to be used in the components, and transmitting different parameters through parent-child components to control the display content of the front-end page.
Preferably, the multiplexing implementation method further includes: the parent-child component transmits different parameters to use the props, the function of each list data part is influenced through the value received by the props configuration item, and the props configuration item receives the unique identification and/or data transmitted by different pages.
On the other hand, the invention adopts the following technical scheme: a device for realizing multiplexing of list data comprises:
the device comprises a registering unit, a packing unit and a processing unit, wherein the registering unit is used for registering different types of components through Vue, and packing the different types of components by using a packing tool, the registering unit registers an-table-toolbar components in the components, configures list data in a data function, wraps the list data by using template labels, and sets unique identifiers in the corresponding list data respectively;
the calling unit is used for accessing data of the data in the methods and acquiring corresponding data through vuex;
the import unit is used for importing the components into the front-end page by import statements and referencing different values through component parameters to control the front-end page to display corresponding list data;
and the display unit is used for displaying the list data on the front page and controlling display and/or hiding through a v-if instruction.
On the other hand, the invention adopts the following technical scheme: a computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing a method for multiplexing list data as described above when executing the computer program.
On the other hand, the invention adopts the following technical scheme: a computer-readable storage medium, on which a computer program is stored, which when executed by a processor implements a method of implementing multiplexing of list data as described above.
Compared with the prior art, the invention has the following beneficial effects:
the invention realizes different displays of each page by creating a set of common code files with different types of components, designing different parameters received by the different components and controlling the code using part of each page. Through multiplexing, the code amount is reduced, the running speed is improved, the memory overhead is saved, the code is more concise to see, the presentation effects of different pages are more conveniently and intensively modified, the use is convenient, and the working efficiency is greatly improved.
Drawings
In order to more clearly illustrate the technical solution, the drawings needed to be used in the embodiments will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art that other drawings can be obtained according to the drawings without inventive exercise.
FIG. 1 is a functional flow diagram of the present invention.
Detailed Description
For a clear and complete understanding of the technical solutions, the present invention will now be further described with reference to the embodiments and the accompanying drawings, and it is obvious that the described embodiments are only some embodiments of the present invention, and all other embodiments obtained by those skilled in the art without any inventive work are within the scope of the present invention.
In order to facilitate understanding of the embodiments of the present application, some terms referred to in the present application will be explained below.
Vue Assembly: vue is a set of front-end development frameworks, each file ending with. vue represents one Vue component in the Vue project created using vue-cli. Vue component is an important concept in Vue framework, and can extend hypertext markup language (HTML) elements, encapsulating reusable code. In short, the Vue component is a reusable Vue instance, and in the development process, frequently repeated functions, such as a 'counting button' and a 'drop-down box' in a webpage, are developed into a Vue component, so that the purpose of convenient development can be achieved. Component () functions are typically used in the Vue framework to declare and create a Vue component, and Vue components created by the component () functions are all globally registered, i.e., after Vue component registration, Vue instances are created by new Vue, and then Vue components can be used in Vue instances. Vue also provides a mechanism for local registration, where local registration of Vue components can be done internally by de-declaring a components attribute within the Vue () function.
import a external namespace into the current namespace by the import statement, the import statement firstly searches whether the same-name object exists in the current namespace, the meta method of the namespace is not triggered during searching, and if the same-name object exists and does not point to the same library, an error is reported. import guarantees that the same library is not loaded repeatedly on the same thread. Code in the external library runs only once in one thread
As shown in fig. 1, in a method for implementing multiplexing of list data, an-table-toolbar component is registered in a component based on Vue front-end framework, and list data is configured in a data function. Writing through Vue front-end framework, naming the component name attribute as an-table-toolbar, and registering in the component, wherein the an-table-toolbar component is packaged again based on other components. And configuring list data used by the an-table-toolbar component in a data function, acquiring corresponding data from other data through Vuex, writing a corresponding method into the methods, and accessing the data in the methods. The Vuex is a state management mode specially developed for Vue. js application programs, the state of all components of the application is managed by adopting centralized storage, the state is guaranteed to change in a predictable mode by corresponding rules, and the core data is acquired by a Vuex state management tool, so that the data can be maintained more conveniently, the rendering operation of the data is not needed to be concerned because the data is responsive data, and the development is easy.
And wrapping the list data by using a template label, and setting unique identifiers in the corresponding list data respectively. The template tag is a new tag provided by html5, is more standardized and semantic, and can be put into the template tag for batch rendering. The list data comprises a list newly-built data part, a list export data part and a list data volume display part, and the list newly-built data part, the list export data part and the list data volume display part are respectively wrapped by a template label and are provided with unique identifications.
The relations among the functions of the list newly-built data part, the list exported data part and the listed list data quantity display part are independent, display and/or hiding are controlled through a v-if instruction, the relations among the three parts of functions are independent and have no influence on each other, only values received by the props influence the respective functions, and the props configuration item is used for receiving unique identifications and/or some data transmitted by different pages. The parent-child component transmits different parameters and uses the tips, the function of each list data part is influenced by the value received by the tips configuration item, the communication between the parent-child components is the tips down and the events up, the parent component transmits data to the child component downwards through the (attribute tips), the child component transmits a message to the parent component through the (event events), if the child component needs certain data, a tip attribute is defined in the child component, and then the parent component assigns the same characteristic value to the html element and transmits the data attribute of the parent component to the attribute of the child component; and when what event happens inside the sub-component, displaying the data related to the event by the custom event for the parent component to process. As another preferred item of this embodiment, the list data part may change an instruction for controlling display and hiding of each part into v-show, but the instruction is only a display attribute of a control element, a dom element is rendered when a page is loaded, and the page performance is slightly reduced.
The method comprises the steps of introducing a component into a front-end page by using an import statement, registering the component in the component, enabling the import statement to be used at any position of a program, and importing the same module in the program for multiple times, wherein codes in the module are only executed when the module is imported for the first time, and the later import statement is only used for simply creating a reference to a module name space.
And referencing different values through the component pass-through to control the front-end page to display corresponding list data. Introducing the components to be used into the front-end page through import statements, registering the components to be used in the components, transmitting different parameters through parent and child components, controlling the front-end page to display contents, providing unique identification for the components by different pages, judging by the components according to the value, displaying the contents by the page if the identification is successful, and not displaying the contents if the identification is failed. Different data and unique identifications are successfully transmitted by directly writing data in the component tags, different displays of pages are influenced, and the logic function of the pages can not be controlled by transmitting a predefined custom event to the components.
In another aspect, the present invention provides another embodiment: a device for realizing multiplexing of list data comprises:
the device comprises a registering unit, a packing tool and a display unit, wherein the registering unit is used for registering different types of components through Vue, packing the different types of components by using the packing tool, registering an-table-toolbar component in the component, configuring list data in a data function, wrapping the list data by using a template tag, setting unique identifiers in the corresponding list data respectively, providing the unique identifiers for the components by different pages, judging by the component according to the value, displaying the content by the page if the identification is successful, and not displaying the content if the identification is failed.
The calling unit is used for accessing data of the data in the methods, obtaining corresponding data core data through Vuex, and maintaining the data more conveniently through a Vuex state management tool.
The import unit is used for importing the components into the front-end page by import statements and referencing different values through component parameters to control the front-end page to display corresponding list data;
the display unit is used for displaying list data on a front-end page, and controlling display and/or hiding through a v-if instruction, as another preferred item of the embodiment, the list data part can change an instruction for controlling display and hiding of each part into v-show, but the instruction is only a display attribute of a control element, a dom element is rendered when the page is loaded, and the page performance is slightly reduced.
And referencing different values through the component to control the front page to display the corresponding list data. Introducing the components to be used into the front-end page through import statements, registering the components to be used in the components, transmitting different parameters through parent and child components, controlling the front-end page to display contents, providing unique identification for the components by different pages, judging by the components according to the value, displaying the contents by the page if the identification is successful, and not displaying the contents if the identification is failed. Different data and unique identifications are successfully transmitted by directly writing data in the component tags, different displays of pages are influenced, and the logic function of the pages can not be controlled by transmitting a predefined custom event to the components.
In another aspect, the present invention provides another embodiment: a computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing a method for multiplexing list data as described above when executing the computer program. The steps of a method or algorithm described in connection with the embodiments disclosed herein may be embodied directly in hardware, in a software module executed by a processor, or in a combination of the two. A software module may reside in RAM memory, flash memory, ROM memory, EPROM memory, EEPROM memory, registers, 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 the processor such the processor can read information from, and write information to, the storage medium. In the alternative, the storage medium may be integral to the processor. The processor and the storage medium may reside in an ASIC. The ASIC may reside in a user terminal. In the alternative, the processor and the storage medium may reside as discrete components in a user terminal.
In another aspect, the present invention provides another embodiment: a computer-readable storage medium, on which a computer program is stored, which when executed by a processor implements a method of implementing multiplexing of list data as described above. Computer-readable media includes both computer storage media and communication media including any medium that facilitates transfer of a computer program from one place to another. A storage media may be any available media that can be accessed by a computer. By way of example, and not limitation, such computer-readable media can comprise 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 desired program code in the form of instructions or data structures and that can be accessed by a computer. Any connection is properly termed a computer-readable medium.
The above disclosure is intended to be illustrative of one or more of the preferred embodiments of the present invention and is not intended to limit the invention in any way, which is equivalent or conventional to one skilled in the art and which is intended to cover all modifications, equivalents, and alternatives falling within the scope of the invention as defined by the appended claims.
Claims (10)
1. A method for realizing multiplexing of list data is characterized by comprising the following steps:
registering an-table-toolbar component in the component based on Vue front-end framework, and configuring list data in a data function;
wrapping the list data by using a template label, and setting unique identifiers in the corresponding list data respectively;
and introducing the components into the front page by using import statements, registering the components in the components, and referencing different values by using component references to control the front page to display corresponding list data.
2. The method for implementing multiplexing of list data according to claim 1, wherein the method for implementing multiplexing further comprises: writing through Vue front end framework, naming the component name attribute as an-table-toolbar, and registering in the component, which is packaged again based on other components.
3. The method for implementing multiplexing of list data according to claim 2, wherein the method for implementing multiplexing further comprises: the list data used by the an-table-toolbar component is configured in a data function, other data obtain corresponding data through vuex, corresponding methods are written into the methods, and the data are accessed in the methods.
4. The method for implementing multiplexing of list data according to claim 1, wherein the method for implementing multiplexing further comprises: the list data comprises a list newly-built data part, a list export data part and a list data volume display part, and the list newly-built data part, the list export data part and the list data volume display part are respectively wrapped by a template label and are provided with unique identifications.
5. The method for implementing multiplexing of list data according to claim 4, wherein the method for implementing multiplexing further comprises: the relation among the functions of the list newly-built data part, the list export data part and the listed list data quantity display part is independent, and display and/or hiding are controlled through a v-if instruction.
6. The method for implementing multiplexing of list data according to claim 5, wherein the method for implementing multiplexing further comprises: and introducing the components to be used into the front-end page through import statements, registering the components to be used in the components, and transmitting different parameters through parent-child components to control the display content of the front-end page.
7. The method for implementing multiplexing of list data according to claim 6, wherein the method for implementing multiplexing further comprises: the parent-child component transmits different parameters to use the tips, the function of each list data part is influenced through the value received by the tips configuration item, and the tips configuration item receives the unique identification and/or data transmitted by different pages.
8. An apparatus for implementing multiplexing of list data, comprising:
the device comprises a registering unit, a packing unit and a processing unit, wherein the registering unit is used for registering different types of components through Vue, and packing the different types of components by using a packing tool, the registering unit registers an-table-toolbar components in the components, configures list data in a data function, wraps the list data by using template labels, and sets unique identifiers in the corresponding list data respectively;
the calling unit is used for accessing data of the data in the methods and acquiring corresponding data through vuex;
the import unit is used for importing the components into the front-end page by import statements and referencing different values through component parameters to control the front-end page to display corresponding list data;
and the display unit is used for displaying the list data on the front page and controlling display and/or hiding through a v-if instruction.
9. A computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, characterized in that the processor implements a method for multiplexing realization of list data according to any one of claims 1 to 7 when executing the computer program.
10. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, implements a method for multiplexing list data according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210590755.6A CN114995810A (en) | 2022-05-27 | 2022-05-27 | List data multiplexing implementation method, device, equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210590755.6A CN114995810A (en) | 2022-05-27 | 2022-05-27 | List data multiplexing implementation method, device, equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114995810A true CN114995810A (en) | 2022-09-02 |
Family
ID=83030046
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210590755.6A Pending CN114995810A (en) | 2022-05-27 | 2022-05-27 | List data multiplexing implementation method, device, equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114995810A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115793913A (en) * | 2023-02-06 | 2023-03-14 | 广州市千钧网络科技有限公司 | Information block control method, device, equipment and medium |
-
2022
- 2022-05-27 CN CN202210590755.6A patent/CN114995810A/en active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115793913A (en) * | 2023-02-06 | 2023-03-14 | 广州市千钧网络科技有限公司 | Information block control method, device, equipment and medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10726195B2 (en) | Filtered stylesheets | |
| US7269792B2 (en) | System and method for generating high-function browser widgets with full addressability | |
| RU2371759C2 (en) | Programmable object model for supporting library of name or scheme spaces in programme application | |
| US7120863B1 (en) | Method, system, and program for interfacing with elements in a document | |
| US6662342B1 (en) | Method, system, and program for providing access to objects in a document | |
| CN109522018B (en) | Page processing method and device and storage medium | |
| US6594823B1 (en) | Method and system for representing a high-level programming language data structure in a mark-up language | |
| US20090254881A1 (en) | Code generation techniques for administrative tasks | |
| US20020091999A1 (en) | XML based script automation | |
| US8918710B2 (en) | Reducing programming complexity in applications interfacing with parsers for data elements represented according to a markup language | |
| CN108228180A (en) | Real time workshop method and system based on visual interface design | |
| US20170192877A1 (en) | Mobile application development and deployment | |
| CN106354483B (en) | Data processing method and device and electronic equipment | |
| CN103914438A (en) | Template and tag implementation based excel display and export method and system | |
| CN110727429B (en) | Front-end page generation method, device and equipment | |
| WO2016005885A2 (en) | Asynchronous initialization of document object model (dom) modules | |
| CN114077430A (en) | Interface generation method and device, electronic equipment and storage medium | |
| CN114995810A (en) | List data multiplexing implementation method, device, equipment and storage medium | |
| US7051015B1 (en) | System and method for implementing a flexible data-driven target object model | |
| US20120151441A1 (en) | Efficient generation of executable file from program files when some of the program files expressly incorporate other program files | |
| CN112241505B (en) | Page updating method, page updating device, medium and electronic equipment | |
| CN107077484B (en) | Generating a web browser view of an application | |
| KR20020017669A (en) | XML-based application providing system and XML-based application recorded in computer-readable media | |
| CN112558964A (en) | Webpage generation method, computer equipment and storage medium | |
| CN114527979A (en) | Method and system for generating multi-end form interactive page |
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 |