回顾
我们上一节已经写好了左侧数据表目录，今天继续完成sql编辑器的部分。
调研组件
- monaco
因为我们的项目用的是React，市面上很多编辑器都是js编写，react提供了一层方便的封装。
比如我们在HTTP调试页面用的JSON编辑器，是以monaco为原型封装成的React组件。
这个就是monaco
monaco呢，是微软开源的，大家熟悉的VsCode其实内部核心也是monaco。
优点是美观，专业，缺点是使用比较复杂。
- AceEditor
用过yapi的人都知道，里面填写JSON_SCHEMA的时候用到了JSON编辑器，会校验你的JSON格式。里头的编辑器就是AceEditor。
我觉得它的优点就是功能比较强大，包括代码补全，UI响应都做的很棒，唯一的缺点可能就是主题很少，不太好看。 - CodeMirror
这是我最开始调研过的一款插件，包括大名鼎鼎的leetcode都是用的它。如果用好了自然非常牛逼，但我确实玩不太转，觉得里面的API太生硬了。
React对应的实现:react-codemirror2
唯一缺点就是使用困难，遇到问题不好解决。
最终选型
由于AceEditor我在公司实现了一套，为了避免重复造轮子，花更多的时间去搞一套新的。我决定直接搬运过来。
当然如果以后有时间，我会向leetcode学习，做一个更好用的编辑器。
封装编辑器组件
简单看看就行
接受value, 语言，改变value的事件以及高度和theme。这样我们就可以对编辑器的主题，内容等进行完美控制。
还是看看下最终页面成果吧~
image
页面分为3块，左侧是上一节编写好的部分，右侧上半部分是编辑器，下半部分是返回结果。
选中db后的效果
自动补全
切换主题
执行后的结果
渐渐地成型了一点~
后端bug修复
先给大家道个歉，自己上一节写的代码没有经过很严谨的测试，导致出了一些问题:
- 问题1: 多个fat环境
这个问题我现在是修复了
可以看到，出现了2个fat数据。
仔细找一下原因，发现是这里出了岔子:
image
这里我们添加好第一个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`
