測試平台系列(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`
文檔地址: //pity.readthedocs.org
