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

技术编号:21453522 阅读:75 留言:0更新日期:2019-06-26 04:39
本发明专利技术特别涉及一种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

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1