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 |
