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