Method and device for realizing online SQL (Structured Query Language) query editor in vue framework

Abstract

The invention provides a method and a device for realizing an online SQL (Structured Query Language) query editor in a vue framework. The method comprises the following steps of: creating a self-defined SQL editor component sql.vue based on the vue framework, packaging a Codemirror into a Vue component, introducing a required CSS (Cascading Style Sheet) style and a JS (JavaScript) library according to requirements, acquiring a cmOptions parameter, and initializing the Codemirror; monitoring SQL (Structured Query Language) input, and obtaining the number of bytes of the currently input SQL text; and in response to an SQL execution button clicked by the user, the system sends the SQL statement to a back-end service for execution, and obtains an SQL execution result in an asynchronous callback mode. According to the method, complex configuration is not needed, SQL query can be edited and executed only by using a web browser, various database systems and SQL dialects are supported, and a user can query and operate a database more quickly.

Description

Technical Field

[0001] The present application belongs to the field of SQL statement query technology, and in particular, relates to a method and device for implementing an online SQL query editor in a Vue framework. Background Art

[0002] With the booming development of Internet technology and the continuous growth of enterprise data, the fragmentation of enterprise data and the storage of business data in different databases have brought great challenges to data management and analysis. By adopting SQL database and storing the database in structured tables, the data reading and writing capabilities are greatly improved. SQL editors have come into being, and the improvement of SQL editing capabilities has also promoted the development of SQL editors.

[0003] SQL editor is a tool for writing and executing SQL query statements. With the continuous upgrading of computer hardware and software, SQL editors have also been continuously updated and evolved, from the initial command line version to later visual software such as Oracle SQL Developer, Navicat Premium, etc.

[0004] As traditional editors become more popular, many problems are found in their use. For example, the installation is cumbersome, requiring the installation and configuration of the local development environment, and the complex operation methods may be a headache; the learning difficulty is high, and for non-professionals, the learning curve of SQL editors may be steep. Summary of the invention

[0005] In view of this, the present application aims to propose a method and device for implementing an online SQL query editor within a vue framework, so as to solve the problems that the SQL editor is cumbersome to install, complex to operate and difficult to learn.

[0006] To achieve the above purpose, the technical solution of this application is implemented as follows:

[0007] In the first aspect, the present application provides a method for implementing an online SQL query editor in a vue framework, including:

[0008] Initialize components. Create a custom SQL editor component sql.vue based on the vue framework. Encapsulate Codemirror into the Vue component through vue-codemirror. Introduce the required CSS style and JS library as needed. Get cmOptions parameters and initialize codemirror.

[0009] SQL input and monitoring, monitor SQL input in cursorActivity event, and obtain the number of bytes of SQL text currently input;

[0010] SQL execution logic, in response to the user clicking the "Execute SQL" button, the system sends the SQL statement to the backend service for execution, and obtains the SQL execution result through asynchronous callback.

[0011] In the second aspect, based on the same inventive concept, the present application also provides an implementation device of an online SQL query editor in a vue framework, including:

[0012] The component initialization module is configured to create a custom SQL editor component sql.vue based on the vue framework, encapsulate Codemirror into the Vue component through vue-codemirror, introduce the required CSS style and JS library as required, obtain the cmOptions parameter, and initialize codemirror;

[0013] The SQL input and monitoring module is configured to monitor SQL input in the cursorActivity event and obtain the number of bytes of the SQL text currently input;

[0014] The SQL execution logic module is configured to respond to the user clicking the "Execute SQL" button, the system sends the SQL statement to the backend service for execution, and obtains the SQL execution result through asynchronous callback.

[0015] In a third aspect, based on the same inventive concept, the present application also provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the method described in the first aspect is implemented.

[0016] In a fourth aspect, based on the same inventive concept, the present application also provides a non-transitory computer-readable storage medium, wherein the non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to enable the computer to execute the method described in the first aspect.

[0017] Compared with the prior art, the implementation method and device of an online SQL query editor in a vue framework described in this application have the following beneficial effects:

[0018] The present application describes a method and device for implementing an online SQL query editor within a Vue framework. The online SQL query editor implemented based on this method does not require the installation of any software or complex configuration. It only requires the use of a web browser to edit and execute SQL queries. It supports a variety of database systems and SQL dialects, can meet the needs of different users, and supports rich functions such as syntax highlighting, code completion, and SQL statement query, allowing users to query and operate databases more quickly and efficiently. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] The drawings constituting a part of the present application are used to provide a further understanding of the present application. The illustrative embodiments and descriptions of the present application are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0020] Figure 1 This is a flow chart of a method for implementing an online SQL query editor in a vue framework as described in an embodiment of the present application;

