一种Angular内SQL在线编辑器的实现方法技术

本发明专利技术特别涉及一种Angular内SQL在线编辑器的实现方法。该Angular内SQL在线编辑器的实现方法，通过Angular组件的形式对接CodeMirror，在Angular组件内完成对CodeMirror的封装，转换成Type Script语言接口；需要在Angular工程内实现SQL在线编辑器时，直接调用上述Angular组件即可。该Angular内SQL在线编辑器的实现方法，是以Angular组件形式实现的，引用十分方便，简单易上手，易扩展，提高了开发的效率，并且在Angular的框架下利用CodeMirror实现了在线SQL编辑和执行，关键词高亮显示，SQL格式化，SQL自动联想和光标位置显示等，降低了实现SQL在线编辑的难度。

【技术实现步骤摘要】
一种Angular内SQL在线编辑器的实现方法
本专利技术涉及大数据开发
，特别涉及一种Angular内SQL在线编辑器的实现方法。
技术介绍
CodeMirror是一个用于编辑器文本框textarea代码高亮JavaScript插件，为各种编程语言实现关键字，函数，变量等代码高亮显示，同时提供丰富的API(ApplicationProgrammingInterface，应用程序界面)和可扩展功能以及多个主题样式，能满足用户各种项目的需求。CodeMirror支持大量语言的语法高亮，包括C、C++、C#、Java、Perl、PHP、JavaScript、Python、Lua、Go、Groovy、Ruby等，以及diff、LaTeX、SQL、wiki、Markdown等文件格式。此外，CodeMirror还支持代码自动完成、搜索/替换、HTML预览、行号、选择/搜索结果高亮、可视化tab、Emacs/VIM键绑定、代码自动格式等。CodeMirror采用MIT(MassachusettsInstituteofTechnology)开源许可协议，目前已经被集成到各种应用程序中，如AdobeBrackets、CoDev、LightTable等开发环境，还被作为各种SQL(StructuredQueryLanguage，结构化查询语言)、Haxe、JavaScript在线编辑器的基础库来使用。CodeMirror专门用来编辑代码，并带有许多语言模式和插件。在SQL(StructuredQueryLanguage，结构化查询语言)模式下，引入show-hint.js、SQL-hint.js就能实现SQL的关键词自动提示，引入相关的CSS(CascadingStyleSheet，层叠样式表单，是用于增强/控制网页样式并允许将样式信息与网页内容分离的一种标记性语言)文件，就能实现关键词高亮的功能，满足实现SQL在线编辑的基本功能。Angular是一个功能非常完备的前端框架横跨了所有平台，通过Angular构建的应用，能在Web、移动Web、移动应用、原生应用和桌面原生应用等多种平台上运行；Angular的速度与性能也是绝佳的，通过WebWorker和服务端渲染，达到在如今(以及未来)的Web平台上所能达到的最高速度。基于RxJS、Immutable.js和其它推送模型，能适应海量数据需求。Angular的开发也很便捷，不但能够使用简单的声明式模板，快速实现各种特性，还能使用自定义组件和大量现有组件，扩展模板语言。在几乎所有的IDE(IntegratedDriveElectronics，电子集成驱动器)中获得针对Angular的即时帮助和反馈。所以Angular变得越来越流行。但是，作为一种应用很广泛的前端框架，Angular代码编写是基于TypeScript语言，以JavaScript语言编写的，CodeMirror缺少对Angular的友好支持。当用户需要在Angular框架下引用CodeMirror实现SQL在线编辑的功能时，编程人员需要单独编写程序才能实现，因此，对编程人员提出了更高的技术要求，且单独编程花费较多时间，开发成本较高。基于上述情况，本专利技术提出了一种Angular内SQL在线编辑器的实现方法，可以直接调用SQL在线编辑器，无需关注CodeMirror如何在Angular中调用。
技术实现思路
本专利技术为了弥补现有技术的缺陷，提供了一种简单高效的Angular内SQL在线编辑器的实现方法。本专利技术是通过如下技术方案实现的：一种Angular内SQL在线编辑器的实现方法，其特征在于，包括以下步骤：(1)通过Angular组件的形式对接CodeMirror，在Angular组件内完成对CodeMirror的封装，转换成TypeScript语言接口；(2)需要在Angular工程内实现SQL在线编辑器时，直接调用上述Angular组件即可。所述步骤(1)中，在Angular组件中的package文件中引入CodeMirror，在style.css中引入CodeMirror的lib下的codemirror.css实现编辑器中SQL的基本样式，引入show-hint.css实现自动补全的样式。在Angular组件中引入CodeMirror的show-hint.js插件和SQL-hint.js插件，即可实现SQL关键词的自动补全功能。Angular前端获取到数据库表名相关数据时，赋值给CodeMirror的hintOptions下的tables属性，即可实现数据库表名的自动补全功能。所述步骤(1)中，通过声明一个Angular组件完成对CodeMirror的封装，并暴露出CodeMirror的option配置和是否自动聚焦属性绑定，鼠标活动事件监听绑定，文本双向绑定。引入Angular组件后，配置是否自动聚焦属性，并为组件属性输入设定的布尔值，即可实现对编辑器是否自动聚焦个性化配置。引入Angular组件后，通过监听鼠标光标位置，即可实时在编辑器下方获取光标所在的位置，实现编辑器显示行号和列号的功能。结合CodeMirror的原有插件和SQL-formatter插件，即可实现SQL文本的格式化显示的功能；利用CodeMirror的快捷键绑定，调用Angular组件对SQL文本内容进行格式化，由于SQL文本内容绑定在ngModel属性，利用Angular的ngModel双向绑定特性，即可实现格式化之后的SQL文本在界面的展示。所述步骤(2)中，编程人员只关注Angular组件本身暴露出来的属性绑定即可，不需要关注CodeMirror如何在Angular里调用。本专利技术的有益效果是：该Angular内SQL在线编辑器的实现方法，是以Angular组件形式实现的，引用十分方便，简单易上手，易扩展，提高了开发的效率，并且在Angular的框架下利用CodeMirror实现了在线SQL编辑和执行，关键词高亮显示，SQL格式化，SQL自动联想和光标位置显示等，降低了实现SQL在线编辑的难度。具体实施方式为了使本专利技术所要解决的技术问题、技术方案及有益效果更加清楚明白，以下结合实施例，对本专利技术进行详细的说明。应当说明的是，此处所描述的具体实施例仅用以解释本专利技术，并不用于限定本专利技术。该Angular内SQL在线编辑器的实现方法，包括以下步骤：(1)通过Angular组件的形式对接CodeMirror，在Angular组件内完成对CodeMirror的封装，转换成TypeScript语言接口；(2)需要在Angular工程内实现SQL在线编辑器时，直接调用上述Angular组件即可。所述步骤(1)中在Angular组件中的package文件中引入CodeMirror，在style.css中引入CodeMirror的lib下的codemirror.css实现编辑器中SQL的基本样式，引入show-hint.css实现自动补全的样式。在Angular组件中引入CodeMirror的show-hint.js插件和SQL-hint.js插件，即可实现SQL关键词的自动补全功能。Angular前端获取到数据库表名相关数据时，赋值给Co本文档来自技高网...

