Json視圖工具

Simulator Screen Shot - iPhone 6 Plus - 2019-08-11 at 09.28.51.png

demo地址

簡介

描述

BaseJsonViewController是一個用OC編寫的提供了搜索插入編輯查看路徑復制json/value等功能的Json可視化編輯工具。

由于網絡數據請求下來后,APP端對json原數據的展示并不明朗。 修改網絡數據只能通過Charles等抓包工具實現,受到的限制太多,所以誕生了在APP端直接對json進行查看、修改的Json視圖工具:BaseJsonViewController

后續會對BaseJsonViewController進行持續的更新優化,歡迎使用。

主要功能

json結構展示:

  1. 一鍵壓縮/展開 : 點擊??all 展開全部,點擊??…壓縮全部(需要注意的是,如果進行了壓縮,處在插入狀態的cell,將被刪除)。
  2. 添加了層級的背景色、縮進等。默認最大展示6個層級,如果超過6個層級則跳轉到新的頁面,進行展示。
  3. 對類型的區分:分為Dictionary Array String Number
  4. 支持展開與收起功能,如果有子節點,則單擊可以展開\收起。
  5. value的展示:一行cell 的 value默認最多展示兩行。如果超過兩行則壓縮,并在底部展示。

搜索功能:

點擊放大鏡可以進入搜索頁面

在源碼中的位置:BaseJsonViewController->BaseJsonViewMainView->BaseJsonHeaderView->BaseJsonViewSearchView

  1. 搜索關鍵詞:輸入關鍵詞,并且會自動進行搜索。

  2. 精準搜索:如果選中精準搜索,搜索策略將從containsString 變成 isEqualToString

注意:不管是否為精準搜索,都區分大小寫。

  1. 搜索Editing:如果選中【搜Editing】按鈕,則會搜索整個json中處在Editing狀態并符合關鍵詞搜索的數據。

