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

2021年9月16日 12点热度 0条评论 来源: 米洛丶

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

回顾

我们上一节已经写好了左侧数据表目录,今天继续完成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

    原文作者:米洛丶
    原文地址: https://www.cnblogs.com/we8fans/p/15290310.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。