CN112685435A - Table query method and system based on Vue and Mybatis - Google Patents
Table query method and system based on Vue and Mybatis Download PDFInfo
- Publication number
- CN112685435A CN112685435A CN202011518276.0A CN202011518276A CN112685435A CN 112685435 A CN112685435 A CN 112685435A CN 202011518276 A CN202011518276 A CN 202011518276A CN 112685435 A CN112685435 A CN 112685435A
- Authority
- CN
- China
- Prior art keywords
- query
- mybatis
- vue
- parameter
- field
- 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 26
- 238000009877 rendering Methods 0.000 claims abstract description 31
- 238000012163 sequencing technique Methods 0.000 claims description 12
- 238000006243 chemical reaction Methods 0.000 claims description 8
- 230000002688 persistence Effects 0.000 abstract description 2
- 238000001914 filtration Methods 0.000 description 9
- 238000012545 processing Methods 0.000 description 8
- 238000007726 management method Methods 0.000 description 6
- 238000013507 mapping Methods 0.000 description 6
- 238000013499 data model Methods 0.000 description 4
- 238000011161 development Methods 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 230000001174 ascending effect Effects 0.000 description 2
- 238000013461 design Methods 0.000 description 2
- 238000002347 injection Methods 0.000 description 2
- 239000007924 injection Substances 0.000 description 2
- 230000007246 mechanism Effects 0.000 description 2
- 238000010586 diagram Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000011112 process operation Methods 0.000 description 1
- 230000009466 transformation Effects 0.000 description 1
Images
Landscapes
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The invention provides a form query method and a form query system based on Vue and Mybatis in the technical field of WEB interfaces and Java persistence layers, wherein the method comprises the following steps: step S10, creating a query field configuration table, and rendering the query field configuration table into a VUE component; step S20, acquiring an input query field through an input form area, generating a query parameter by the VUE component based on the query field, and sending the query parameter to Mybatis; step S30, the received query parameters are analyzed by Mybatis, and the query parameters are converted and set into parameter objects; and step S40, reconstructing a query statement by the Mybatis interceptor based on the parameter object, and executing the query statement by the Mybatis to return a query result. The invention has the advantages that: the operation of data query is greatly simplified, and the efficiency of data query and positioning is improved.
Description
Technical Field
The invention relates to the technical field of WEB interfaces and Java persistence layers, in particular to a form query method and a form query system based on Vue and Mybatis.
Background
Platform as a Service (Platform as a Service), abbreviated as PaaS in english, is an important component in the cloud computing industry chain, and is located between an iaas (infrastructure as a Service) Platform and a saas (software as a Service) Platform, and includes an operating system, a development tool, and the like. The PaaS platform can help enterprises to advance to the system and application from the cloud on the infrastructure, and optimize the enterprise software development mode, so that the PaaS platform becomes a necessary choice for the digital transformation of traditional enterprises and the architecture upgrading.
The functions of the PaaS platform comprise modules such as a platform portal, resource management, cluster management, application management, service management, asset management and system management. In the PaaS platform user interaction process, data of each module is mostly displayed in a table form, and a table custom query component is required to be used for quickly checking and positioning data so as to facilitate normal business process operation and data circulation.
The currently popular VUE component libraries that support table data filtering and sorting include: element, vue-easy, vxe-table 3.x, etc.; the components have basic elements and core functions of table data filtering and sorting, and comprise a filtering condition input form, table column sorting rule setting, a single column sorting button, a filtering condition query event, a column sorting event and the like. Although these components can support table data filtering and sorting, in practical application, developers need to have deep knowledge about the data structure and the use method of each component, that is, users are not very friendly to operate, and certain thresholds exist, so that various requirements of users cannot be met.
Therefore, how to provide a form query method and system based on Vue and Mybatis becomes a problem to be solved urgently, so as to simplify the operation of data query and improve the efficiency of data query and positioning.
Disclosure of Invention
The technical problem to be solved by the invention is to provide a form query method and system based on Vue and Mybatis, so that the operation of data query is simplified, and the efficiency of data query and positioning is improved.
In a first aspect, the present invention provides a form query method based on Vue and Mybatis, including the following steps:
step S10, creating a query field configuration table, and rendering the query field configuration table into a VUE component;
step S20, acquiring an input query field through an input form area, generating a query parameter by the VUE component based on the query field, and sending the query parameter to Mybatis;
step S30, the received query parameters are analyzed by Mybatis, and the query parameters are converted and set into parameter objects;
and step S40, reconstructing a query statement by the Mybatis interceptor based on the parameter object, and executing the query statement by the Mybatis to return a query result.
Further, in step S10, the query field configuration table at least includes table attribute information, table column component information, query data table field information, and user-defined sorting information.
Further, in the step S10, the rendering the query field configuration table into the VUE component specifically includes:
rendering the query field configuration table into a VUE component by utilizing an element-ui component technology; the VUE component is a text box, drop-down box, date box, or date zone box.
Further, the step S20 is specifically:
and acquiring input query fields comprising a filter field and a sequencing field through an input form area, calling a model conversion algorithm by the VUE component, matching a query field configuration table based on the query fields, generating a query parameter at the front end, and sending the query parameter to Mybatis at the rear end.
In a second aspect, the present invention provides a form query system based on Vue and Mybatis, including the following modules:
the VUE component rendering module is used for creating a query field configuration table and rendering the query field configuration table into a VUE component;
the query parameter generation module is used for acquiring an input query field through an input form area, and the VUE component generates a query parameter based on the query field and sends the query parameter to Mybatis;
the parameter object setting module is used for analyzing the received query parameters by the Mybatis, converting the query parameters and setting the query parameters into a parameter object;
and the query module is used for reconstructing a query statement by the Mybatis interceptor based on the parameter object, and the Mybatis executes the query statement to return a query result.
Further, in the VUE component rendering module, the query field configuration table at least includes table attribute information, table column component information, query data table field information, and user-defined sorting information.
Further, in the VUE component rendering module, the rendering the query field configuration table into the VUE component specifically includes:
rendering the query field configuration table into a VUE component by utilizing an element-ui component technology; the VUE component is a text box, drop-down box, date box, or date zone box.
Further, the query parameter generating module specifically includes:
and acquiring input query fields comprising a filter field and a sequencing field through an input form area, calling a model conversion algorithm by the VUE component, matching a query field configuration table based on the query fields, generating a query parameter at the front end, and sending the query parameter to Mybatis at the rear end.
The invention has the advantages that:
the method comprises the steps that a query field configuration table is created and rendered into a VUE component, a query field input by a user through an input form area is converted into a query parameter by the VUE component, the query parameter is converted by the Mybatis and set into a parameter object, and a Mybatis interceptor reconstructs a query statement through the parameter object, namely, the query field input by the user initially is converted into a corresponding query statement, and then query operation is executed according to the query statement; namely, the user only needs to input the query field to complete the query of the form data without deeply knowing the data structure and the using method of each component in the prior art, and the VUE component has a friendly operation interface, thereby greatly simplifying the operation of data query and greatly improving the efficiency of data query and positioning.
Drawings
The invention will be further described with reference to the following examples with reference to the accompanying drawings.
FIG. 1 is a flow chart of a table query method based on Vue and Mybatis according to the invention.
FIG. 2 is a schematic structural diagram of a table query system based on Vue and Mybatis according to the present invention.
Detailed Description
The technical scheme in the embodiment of the application has the following general idea: the method comprises the steps of rendering a preset query field configuration table into a VUE assembly, converting a query field input by a user into a query parameter by using the VUE assembly, and sending the query parameter to Mybatis, reconstructing and executing a query statement based on the received query parameter, namely, enabling the user to input a simple query field to complete query of form data, simplifying data query operation, and improving data query and positioning efficiency.
Referring to fig. 1 to 2, a preferred embodiment of a table query method based on Vue and Mybatis according to the invention includes the following steps:
step S10, creating a query field configuration table, and rendering the query field configuration table into a VUE component;
step S20, acquiring an input query field through an input form area, generating a query parameter by the VUE component based on the query field, and sending the query parameter to Mybatis; when a user inputs a query field, a red frame is displayed on the interface for prompting;
the input form area can input or empty data, and supports characters, numbers, dictionaries, access interfaces, key value pair data and the LIKE, wherein the dictionary, the access interfaces and the key value pair data are used for drawing down boxes, and the operation types support ═, >, < ═ and lige;
step S30, the received query parameters are analyzed by Mybatis, and the query parameters are converted and set into parameter objects;
and step S40, reconstructing a query statement by the Mybatis interceptor based on the parameter object, and executing the query statement by the Mybatis to return a query result. The query results support display in a contracted and expanded manner, and display in an ascending order, a descending order and a non-ordered order.
In step S10, the query field configuration table at least includes table attribute information, table column component information, query data table field information, and user-defined sorting information. The query field configuration table is used for connecting the query field at the front end and the query parameter at the back end.
In step S10, the rendering the query field configuration table into a VUE component specifically includes:
rendering the query field configuration table into a VUE component by utilizing an element-ui component technology; the VUE component is a text box, drop-down box, date box, or date zone box.
Based on the MVVM layered development idea, the query field configuration table is rendered into the VUE component by combining the element-ui component technology, the page is automatically arranged by combining the type and the sequencing information of the field in the rendering process, and the method is more convenient compared with the traditional manual query component adding mode.
The step S20 specifically includes:
and acquiring input query fields comprising a filter field and a sequencing field through an input form area, calling a model conversion algorithm by the VUE component, matching a query field configuration table based on the query fields, generating a query parameter at the front end, and sending the query parameter to Mybatis at the rear end.
The model conversion algorithm is used for comparing the difference between the form data model and the data model which can be identified at the back end, inputting the filtering field and the sequencing field which are acquired for the input form area, and outputting the query parameters which are a certain rule, wherein the specific rule data format is as follows:
compared with other ORM frameworks, the Mybatis technology has strong flexibility, is loosely coupled with an application program and a database design, and is easier to reuse.
In step S30, the converting and setting the query parameter into a parameter object specifically includes:
step S31, processing the paging query statement of the query parameter by using an Executor interceptor, and setting the execution sequence of the filtering query interceptor in front of the paging interceptor;
step S32, extracting the query and sequencing information transmitted by the VUE component, generating sql, merging the sql into the original sql statement, and generating new sql; the value of the query field is configured in a mode of # { parameter name, jdbcType ═ type };
step S33, constructing a mapping relation between the newly added parameter name and the position of the placeholder in the newly generated sql;
and step S34, setting parameter values into the parameter objects of the sql according to the parameter names and the mapping relation.
The self-defined model is converted into a model which can be identified and used by Mybatis, the efficiency of data query can be improved by means of a cache mechanism of Mybatis, and the problems of SQL injection and the like can be avoided.
In step S40, the reconstructing, by the Mybatis interceptor based on the parameter object, of the query statement specifically includes:
transmitting the sql statement, the mapping relation and the parameter object generated in the step S30 into a mybatis executor for paging query processing; the reconstructed query statement and the Mybatis native statement have the same format, and a Mybatis query result processing mode can be multiplexed without changing the original business query result processing mode.
The invention relates to a preferred embodiment of a table query system based on Vue and Mybatis, which comprises the following modules:
the VUE component rendering module is used for creating a query field configuration table and rendering the query field configuration table into a VUE component;
the query parameter generation module is used for acquiring an input query field through an input form area, and the VUE component generates a query parameter based on the query field and sends the query parameter to Mybatis; when a user inputs a query field, a red frame is displayed on the interface for prompting;
the input form area can input or empty data, and supports characters, numbers, dictionaries, access interfaces, key value pair data and the LIKE, wherein the dictionary, the access interfaces and the key value pair data are used for drawing down boxes, and the operation types support ═, >, < ═ and lige;
the parameter object setting module is used for analyzing the received query parameters by the Mybatis, converting the query parameters and setting the query parameters into a parameter object;
and the query module is used for reconstructing a query statement by the Mybatis interceptor based on the parameter object, and the Mybatis executes the query statement to return a query result. The query results support display in a contracted and expanded manner, and display in an ascending order, a descending order and a non-ordered order.
In the VUE component rendering module, the query field configuration table at least includes table attribute information, table column component information, query data table field information, and user-defined sorting information. The query field configuration table is used for connecting the query field at the front end and the query parameter at the back end.
In the VUE component rendering module, the rendering of the query field configuration table into the VUE component specifically includes:
rendering the query field configuration table into a VUE component by utilizing an element-ui component technology; the VUE component is a text box, drop-down box, date box, or date zone box.
Based on the MVVM layered development idea, the query field configuration table is rendered into the VUE component by combining the element-ui component technology, the page is automatically arranged by combining the type and the sequencing information of the field in the rendering process, and the method is more convenient compared with the traditional manual query component adding mode.
The query parameter generation module specifically comprises:
and acquiring input query fields comprising a filter field and a sequencing field through an input form area, calling a model conversion algorithm by the VUE component, matching a query field configuration table based on the query fields, generating a query parameter at the front end, and sending the query parameter to Mybatis at the rear end.
The model conversion algorithm is used for comparing the difference between the form data model and the data model which can be identified at the back end, inputting the filtering field and the sequencing field which are acquired for the input form area, and outputting the query parameters which are a certain rule, wherein the specific rule data format is as follows:
compared with other ORM frameworks, the Mybatis technology has strong flexibility, is loosely coupled with an application program and a database design, and is easier to reuse.
In the parameter object setting module, the converting and setting the query parameter into a parameter object specifically includes:
processing the paging query statement of the query parameter by using an Executor interceptor, and setting the execution sequence of the filtering query interceptor in front of the paging interceptor;
extracting query and sequencing information transmitted by the VUE component, generating sql, combining the sql into an original sql statement, and generating new sql; the value of the query field is configured in a mode of # { parameter name, jdbcType ═ type };
constructing a mapping relation between the newly added parameter name and the position of a placeholder in the newly generated sql;
and setting parameter values to the parameter objects of the sql according to the parameter names and the mapping relation.
The self-defined model is converted into a model which can be identified and used by Mybatis, the efficiency of data query can be improved by means of a cache mechanism of Mybatis, and the problems of SQL injection and the like can be avoided.
In the query module, the reconstructing, by the Mybatis interceptor based on the parameter object, a query statement specifically includes:
transmitting sql statements, mapping relations and parameter objects generated in the parameter object setting module into a mybatis executor for paging query processing; the reconstructed query statement and the Mybatis native statement have the same format, and a Mybatis query result processing mode can be multiplexed without changing the original business query result processing mode.
In summary, the invention has the advantages that:
the method comprises the steps that a query field configuration table is created and rendered into a VUE component, a query field input by a user through an input form area is converted into a query parameter by the VUE component, the query parameter is converted by the Mybatis and set into a parameter object, and a Mybatis interceptor reconstructs a query statement through the parameter object, namely, the query field input by the user initially is converted into a corresponding query statement, and then query operation is executed according to the query statement; namely, the user only needs to input the query field to complete the query of the form data without deeply knowing the data structure and the using method of each component in the prior art, and the VUE component has a friendly operation interface, thereby greatly simplifying the operation of data query and greatly improving the efficiency of data query and positioning.
Although specific embodiments of the invention have been described above, it will be understood by those skilled in the art that the specific embodiments described are illustrative only and are not limiting upon the scope of the invention, and that equivalent modifications and variations can be made by those skilled in the art without departing from the spirit of the invention, which is to be limited only by the appended claims.
Claims (8)
1. A form query method based on Vue and Mybatis is characterized in that: the method comprises the following steps:
step S10, creating a query field configuration table, and rendering the query field configuration table into a VUE component;
step S20, acquiring an input query field through an input form area, generating a query parameter by the VUE component based on the query field, and sending the query parameter to Mybatis;
step S30, the received query parameters are analyzed by Mybatis, and the query parameters are converted and set into parameter objects;
and step S40, reconstructing a query statement by the Mybatis interceptor based on the parameter object, and executing the query statement by the Mybatis to return a query result.
2. The form lookup method of claim 1 based on Vue and Mybatis, wherein: in step S10, the query field configuration table at least includes table attribute information, table column component information, query data table field information, and user-defined sorting information.
3. The form lookup method of claim 1 based on Vue and Mybatis, wherein: in step S10, the rendering the query field configuration table into a VUE component specifically includes:
rendering the query field configuration table into a VUE component by utilizing an element-ui component technology; the VUE component is a text box, drop-down box, date box, or date zone box.
4. The form lookup method of claim 1 based on Vue and Mybatis, wherein: the step S20 specifically includes:
and acquiring input query fields comprising a filter field and a sequencing field through an input form area, calling a model conversion algorithm by the VUE component, matching a query field configuration table based on the query fields, generating a query parameter at the front end, and sending the query parameter to Mybatis at the rear end.
5. A form query system based on Vue and Mybatis, characterized by: the system comprises the following modules:
the VUE component rendering module is used for creating a query field configuration table and rendering the query field configuration table into a VUE component;
the query parameter generation module is used for acquiring an input query field through an input form area, and the VUE component generates a query parameter based on the query field and sends the query parameter to Mybatis;
the parameter object setting module is used for analyzing the received query parameters by the Mybatis, converting the query parameters and setting the query parameters into a parameter object;
and the query module is used for reconstructing a query statement by the Mybatis interceptor based on the parameter object, and the Mybatis executes the query statement to return a query result.
6. The system of claim 4, wherein the Vue and Mybatis based form query system is configured to: in the VUE component rendering module, the query field configuration table at least includes table attribute information, table column component information, query data table field information, and user-defined sorting information.
7. The system of claim 4, wherein the Vue and Mybatis based form query system is configured to: in the VUE component rendering module, the rendering of the query field configuration table into the VUE component specifically includes:
rendering the query field configuration table into a VUE component by utilizing an element-ui component technology; the VUE component is a text box, drop-down box, date box, or date zone box.
8. The system of claim 4, wherein the Vue and Mybatis based form query system is configured to: the query parameter generation module specifically comprises:
and acquiring input query fields comprising a filter field and a sequencing field through an input form area, calling a model conversion algorithm by the VUE component, matching a query field configuration table based on the query fields, generating a query parameter at the front end, and sending the query parameter to Mybatis at the rear end.
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011518276.0A CN112685435A (en) | 2020-12-21 | 2020-12-21 | Table query method and system based on Vue and Mybatis |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011518276.0A CN112685435A (en) | 2020-12-21 | 2020-12-21 | Table query method and system based on Vue and Mybatis |
Publications (1)
Publication Number | Publication Date |
---|---|
CN112685435A true CN112685435A (en) | 2021-04-20 |
Family
ID=75449773
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011518276.0A Pending CN112685435A (en) | 2020-12-21 | 2020-12-21 | Table query method and system based on Vue and Mybatis |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112685435A (en) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN115269060A (en) * | 2022-06-15 | 2022-11-01 | 知学云(北京)科技股份有限公司 | Service execution pre-post processing method based on aPaaS platform |
Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110222321A (en) * | 2019-04-16 | 2019-09-10 | 中国平安人寿保险股份有限公司 | Report form generation method, device, computer installation and computer readable storage medium |
CN110825766A (en) * | 2019-11-13 | 2020-02-21 | 恩亿科(北京)数据科技有限公司 | Query condition generation method and device, server and readable storage medium |
CN111611270A (en) * | 2020-05-26 | 2020-09-01 | 深圳博沃智慧科技有限公司 | Form design and operation processing method and system |
CN111796808A (en) * | 2020-05-27 | 2020-10-20 | 福信富通科技股份有限公司 | Implementation method based on DAOTable universal list component |
WO2020232569A1 (en) * | 2019-05-17 | 2020-11-26 | 环球雅途集团有限公司 | Database access layer representation method and device |
-
2020
- 2020-12-21 CN CN202011518276.0A patent/CN112685435A/en active Pending
Patent Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110222321A (en) * | 2019-04-16 | 2019-09-10 | 中国平安人寿保险股份有限公司 | Report form generation method, device, computer installation and computer readable storage medium |
WO2020232569A1 (en) * | 2019-05-17 | 2020-11-26 | 环球雅途集团有限公司 | Database access layer representation method and device |
CN110825766A (en) * | 2019-11-13 | 2020-02-21 | 恩亿科(北京)数据科技有限公司 | Query condition generation method and device, server and readable storage medium |
CN111611270A (en) * | 2020-05-26 | 2020-09-01 | 深圳博沃智慧科技有限公司 | Form design and operation processing method and system |
CN111796808A (en) * | 2020-05-27 | 2020-10-20 | 福信富通科技股份有限公司 | Implementation method based on DAOTable universal list component |
Non-Patent Citations (2)
Title |
---|
FORGETMETOO: "vue+mybatis-plus实现条件查询", 《HTTPS://BLOG.CSDN.NET/FORGETMETOO/ARTICLE/DETAILS/101374000?》 * |
HYHELLO4531T: "基于vue的ElementUI可视化表单设计器布局器", 《HTTPS://BLOG.CSDN.NET/HEYE520/ARTICLE/DETAILS/101205457?》 * |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN115269060A (en) * | 2022-06-15 | 2022-11-01 | 知学云(北京)科技股份有限公司 | Service execution pre-post processing method based on aPaaS platform |
CN115269060B (en) * | 2022-06-15 | 2023-06-20 | 知学云(北京)科技股份有限公司 | Service execution pre-post processing method based on aPaaS platform |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN109582647B (en) | Unstructured evidence file oriented analysis method and system | |
US8103705B2 (en) | System and method for storing text annotations with associated type information in a structured data store | |
CN108984155B (en) | Data processing flow setting method and device | |
CN112364101A (en) | Data synchronization method and device, terminal equipment and medium | |
CN111414350B (en) | Service generation method and device | |
CN111176627A (en) | Device and method for separating front end from back end based on micro-service | |
CN114036183A (en) | Data ETL processing method, device, equipment and medium | |
CN104750472A (en) | Resource bundle management method and device of terminal application | |
CN108153522B (en) | Method for generating Spark and Hadoop program codes by midcore based on model conversion | |
CN110750553A (en) | Method for self-defining export of data in service management system | |
CN106547765B (en) | SQ L-based database management method and device | |
CN111367893A (en) | Method and device for database version iteration | |
CN112685435A (en) | Table query method and system based on Vue and Mybatis | |
CN114371845A (en) | Form generation method and device | |
CN111126008A (en) | XSD-based code generation method and device, computer equipment and storage medium | |
CN115469849B (en) | Service processing system, method, electronic equipment and storage medium | |
JP2010267092A (en) | Information processor and information processing method | |
CN111008011A (en) | System builder for power platform application development | |
US11681721B2 (en) | Systems and methods for spark lineage data capture | |
CN113722337B (en) | Service data determination method, device, equipment and storage medium | |
CN114385145A (en) | Web system back-end architecture design method and computer equipment | |
CN114371848A (en) | Page joint debugging method, device, equipment and storage medium | |
US20200278981A1 (en) | Information processing device and non-transitory computer readable medium | |
CN109241158B (en) | Data source definition method and device for rule management | |
CN112199335A (en) | Generation method and generation system of operation log |
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: 20210420 |