[0021] Figure 2 This is a schematic diagram of the structure of an implementation device of an online SQL query editor in a vue framework described in an embodiment of the present application;

[0022] Figure 3 This is a schematic diagram of the hardware structure of the electronic device described in the embodiment of the present application. DETAILED DESCRIPTION

[0023] In order to make the objectives, technical solutions and advantages of the present application more clearly understood, the present application is further described in detail below in combination with specific embodiments and with reference to the accompanying drawings.

[0024] It should be noted that, unless otherwise defined, the technical terms or scientific terms used in the embodiments of the present application should be the usual meanings understood by people with ordinary skills in the field to which the present application belongs. The "first", "second" and similar words used in the embodiments of the present application do not represent any order, quantity or importance, but are only used to distinguish different components. "Including" or "comprising" and similar words mean that the elements or objects appearing in front of the word cover the elements or objects listed after the word and their equivalents, without excluding other elements or objects. "Connect" or "connected" and similar words are not limited to physical or mechanical connections, but can include electrical connections, whether direct or indirect. "Up", "down", "left", "right" and the like are only used to indicate relative positional relationships. When the absolute position of the described object changes, the relative positional relationship may also change accordingly.

[0025] The embodiments of the present application are described in detail below with reference to the accompanying drawings.

[0026] See also Figure 1 As shown, this embodiment provides an implementation method of an online SQL query editor in a vue framework. The core of this method is to encapsulate the SQL editor as a custom Vue component, and implement syntax highlighting, code completion, SQL execution, SQL saving and other functions through the functional extension of the Vue framework, allowing users to query and operate the database more quickly and efficiently.

[0027] The method specifically comprises the following steps:

[0028] Step S101, component initialization, creating a custom SQL editor component sql.vue based on the vue framework, encapsulating Codemirror into the Vue component through vue-codemirror, and introducing the required CSS style and JS library as required, obtaining the cmOptions parameter, and initializing codemirror.

[0029] Specifically, in this embodiment, a file sql.vue is created, and html components are written, including creating a button function area: execute SQL, clear, save, SQL record and other operations; SQL input area: a SQL editor based on Codemirror, supporting syntax highlighting, code completion, and input restriction functions; message display area: displaying the results of SQL execution, limiting the display of a maximum of 100 rows of data, and the excess can be downloaded.

[0030] Some js components contain the following parameters, all of which are set to default values:

[0031] width / / width

[0032] height / / height

[0033] sql MaxLength / / sql maximum input bytes

[0034] cmOptions / / Editor custom parameters, support setting different syntax highlighting, code completion, theme styles, etc.

[0035] Specific code implementation:

[0036] Page Usage <sql>tag and pass in the following parameters:

[0037]

[0038] Step S102: SQL input and monitoring: monitoring SQL input in the cursorActivity event, and obtaining the number of bytes of the SQL text currently input.

[0039] In some implementations, the cursorActivity event is monitored, the number of bytes of the currently input SQL text is obtained through the Codemirror.getValue() method, and the maximum input byte number and the current byte number are displayed in the display area. If the current byte number exceeds the maximum input byte number limit, a warning prompt is popped up or further input is prohibited.

[0040] Specifically, in this embodiment, vue-codemirror is used to encapsulate Codemirror into the Vue component, and the required CSS styles and JS libraries (such as SQL syntax highlighting and auto-completion plug-ins) are introduced as needed. Codemirror is customized through the externally passed cmOptions parameter, such as whether to support code completion, theme selection, etc., and SQL syntax highlighting can also be selected through the mode configuration during initialization.

[0041] Enter the SQL statement in the SQL input area, listen to the SQL input in the cursorActivity event, and obtain the current SQL text byte number through the Codemirror.getValue() method. Display the byte number prompt in the message display area. If the byte number exceeds the sql MaxLength limit, a warning prompt can be popped up or further input can be prevented.

[0042] Step S103, SQL execution logic, in response to the user clicking the "Execute SQL" button, the system sends the SQL statement to the backend service for execution, and obtains the SQL execution result through asynchronous callback.

