CN112685435A - Table query method and system based on Vue and Mybatis - Google Patents

Table query method and system based on Vue and Mybatis Download PDF

Info

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
Application number
CN202011518276.0A
Other languages
Chinese (zh)
Inventor
周飞龙
陈建炜
陈东
徐增慧
周志武
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Fujia Newland Software Engineering Co ltd
Original Assignee
Fujia Newland Software Engineering Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Fujia Newland Software Engineering Co ltd filed Critical Fujia Newland Software Engineering Co ltd
Priority to CN202011518276.0A priority Critical patent/CN112685435A/en
Publication of CN112685435A publication Critical patent/CN112685435A/en
Pending legal-status Critical Current

Links

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

Table query method and system based on Vue and Mybatis
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:
Figure BDA0002848167490000051
Figure BDA0002848167490000061
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:
Figure BDA0002848167490000071
Figure BDA0002848167490000081
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.
CN202011518276.0A 2020-12-21 2020-12-21 Table query method and system based on Vue and Mybatis Pending CN112685435A (en)

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)

* Cited by examiner, † Cited by third party
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)

* Cited by examiner, † Cited by third party
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

Patent Citations (5)

* Cited by examiner, † Cited by third party
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)

* Cited by examiner, † Cited by third party
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)

* Cited by examiner, † Cited by third party
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