QML笔记: 通过Post数据实现跟Nodejs接口的交互

时间：2015-12-08 00:13:08 阅读：844 评论：0 收藏：0 [点我收藏+]

标签：

Qml如何实现跟web server接口的交互，本文通过一个简单的login操作来模拟

涉及的主要类:

QNetworkAccessManager/QNetworkRequest/QNetworkReply  网络操作 

QJsonDocument/QJsonObject   JSON数据的封装和解析

1. 定义个用户登录类UserLogin

// UserLogin.H
class UserLogin : public QObject
{
    Q_OBJECT
public:
    UserLogin(QObject* parent = 0 );
    Q_INVOKABLE bool Login(const QString& username , const QString& password) ;

private:
    QString _username;
    QString _password;

    QByteArray __mkLoginRequestData(void);
};

//UserLogin.cpp

UserLogin::UserLogin(QObject *parent)
    :QObject(parent)
{
    this->_username = this->_password = "";
}

bool UserLogin::Login(const QString &username, const QString &password){
    this->_username = username ;
    this->_password = password ;

    QByteArray dt = this->__mkLoginRequestData();
    QByteArray contentsize = QByteArray::number(dt.size());

    QUrl url("http://127.0.0.1:3000/login");

    QNetworkAccessManager *manager = new QNetworkAccessManager(this);
    QNetworkRequest request;
    request.setUrl( url );
    //set head
    request.setRawHeader("content-type","application/json");
    request.setRawHeader("content-length",contentsize );

    QNetworkReply* reply = manager->post(request , dt );
    if( reply->error() != QNetworkReply::NoError )
    {
        return true;
    }

    return false;
}

QByteArray UserLogin::__mkLoginRequestData()
{
    QJsonObject obj;
    obj.insert("username",this->_username);
    obj.insert("password",this->_password);

    QJsonDocument doc;
    doc.setObject( obj );


    return doc.toJson();
}

2. 界面，界面主要通过一个js方法来实现登录

        function onLogin()
        {
            var username = _usernameText.text.trim();
            var password = _passwordText.text.trim();

            var result = loginobj.Login(username , Qt.md5(password));

            if( result === true ){
                console.log("successful")
            }
            else
            {
                console.log(‘faliure‘);
            }
        }

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")


    Rectangle{
        id: _mainCOntent
        anchors.fill: parent
        color : ‘#eee‘

        ColumnLayout{
           anchors.centerIn: parent
           spacing: 5

           RowLayout{
               id: _userLayout
               width: 260;
               height: 30
               Label{
                   anchors.verticalCenter: parent .verticalCenter;
                   text: ‘UserName:‘
               }

               TextField {
                   id:_usernameText
                   anchors.verticalCenter: parent .verticalCenter;
                   width: 200;
                   height: 30
                   activeFocusOnPress: true
                   placeholderText: "enter your name"
               }
           }

           RowLayout {
               id:_passwordLayout
               width: 260;
               height: 30 ;

               Label{
                   anchors.verticalCenter: parent .verticalCenter;
                   text:"Password:"

               }
               TextField {
                   id:_passwordText
                   anchors.verticalCenter: parent .verticalCenter;
                   width: 200;
                   height: 30
                   placeholderText: "enter your password"
                   activeFocusOnPress: true

               }
           }

           SLButton{
               text: ‘Login‘
               anchors.horizontalCenter: parent.horizontalCenter
               onClicked: {
                   _mainCOntent.onLogin();
               }
           }
        }

        function onLogin()
        {
            var username = _usernameText.text.trim();
            var password = _passwordText.text.trim();

            var result = loginobj.Login(username , Qt.md5(password));

            if( result === true ){
                console.log("successful")
            }
            else
            {
                console.log(‘faliure‘);
            }
        }
    }


}

View Code

slButton是个自定义的按钮等同于QML的button重写了button的样式

3.主文件，main.cpp :主要实现加载QML文件，同时将UserLogin传递给QML，让QML能直接进行访问userLogin类

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    UserLogin lg;  //--> 将UserLogin传递给QML，让QML可以直接访问UserLogin类
    engine.rootContext()->setContextProperty("loginobj",&lg);


    return app.exec();
}

4.服务端代码

var express  = require(‘express‘),
    bodyParser= require(‘body-parser‘);

var app = express();
app.use(bodyParser.urlencoded({ extended: false }));

// parse application/json
app.use(bodyParser.json());

app.post(‘/login‘,function(req,res){
    var u = req.body.username;
    var p = req.body.password;

    console.log("username:" + u );
    console.log(‘password:‘ + p );
});

app.listen(3000,function(){
    console.log(‘server is running‘);
});

View Code

5.程序运行:

1) 服务端：首先你确保你的电脑安装了Nodejs,新建一个app文件夹同时创建个app.js文件，安装body-parser模块（用于解析application/json,表单请求操作),然后node app.js

2) 客户端: 本文基于Qt5.5实现，新建个QtQuick 工程然后新建相关文件即可了

QML笔记: 通过Post数据实现跟Nodejs接口的交互

标签：

原文地址：http://www.cnblogs.com/visonme/p/5027785.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行