本文目錄一覽:
求JSON Viewer編輯器免安裝版下載
軟件介紹:
JSON Viewer是一款非常實用的Json格式查看器。在日程開發調試中我們難免會遇到Json格式的數據需要解析閱讀,但Json格式數據閱讀性極差。
所需工具:點擊下載 JSON Viewer編輯器
json view chrome插件
1、將下載好的插件進行安裝,打開chrome – 擴展程序 (地址欄輸入chrome://extensions/);
2、在chrome瀏覽器右上角工具欄中選中“開發模式”功能選項;
3、點擊”加載正在開發的擴展程序…” – 選擇插件目錄(D:\Download\JSONView-for-Chrome-master\WebContent);
4、安裝完成,重新加載(Ctrl+R)。
json精靈編輯器載入失敗
json精靈編輯器載入失敗是文件損失。根據查詢json失敗公開解決方法得知,刪除json精靈編輯器重新下載即可解決。.json是一種輕量級的數據交換格式,在與後端的數據交互中具有較為廣泛的應用。
json 是什麼文件
SON的全稱是”JavaScript Object Notation”,意思是JavaScript對象表示法,它是一種基於文本,獨立於語言的輕量級數據交換格式。XML也是一種數據交換格式,為什麼沒有選擇XML呢?因為XML雖然可以作為跨平台的數據交換格式,但是在JS(JavaScript的簡寫)中處理XML非常不方便,同時XML標記比數據多,增加了交換產生的流量,而JSON沒有附加的任何標記,在JS中可作為對象處理,所以我們更傾向於選擇JSON來交換數據。
JSON採用完全獨立於語言的文本格式,但是也使用了類似於C語言家族的習慣(包括C、C++、C#、Java、JavaScript、Perl、Python等)。這些特性使JSON成為理想的數據交換語言。易於人閱讀和編寫,同時也易於機器解析和生成(網絡傳輸速率)。JSON格式取代了xml給網絡傳輸帶來了很大的便利,但是卻沒有了xml的一目了然,尤其是json數據很長的時候,我們會陷入繁瑣複雜的數據節點查找中。
JSON可以使用專門的編譯器打開。JSON有兩種表示結構,對象和數組。對象結構以”{”大括號開始,以”}”大括號結束。中間部分由0或多個以”,”分隔的”key(關鍵字)/value(值)”對構成,關鍵字和值之間以”:”分隔。
react–實現簡易json編輯器
分析
由於個人不太喜歡一切皆props的形式,故想要做到一些公共api既可以在內部調用又可以對外部暴漏,類組件使用高階/裝飾器,函數組件使用hooks,我這裡使用方式二,對外提供useEditor
json預覽
通過原生標籤的contentEditable屬性可以實現在線json編輯
通過pre標籤並利用JSON.stringify的參數3實現格式化預覽
通過監聽input事件實現編輯監聽
樹形編輯
借用antd的tree組件快速實現樹形ui展示
將json字符串處理成treeData展示到tree組件,操作後在轉成json反顯到左側預覽區
刪除編輯能力通過將treeData這顆多叉樹轉為二叉樹操作後再回退到多叉樹進行回顯
創建react項目
create-react-app json-edit –template typescript
實現
index作為入口文件,應當承載着所有內部接口對外暴漏的能力
這裡將json和editor組件以及useEditor暴漏出去
json組件用於展示並編輯json字符串
使用contentEditable開啟編輯,利用pre+JSON.stringify({}, null, ‘ ‘)進行格式化,通過input事件監聽json修改
tree組件用於展示,並允許彈窗的形式刪除或修改節點
首先是json字符串轉為多叉樹後展示
當存在節點編輯後,需要從節點刪除或編輯,可以先將多叉樹轉成二叉樹進行操作,後再轉回多叉樹, 之前實現過,就不重複寫了
最後就是將編輯後的多叉樹再轉回json字符串
效果如下
待優化的點
預覽時無法實時進行格式化處理,這是因為格式化操作光標位置會重置,需要不斷進行記錄並在格式化後重新設置
編輯操作目前僅支持編輯最後一級節點
刪除操作會導致原json數據的順序被修改,這主要是在生成的id值不正確,導致在二叉轉多叉時排序不準
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/308405.html