[0043] Specifically, in this embodiment, the input SQL statement is obtained, the execute button is clicked, the SQL statement is sent to the backend service in an asynchronous request, and the keydown event is monitored. If it is the Enter+ctrl key combination, the request is automatically sent.

[0044] The result information obtained after being processed by the backend service is displayed in the message display area, with a maximum of the first 100 rows displayed, and support for downloading all results.

[0045] In some implementations, by analyzing the input SQL statement, before executing the SQL statement, the execution time and resource consumption of the SQL statement are estimated through the backend service, and prompt information is displayed in the display area.

[0046] Furthermore, the EXPLAIN command is used to obtain the database execution plan and analyze the scan type, index used, and the estimated number of rows to be processed.

[0047] Combined with the statistical information of the database table, the resource consumption and execution time required for the SQL statement can be inferred; at the same time, the execution time of similar SQL statements can be obtained by querying the historical execution log or slow query log;

[0048] The execution time estimate is further optimized through the machine learning model. The estimated time is dynamically adjusted according to the real-time load of the database system, and an accurate execution time estimate is given.

[0049] Specifically, in this embodiment, the execution plan of the SQL statement returned by the database system is obtained through the EXPLAIN command, which includes information such as how to access the table, the index used, the connection method (such as nested loops, hash joins, etc.), the estimated number of I / O operations, the order of execution steps, and the estimated number of rows.

[0050] For example, MySQL's EXPLAIN command provides the following information: the order in which each table is accessed, the index used, the estimated number of rows read, and the type of join used (such as full table scan, index scan). With this information, you can determine the complexity of the SQL statement, whether a full table scan or a time-consuming JOIN operation will be performed, and thus estimate the execution time.

[0051] Database systems usually maintain statistical information about tables and indexes, including data volume, index usage frequency, table size and number of rows, etc.; with statistical information, the SQL optimizer can select the optimal query path and can also be used to estimate execution time.

[0052] This embodiment also uses a machine learning model to further optimize the prediction of execution time by analyzing the historical query logs of the database, especially the execution time of similar queries, to train the model to predict the execution time of the current query.

[0053] Specifically, the slow query log and historical execution time statistics provided by the database are used as training data sets, and the model learns the relationship between the characteristics of SQL statements and the execution time. The machine learning model used in this embodiment is a decision tree regression model based on historical data. The model uses the characteristics of SQL statements (such as statement length, number of tables used, number of JOIN tables, whether indexes are used, field types, etc.) as input to predict execution time.

[0054] In SQL execution time estimation, the real-time load of the system will also affect the actual execution time. When there are high concurrent requests or the current system resources are tight, even if the SQL statement structure is simple, the execution time may increase due to resource contention. This embodiment can dynamically adjust the SQL execution time by monitoring the CPU, memory, and disk I / O load of the current system.

[0055] In some embodiments, it further comprises:

[0056] The user clicks the "Save" button to save the current SQL statement to the local storage or database. The saved SQL record can be viewed through the "SQL Record" button and loaded into the SQL input area for the user to edit and execute again.

[0057] Specifically, in this embodiment, the method also has a saving and recording function. When the Save button is clicked, the current SQL statement is stored in the local storage (localStorage) or a request is sent to save it in the back-end database for subsequent query; when the "SQL Record" button is clicked, the historically saved SQL record is obtained from the localStorage or database and displayed to the user for query and re-execution.

[0058] In addition, this method also has a clearing function, specifically: click the clear button, use Codemirror.setValue(") to clear all SQL texts in the current editor, and prompt that it has been cleared in the display area to facilitate users to re-enter new SQL statements.

[0059] The online SQL query editor implemented based on this method does not require the installation of any software or complex configuration. It only needs to use a web browser to edit and execute SQL queries. It supports multiple database systems and SQL dialects, can meet the needs of different users, and supports rich functions such as syntax highlighting, code completion and SQL statement query, allowing users to query and operate databases more quickly and efficiently.

[0060] It should be noted that the above describes some embodiments of the present application. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the above embodiments and still achieve the desired results. In addition, the processes depicted in the accompanying drawings do not necessarily require the specific order or continuous order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0061] Based on the same inventive concept, corresponding to any of the above-mentioned embodiment methods, the embodiment of the present application also provides an implementation device of an online SQL query editor within a vue framework.

[0062] like Figure 2 As shown, the implementation device of the online SQL query editor in the vue framework includes:

[0063] The component initialization module 11 is configured to create a custom SQL editor component sql.vue based on the vue framework, encapsulate Codemirror into the Vue component through vue-codemirror, introduce the required CSS style and JS library according to the requirements, obtain the cmOptions parameter, and initialize codemirror;