【技术保护点】
1.一种Angular内SQL在线编辑器的实现方法，其特征在于，包括以下步骤：(1)通过Angular组件的形式对接CodeMirror，在Angular组件内完成对CodeMirror的封装，转换成Type Script语言接口；(2)需要在Angular工程内实现SQL在线编辑器时，直接调用上述Angular组件即可。

【技术特征摘要】
1.一种Angular内SQL在线编辑器的实现方法，其特征在于，包括以下步骤：(1)通过Angular组件的形式对接CodeMirror，在Angular组件内完成对CodeMirror的封装，转换成TypeScript语言接口；(2)需要在Angular工程内实现SQL在线编辑器时，直接调用上述Angular组件即可。2.根据权利要求1所述的Angular内SQL在线编辑器的实现方法，其特征在于：所述步骤(1)中，在Angular组件中的package文件中引入CodeMirror，在style.css中引入CodeMirror的lib下的codemirror.css和codemirror/addon/hint路径下的show-hint.css，即可实现编辑器中SQL的基本样式和自动补全的样式。3.根据权利要求2所述的Angular内SQL在线编辑器的实现方法，其特征在于：在Angular组件中引入CodeMirror的show-hint.js插件和SQL-hint.js插件，即可实现SQL关键词的自动提示功能。4.根据权利要求2所述的Angular内SQL在线编辑器的实现方法，其特征在于：Angular前端获取到数据库表名相关数据时，赋值给CodeMirror的hintOptions下的tables属性，即可实现数据库表名的自动补全功能。5.根据权利要求1所述的Angular内SQL在线编辑器的实现方...

【专利技术属性】
技术研发人员：周睿，
申请(专利权)人：山东浪潮云信息技术有限公司，
类型：发明
国别省市：山东,37