CN111796808A - Implementation method based on DAOTable universal list component - Google Patents
Implementation method based on DAOTable universal list component Download PDFInfo
- Publication number
- CN111796808A CN111796808A CN202010461111.8A CN202010461111A CN111796808A CN 111796808 A CN111796808 A CN 111796808A CN 202010461111 A CN202010461111 A CN 202010461111A CN 111796808 A CN111796808 A CN 111796808A
- Authority
- CN
- China
- Prior art keywords
- data
- interface
- standard table
- function
- client
- 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
- 238000000034 method Methods 0.000 title claims abstract description 43
- 230000008569 process Effects 0.000 claims description 17
- 238000012795 verification Methods 0.000 claims description 6
- 238000010276 construction Methods 0.000 claims description 5
- 238000011161 development Methods 0.000 description 7
- 238000013461 design Methods 0.000 description 4
- 230000008878 coupling Effects 0.000 description 2
- 238000010168 coupling process Methods 0.000 description 2
- 238000005859 coupling reaction Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 239000000126 substance Substances 0.000 description 2
- 230000002457 bidirectional effect Effects 0.000 description 1
- 238000012790 confirmation Methods 0.000 description 1
- 230000001419 dependent effect Effects 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
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/31—Programming languages or programming paradigms
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- 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
Abstract
The invention discloses a method for realizing a general list component based on DAOTable, which comprises the following steps: creating Vue a single page application and configuring attributes of the data format that satisfy the standard table; a function of generating the standard table based on a core.js function library; v ue dynamically generating corresponding input boxes according to different functions of the standard table by using DAOFIELDBox; and generating a data flow corresponding to the service based on the function of the standard table according to the service requirement of the client. The method has the advantages of reusability, unified standard, convenient use, efficiency improvement and the like.
Description
Technical Field
The invention relates to the technical field of web development, in particular to a realization method based on a DAOTable universal list component.
Background
When a form is developed, each function needs to manually input codes to generate corresponding functions one by one, and corresponding interfaces are written one by one; if different functions have the same service structure, codes cannot be reused and need to be developed from scratch, so that the flexibility is lacked; design, layout, standards and the like of the pages need to be concerned, so that most of work time of developers is spent on repeatedly constructing interfaces with similar functions, and further the construction efficiency is low.
Disclosure of Invention
The technical problem to be solved by the present invention is to provide a method for implementing a generic list component based on DAOTable, so as to implement that in the web development process, the code has reusability, system standardization and convenient use, and greatly improves the working efficiency.
In order to achieve the above object, the present invention provides an implementation method based on a DAOTable universal list component, where the method includes:
creating Vue a single page application and configuring attributes of the data format that satisfy the standard table;
a function of generating the standard table based on a core.js function library;
v ue dynamically generating corresponding input boxes according to different functions of the standard table by using DAOFIELDBox;
and generating a data flow corresponding to the service based on the function of the standard table according to the service requirement of the client.
Preferably, the data flow corresponding to the service is generated based on the function of the standard table according to the service requirement of the client, and includes a data creation flow, a data display flow and a data export flow.
Preferably, the step of the data creation flow includes:
calling the input box through a ShowInput interface to input data;
and performing format verification on the input of the data, and calling an Inser interface to write the data into a database if the verification is passed.
Preferably, the data display process includes the steps of:
obtaining a table structure through a GetSchema interface, and drawing a table interface according to the table structure;
and requesting data from the backend through a Search interface, and displaying the data on the form interface.
Preferably, the data export process includes:
querying data through a Search interface;
and constructing Excel at the client, and storing the data to a local file of the client.
Preferably, the functions of the standard table include at least table framework construction, data query, data creation, data export, and table paging.
Preferably, the attribute configuring the data format satisfying the standard table includes basic data of the configuration plug-in and related interface attribute.
Has the advantages that:
the DAOTable-based universal list component provided by the invention defaults to a self-contained basic function, a simple table can be generated by one key, the layout is uniform, the system is standardized, and a complex table is arranged on a basic module and can be developed according to service expansion, so that the working efficiency is greatly improved, the use is convenient, and the development cost is reduced.
Drawings
Fig. 1 is a flowchart of an implementation method based on a DAOTable universal list component according to an embodiment of the present invention.
Fig. 2 is a schematic structural diagram of a DAOTable component according to an embodiment of the present invention.
The implementation, functional features and advantages of the objects of the present invention will be further explained with reference to the accompanying drawings.
Detailed Description
It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
The present invention will be described in detail with reference to the following examples.
Referring to fig. 1, a flowchart of an implementation method based on a DAOTable universal list component according to an embodiment of the present invention is shown. The method specifically comprises the following steps:
a realization method based on DAOTable universal list components, the method comprises the following steps:
s1: creating Vue a single page application and configuring attributes of the data format that satisfy the standard table;
s2: a function of generating the standard table based on a core.js function library;
s3: v ue dynamically generating corresponding input boxes according to different functions of the standard table by using DAOFIELDBox;
s4: and generating a data flow corresponding to the service based on the function of the standard table according to the service requirement of the client.
In step S4, the data flow corresponding to the service is generated based on the function of the standard table according to the service requirement of the client, and includes a data creation flow, a data presentation flow, and a data export flow. Wherein the content of the first and second substances,
the data creation process comprises the following steps:
calling the input box through a ShowInput interface to input data;
and performing format verification on the input of the data, and calling an Inser interface to write the data into a database if the verification is passed. The method specifically comprises the following steps:
the process comprises the steps of firstly calling a ShowInput interface to display a data input dialog box, clicking a confirmation button after a user inputs complete data, enabling the DAOTable to internally check the data input format and the like, prompting the user if the data input format is not checked, re-entering a ShowInput process, and calling an Inser interface to transmit the data into a rear end and writing the data into a database if the data input format by the user is correct.
The data display process comprises the following steps:
obtaining a table structure through a GetSchema interface, and drawing a table interface according to the table structure;
and requesting data from the backend through a Search interface, and displaying the data on the form interface.
The method specifically comprises the following steps:
the process firstly obtains a table structure from the back end through a GetSchema interface, retries after waiting for 10 seconds if the process fails, draws a table interface after the process succeeds, then requests data from the back end through a Search interface, prompts a user if the process fails, and displays the data on the interface if the process succeeds.
The data export process comprises the following steps:
querying data through a Search interface;
and constructing Excel at the client, and storing the data to a local file of the client. The method specifically comprises the following steps:
the process comprises the steps of firstly inquiring data through a Search interface, then locally constructing Excel at a client, and finishing storing the data into a local file through a Save interface.
Preferably, the functions of the standard table include at least table framework construction, data query, data creation, data export, and table paging.
Preferably, the attribute configuring the data format satisfying the standard table includes basic data of the configuration plug-in and related interface attribute.
Referring to fig. 2, a schematic structural diagram of a DAOTable component according to an embodiment of the present invention is shown.
In the present embodiment, DAO refers to Data Access Object, i.e. Data Access Object; table, namely Table, DAOTable is a method for presenting data objects in a Table mode, and is also a single page application component based on Vue, and the method has the design principles of extensibility, low coupling and high multiplexing, and can extend new functions on the original basis at any time.
The DAOTable components include DAOTable. vue, DAOFIELDBox. vue, core. js, file-saver, script-loader, xlsx. Wherein the content of the first and second substances,
js: the DAOTable support-dependent module is a javascript function library, a plurality of functions frequently used in business are integrated in the module, maximum code multiplexing is achieved, developers only need to know a calling method and do not need to pay much attention to internal implementation, and development efficiency is greatly improved.
Daofieldbox. vue: the DAOTable supporting dependency module is a universal input box plug-in, and can dynamically generate input boxes with different formats, such as a date type input box, a numerical value type box, a multi-selection pull-down input box and the like, through configuration attributes and the same codes. The plug-in has a bidirectional binding function, development cost is reduced to the maximum, and developers only need to pay attention to service data and do not need to be involved in updating of user views.
file-saver, script-loader, xlsx: and the referenced third party supports the dependency module, and is used for converting the data into an excel operation in the data export of the DAOTable and storing the excel operation in a local file.
(iii) daotable. vue: the DAOTable core working module integrates similar functions of most table services, such as table frame construction, data query, new data creation, export, paging and the like, unifies standards, unifies presentation styles and processing flows, and realizes that developers can realize the table function only by processing different services, thereby maximizing prompt development efficiency.
In this embodiment, first, a dependency module needs to be installed, a single-page application is created in the vue project, a plug-in is introduced, and basic properties of the plug-in are configured; then registering and configuring related interface attributes, realizing a standard interface at the back end, and generating a basic table function; and finally, generating a secondary development extension table according to the attribute of the service configuration plug-in. The components have a query function and a paging function by default; queryable fields are returned by the server or self-configured by the front-end according to the data format. For data lists, the component also provides a number of extended functions, including adding, editing, deleting, exporting, selecting columns. By default these functions are not displayed and the presentation of the functions is controlled by setting the properties. The import and export functions have module dependence, rely on file-saver, script-loader and xlsx, and if the component is used, the functions can be used only after the modules are installed in the project.
The DAOTable general list provided by the invention has the design principles of expandability, low coupling and high multiplexing, and the working efficiency can be improved by 90% when developers develop standard forms; when a developer develops simple business logic, the working efficiency can be improved by 60%; when a developer develops complex business logic, the working efficiency can be improved by 30%. Therefore, the invention has the advantages of reusability, unified standard, convenient use and greatly improved working efficiency.
The embodiments in the above embodiments can be further combined or replaced, and the embodiments are only used for describing the preferred embodiments of the present invention, and do not limit the concept and scope of the present invention, and various changes and modifications made to the technical solution of the present invention by those skilled in the art without departing from the design idea of the present invention belong to the protection scope of the present invention.
Claims (7)
1. A realization method based on DAOTable universal list components is characterized by comprising the following steps:
creating Vue a single page application and configuring attributes of the data format that satisfy the standard table;
a function of generating the standard table based on a core.js function library;
v ue dynamically generating corresponding input boxes according to different functions of the standard table by using DAOFIELDBox;
and generating a data flow corresponding to the service based on the function of the standard table according to the service requirement of the client.
2. The method as claimed in claim 1, wherein the data flow corresponding to the service is generated based on the function of the standard table according to the service requirement of the client, and includes a data creation flow, a data display flow, and a data export flow.
3. The method of claim 2, wherein the step of the data creation process comprises:
calling the input box through a ShowInput interface to input data;
and performing format verification on the input of the data, and calling an Inser interface to write the data into a database if the verification is passed.
4. The method of claim 2, wherein the step of the data presentation process comprises:
obtaining a table structure through a GetSchema interface, and drawing a table interface according to the table structure;
and requesting data from the backend through a Search interface, and displaying the data on the form interface.
5. The method of claim 2, wherein the data export process comprises the steps of:
querying data through a Search interface;
and constructing Excel at the client, and storing the data to a local file of the client.
6. The method of claim 1, wherein the standard table functions include at least table framework construction, data query, data creation, data export, and table paging.
7. The method of claim 1, wherein configuring attributes of data format that satisfy the standard table comprises configuring basic data of the plug-in and related interface attributes.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010461111.8A CN111796808A (en) | 2020-05-27 | 2020-05-27 | Implementation method based on DAOTable universal list component |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010461111.8A CN111796808A (en) | 2020-05-27 | 2020-05-27 | Implementation method based on DAOTable universal list component |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111796808A true CN111796808A (en) | 2020-10-20 |
Family
ID=72805964
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010461111.8A Pending CN111796808A (en) | 2020-05-27 | 2020-05-27 | Implementation method based on DAOTable universal list component |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111796808A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112380482A (en) * | 2020-12-07 | 2021-02-19 | 四川长虹电器股份有限公司 | Modal frame component capable of dynamically configuring label page |
| CN112685435A (en) * | 2020-12-21 | 2021-04-20 | 福建新大陆软件工程有限公司 | Table query method and system based on Vue and Mybatis |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140337982A1 (en) * | 2013-05-09 | 2014-11-13 | Keesha M. Crosby | Risk Prioritization and Management |
| CN108959206A (en) * | 2018-07-02 | 2018-12-07 | 浪潮软件股份有限公司 | A kind of method and system of the optimization front end Vue form component rendering performance |
| CN109783751A (en) * | 2018-12-14 | 2019-05-21 | 平安普惠企业管理有限公司 | Form validation method and terminal device |
| CN109840303A (en) * | 2019-01-02 | 2019-06-04 | 平安科技（深圳）有限公司 | Original list method for customizing, device, equipment and computer readable storage medium |
| CN111104635A (en) * | 2019-12-23 | 2020-05-05 | 上海众源网络有限公司 | Table webpage generation method and device |
-
2020
- 2020-05-27 CN CN202010461111.8A patent/CN111796808A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140337982A1 (en) * | 2013-05-09 | 2014-11-13 | Keesha M. Crosby | Risk Prioritization and Management |
| CN108959206A (en) * | 2018-07-02 | 2018-12-07 | 浪潮软件股份有限公司 | A kind of method and system of the optimization front end Vue form component rendering performance |
| CN109783751A (en) * | 2018-12-14 | 2019-05-21 | 平安普惠企业管理有限公司 | Form validation method and terminal device |
| CN109840303A (en) * | 2019-01-02 | 2019-06-04 | 平安科技（深圳）有限公司 | Original list method for customizing, device, equipment and computer readable storage medium |
| CN111104635A (en) * | 2019-12-23 | 2020-05-05 | 上海众源网络有限公司 | Table webpage generation method and device |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112380482A (en) * | 2020-12-07 | 2021-02-19 | 四川长虹电器股份有限公司 | Modal frame component capable of dynamically configuring label page |
| CN112685435A (en) * | 2020-12-21 | 2021-04-20 | 福建新大陆软件工程有限公司 | Table query method and system based on Vue and Mybatis |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11210460B2 (en) | Templating process for a multi-page formatted document | |
| US8010940B2 (en) | Methods and apparatus for designing a workflow process using inheritance | |
| US8239226B2 (en) | Methods and apparatus for combining properties and methods from a plurality of different data sources | |
| CN110716951B (en) | Label configuration method, device and equipment convenient to configure and storage medium | |
| US20020129059A1 (en) | XML auto map generator | |
| US20060136810A1 (en) | Electronic form generator | |
| US8224853B2 (en) | Methods and apparatus for updating a plurality of data fields in an electronic form | |
| KR101275871B1 (en) | System and method for producing homepage in SaaS ENVIRONMENT, A computer-readable storage medium therefor | |
| CN105389184B (en) | The configuration method and device of Product Interface information | |
| CN102810094A (en) | Report generation method and device | |
| CN111324609A (en) | Knowledge graph construction method and device, electronic equipment and storage medium | |
| CN113268500B (en) | Service processing method and device and electronic equipment | |
| CN111796808A (en) | Implementation method based on DAOTable universal list component | |
| US7996758B2 (en) | Methods and apparatus for storing data associated with an electronic form | |
| US20070208777A1 (en) | Methods and apparatus for designing a workflow process using resource maps and process maps | |
| CN114282129A (en) | Information system page generation method, system, electronic equipment and storage medium | |
| US20070143305A1 (en) | Methods and apparatus for storing functions associated with an electronic form | |
| US20070143711A1 (en) | Methods and apparatus for displaying a setup sequence | |
| CN111339098A (en) | Authority management method, data query method and device | |
| CN116069330A (en) | Middle and background template construction method, device and storage medium | |
| CN112540988A (en) | Service processing device, processing method and readable storage medium | |
| US20070136367A1 (en) | Methods and apparatus for dynamically modifying a business object definition | |
| CN111506644B (en) | Application data processing method and device and electronic equipment | |
| CN115114280A (en) | Report generation processing method, device and equipment | |
| CN112905178A (en) | Method, device, equipment and medium for generating business function 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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20201020 |