[0064] The SQL input and monitoring module 12 is configured to monitor the SQL input in the cursorActivity event and obtain the number of bytes of the SQL text currently input;

[0065] The SQL execution logic module 13 is configured to respond to the user clicking the "Execute SQL" button, the system sends the SQL statement to the backend service for execution, and obtains the SQL execution result through asynchronous callback.

[0066] For the convenience of description, the above devices are described in terms of functions and are divided into various modules. Of course, when implementing the embodiments of the present application, the functions of each module can be implemented in the same or multiple software and / or hardware.

[0067] The device of the above embodiment is used to implement the corresponding method in any of the above embodiments, and has the beneficial effects of the corresponding method embodiment, which will not be described in detail here.

[0068] Based on the same inventive concept, corresponding to any of the above-mentioned embodiments and methods, an embodiment of the present application also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the method described in any of the above embodiments is implemented.

[0069] Figure 3 A more specific schematic diagram of the hardware structure of an electronic device provided in this embodiment is shown, and the device may include: a processor 1010, a memory 1020, an input / output interface 1030, a communication interface 1040, and a bus 1050. The processor 1010, the memory 1020, the input / output interface 1030, and the communication interface 1040 are connected to each other through the bus 1050 in the device.

[0070] The processor 1010 can be implemented by a general-purpose CPU (Central Processing Unit), a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of this specification.

[0071] The memory 1020 may be implemented in the form of ROM (Read Only Memory), RAM (Random Access Memory), static storage device, dynamic storage device, etc. The memory 1020 may store an operating system and other application programs. When the technical solutions provided in the embodiments of this specification are implemented by software or firmware, the relevant program codes are stored in the memory 1020 and are called and executed by the processor 1010.

[0072] The input / output interface 1030 is used to connect the input / output module to realize information input and output. The input / output module can be configured in the device as a component (not shown in the figure), or it can be externally connected to the device to provide corresponding functions. The input device may include a keyboard, a mouse, a touch screen, a microphone, various sensors, etc., and the output device may include a display, a speaker, a vibrator, an indicator light, etc.

[0073] The communication interface 1040 is used to connect a communication module (not shown) to realize communication interaction between the device and other devices. The communication module can realize communication through a wired mode (such as USB, network cable, etc.) or a wireless mode (such as mobile network, WIFI, Bluetooth, etc.).

[0074] The bus 1050 includes a path that transmits information between the various components of the device (eg, the processor 1010, the memory 1020, the input / output interface 1030, and the communication interface 1040).

[0075] It should be noted that, although the above device only shows the processor 1010, the memory 1020, the input / output interface 1030, the communication interface 1040 and the bus 1050, in the specific implementation process, the device may also include other components necessary for normal operation. In addition, it can be understood by those skilled in the art that the above device may also only include the components necessary for implementing the embodiments of the present specification, and does not necessarily include all the components shown in the figure.

[0076] The electronic device of the above embodiment is used to implement the corresponding method in any of the above embodiments, and has the beneficial effects of the corresponding method embodiment, which will not be described in detail here.

[0077] Based on the same inventive concept, corresponding to any of the above-mentioned embodiments, the present application also provides a non-transitory computer-readable storage medium, wherein the non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to enable the computer to execute the method described in any of the above embodiments.

[0078] The computer-readable medium of this embodiment includes permanent and non-permanent, removable and non-removable media, and information storage can be implemented by any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, read-only compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, tape disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device.

[0079] The computer instructions stored in the storage medium of the above embodiments are used to enable the computer to execute the method described in any of the above embodiments, and have the beneficial effects of the corresponding method embodiments, which will not be repeated here.

[0080] Those skilled in the art should understand that the discussion of any of the above embodiments is merely illustrative and is not intended to imply that the scope of the present application (including the claims) is limited to these examples. In line with the concept of the present application, the technical features in the above embodiments or different embodiments may be combined, the steps may be implemented in any order, and there are many other variations of the different aspects of the embodiments of the present application as described above, which are not provided in detail for the sake of simplicity.

