Terminal command line editing method and device based on open source plug-in
Through the terminal command line editing method based on open source plug-ins, the security and maintenance problems of directly entering SQL statements in the command line in the existing technology are solved, and the database is directly operated by directly entering SQL command line on the web side, improving work efficiency.
Patent Information
- Application Number
- CN202411362547.6
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-09-27
- Publication Date
- 2025-02-11
AI Technical Summary
In the prior art, the direct input of SQL statements in the command line has security and maintenance problems, and long-term reliance on the command line to enter SQL statements will lead to tedious work of repeated input and copy-paste, reducing work efficiency.
Provide a method of terminal command line editing based on open source plug-ins. Create terminal objects by referring to open source plug-ins and create SQL editing area in the page to control the Backspace key to be unresponsive. When the enter key event is triggered, the SQL editing area will be placed in the SQL editing area. Send the string to the backend or move the cursor to the next line.
It realizes direct input of SQL command line on the web side to operate the database directly, which improves security and maintenance, reduces the tedious work of repeated input, and improves work efficiency.
Smart Images

Figure CN119414992A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of computer technology, and in particular to a method and device for editing terminal command lines based on an open source plug-in. Background Art
[0002] Database is an essential component in the software development process. For example, when a software program is executed, it is necessary to retrieve data from the database or perform operations on the database.
[0003] The main disadvantages of directly inputting SQL statements in the command line in the prior art are poor security and maintainability. SQL statements usually contain sensitive information, such as passwords and sensitive data, which may be leaked through command history records when directly input. In addition, long-term reliance on the command line to input SQL statements may lead to tedious work such as repeated input and copy-paste, which reduces work efficiency.
[0004] In summary, the prior art lacks a method for directly inputting SQL command lines on a web terminal to directly operate a database. Summary of the invention
[0005] In view of this, it is necessary to provide a method and device for terminal command line editing based on open source plug-ins to achieve the purpose of directly operating the database by inputting SQL commands on the web side.
[0006] In order to achieve the above object, the present invention provides a method for editing terminal command lines based on an open source plug-in, comprising: Reference the open source plug-in to create a terminal object, and insert the terminal object into the page to obtain the inserted page; Creating a SQL editing area in the inserted page based on the terminal object; When the Backspace key event is triggered in the first line of the SQL editing area, and the cursor is at the end of the last character of the leading string in the SQL editing area, the Backspace key is controlled to be unresponsive; When the SQL editing area triggers an enter key event, the character string in the SQL editing area is sent to the back end or the cursor is moved to the next line.
[0007] In a possible implementation, the creating a terminal object by referencing an open source plug-in and inserting the terminal object into a page to obtain an inserted page includes: Create an xterm container based on xtermjs; Creating a terminal object in the xterm container, wherein the terminal object includes one or more of the font, cursor position, line height and font size of the xterm container; Insert the terminal object into the page to get the inserted page.
[0008] In a possible implementation, the method further includes monitoring one or more of a left arrow event, a right arrow event, an up arrow event, and a down arrow event in the SQL editing area.
[0009] In a possible implementation, the method further includes: Introduce the xterm-addon-fit plug-in into the inserted page to create a size adaptation device for the console area corresponding to the terminal object.
[0010] In a possible implementation, the method further includes: Remove or modify the background color of the console area corresponding to the terminal object based on the DOM selector.
[0011] In a possible implementation, when the SQL editing area triggers the enter key event, sending the character string in the SQL editing area to the backend or moving the cursor to the next line includes: When the SQL editing area triggers an enter key click event, when it is determined that the last character of the character string in the SQL editing area is a preset character, the character string is sent to a backend server; When the SQL editing area triggers an enter key click event, when it is determined that the last character of the character string in the SQL editing area is not a preset character, the cursor is positioned to the next line of the current cursor position.
[0012] In a possible implementation, when a Backspace key event is triggered in the first line of the SQL editing area and the cursor is at the end of the last character of the leading string in the SQL editing area, controlling the Backspace key to be unresponsive includes: When a Backspace key event is triggered in the first line of the SQL editing area, and the cursor is at the end of the last character of the preceding string in the SQL editing area, the string in the SQL editing area is equal to the preceding string.
[0013] In a possible implementation, sending the character string to a backend server includes: The characters are sent to the backend based on websocket or ajax.
[0014] On the other hand, the present invention also provides a terminal command line editing device based on an open source plug-in, comprising: The terminal object creation module is used to reference the open source plug-in to create a terminal object, and insert the terminal object into the page to obtain the inserted page; An editing area creation module, used to create an SQL editing area in the inserted page based on the terminal object, wherein the text string in the SQL editing area includes a prefix string; A Backspace monitoring module, used for triggering a Backspace key event in the SQL editing area when the text string is the prefix string, and not processing the text string; The enter key monitoring module is used to send the character string in the SQL editing area to the back end or move the cursor to the next line when the SQL editing area triggers the enter key event.
[0015] On the other hand, the present invention also provides an electronic device, including a memory and a processor, wherein: The memory is used to store programs; The processor is coupled to the memory and is used to execute the program stored in the memory to implement the steps in the method for editing terminal command lines based on an open source plug-in described in any one of the above implementations.
[0016] The beneficial effects of the present invention are as follows: the present invention provides a method for editing terminal command lines based on an open source plug-in, firstly, the open source plug-in is referenced to create a terminal object, and the terminal object is inserted into a page to obtain an inserted page, and then an SQL editing area is created based on the terminal object in the inserted page, when a Backspace key event is triggered in the first line of the SQL editing area, and the cursor is at the end of the last character of the leading string in the SQL editing area, the Backspace key is controlled to be unresponsive, so that no matter what operation is performed on the keyboard, the beginning of the string in the SQL editing area is always kept as the leading string, so that when the back end receives the string in the SQL editing area, it always starts with the leading string, so as to facilitate direct operation of the database, and further, when the SQL editing area triggers an enter key event, the string in the SQL editing area is sent to the back end or the cursor is moved to the next line. The present invention creates an SQL editing area based on an open source plug-in, and then monitors keyboard events, so that the back end database can be directly operated by inputting SQL commands in the web front end. BRIEF DESCRIPTION OF THE DRAWINGS
[0017] Figure 1 A flowchart of an embodiment of a method for editing terminal command lines based on an open source plug-in provided by the present invention; Figure 2 For the present invention Figure 1 A schematic flow chart of an embodiment of S101; Figure 3A schematic diagram of the structure of an embodiment of a terminal command line editing device based on an open source plug-in provided by the present invention; Figure 4 A schematic structural diagram of an embodiment of an electronic device provided by the present invention. DETAILED DESCRIPTION
[0018] The preferred embodiments of the present invention are described in detail below in conjunction with the accompanying drawings, wherein the accompanying drawings constitute a part of this application and are used together with the embodiments of the present invention to illustrate the principles of the present invention, but are not used to limit the scope of the present invention.
[0019] It should be noted that Xterm.js is an open source Web terminal library that allows you to build a full-featured command line interface in your browser. This project was initiated by GitHub developers and aims to provide modern Web applications with an interactive experience similar to that of a local terminal. With Xterm.js, any WebSocket-based application can be converted into an interactive command line tool.
[0020] The present invention provides a method and device for editing terminal command lines based on an open source plug-in, which are described below respectively.
[0021] Figure 1 A flow chart of an embodiment of a method for editing terminal command lines based on an open source plug-in provided by the present invention is shown as follows: Figure 1 As shown, the terminal command line editing method based on the open source plug-in includes: S101, referencing the open source plug-in to create a terminal object, and inserting the terminal object into a page to obtain the inserted page; S102, creating a SQL editing area in the inserted page based on the terminal object; S103, when a Backspace key event is triggered in the first line of the SQL editing area, and the cursor is at the end of the last character of the leading string in the SQL editing area, the Backspace key is controlled to be unresponsive; S104: When the SQL editing area triggers an enter key event, the character string in the SQL editing area is sent to the back end or the cursor is moved to the next line.
[0022] Compared with the prior art, the present embodiment provides a method for editing terminal command lines based on an open source plug-in. First, the open source plug-in is referenced to create a terminal object, and the terminal object is inserted into a page to obtain an inserted page. Then, an SQL editing area is created in the inserted page based on the terminal object. The text string in the SQL editing area includes a prefix string. Further, when the text string is a prefix string, the SQL editing area triggers a Backspace key event, and the text string is not processed. Further, when the SQL editing area triggers an enter key event, the string in the SQL editing area is sent to the back end or the cursor is moved to the next line. The present invention creates an SQL editing area based on an open source plug-in, and then monitors keyboard events, so that the back end database can be directly operated on the web front end.
[0023] In some embodiments of the present invention, Figure 2 As shown, in step S101, the open source plug-in is referenced to create a terminal object, and the terminal object is inserted into the page to obtain the inserted page, including: S201. Create an xterm container based on xtermjs; S202, creating a terminal object in the xterm container, wherein the terminal object includes one or more of the font, cursor position, line height and font size of the xterm container; S203: Insert the terminal object into the page to obtain the inserted page.
[0024] In a specific embodiment of the present invention, the first step is to first install xtermjs. Specifically, xtermjs is a front-end component package. You can use the package management tool npm or yarn to add it to your project dependencies.
[0025] npm install xterm; or yarn add xterm; Step 2: Create an XtermJs container: XtermJs, like some other components, needs to be provided with a container for instantiation. The so-called container is something used to hold something, such as a bottle can be used as a water container. The container in this embodiment is actually a simple div. It can be created using native HTML, or vue, react framework. The following codes are all examples of Vue or typescript.
[0026] <template> < / template> The div with id "terminal" above is the container of XtermJs.
[0027] Step 3: Import XtermJs and its related CSS The xtermJs package comes with the style codes needed for rendering. Just import them into the page. If you want to modify some of the styles, you can overwrite the original style class. The specific code is as follows: Import js package import { Terminal} from 'xterm'; Import Styles <style scoped lang="scss">@import "xterm / css / xterm.css";< / style> Step 4: Create an xterm object. The specific code is as follows: this.term = new Terminal({ convertEol: true, cursorBlink: true, fontFamily: "Courier New", rightClickSelectsWord: true, cursorStyle: "bar", lineHeight: 1.2, fontSize: 14, }); this.term.open(this.$refs.terminal); At this point, the creation of the xterm terminal has been completed. The meanings of the configuration items of the term object are as follows: convertEol: When turned on, the input cursor is always placed at the beginning of a new line cursorBlink: Whether the input cursor flashes fontFamily: The font used by the terminal display rightClickSelectsWord: Right-click to select the word at the cursor (standard behavior for most macOS apps) cursorStyle: The style of the input cursor. 'block': block, 'underline': horizontal line, 'bar': vertical line lineHeight: line height fontSize: font size this.term.open(this.$refs.terminal); will start the terminal we created.
[0028] Above, an xterm terminal is created.
[0029] In some embodiments of the present invention, the further step includes monitoring one or more of a left arrow event, a right arrow event, an up arrow event, and a down arrow event in the SQL editing area.
[0030] In some embodiments of the present invention, it further includes: Introduce the xterm-addon-fit plug-in into the inserted page to create a size adaptation device for the console area corresponding to the terminal object.
[0031] In a specific embodiment of the present invention, the window of the terminal created during creation will not adapt to the size of the container, so it is necessary to add FitAddon after the terminal is created and before it is started. FitAddon is a plug-in used to make the size of the xterm terminal adapt to the size of the container. The specific code is as follows: import { FitAddon} from 'xterm-addon-fit'; After creating xterm and before opening xterm, load the plugin const fitAddon = new FitAddon(); this.term.loadAddon(fitAddon); The complete code of this part: this.term = new Terminal({ convertEol: true, cursorBlink: true, fontFamily: "Courier New", rightClickSelectsWord: true, cursorStyle: "bar", lineHeight: 1.2, fontSize: 14, }); const fitAddon = new FitAddon(); this.term.loadAddon(fitAddon); this.term.open(this.$refs.terminal); fitAddon.fit(); In some embodiments of the present invention, it further includes: Remove or modify the background color of the console area corresponding to the terminal object based on the DOM selector.
[0032] In a specific embodiment of the present invention, the terminal background color is also removed. The background color of xterm is not the background color required by the page, and its original background color needs to be removed. The background style of xterm can be selected through the DOM selector to remove or modify the background color. The following code is the code for removing the background color: constxtermViews = document.getElementsByClassName('xterm-viewport')as HTMLCollectionOf <htmlelement>; for(let i = 0; i <xtermViews.length; i++) { xtermViews[i].style.backgroundColor = 'unset'; } It should be noted that multiple SQL terminals can be created on the front end, so operations must be performed on each terminal.
[0033] In a specific embodiment of the present invention, it also includes: writing characters and controlling character colors. Specifically, any terminal character can be written using xterm.write(). Some ANSI characters can be used to control the color of terminal text. It should be noted that the character format accepted by xterm.write() is hexadecimal. The specific code is as follows: this.term.writeln(`${textColor}connected to ${infoTextColor}${this.connectionInfo.userName}${textColor}@${infoTextColor}${this.connectionInfo.host}${textColor}:${infoTextColor}${this.connectionInfo.port}`); Where textColor is the color in ansi characters.
[0034] In a specific embodiment of the present invention, a prompt function is added to xterm. After each command is executed, the prompt() function is called to generate the next editing area. The specific code is as follows: this.term.prompt = () => { this.inputList = ['']; this.currentIndex = 0; this.term.write(Key.ChangeLine); this.term.write('' + this.preStr + textColor); this.term.focus(); } Among them, inputList is a string array, each string is the character text of each line in the editing area, and all subsequent operations on the editing area will operate on inputList.
[0035] currentIndex points to the row where the cursor is currently located in the editing area.
[0036] In some embodiments of the present invention, the prefix character string is "SQL>", that is, the character string "SQL>" in the editing area cannot be edited or deleted.
[0037] In some embodiments of the present invention, when the SQL editing area triggers the enter key event, sending the string in the SQL editing area to the backend or moving the cursor to the next line includes: When the SQL editing area triggers an enter key click event, when it is determined that the last character of the character string in the SQL editing area is a preset character, the character string is sent to a backend server; When the SQL editing area triggers an enter key click event, when it is determined that the last character of the character string in the SQL editing area is not a preset character, the cursor is positioned to the next line of the current cursor position.
[0038] In a specific embodiment of the present invention, monitoring of terminal editing area events is as follows: First, create a keyboard monitor. For each operation of the terminal, delete, enter, and up, down, left, and right arrows, you need to understand that there are many keyboard operations. Here we only list the time when the terminal gets delete, enter, up, down, left, and right arrows. Other keys can be implemented by referring to the solutions for these key processing. The specific code for creating a monitor is as follows: createKeyListener() { this.term.onKey(e =>{ const offsetLeft = this.term._core.buffer.x; const totalOffsetLength = this.getCurrentLinInputLength() +this.getPreLength(); const printable = !e.domEvent.altKey&&!e.domEvent.altGraphKey&&!e.domEvent.ctrlKey&&!e.domEvent.metaKey switch (e.domEvent.code) { case KeyType.Enter: this.onEnter(); return; case KeyType.Backspace: this.onBackSpace(); return; case KeyType.ArrowLeft: this.onArrowLeft(e, offsetLeft); return; case KeyType.ArrowRight: this.onArrowRight(e, offsetLeft, totalOffsetLength); return; case KeyType.ArrowUp: this.onArrowUp(e, offsetLeft); return; case KeyType.ArrowDown: this.onArrowDown(e, offsetLeft); return; case KeyType.KeyV: this.onPaste(); return; } if (printable) { this.onWriteStr(e); } }); KeyType is defined as follows export enum KeyType { Enter = "Enter", Backspace = "Backspace", ArrowLeft = "ArrowLeft", ArrowRight = "ArrowRight", ArrowUp = "ArrowUp", ArrowDown = "ArrowDown", KeyV = "KeyV", } The key is defined as follows: export enum Key { Up = '\x1b[A', Down = '\x1b[B', Left = '\x1b[D', Right = '\x1b[C', Backspace = '\b \b', EraseToEnd = '\x1b[0K', EraseToStart = '\x1b[1K', EraseToScreenEnd = '\x1b[0J', ChangeLine = '\r\n', NextLineBegin = '\x1b[E', PreLineBegin = '\x1b[F' } In a specific embodiment of the present invention, the Enter key event is processed. Specifically, if the characters in the current inputList end with ";" after removing the trailing space, it is sent to the backend for execution. If not, it is wrapped.
[0039] onEnter() { if (this.inputList.join(Key.ChangeLine).trim().endsWith(';')) { this.executeSql(); } else { if(this.cursorAtEnd()) { this.term.write(Key.ChangeLine); this.currentIndex++; this.inputList.push(''); } else { const [leftStr, rightStr] = this.splitLine(); const currentY = this.term._core.buffer.y; const newInputList = []; for (let i = 0; i <this.inputList.length; i++) { if (i === this.currentIndex) { newInputList.push(leftStr); newInputList.push(rightStr); }else { newInputList.push(this.inputList[i]); } } this.inputList = newInputList; this.term.write(Key.EraseToScreenEnd); for (let i = this.currentIndex + 1; i <this.inputList.length; i++) { this.term.write(Key.ChangeLine); this.term.write(this.inputList[i]); } this.moveCursorTo(currentY + 2, 1); this.currentIndex++; } } } There are two types of line breaks: line breaks at the end of a sentence and line breaks in the middle of a sentence. To break at the end of a sentence, you can simply add a new line. To break in the middle of a sentence, you need to go to the line break position and insert a new blank line. xterm does not cache characters, so to complete this operation, you need to erase all characters in the subsequent editing area from the split point, and then write all new characters after the split point according to the new inputList. Finally, position the cursor at the beginning of the next line after the split point.
[0040] In a specific embodiment of the present invention, the SQL statement is executed as follows: when the enter key triggers the execution, the SQL statement to be executed can be sent to the backend using websocket or ajax. Here, the front-end and back-end communication is exemplified by websocket, and the code is as follows: async executeSql() { / / @ts-ignore const token = await this.$eco.user.getToken(); const statement = this.inputList.join(Key.ChangeLine); ws.queryShellSql({ connectId: this.curTab.connectId, windowId: this.curTab.id, dbId: this.curTab.dbId, dbType: this.curTab.connectType, statement: statement, userId: token }); } After the backend receives the SQL execution request sent by the front-end terminal, it executes the SQL statement carried in the request through JDBC, and returns the processing result to the front-end through websocket in the format of terminal character display. The specific code is as follows: ws.on(RecvMsgType.ShellSQLResult, (tabId, data) =>{ this.term.write(Key.ChangeLine); this.term.write(data.msgResult); this.term.write(Key.ChangeLine); this.term.prompt(); }) The front end writes the characters to the terminal after receiving them.
[0041] In some embodiments of the present invention, when a Backspace key event is triggered in the first line of the SQL editing area, and the cursor is at the end of the last character of the leading string in the SQL editing area, controlling the Backspace key to be unresponsive includes: When the Backspace key event is triggered in the first line of the SQL editing area, and the cursor is at the end of the last character of the leading string in the SQL editing area, the string in the SQL editing area is equal to the leading string, so that the leading string cannot be deleted no matter how the keyboard is operated, so that the statement in the SQL editing area is transmitted to the backend server and starts with the string "SQL>", thereby achieving the purpose of this embodiment.
[0042] In a specific embodiment of the present invention, the event processing of the Backspace key is as follows: 1. The terminal writes the erase character and cuts the characters in inputList; 2. If it is the first line in the editing area, presStr cannot be deleted; 3. If the non-editable area is the first line, after deleting to the leftmost part, the next backspace will be used to reduce the line; 4. If you start deleting from the middle of a character, after each operation, erase all characters to the right of the split point, write according to the new inputList, and then reposition the cursor. The specific code is as follows: onBackSpace() { if (this.cursorAtEnd()) { if (this.term._core.buffer.x>this.getPreLength()) { this.term.write(Key.Backspace); this.inputList[this.currentIndex] = this.inputList[this.currentIndex].slice(0, -1); }else { if(this.currentIndex>0) { this.deleteLine(); } } }else { if (this.term._core.buffer.x>this.getPreLength()) { const [leftStr, rightStr] = this.splitLine(); this.term.write(Key.Backspace); this.term.write(Key.EraseToEnd + rightStr); this.moveCursorToColumn( leftStr.slice(0, -1).length +this.getPreLength()); this.inputList[this.currentIndex] = leftStr.slice(0, -1) + rightStr; } else { if(this.currentIndex>0) { this.deleteLine(); } } } } deleteLine() { this.currentIndex --; const newLocationY = this.term._core.buffer.y; const newLocationX = this.getCurrentLinInputLength() +this.getPreLength() + 1; const newInputList = []; for (let i = 0; i<this.inputList.length; i++) { if (i === this.currentIndex) { newInputList.push(this.inputList[i] + this.inputList[i + 1]); i++; } else { newInputList.push(this.inputList[i]); } } this.inputList = newInputList; this.moveCursorTo(newLocationY, this.getPreLength() + 1); this.term.write(Key.EraseToScreenEnd); for (let i = this.currentIndex; i <this.inputList.length; i++) { this.term.write(this.inputList[i]); if (i + 1 <this.inputList.length) { this.term.write(Key.ChangeLine); } } this.moveCursorTo(newLocationY, newLocationX); } In a specific embodiment of the present invention, the event processing of the left arrow key is as follows: 1. Move the cursor to the left; 2. If it is the first line in the editing area, you cannot retreat to the left side of preStr; 3. If it is not the first line in the editing area, you can retreat to the far left. After retreating to the far left, the next ArrowLeft will do the push processing and locate to the far right of the previous line. The specific code is as follows: onArrowLeft(e, offsetLeft) { if (this.currentIndex>0) { if(this.term._core.buffer.x>0) { this.term.write(e.key); } else { this.currentIndex --; this.term.write(Key.Up); this.term._core.buffer.x = this.inputList[this.currentIndex].length +this.getPreLength(); } return; } if (offsetLeft>this.preStr.length) { this.term.write(e.key); } } In a specific embodiment of the present invention, the event processing of the right arrow key is as follows: 1. Move the cursor to the right; 2. If it is the last line in the editing area, the movement cannot exceed the length of the last line; 3. If it is not the last line in the editing area, after moving to the rightmost side, the next ArrowRight will move the cursor to the initial position of the next line. The specific code is as follows: onArrowRight(e, offsetLeft, totalOffsetLength) { if (offsetLeft <totalOffsetLength) { this.term.write(e.key); }else { if (this.currentIndex <this.inputList.length - 1) { this.term.write(Key.Down); this.term._core.buffer.x = 0; this.currentIndex++; } } } In a specific embodiment of the present invention, the event processing of the up arrow key is as follows: 1. If the editing area is empty, select the historical execution statement record; 2. If the editing area is not empty and the first line is upward, no operation is performed; 3. If the editing area is not empty and the line is not the first one, it will move to the left offset position of the previous line, but the offset cannot be greater than the total character length of the previous line and cannot be less than the preStr length of the previous line. The specific code is as follows: onArrowUp(e, offsetLeft) { if (this.currentIndex - 1<0) { return; } this.term.write(e.key); this.currentIndex --; const curTotalOffSetLength = this.getCurrentLinInputLength() +this.getPreLength(); if (offsetLeft>curTotalOffSetLength) { this.term._core.buffer.x = curTotalOffSetLength; } else { this.term._core.buffer.x = this.currentIndex === 0 ?this.preStr.length : offsetLeft; } } In a specific embodiment of the present invention, the event processing of the down arrow key is as follows: 1. If the editing area is empty, the down arrow key operates the historical execution record; 2. If the editing area is not empty and the cursor is on the last line of the editing area, no processing will be performed; 3. If the edit area is not empty and the cursor is in a line other than the last line in the edit area, move the cursor to the same left offset in the next line, with the maximum offset not exceeding the total length of the next line. The specific code is as follows: onArrowDown(e, offsetLeft) { if (this.currentIndex + 1>this.inputList.length) { return; } this.term.write(e.key); this.currentIndex = this.currentIndex + 1; let curTotalOffSetLength; if (this.currentIndex <this.inputList.length) { curTotalOffSetLength = this.inputList[this.currentIndex].length; } else { / / curTotalOffSetLength = this.inputList.length; } if (offsetLeft>curTotalOffSetLength) { this.term._core.buffer.x = curTotalOffSetLength; } else { this.term._core.buffer.x = offsetLeft; } } In some embodiments of the present invention, sending the character string to a backend server includes: The characters are sent to the backend based on websocket or ajax.
[0043] In order to better implement a terminal command line editing method based on an open source plug-in in an embodiment of the present invention, based on a terminal command line editing method based on an open source plug-in, correspondingly, as Figure 3 As shown, an embodiment of the present invention further provides a terminal command line editing device based on an open source plug-in. The terminal command line editing device 300 based on an open source plug-in includes: The terminal object creation module 301 is used to create a terminal object by referencing the open source plug-in, and insert the terminal object into a page to obtain the inserted page; An editing area creation module 302, used to create a SQL editing area based on the terminal object in the inserted page; A Backspace monitoring module 303 is used to control the Backspace key to be unresponsive when a Backspace key event is triggered in the first line of the SQL editing area and the cursor is at the end of the last character of the leading string in the SQL editing area; The enter key monitoring module 304 is used to send the character string in the SQL editing area to the backend or move the cursor to the next line when the SQL editing area triggers the enter key event.
[0044] The device 300 for editing terminal command lines based on an open source plug-in provided in the above embodiment can implement the technical solution described in the above embodiment of a method for editing terminal command lines based on an open source plug-in. The specific implementation principles of the above modules or units can refer to the corresponding contents in the above embodiment of a method for editing terminal command lines based on an open source plug-in, which will not be repeated here.
[0045] like Figure 4 As shown, the present invention also provides an electronic device 400. The electronic device 400 includes a processor 401, a memory 402 and a display 403. Figure 4 Only some components of the electronic device 400 are shown, but it should be understood that it is not required to implement all of the components shown, and more or fewer components may be implemented instead.
[0046] In some embodiments, the processor 401 may be a central processing unit (CPU), a microprocessor or other data processing chip, used to run program codes or process data stored in the memory 402, such as a terminal command line editing method based on an open source plug-in in the present invention.
[0047] In some embodiments, processor 401 may be a single server or a server group. The server group may be centralized or distributed. In some embodiments, processor 401 may be local or remote. In some embodiments, processor 401 may be implemented in a cloud platform. In some embodiments, the cloud platform may include a private cloud, a public cloud, a hybrid cloud, a community cloud, a distributed cloud, an internal cloud, a multi-cloud, etc., or any combination thereof.
[0048] In some embodiments, the memory 402 may be an internal storage unit of the electronic device 400, such as a hard disk or memory of the electronic device 400. In other embodiments, the memory 402 may also be an external storage device of the electronic device 400, such as a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc., equipped on the electronic device 400.
[0049] Furthermore, the memory 402 may include both an internal storage unit of the electronic device 400 and an external storage device. The memory 402 is used to store application software installed in the electronic device 400 and various data.
[0050] In some embodiments, the display 403 may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, an OLED (Organic Light-Emitting Diode) touch device, etc. The display 403 is used to display information on the electronic device 400 and to display a visual user interface. The components 401-403 of the electronic device 400 communicate with each other via a system bus.
[0051] In one embodiment, when the processor 401 executes a terminal command line editing program based on an open source plug-in in the memory 402, the following steps may be implemented: Reference the open source plug-in to create a terminal object, and insert the terminal object into the page to obtain the inserted page; Creating a SQL editing area in the inserted page based on the terminal object; When the Backspace key event is triggered in the first line of the SQL editing area, and the cursor is at the end of the last character of the leading string in the SQL editing area, the Backspace key is controlled to be unresponsive; When the SQL editing area triggers an enter key event, the character string in the SQL editing area is sent to the back end or the cursor is moved to the next line.
[0052] It should be understood that: when the processor 401 executes a terminal command line editing program based on an open source plug-in in the memory 402, in addition to the above functions, other functions can also be implemented. For details, please refer to the description of the corresponding method embodiment above.
[0053] Furthermore, the embodiment of the present invention does not specifically limit the type of the electronic device 400 mentioned, and the electronic device 400 may be a portable electronic device such as a mobile phone, a tablet computer, a personal digital assistant (PDA), a wearable device, a laptop computer, etc. Exemplary embodiments of portable electronic devices include but are not limited to portable electronic devices equipped with IOS, Android, Microsoft or other operating systems. The above-mentioned portable electronic devices may also be other portable electronic devices, such as a laptop computer with a touch-sensitive surface (e.g., a touch panel). It should also be understood that in some other embodiments of the present invention, the electronic device 400 may not be a portable electronic device, but a desktop computer with a touch-sensitive surface (e.g., a touch panel).
[0054] Those skilled in the art will appreciate that all or part of the processes of the above-mentioned embodiments can be implemented by instructing related hardware through a computer program, and the program can be stored in a computer-readable storage medium, wherein the computer-readable storage medium is a disk, an optical disk, a read-only storage memory, or a random access memory, etc.
[0055] The above description is only a preferred specific implementation manner of the present invention, but the protection scope of the present invention is not limited thereto. Any changes or substitutions that can be easily conceived by any technician familiar with the technical field within the technical scope disclosed by the present invention should be covered within the protection scope of the present invention.< / htmlelement>
Claims
1. A terminal command line editing method based on an open source plug-in, characterized in that: include: Reference the open source plug-in to create a terminal object, and insert the terminal object into the page to obtain the inserted page; Creating a SQL editing area in the inserted page based on the terminal object; When the Backspace key event is triggered in the first line of the SQL editing area, and the cursor is at the end of the last character of the leading string in the SQL editing area, the Backspace key is controlled to be unresponsive; When the SQL editing area triggers an enter key event, the character string in the SQL editing area is sent to the back end or the cursor is moved to the next line.
2. The method for editing terminal command lines based on an open source plug-in according to claim 1, characterized in that: The referenced open source plug-in creates a terminal object, and inserts the terminal object into a page to obtain an inserted page, including: Create an xterm container based on xtermjs; Creating a terminal object in the xterm container, wherein the terminal object includes one or more of the font, cursor position, line height and font size of the xterm container; Insert the terminal object into the page to get the inserted page.
3. The method for editing terminal command lines based on open source plug-ins according to claim 1, characterized in that: Also includes: Monitor one or more of the left arrow event, left arrow event, up arrow event, and down arrow event of the SQL editing area.
4. The method for editing terminal command lines based on an open source plug-in according to claim 1, characterized in that: Also includes: Introduce the xterm-addon-fit plug-in into the inserted page to create a size adaptation device for the console area corresponding to the terminal object.
5. The method for editing terminal command lines based on open source plug-ins according to claim 1, characterized in that: Also includes: Remove or modify the background color of the console area corresponding to the terminal object based on the DOM selector.
6. The method for editing terminal command lines based on open source plug-ins according to claim 1, characterized in that: When the SQL editing area triggers the enter key event, the character string in the SQL editing area is sent to the back end or the cursor is moved to the next line, including: When the SQL editing area triggers an enter key click event, when it is determined that the last character of the character string in the SQL editing area is a preset character, the character string is sent to a backend server; When the SQL editing area triggers an enter key click event, when it is determined that the last character of the character string in the SQL editing area is not a preset character, the cursor is positioned to the next line of the current cursor position.
7. The method for editing terminal command lines based on open source plug-ins according to claim 1, characterized in that: When the Backspace key event is triggered in the first line of the SQL editing area, and the cursor is at the end of the last character of the leading string in the SQL editing area, the Backspace key does not respond, including: When a Backspace key event is triggered in the first line of the SQL editing area, and the cursor is at the end of the last character of the preceding string in the SQL editing area, the string in the SQL editing area is equal to the preceding string.
8. The method for editing terminal command lines based on open source plug-ins according to claim 6, characterized in that: The sending the character string to the backend server comprises: The characters are sent to the backend based on websocket or ajax.
9. A terminal command line editing device based on an open source plug-in, characterized in that: include: The terminal object creation module is used to reference the open source plug-in to create a terminal object, and insert the terminal object into the page to obtain the inserted page; An editing area creation module, used to create a SQL editing area based on the terminal object in the inserted page; A Backspace monitoring module is used to control the Backspace key to be unresponsive when a Backspace key event is triggered in the first line of the SQL editing area and the cursor is at the end of the last character of the leading string in the SQL editing area; The enter key monitoring module is used to send the character string in the SQL editing area to the back end or move the cursor to the next line when the SQL editing area triggers the enter key event.
10. An electronic device, characterized in that: comprising a memory and a processor, wherein: The memory is used to store programs; The processor is coupled to the memory and is used to execute the program stored in the memory to implement the steps in the method for editing terminal command lines based on an open source plug-in as described in any one of claims 1 to 8.