Qml之Json序列化与反序列化

Json

{     "data": [         {             "addr""testAddr1",             "name""testName1",             "symbol""testSymbol1"         },         {             "addr""测试测试",             "name""测试无BUG",             "symbol""测试通过"         },         {             "addr""nice",             "name""今天不送测",             "symbol""有需求明年再说"         },         {             "addr""happy",             "name""今晚上线",             "symbol""version meeting"         }     ] }

解析后

qml: addr: testAddr1 name: testName1 symbol: testSymbol1

qml: addr: 测试测试 name: 测试无BUG symbol: 测试通过

qml: addr: nice name: 今天不送测 symbol: 有需求明年再说

qml: addr: happy name: 今晚上线 symbol: version meeting

 

qml可以绘制界面,展示视图信息。在大数据、批量数据的情况下,信号与槽机制就显得不太灵活了。

就可以Json作为一种通信方式,完成数据的交互与储存。

在视图模型中:ListView、TableView等。运用较为广泛,qml却没有现成的JSON库提供序列化和反序列的操作。

此文档,就是提供出一个思路:在QML中如何构造Json,如何解析Json。

 

必备:

1、需要明白Json的组成元素和规则。(请自行百度)

2、需要明白从Json到string字符串添加了什么东西?两者的区别是什么?

3、QML中提供的JSON的解析规则是怎样的?

比如:

{

"data": {

"data1":"test1",

"data2":"test2"

}

}

将上述的Json序列化到stringData

解析方式一:全解析

var jsonData=JSON.parse(stringData);

使用:

var data=jsonData.data;

var data1=jsonData.data.data1

var data2=jsonData.data.data2

 

解析方式二:部分解析

var jsonData=JSON.parse(stringData).data;

使用:

var data1=jsonData.data1

var data2=jsonData.data2

 

解析方式三:具体解析

var data1=JSON.parse(stringData).data.data1;

var data2=JSON.parse(stringData).data.data2;

 

区别:

1、qml提供出解析层级。即可以解析到某一个字段,并拿到里面的数据。

2、解析方式。qml的解析方式、字段读取,都是使用"."。对比其他Json库,----jsonData["data"]、jsonData["data"]["data1"]。

3、安全性。qml的Json解析是弱解析。意味着即使Json格式出错了、字段不存在等情况都不会崩溃,仅是警告处理。因此需要确保Json的正确性。

 

 

下面给出一个简单的ListView作为参考Demo

    function jsonToString(model) {         var res = "{ \"data\": [\n";         console.log("count: " + model.count);         for(var i = 0; i < model.count; ++i) {             res += "\n{\t";             var e = model.get(i);             res += "\"addr\": \""   + e.addr + "\",\n\t";             res += "\"name\": \"" + e.name + "\",\n\t";             res += "\"symbol\": \"" + e.symbol +"\"\n\t";               // The last one should not have the ending ","             if ( i === model.count -1)                 res += "\n}";             else                 res += "\n},";         }         res += "\n]}";         console.log("res: " + res );         return res;     }       function stringToJson(stringData){         console.log("req stringData:",stringData);         var jsonData=JSON.parse(stringData).data;         //for(var i=0;i<jsonData.length;++i){         //    console.log("addr:",jsonData[i].addr,         //                " name:",jsonData[i].name,         //                " symbol:",jsonData[i].symbol);         //}         return jsonData;     }       ListModel {         id: listModel         ListElement {             addr:"testAddr1"             name:"testName1"             symbol:"testSymbol1"         }         ListElement {             addr:"测试测试"             name:"测试无BUG"             symbol:"测试通过"         }         ListElement {             addr:"nice"             name:"今天不送测"             symbol:"有需求明年再说"         }         ListElement {             addr:"happy"             name:"今晚上线"             symbol:"version meeting"         }     }       ListView{         id: listview         width:256         height: 180         x:100         y:100         model: listModel         //delegate: listDelegate     }     //--------------------------------------------------------------------------------------------------------- //test         Rectangle{             x:50             y:50             width:200             height:30             border.width: 1             Text {                 text: qsTr("序列化")                 anchors.centerIn: parent             }             MouseArea{                 anchors.fill: parent                 onClicked: {                     var data=jsonToString(listModel)                     console.log(data);                 }             }         }           Rectangle{             x:300             y:50             width:200             height:30             border.width: 1             Text {                 text: qsTr("反序列化")                 anchors.centerIn: parent             }             MouseArea{                 anchors.fill: parent                 onClicked: {                     var data=jsonToString(listModel)                     var jsonData=stringToJson(data)                     console.log(jsonData);                     for(var i=0;i<jsonData.length;++i){                         console.log("addr:",jsonData[i].addr,                                     " name:",jsonData[i].name,                                     " symbol:",jsonData[i].symbol);                     }                 }             }         } //test

 

上一篇:ES6重要知识点总结


下一篇:AppBoxFuture(一): Hello Future!