测试平台系列(55) 引入AceEditor(代码编辑器)

2021年09月16日 阅读数:1
这篇文章主要向大家介绍测试平台系列(55) 引入AceEditor(代码编辑器),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

你们好,我是米洛,求三连!求关注测试开发坑货!前端

回顾

咱们上一节已经写好了左侧数据表目录,今天继续完成sql编辑器的部分。react

调研组件

  • monacoredis

    由于咱们的项目用的是React,市面上不少编辑器都是js编写,react提供了一层方便的封装。sql

    好比咱们在HTTP调试页面用的JSON编辑器,是以monaco为原型封装成的React组件数据库

这个就是monaco

monaco呢,是微软开源的,你们熟悉的VsCode其实内部核心也是monaco。json

优势是美观,专业,缺点是使用比较复杂后端

  • AceEditorapi

    用过yapi的人都知道,里面填写JSON_SCHEMA的时候用到了JSON编辑器,会校验你的JSON格式。里头的编辑器就是AceEditorapp

    我以为它的优势就是功能比较强大,包括代码补全,UI响应都作的很棒,惟一的缺点可能就是主题不多,不太好看。编辑器

  • CodeMirror

    这是我最开始调研过的一款插件,包括大名鼎鼎的leetcode都是用的它。若是用好了天然很是牛逼,但我确实玩不太转,以为里面的API太生硬了。

    React对应的实现: react-codemirror2

    惟一缺点就是使用困难,遇到问题很差解决

最终选型

因为AceEditor我在公司实现了一套,为了不重复造轮子,花更多的时间去搞一套新的。我决定直接搬运过来。

固然若是之后有时间,我会向leetcode学习,作一个更好用的编辑器。

封装编辑器组件

简单看看就行

接受value, 语言,改变value的事件以及高度和theme。这样咱们就能够对编辑器的主题,内容等进行完美控制

仍是看看下最终页面成果吧~

页面分为3块,左侧是上一节编写好的部分,右侧上半部分是编辑器,下半部分是返回结果

选中db后的效果

自动补全

切换主题

执行后的结果

渐渐地成型了一点~

后端bug修复

先给你们道个歉,本身上一节写的代码没有通过很严谨的测试,致使出了一些问题:

  • 问题1: 多个fat环境

这个问题我如今是修复了

能够看到,出现了2个fat数据。

仔细找一下缘由,发现是这里出了岔子:

这里咱们添加好第一个fat数据后,idx=0对不,因此env_index里面的数据是这样的:

env_idx = {"fat": 0}

那么当第二个fat来了,会取到idx=0,判断if not idx,这里not idx自动隐式转换为True了,致使又append了一次result。

因此这时候咱们须要换个判断方式if idx is None,这个判断表明字典里面没有这个key。

这样就ok了

  • 问题2: 天真的觉得MetaData能够复用

get_tables这个方法

还记得get_tables里面这个metadata变量吗?以前是经过方法传递进来的参数,这样只须要实例化MetaData()一次。

可是坑就坑在,后续生成的数据,也会带上以前得到的表信息,因此咱们仍是不能复用这个对象。

改造online_sql方法

前面咱们已经实现过在线执行sql的方法了,可是会发现有一些问题。

  • datetime不是咱们想要的

    因此咱们须要自行处理,拿到咱们标准的datetime。

编写2个新的方法,方法json_serialize是针对datetime数据进行序列化

拿到字段里面的keys(),也就是列名,用于前端展现。

  • 对于update这种没有返回结果的方法没有兼容

若是sql没有返回值,那必定是delete/insert/update之类的语句

咱们返回更新的行数就好,不论是增删仍是

添加全局loading,使得体验更好。

加载数据表的过程会比较缓慢

后端将来优化

因为数据表不会一直修改,咱们能够把他们的数据放到redis之中。这样咱们效率会提升不少,加载速度也不会像如今这么慢。

最后,pg的支持还不是很完善,目前来讲处于待测状态,有感兴趣的小伙伴能够提供下pg的链接或者自测一下。

数据库的配置须要管理员,若是你不是能够联系我,我给你添加。


今天的内容就港(肝)到这里了,数据库这块总算告一段落了你们`周末happy`

文档地址: https://pity.readthedocs.org