测试平台系列(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`