[0081] In addition, to simplify the description and discussion, and in order not to make the embodiments of the present application difficult to understand, the known power supply / ground connection with the integrated circuit (IC) chip and other components may or may not be shown in the provided drawings. In addition, the device can be shown in the form of a block diagram to avoid making the embodiments of the present application difficult to understand, and this also takes into account the fact that the details of the implementation of these block diagram devices are highly dependent on the platform to be implemented in the embodiments of the present application (that is, these details should be fully within the scope of understanding of those skilled in the art). In the case of elaborating specific details (e.g., circuits) to describe exemplary embodiments of the present application, it is obvious to those skilled in the art that the embodiments of the present application can be implemented without these specific details or when these specific details are changed. Therefore, these descriptions should be considered to be illustrative rather than restrictive.

[0082] Although the present application has been described in conjunction with specific embodiments of the present application, many replacements, modifications and variations of these embodiments will be apparent to those skilled in the art based on the foregoing description. For example, other memory architectures (e.g., dynamic RAM (DRAM)) may use the embodiments discussed.

[0083] The embodiments of the present application are intended to cover all such substitutions, modifications and variations that fall within the broad scope of the appended claims. Therefore, any omissions, modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the embodiments of the present application should be included in the scope of protection of the present application.< / sql>

Claims

1. A method for implementing an online SQL query editor in a vue framework, characterized in that: include: Initialize components. Create a custom SQL editor component sql.vue based on the vue framework. Encapsulate Codemirror into the Vue component through vue-codemirror. Introduce the required CSS style and JS library as needed. Get cmOptions parameters and initialize codemirror. SQL input and monitoring, monitor SQL input in cursorActivity event, and obtain the number of bytes of SQL text currently input; SQL execution logic: in response to the user clicking the "Execute SQL" button, the system sends the SQL statement to the backend service for execution, and obtains the SQL execution result through asynchronous callback.

2. The method according to claim 1, characterized in that Some components of vue.js include the following parameters: Page width, height, maximum input bytes and editor customization parameters.

3. The method according to claim 2, characterized in that The SQL input is listened to in the cursorActivity event, and the number of bytes of the SQL text currently input is obtained, including: Listen to cursorActivity events, obtain the number of bytes of the currently input SQL text through the Codemirror.getValue() method, and display the maximum input byte number and the current byte number in the display area. If the current byte number exceeds the maximum input byte limit, a warning prompt will pop up or prevent further input.

4. The method according to claim 1, characterized in that: In response to the user clicking the "Execute SQL" button, the system sends the SQL statement to the backend service for execution, and obtains the SQL execution result through asynchronous callback, including: Get the input SQL statement and click the Execute SQL button. The component will send the SQL statement to the backend service through asynchronous request and display the execution result in real time. At the same time, it supports the Ctrl+Enter shortcut key to automatically send the request to trigger SQL execution.

5. The method according to claim 4, characterized in that Also includes: By analyzing the input SQL statement, before executing the SQL statement, the backend service estimates the execution time and resource consumption of the SQL statement, and displays prompt information in the display area.

6. The method according to claim 4, characterized in that The estimation of the execution time and resource consumption of SQL statements through the backend service includes: Use the EXPLAIN command to obtain the database execution plan and analyze the scan type, index used, and the estimated number of rows to be processed. Combined with the statistical information of the database table, the resource consumption and execution time required for the SQL statement can be inferred; at the same time, the execution time of similar SQL statements can be obtained by querying the historical execution log or slow query log; The execution time estimate is further optimized through the machine learning model. The estimated time is dynamically adjusted according to the real-time load of the database system, and an accurate execution time estimate is given.

7. The method according to claim 1, characterized in that Also includes: The user clicks the "Save" button to save the current SQL statement to the local storage or database. The saved SQL record can be viewed through the "SQL Record" button and loaded into the SQL input area for the user to edit and execute again.

8. A device for implementing an online SQL query editor in a vue framework, characterized in that: include: The component initialization module is configured to create a custom SQL editor component sql.vue based on the vue framework, encapsulate Codemirror into the Vue component through vue-codemirror, introduce the required CSS style and JS library as required, obtain the cmOptions parameter, and initialize codemirror; The SQL input and monitoring module is configured to monitor SQL input in the cursorActivity event and obtain the number of bytes of the SQL text currently input; The SQL execution logic module is configured to respond to the user clicking the "Execute SQL" button, the system sends the SQL statement to the backend service for execution, and obtains the SQL execution result through asynchronous callback.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, the method according to any one of claims 1 to 7 is implemented.

10. A non-transitory computer-readable storage medium, characterized in that: in, The non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to cause a computer to execute the method according to any one of claims 1 to 7.

Images