大家好，我是米洛，求三連！求關注
測試開發坑貨!
回顧
我們上一節已經寫好了左側資料表目錄，今天繼續完成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`