CN109933318A - The implementation method of SQL online editor in a kind of Angular - Google Patents
The implementation method of SQL online editor in a kind of Angular Download PDFInfo
- Publication number
- CN109933318A CN109933318A CN201910256496.1A CN201910256496A CN109933318A CN 109933318 A CN109933318 A CN 109933318A CN 201910256496 A CN201910256496 A CN 201910256496A CN 109933318 A CN109933318 A CN 109933318A
- Authority
- CN
- China
- Prior art keywords
- angular
- sql
- codemirror
- implementation method
- online editor
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 23
- 238000005538 encapsulation Methods 0.000 claims abstract description 7
- 230000006870 function Effects 0.000 claims description 18
- 238000012544 monitoring process Methods 0.000 claims description 6
- 238000011161 development Methods 0.000 description 3
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 239000004816 latex Substances 0.000 description 1
- 239000010979 ruby Substances 0.000 description 1
- 229910001750 ruby Inorganic materials 0.000 description 1
- 210000000689 upper leg Anatomy 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Abstract
The present invention is more particularly directed to a kind of implementation methods of SQL online editor in Angular.The implementation method of SQL online editor in the Angular docks CodeMirror by way of Angular component, and the encapsulation to CodeMirror is completed in Angular component, is converted into Type Script language interface；When needing to realize SQL online editor in Angular engineering, above-mentioned Angular component is called directly.The implementation method of SQL online editor in the Angular, it is to be realized with Angular kit form, quote very convenient, simple easy to get started, easily extension, improve the efficiency of exploitation, and it realizes online SQL using CodeMirror under the frame of Angular to edit and execute, keyword is highlighted, and SQL is formatted, SQL associates automatically and cursor position is shown, reduces the difficulty for realizing SQL online editing.
Description
Technical field
The present invention relates to big data development technique field, in particular to the realization of SQL online editor in a kind of Angular
Method.
Background technique
CodeMirror is one and highlights Java Script plug-in unit for editing machine text box text area code, is each
Kind programming language realizes keyword, and function, the codes such as variable are highlighted, while providing API (Application abundant
Programming Interface, Application Program Interface) and extendable functions and multiple topic styles, it is each to be able to satisfy user
The demand of kind project.
CodeMirror supports the grammer of a large amount of language highlighted, including C, C++, C#, Java, Perl, PHP,
JavaScript, Python, Lua, Go, Groovy, Ruby etc. and the files such as diff, LaTeX, SQL, wiki, Markdown
Format.In addition, CodeMirror also support code is automatically performed, search/replacement, HTML preview, line number, selection/search result
Highlighted, visualization tab, Emacs/VIM key binding, code automatic format etc..
CodeMirror uses MIT (Massachusetts Institute of Technology) open source permission agreement,
It is had been integrated into various application programs at present, such as Adobe Brackets, CoDev, Light Table develop environment,
Also by online as various SQL (Structured Query Language, structured query language), Haxe, JavaScript
The base library of editing machine come using.
CodeMirror is specifically used to edit code, and there are many language mode and plug-in units for band.In SQL (Structured
Query Language, structured query language) under mode, introducing show-hint.js, SQL-hint.js can be achieved with SQL
Keyword automatic prompt, introduce relevant CSS (Cascading Style Sheet, cascading style list, be for enhance/
Control webpage pattern and a kind of label language for allowing to separate style information with web page contents) file, it can be achieved with key
The highlighted function of word, meets the basic function for realizing SQL online editing.
Angular is the very complete front end frame of a function across all platforms, passes through answering for Angular building
With can be run in the kinds of platform such as Web, mobile Web, mobile application, native applications and desktop native applications；Angular's
Speed and performance be also it is excellent, rendered by Web Worker and server-side, reach the Web platform of nowadays (and following)
The upper attainable maximum speed of institute.Based on RxJS, Immutable.js and other push models, mass data demand is adapted to.
The exploitation of Angular is also very convenient, is not only able to fast implement various characteristics using simple statement formula template,
Custom component and a large amount of existing components, expansion templates language can also be used.In almost all of IDE (Integrated
Drive Electronics, electronic integrated driver) in obtain be directed to Angular Instant Help and feedback.So
Angular becomes to become more and more popular.
But as a kind of widely used front end frame, Angular written in code is based on Type Script language
Speech, is write with JavaScript language, and CodeMirror, which lacks, supports the close friend of Angular.
When user, which needs to quote CodeMirror under Angular frame, realizes the function of SQL online editing, people is programmed
Member, which needs individually to write program, to be just able to achieve, and therefore, proposes higher technical requirements to programming personnel, and individually programming is spent
More time, development cost are higher.
Based on the above situation, the invention proposes a kind of implementation method of SQL online editor in Angular, Ke Yizhi
It connects and calls SQL online editor, without paying close attention to how CodeMirror calls in Angular.
Summary of the invention
In order to compensate for the shortcomings of the prior art, the present invention provides SQL online editings in a kind of Angular being simple and efficient
The implementation method of device.
The present invention is achieved through the following technical solutions:
The implementation method of SQL online editor in a kind of Angular, which comprises the following steps:
(1) CodeMirror is docked by way of Angular component, the completion pair in Angular component
The encapsulation of CodeMirror is converted into Type Script language interface；
(2) when needing to realize SQL online editor in Angular engineering, above-mentioned Angular component is called directly i.e.
It can.
In the step (1), CodeMirror is introduced in the package file in Angular component,
It is introduced into the base model that the codemirror.css under the lib of CodeMirror realizes SQL in editing machine in style.css, draws
Enter the pattern that show-hint.css realizes auto-complete.
The show-hint.js plug-in unit and SQL-hint.js plug-in unit of CodeMirror are introduced in Angular component
Realize the auto-complete function of SQL keyword.
When the front end Angular gets database table name related data, it is assigned under the hintOptions of CodeMirror
Tables attribute, the auto-complete function of database table name can be realized.
In the step (1), the encapsulation to CodeMirror is completed by one Angular component of statement, and expose
The option of CodeMirror is configured and whether automatic focusing properties are bound, and the binding of mouse movable event monitoring, text is two-way to be tied up
It is fixed.
Introduce Angular component after, configuration whether automatic focusing properties, and for component property input setting Boolean,
It can be realized to whether editing machine focuses individual cultivation automatically.
After introducing Angular component, by monitoring mouse cursor position, cursor institute can be obtained below editing machine in real time
Position, realize the function that shows line numbers with row number of editing machine.
In conjunction with the original plug-in unit and SQL-formatter plug-in unit of CodeMirror, the formatting that SQL text can be realized is aobvious
The function of showing；It is bound using the shortcut key of CodeMirror, Angular component is called to be formatted SQL content of text, by
It is bundled in ngModel attribute in SQL content of text, using the two-way binding characteristic of the ngModel of Angular, format can be realized
The displaying of SQL text after change at interface.
In the step (2), programming personnel only focuses on the attribute binding that Angular component itself is exposed, no
Need to pay close attention to how CodeMirror calls in Angular.
The beneficial effects of the present invention are: in the Angular SQL online editor implementation method, be with Angular component
What form was realized, reference is very convenient, and it is simple easy to get started, it easily extends, improves the efficiency of exploitation, and in the frame of Angular
It realizes online SQL using CodeMirror under frame to edit and execute, keyword is highlighted, and SQL is formatted, and SQL joins automatically
Want to show with cursor position, reduces the difficulty for realizing SQL online editing.
Specific embodiment
In order to which technical problems, technical solutions and advantages to be solved are more clearly understood, tie below
Embodiment is closed, the present invention will be described in detail.It should be noted that specific embodiment described herein is only to explain
The present invention is not intended to limit the present invention.
The implementation method of SQL online editor in the Angular, comprising the following steps:
(1) CodeMirror is docked by way of Angular component, the completion pair in Angular component
The encapsulation of CodeMirror is converted into Type Script language interface；
(2) when needing to realize SQL online editor in Angular engineering, above-mentioned Angular component is called directly i.e.
It can.
CodeMirror is introduced in the package file in Angular component in the step (1), in style.css
The middle codemirror.css being introduced under the lib of CodeMirror realizes the base model of SQL in editing machine, introduces show-
The pattern of hint.css realization auto-complete.
The show-hint.js plug-in unit and SQL-hint.js plug-in unit of CodeMirror are introduced in Angular component
Realize the auto-complete function of SQL keyword.
When the front end Angular gets database table name related data, it is assigned under the hintOptions of CodeMirror
Tables attribute, the auto-complete function of database table name can be realized.
In the step (1), the encapsulation to CodeMirror is completed by one Angular component of statement, and expose
The option of CodeMirror is configured and whether automatic focusing properties are bound, and the binding of mouse movable event monitoring, text is two-way to be tied up
It is fixed.
Introduce Angular component after, configuration whether automatic focusing properties, and for component property input setting Boolean,
It can be realized to whether editing machine focuses individual cultivation automatically.
After introducing Angular component, by monitoring mouse cursor position, cursor institute can be obtained below editing machine in real time
Position, realize the function that shows line numbers with row number of editing machine.
In conjunction with the original plug-in unit and SQL-formatter plug-in unit of CodeMirror, the formatting that SQL text can be realized is aobvious
The function of showing；:
Firstly, being bound using the shortcut key of CodeMirror, (shortcut key binding can be set as Ctrl-F or other are fast
Prompt key), call Angular component to be formatted SQL content of text；Belong to since SQL content of text is bundled in ngModel
Property, using the two-way binding characteristic of the ngModel of Angular, the SQL text after formatting can be realized in the displaying at interface.
NgModel is instructed for application data to be tied to HTML controller (input, select, textarea)
Value.NgModel instruction can be by the two-way binding of variable of the value of input domain and Angular creation, in the value of modification input domain
When, the value of Angular attribute also will modification.
In the step (2), programming personnel only focuses on the attribute binding that Angular component itself is exposed, no
Need to pay close attention to how CodeMirror calls in Angular.
Compared with prior art, in the Angular SQL online editor implementation method, have the advantages that
(1) with the realization of Angular kit form, reference is very convenient, simple easy to get started, easily extends, improves exploitation
Efficiency；
(2) it realizes online SQL using CodeMirror under the frame of Angular to edit and execute, keyword is highlighted
It has been shown that, SQL are formatted, and SQL associates automatically and cursor position is shown, reduce the complexity for realizing SQL online editing.
(3) the low learning cost to CodeMirror, greatly reduces the development time.
Claims (9)
1. the implementation method of SQL online editor in a kind of Angular, which comprises the following steps:
(1) CodeMirror is docked by way of Angular component, is completed in Angular component to CodeMirror's
Encapsulation, is converted into Type Script language interface；
(2) when needing to realize SQL online editor in Angular engineering, above-mentioned Angular component is called directly.
2. the implementation method of SQL online editor in Angular according to claim 1, it is characterised in that: the step
(1) in, CodeMirror is introduced in the package file in Angular component, is introduced in style.css
The show- under the path codemirror.css and codemirror/addon/hint under the lib of CodeMirror
The pattern of the base model of SQL and auto-complete in editing machine can be realized in hint.css.
3. the implementation method of SQL online editor in Angular according to claim 2, it is characterised in that:
The pass SQL can be realized in the show-hint.js plug-in unit and SQL-hint.js plug-in unit that CodeMirror is introduced in Angular component
The automatic prompting function of keyword.
4. the implementation method of SQL online editor in Angular according to claim 2, it is characterised in that: Angular
When front end gets database table name related data, the tables attribute being assigned under the hintOptions of CodeMirror, i.e.,
The auto-complete function of database table name can be achieved.
5. the implementation method of SQL online editor in Angular according to claim 1, it is characterised in that: the step
(1) in, the encapsulation to CodeMirror is completed by one Angular component of statement, and expose CodeMirror's
Option is configured and whether automatic focusing properties are bound, the binding of mouse movable event monitoring, the two-way binding of text.
6. the implementation method of SQL online editor in Angular according to claim 6, it is characterised in that: introduce
After Angular component, configuration whether automatic focusing properties, and for component property input setting Boolean, can be realized to volume
Collect whether device focuses individual cultivation automatically.
7. the implementation method of SQL online editor in Angular according to claim 6, it is characterised in that: introduce
It, can be real in real time in the position where acquisition cursor below editing machine by monitoring mouse cursor position after Angular component
The function that existing editing machine shows line numbers with row number.
8. the implementation method of SQL online editor in Angular according to claim 6, it is characterised in that: in conjunction with
The function of the formatting display of SQL text can be realized in the original plug-in unit and SQL-formatter plug-in unit of CodeMirror；Benefit
It is bound with the shortcut key of CodeMirror, calls Angular component to be formatted SQL content of text, due in SQL text
Appearance is bundled in ngModel attribute, and using the two-way binding characteristic of the ngModel of Angular, the SQL after formatting can be realized
Displaying of the text at interface.
9. the implementation method of SQL online editor in Angular according to claim 1, it is characterised in that: the step
(2) in, programming personnel only focuses on the attribute binding that Angular component itself is exposed, and does not need concern CodeMirror such as
Where called in Angular.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910256496.1A CN109933318A (en) | 2019-04-01 | 2019-04-01 | The implementation method of SQL online editor in a kind of Angular |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910256496.1A CN109933318A (en) | 2019-04-01 | 2019-04-01 | The implementation method of SQL online editor in a kind of Angular |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109933318A true CN109933318A (en) | 2019-06-25 |
Family
ID=66988742
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910256496.1A Pending CN109933318A (en) | 2019-04-01 | 2019-04-01 | The implementation method of SQL online editor in a kind of Angular |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109933318A (en) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US5845300A (en) * | 1996-06-05 | 1998-12-01 | Microsoft Corporation | Method and apparatus for suggesting completions for a partially entered data item based on previously-entered, associated data items |
| CN106815219A (en) * | 2015-11-27 | 2017-06-09 | 阿里巴巴集团控股有限公司 | The edit methods and device of database engine |
-
2019
- 2019-04-01 CN CN201910256496.1A patent/CN109933318A/en active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US5845300A (en) * | 1996-06-05 | 1998-12-01 | Microsoft Corporation | Method and apparatus for suggesting completions for a partially entered data item based on previously-entered, associated data items |
| CN106815219A (en) * | 2015-11-27 | 2017-06-09 | 阿里巴巴集团控股有限公司 | The edit methods and device of database engine |
Non-Patent Citations (5)
| Title |
|---|
| CHEZHAN1420: "angular6+codeMirror实现浏览器在线SQL编辑器并支持智能提示", 《CSDN博客 HTTPS://BLOG.CSDN.NET/CHEZHAN1420/ARTICLE/DETAILS/100720348》 * |
| ZERO_追梦: "Angular6 CodeMirror在线编辑sql 智能提示", 《博客园HTTPS://WWW.CNBLOGS.COM/ZERO-ZM/P/10201743.HTML》 * |
| ZERO-追梦: "Angular6 CodeMirror在线编辑sql 智能提示", 《博客园 HTTPS://WWW.CNBLOGS.COM/ZERO-ZM/P/10201743.HTML》 * |
| ZHAOYINGCHAO88: "sql-formatter结合CodeMirror格式化SQL", 《CSDN博客 HTTPS://BLOG.CSDN.NET/ZYC88888/ARTICLE/DETAILS/84069890》 * |
| 我有我: "codeMirror基础用法、动态提示表名、动态提示库名下的表名db.table", 《OSCHINA HTTPS://MY.OSCHINA.NET/SZQING/BLOG/3016029》 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9946518B2 (en) | System and method for extending a visualization platform | |
| Galloway et al. | Professional ASP. NET MVC 4 | |
| CN104714830B (en) | The system and method for cross-platform exploitation is realized based on primary development language | |
| CN104731584B (en) | A kind of customized configuration design method of Open Architecture CNC System of Display Interface | |
| CN104933142B (en) | Animated show method and apparatus | |
| US20030066058A1 (en) | Language-sensitive whitespace adjustment in a software engineering tool | |
| CN102360296A (en) | WEB-based online form development tool | |
| Firtman | jQuery Mobile: Up and Running: Up and Running | |
| US10789049B2 (en) | Recipe program code generation method and recipe compiling cloud platform system | |
| Freeman | Pro AngularJS | |
| US20150254211A1 (en) | Interactive data manipulation using examples and natural language | |
| Dabit | React Native in action | |
| CN111324390A (en) | Device and method for realizing APP content configuration and real-time update | |
| CN107015903B (en) | Interface test program generation method and device and electronic equipment | |
| Freeman | Pro Angular 9: build powerful and dynamic web apps | |
| US9075891B2 (en) | Method and device for editing an object represented in a web page | |
| Chadwick | Programming Razor: Tools for Templates in ASP. NET MVC or WebMatrix | |
| CN117008905A (en) | Front-end code auxiliary method and terminal based on AI | |
| KR20180135654A (en) | Intuitive method of making a program | |
| CN109933318A (en) | The implementation method of SQL online editor in a kind of Angular | |
| CN116909553A (en) | Page online development and local compiling operation system | |
| US20090228678A1 (en) | Mapping definition creation system and mapping definition creation program | |
| CN115718619A (en) | Visual control logic arrangement method, equipment and medium | |
| CN109032601A (en) | Design drawing cooperates cut map device and method online | |
| CN111736834B (en) | DSL-based user interface generation method, device and storage medium |
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: 20190625 |