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

大家好，我是米洛，求三连！求关注测试开发坑货!

回顾

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

调研组件

monaco

因为我们的项目用的是React，市面上很多编辑器都是js编写，react提供了一层方便的封装。

比如我们在HTTP调试页面用的JSON编辑器，是以monaco为原型封装成的React组件。

monaco呢，是微软开源的，大家熟悉的VsCode其实内部核心也是monaco。

优点是美观，专业，缺点是使用比较复杂。

AceEditor

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

我觉得它的优点就是功能比较强大，包括代码补全，UI响应都做的很棒，唯一的缺点可能就是主题很少，不太好看。
CodeMirror

这是我最开始调研过的一款插件，包括大名鼎鼎的leetcode都是用的它。如果用好了自然非常牛逼，但我确实玩不太转，觉得里面的API太生硬了。

React对应的实现: react-codemirror2

唯一缺点就是使用困难，遇到问题不好解决。

最终选型

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

当然如果以后有时间，我会向leetcode学习，做一个更好用的编辑器。

封装编辑器组件

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

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

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

渐渐地成型了一点~

后端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。

问题2: 天真的以为MetaData可以复用

还记得get_tables里面这个metadata变量吗？之前是通过方法传递进来的参数，这样只需要实例化MetaData()一次。

但是坑就坑在，后续生成的数据，也会带上之前获得的表信息，所以我们还是不能复用这个对象。

改造online_sql方法

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

datetime不是我们想要的

所以我们需要自行处理，拿到我们标准的datetime。

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

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

我们返回更新的行数就好，不管是增删还是改。

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

后端未来优化

由于数据表不会一直修改，我们可以把他们的数据放到redis之中。这样我们效率会提高很多，加载速度也不会像现在这么慢。

最后，pg的支持还不是很完善，目前来说处于待测状态，有感兴趣的小伙伴可以提供下pg的连接或者自测一下。

数据库的配置需要管理员，如果你不是可以联系我，我给你添加。

今天的内容就港（肝）到这里了，数据库这块总算告一段落了_{大家`周末happy`}

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