注意:如果有處在插入狀態的數據,這時候會自動被刪除。

  1. 上一個\下一個:當搜索完成后,點擊【上一個】、【下一個】自動跳轉到相應的行。

  2. 查看總覽:跳轉到一個搜索結果總覽控制器,顯示了搜索結果的路徑及`value

  3. 展示路徑/搜索數量:當沒有搜索條件(即:沒有搜索詞 、且搜Editing處于非選中狀態)時,顯示的是本控制器節點的路徑。否則顯示的是搜索結果數量。

  4. 展示路徑/報錯信息:具有滾動、放大功能,最大放大倍數為1倍

  5. 當搜索條件報錯時,展示的是紅色的報錯信息。

  6. 當有搜索內容時,展示的是當前選中的搜索結果的節點路徑,

刪除功能

側滑cell,出現刪除功能(注意,因為側滑功能比較多,所以在iphone5上面會導致刪除功能被遮擋)

復制功能

復制功能分為兩種:

  1. 如果側滑cell對應的節點為ArrayDictionary 則會只能復制 json
  2. 如果側滑cell 對應的節點為StringNumber則可以復制jsonvalue

編輯功能

側滑cell,并點擊編輯按鈕開啟編輯功能(下面把被編輯的節點稱為Model,把Model的父節點稱為SuperModel)。

  1. SuperModel類型對Modelkey 的影響:

  2. SuperModel點為Array類型:Model的key必須為空。

  3. SuperModelDictionary類型:Model的key必須有值。

  4. 點擊取消按鈕:取消所有修改。

  5. 點擊完成按鈕:

  6. 選中Number按鈕,轉成Numbser類型,輸入的值必須為數字,否則會報錯,并在報錯位置進行顯示。

  7. 選中String按鈕,轉成String類型,會有個默認值,默認值為""

  8. 選中json按鈕:

    1. 如果ModelArray類型,則會把jons解析出來作為Model的子節點數據
    2. 如果ModelDictionary類型,則會直接解析Json,如果json內包含一個對象則該對象作Model的數據,把對象的Key作為Modelkey
  9. 選中Dictionary按鈕:

    1. 如果ModelDictionary類型,則不會產生任何效果,否則Model清空子節點數據,并把Model轉成Dictionary類型。
  10. 選中Array按鈕:

    如果ModelArray類型,則不會產生任何效果,否則Model清空子節點數據,并把Model轉成Array類型。

插入功能

側滑cell,并點擊插入按鈕開啟編輯功能

注意:如果在插入節點沒有點擊完成的情況下,對節點父節點執行收起操作,會自動刪除剛剛插入的節點

注意:如果插入節點父節點為Dictionary類型,插入的節點父節點中的順序不固定

把被編輯的節點稱為Model

Model的父節點稱為SuperModel

Model插入的子節點稱為SubModel

SuperModel插入的子節點稱為SuperSubModel)。

  1. 如果ModelDictionary則可以【插入子節點】或【插入父節點】。
    1. 【插入子節點】:
      1. 如果Model關閉狀態,則自動展開Model,并在Model字節點的第一行插入一個新的節點SubModel,這時候,SubModel處于被編輯狀態
      2. 注意:此時插入的SubModel在父節點Model無序
    2. 【插入父節點】:在Model的后面插入為SuperSubModel插入SuperSubModel
  2. 如果ModelArray類型,則可以【插入子節點】或【插入父節點】。
    1. 【插入子節點】:
      1. 如果Model展開狀態,則自動壓縮Model,并在Model字節點的第一行插入一個新的節點SubModel,這時候,SubModel處于被編輯狀態
      2. 注意:此時插入的SubModel在父節點Model有序
    2. 【插入父節點】:在Model的后面插入為SuperSubModel插入SuperSubModel
  3. 如果ModelStringNumber類型,則可以【插入父節點】。在Model的后面插入為SuperSubModel插入SuperSubModel

實現思路

  1. json的解析
    1. 為了避免造成不必要的開銷,對json解析的時機做了調整:
      1. 當節點A被打開時候,才會解析A的子節點數據。
      2. 在解析節點A數據時,優先獲取緩存的A子節點數據。
      3. 在對A進行編輯插入時,對A的的子節點數據進行更新。
  2. 對視圖的展示
    1. 對與無限層級縮放的視圖來說,我們有必要把數據展平。
    2. 數據中創建一個用于標記層級的變量。來做一個無限縮放層級的假象。

實現細節

對于節點Model的定義

Model就代表了一個節點,所以Model的結構至關重要。

主要的屬性:
  1. level:所處層級,在進行初始化時,根據父節點的level進行賦值。
@property (nonatomic,assign) NSInteger level;
  1. count:字節點的個數
@property (nonatomic,assign) NSInteger count;
  1. isOpen是否為打開狀態
@property (nonatomic,assign) BOOL isOpen;
  1. originData:所有子節點的原始數據(可能為nil、Array、Dictionary、Number、String)
@property (nonatomic,strong) id originData;
  1. key:如果originData為字典,則key就是originData的key,否則為nil
@property (nonatomic,strong) NSString *key;
  1. data: originData 轉化成的數據(可能為:nil、NSString、 NSArray<BaseJsonViewStepModel>、BaseJsonViewStepModel)
@property (nonatomic,strong) id data;
  1. originData:父節點( 在父節點創建子節點時,進行的賦值)
@property (nonatomic,weak) BaseJsonViewStepModel *superPoint;
  1. type:當前節點的類型
typedef enum : NSUInteger {
    BaseJsonViewStepModelType_Dictionary,
    BaseJsonViewStepModelType_Array,
    BaseJsonViewStepModelType_Number,
    BaseJsonViewStepModelType_String,
} BaseJsonViewStepModelType;

@property (nonatomic,assign) BaseJsonViewStepModelType type;
  1. 所處的狀態
typedef enum : NSUInteger {
    BaseJsonViewStepCellStatus_Normal,
    BaseJsonViewStepCellStatus_EditingSelf,
    BaseJsonViewStepCellStatus_InsertItem,
} BaseJsonViewStepCellStatus;

@property (nonatomic,assign) BaseJsonViewStepCellStatus status;
對model的創建
  1. + (BaseJsonViewStepModel *) createStepModelWithOriginData: (id) data andKey: (NSString *)key
/**
 創建 一個model

 @param data 原始的子節點數據
 @param key 創建出的model對應的key
 @return model
 */
+ (BaseJsonViewStepModel *) createStepModelWithOriginData: (id) data andKey: (NSString *)key{
    BaseJsonViewStepModel *model = [BaseJsonViewStepModel new];
    model.originData = data;
    model.key = key;
    return model;
}   
  1. + (BaseJsonViewStepModel *(^)(id)) createWithID

類方法,返回一個blockblock 傳入的是id類型的數據。數據可以是

  1. BaseJsonViewStepModel: 直接返回這個data。不再創建
  2. NSString:先轉成字典,然后創建model

使用方法 BaseJsonViewStepModel.createWithId(data);

+ (BaseJsonViewStepModel *(^)(id)) createWithID {
    return ^(id data) {
        BaseJsonViewStepModel *model;
        if ([data isKindOfClass:BaseJsonViewStepModel.class]) {
            model = data;
        }
        if ([data isKindOfClass:NSString.class]) {
            NSDictionary *dic = BaseJsonViewManager.convertToDicWithJson(data);
            if (dic) {
                model = BaseJsonViewManager.convertToStepModelWithDic(dic);
            }
        }
        if (!model) {
            model = [BaseJsonViewStepModel createStepModelWithOriginData:data andKey:@""];
        }
        return model;
    };
}
搜索功能

搜索功能將會搜索出 所有的符合條件的model,并返回一個數組

isSearchEditing的篩選策略

  1. isSearchEditing:如果為true。
    1. 如果keynil,則搜索全部處在編輯狀態的model。
    2. 如果key有值
      1. 如果isAccurateSearch為true:搜索所有keyvalue isEqualToString key的正在編輯狀態的model
      2. 如果isAccurateSearch為true:搜索所有keyvalue containsString key的正在編輯狀態的model
/**
 搜索

 @param key 搜索 關鍵字
 @param isAccurateSearch 是否為精準搜索(如果選中精準搜索,搜索策略將從`containsString` 變成 `isEqualToString`。不管是否為精準搜索,都區分大小寫)
 @param isSearchEditing 是否搜索正在編輯狀態的model
 @return 搜索結果
 */
- (NSMutableArray <BaseJsonViewStepModel *>*) searchWithKey:(NSString *)key andIsAccurateSearch: (BOOL) isAccurateSearch andIsSearchEditing:(BOOL) isSearchEditing {
    SBaseJsonViewStepSearchModelConfig config;
    config.isSearchEditing = isSearchEditing;
    config.isAccurateSearch = isAccurateSearch;
    config.key = key;
    config.model = self;
    return BaseJsonViewStepSearchModel.getResultWithSearchConfig(config);
}
刪除功能

從父節點移除本節點

這個功能主要是找到originData中相同的元素,進行刪除。

- (void) removeFromeSuper {
  
    if ([self.superPoint.originData isKindOfClass:NSArray.class]) {
        NSArray *array = self.superPoint.originData;
        NSMutableArray *arrayM = [[NSMutableArray alloc]initWithArray:array];
        [arrayM removeObject:self.originData];
        self.superPoint.originData = arrayM;
    }
    if ([self.superPoint.originData isKindOfClass:NSDictionary.class]) {
        NSDictionary *dic = self.superPoint.originData;
        NSMutableDictionary *dicM = [[NSMutableDictionary alloc]initWithDictionary:dic];
        NSString *key = self.key;
        if (key.length > 0) {
            dicM[self.key] = nil;
        }
        self.superPoint.originData = dicM;
    }
    
    [self.superPoint reloadDataWitOriginDataProperty];
}
插入節點

根據原始數據插入節點,并返回BaseJsonViewStepErrorModel

BaseJsonViewStepErrorModel 記錄了插入時的錯誤信息

/**
 插入一個節點

 @param key 節點的key
 @param originData 節點的原始子節點y數據
 @param index 插入的位置
 @return 插入報錯的model
 */
- (BaseJsonViewStepErrorModel *) insertWithKey: (NSString *)key
         andOriginData: (id) originData
              andIndex:(NSInteger) index;

根據model插入節點,并返回BaseJsonViewStepErrorModel

BaseJsonViewStepErrorModel 記錄了插入時的錯誤信息



/**
 插入一個Model

 @param model 準備插入的 節點 model
 @param index 插入的位置
 @return 錯誤信息
 */
- (BaseJsonViewStepErrorModel *) insertWithModel: (BaseJsonViewStepModel *) model
                                        andIndex:(NSInteger) index;

最后

彩蛋:點擊title會復制當前Controller展示的json數據呦~

工具剛剛成型,很多需要修改的地方,希望大家勇于提bug 謝謝~

demo地址

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,572評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,071評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,409評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,569評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,360評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,895評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,979評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,123評論 0 286
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,643評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,559評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,742評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,250評論 5 356
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 43,981評論 3 346
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,363評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,622評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,354評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,707評論 2 370

推薦閱讀更多精彩內容