QML notes: Using post data to interact with the Nodejs interface

QML How to implement interaction with the Web server interface, this article simulates a simple login operation

The main classes involved are:

Qnetworkaccessmanager/qnetworkrequest/qnetworkreply  

   encapsulation and parsing of qjsondocument/qjsonobject JSON data

1. Define a user login class Userlogin

Userlogin.hclass userlogin:public qobject{q_objectpublic:userlogin (qobject* parent = 0);    q_invokable bool Login (const qstring& username, const qstring& password);p rivate:qstring _username;    QString _password; Qbytearray __mkloginrequestdata (void);};/ /userlogin.cppuserlogin::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. Interface, interface mainly through a JS method to achieve Login

        function Onlogin ()        {            var username = _usernametext.text.trim ();             var password = _passwordtext.text.trim ();             var result = loginobj. Login (username, qt.md5 (password));             if true {                Console.log ("successful")            }            else            {                Console.log (' faliure ');            }        }

Import QtQuick 2.5Import Qtquick.controls1.4Import qtquick.layouts1.1Applicationwindow {visible:trueWidth:640Height:480Title:qstr ("Hello World") rectangle{ID: _maincontent anchors.fill:parent color:' #eee 'columnlayout{anchors.centerIn:parent spacing:5rowlayout{ID: _userlayout width:260; Height:30label{anchors.verticalCenter:parent. Verticalcenter; Text:' UserName: '} TextField {Id:_usernametext anchors.verticalcenter                   : parent. Verticalcenter; Width:200; Height:30activefocusonpress:truePlaceholdertext:"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:30Placeholdertext:"Enter your password"activefocusonpress:true}} slbutton{text:' Login 'anchors.horizontalCenter:parent.horizontalCenter onclicked: {_maincon               Tent.onlogin (); }           }        }        functionOnlogin () {varUsername =_usernametext.text.trim (); varPassword =_passwordtext.text.trim (); varresult =Loginobj.            Login (username, qt.md5 (password)); if(Result = = =true) {Console.log ("Successful")            }            Else{Console.log (' Faliure '); }        }    }}

View Code

Slbutton is a custom button that is equivalent to a QML that overrides the button's style

 3. Main file, Main.cpp: The main implementation of loading QML file, while Userlogin passed to QML, so QML can directly access Userlogin class 
   

int Main (intChar *argv[]) {    qapplication app (argc, argv);    Qqmlapplicationengine engine;    Engine.load (Qurl (qstringliteral ("qrc:/main.qml"));    Userlogin LG;  --pass Userlogin to QML, so QML can access the Userlogin class    Engine.rootcontext ()->setcontextproperty directly("  loginobj",&LG);     return app.exec ();}

4. Service-Side code

varExpress = require (' Express '), Bodyparser= Require (' Body-parser ');varApp =Express (); App.use (bodyparser.urlencoded ({extended:false }));//Parse Application/jsonApp.use (Bodyparser.json ()); App.post ('/login ',function(req,res) {varU =Req.body.username; varp =Req.body.password; Console.log ("Username:" +u); Console.log (' Password: ' +( p);}); App.listen (3000,function() {Console.log (' Server is running ');});

View Code

5. Program Operation:

1) Server: First you make sure that your computer is installed with Nodejs, create a new app folder at the same time creating a app.js file, install the Body-parser module (for parsing Application/json, form request action), and then node app.js

2) Client: This article is based on Qt5.5 implementation, the new Qtquick project and then create a new related file.

QML notes: Using post data to interact with the Nodejs interface