[QT Network Cloud Disk Client]——Implementation of login interface function

Table of contents

2. Server IP address and port number settings

1. Register an account

1. Click the registration page and enter the data into the input boxes of username, nickname, password, confirm password, mobile phone, and email .

Click OK to trigger the slot function on_reg_but_clicked.

2.on_reg_but_clicked will verify the legality of the data format in each input box . For example, the mobile phone number can only be composed of numbers.

Check using regular expressions

3. If there is no problem with the data, the client sends an http request to the server:

POST http://119.23.41.13:80/register HTTP/1.1
Content-Type: application/json

{
    "email": "[email protected]",  //邮箱
    "firstPwd": "e10adc3949ba59abbe56e057f20f883e",//密码，用md5值进行加密
    "nickName": "lisi", //昵称
    "phone": "13727989171", //电话号码
    "userName": "lisi"  //用户名
}

Server response:


"code":	"002" //账号注册成功
"code":	"003" //用户已经存在
"code":	"004" //账号注册失败

accomplish:

//注册框的流程
void Dialog::on_reg_but_clicked()
{
        /*
          1.获取输入框中的数据
          2.校验数据格式是否正确
          3.封装http请求，发送http请求
          4.接收http响应，处理http响应
        */
        QString usr=ui->usr_edit->text();
        QString nickname=ui->nickname_edit->text();
        QString password=ui->pasword_edit2->text();
        QString confirmpassword=ui->confirm_edit->text();
        QString mail=ui->mailbox_edit->text();
        QString phone=ui->phone_edit->text();
        QRegExp reg(USER_REG);

        //校验账号的规则
        if(!reg.exactMatch(usr))
        {
            //校验失败
            QMessageBox::warning(this,"警告","输入的账号格式有误");
            return;
        }

        reg.setPattern(PASSWD_REG);
        if(!reg.exactMatch(password)){
            QMessageBox::warning(this,"警告","输入的密码格式有误");
            return;
        }

        reg.setPattern(EMAIL_REG);
        if(!reg.exactMatch(mail)){
            QMessageBox::warning(this,"警告","输入的邮箱格式有误");
            return;
        }

        reg.setPattern(PHONE_REG);
        if(!reg.exactMatch(phone)){
            QMessageBox::warning(this,"警告","输入的手机号码格式有误");
            return;
        }

        if(confirmpassword!=password){
            QMessageBox::warning(this,"警告","确认密码不匹配");
            return;
        }

        //
        QNetworkAccessManager* manger=new QNetworkAccessManager();
        //封装http请求
        QNetworkRequest request;
        //从配置文件中获取到ip地址和port端口号
        QString ip=Common::getInstant()->getConfValue("web_server","ip");
        QString port=Common::getInstant()->getConfValue("web_server","port");
        QString url=QString("http://%1:%2/register").arg(ip).arg(port);
        request.setUrl(QUrl(url));
       //设置文件类型
        request.setHeader(QNetworkRequest::ContentTypeHeader,QVariant("application/json"));
        //将data数据以QJson的格式发送给服务器

        QJsonObject object;
        object.insert("email", mail);//邮箱
        object.insert("userName", usr);//账号
        object.insert("phone", phone);
        object.insert("nickName", nickname);
        object.insert("firstPwd", m_common->getStrMd5(password));
        QJsonDocument doc(object);

        QByteArray data=doc.toJson();
        //发送数据
        QNetworkReply* rely=manger->post(request,data);
        connect(rely,&QNetworkReply::readyRead,this,[=]{
            //响应到达,读取所有的数据
            QByteArray s=rely->readAll();
             qDebug() << "服务器返回数据:" << QString(s);
             //将s数据转换为Json对象
              QJsonParseError err;
             QJsonDocument document=QJsonDocument::fromJson(s,&err);

            if(err.error!=QJsonParseError::NoError){
                qDebug()<<"QJson格式错误";
                return;
            }
            //将QJson字符串转换为QJson对象
            QJsonObject object1;
            object1=document.object();

            //获取状态码
            QString value1=object1["code"].toString();
            if(value1=="002"){
                QMessageBox::information(this,"提示","账号注册成功");
            }

            if(value1=="003"){
                QMessageBox::warning(this,"警告","该账号已经存在");
            }

            if(value1=="004"){
                QMessageBox::critical(this,"注册失败","注册失败");
            }
             rely->deleteLater();
       });
}

2. Server IP address and port number settings

1. Click the OK button to obtain the server IP and port number information

2. Verify the format of the server and port number. If the verification is successful, write the server's IP address and port number into the cfg.json configuration file.

 //点击服务器设置页的按钮，将ip地址和端口写入到配置文件中
void Dialog::on_ok_button_clicked()
{
    QString ip=ui->ip_edit->text();
    QString port=ui->port_eidt->text();
    QRegExp reg(IP_REG);
    //校验账号的规则
    if(!reg.exactMatch(ip))
    {
        //校验失败
        QMessageBox::warning(this,"警告","输入的IP地址有误");
        return;
    }

     reg.setPattern(PORT_REG);
    //校验账号的规则
    if(!reg.exactMatch(port))
    {
        //校验失败
        QMessageBox::warning(this,"警告","输入的端口号有误");
        return;
    }

    m_common->writeWebInfo(ip,port);
    QMessageBox::warning(this,"提示","配置成功");
    ui->stackedWidget->setCurrentWidget(ui->login_page);
    return;
}


// 将服务器的ip和port写入到配置文件
void Common::writeWebInfo(QString ip, QString port, QString path)
{

    QMap<QString,QVariant> web_server;
    web_server.insert("ip",ip);
    web_server.insert("port",port);

    QString usr_base64=getConfValue("login","user");
    QString pwd_base64=getConfValue("login","pwd");
    QString remember=getConfValue("login","remember");

    QMap<QString,QVariant> login;
    login.insert("user",usr_base64);
    login.insert("pwd",pwd_base64);
    login.insert("remember",remember);

    QMap<QString, QVariant> json;
    json.insert("web_server", web_server);
    json.insert("login", login);

    QJsonDocument jsonDocument = QJsonDocument::fromVariant(json);
    if ( jsonDocument.isNull() == true)
    {
        qDebug() << "QJsonDocument::fromVariant错误";
        return;
    }

    QFile file(CONF_FILE);
    if(!file.open(QFile::WriteOnly)!=0)
    {
            qDebug()<<"打开文件失败";
            return;
    }

    file.write(jsonDocument.toJson());
    file.close();

    qDebug()<<"配置成功";
}

3. Login function

1. Click to log in to get your username and password

2. Verify the legality of the username and password format . If legal, send an http request to the server:

POST http://119.23.41.13:80/login HTTP/1.1
Content-Type: application/json

{
    "pwd": "e10adc3949ba59abbe56e057f20f883e", //密码，用md5进行加密
    "user": "zhangsan"                         //用户名
}

http response:

//登录成功的响应
HTTP/1.1 200 OK

{
	"code":	"000",
	"token":	"86569b8a537abf45acbb811f0244a69e"
}

//登录失败的响应
HTTP/1.1 200 OK

{
	"code":	"001",
}

After successful login:

1. The client needs to save the token, because every time the client accesses the server, it needs to add the token to verify its identity.

2. Create a logininfoinstance instance object, and save the user name , token , server IP and port number to the logininfoinstance for subsequent reading.

3. The user's username and password need to be written to the cfg.json file . In order to prevent leaks, the user name and password need to be encrypted twice, first desc encryption, and then base64 encryption.

4. Create the main interface and display the main interface

Code:

//登录按钮
void Dialog::on_login_toolButton_clicked()
{
    qDebug()<<"登录";
    //获取账号密码
    QString account=ui->account_edit->text();
    QString password=ui->password_edit->text();

    //
    QRegExp reg(USER_REG);

    //校验账号的规则
    if(!reg.exactMatch(account))
    {
        //校验失败
        QMessageBox::warning(this,"警告","输入的账号格式有误");
        return;
    }

    reg.setPattern(PASSWD_REG);

    if(!reg.exactMatch(password)){
        QMessageBox::warning(this,"警告","输入的密码格式有误");
        return;
    }

    //封装http请求
    QNetworkRequest request;
    //从配置文件中获取到ip地址和port端口号

    QString ip=Common::getInstant()->getConfValue("web_server","ip");
    QString port=Common::getInstant()->getConfValue("web_server","port");
    QString url=QString("http://%1:%2/login").arg(ip).arg(port);//设置登录的url
    request.setUrl(QUrl(url));

    //设置文件类型
    request.setHeader(QNetworkRequest::ContentTypeHeader,QVariant("application/json"));
    //将data数据以QJson的格式发送给服务器

    QJsonObject object;
    object.insert("user", account);
    object.insert("pwd",  m_common->getStrMd5(password));

    QJsonDocument doc(object);
    QByteArray data=doc.toJson();
    //发送数据
    QNetworkReply* rely=manger->post(request,data);
    connect(rely,&QNetworkReply::readyRead,this,[=]{
        //响应到达,读取所有的数据
        QByteArray s=rely->readAll();
         qDebug() << "服务器返回数据:" << QString(s);
         //将s数据转换为Json对象
         QJsonParseError err;
         QJsonDocument document=QJsonDocument::fromJson(s,&err);

        if(err.error!=QJsonParseError::NoError){
            qDebug()<<"QJson格式错误";
            return;
        }
        //将QJson字符串转换为QJson对象
        QJsonObject object1;
        object1=document.object();

        //获取状态码
        QString value1=object1["code"].toString();
        if(value1=="000"){

            //登录成功
            //0.获取token，将用户信息写入到logininstant中。
            //1.判断有没有记住密码，如果有记住密码，获取记住密码的状态
            //2.将账号和密码信息记录到配置文件中
            //3.显示登录成功页面（主页面）

             //获取token
            QString token=object1["token"].toString();
                qDebug()<<"token:"<<token;
            //获取token，将用户信息写入到logininstant中。
            saveLoginInfoData(account,token,ip,port);


            // QMessageBox::information(this,"登录成功","账号登录成功");
            //判断有没有记住密码
            bool checkBox=ui->rember_checkBox->isChecked();
            if(checkBox==false)
            {
                //没有记住密码直接清除密码框
                ui->password_edit->clear();
            }

            //将账号密码保存到配置文件中
            m_common->writeLoginInfo(account,password,checkBox);
            //获取

           showMainWindow(account);
        }

        if(value1=="001"){
            QMessageBox::warning(this,"警告","登录");
        }
    });
}


//common.h文件：
//将用户信息 写入到配置文件
void writeLoginInfo(QString user, QString pwd, bool isRemeber, QString path=CONF_FILE);

// 服务器信息写入到配置文件
void writeWebInfo(QString ip, QString port, QString path=CONF_FILE);

相关接口（接口实现自行跳转项目链接去查看）

4. Read the configuration file

When the login interface is created, the program will first read the contents of the conf.json file and write the account number and password , server IP , and port number into the login interface.
Since the account number and password are encrypted when writing the configuration file, reading the account number and password requires base64 decryption and desc decryption before displaying the login interface.
desc encryption and decryption , you need to add des.c file and des.h file to the project

//读取配置文件信息，将账号密码，服务器端口号写到界面中
 void Dialog::readConf()
 {
     QString user_base64=m_common->getConfValue("login","user");
     QString pwd_base64=m_common->getConfValue("login","pwd");
     QString remember=m_common->getConfValue("login","remember");

     //对账号进行base64解密和desc解密
     QByteArray usr_des=QByteArray::fromBase64(user_base64.toLocal8Bit());
     unsigned char usr[1024]={0};
     int usr_len;
     //进行desc解密
     if(DesDec((unsigned char*)usr_des.data(),usr_des.length(),usr,&usr_len)!=0){
         qDebug()<<"desc解密失败";
     }

     //账号解密成功，将账号显示到登录窗口
     QString s=QString::fromLocal8Bit((const char*)usr,usr_len);
     ui->account_edit->setText(s);

     if(remember=="yes")
     {
         ui->rember_checkBox->setCheckState(Qt::Checked);
         //记住密码，将密码显示到密码框上
         QByteArray pwd_des=QByteArray::fromBase64(pwd_base64.toLocal8Bit());
         unsigned char pwd[1024]={0};
         int pwd_len=0;
         //进行desc解密
         if(DesDec((unsigned char*)pwd_des.data(),pwd_des.length(),pwd,&pwd_len)!=0){
             qDebug()<<"密码解密失败";
         }

         //账号解密成功，将账号显示到登录窗口
         QString s1=QString::fromLocal8Bit((const char*)pwd,pwd_len);
         ui->password_edit->setText(s1);
     }


    //将ip地址和端口号显示到服务器设置页面
     QString ip=m_common->getConfValue("web_server","ip");
     QString port=m_common->getConfValue("web_server","port");

     ui->ip_edit->setText(ip);
     ui->port_eidt->setText(port);
 }

5. Display the main interface

After successful login, the main page is displayed:


//创建主界面，并显示主界面
void Dialog::showMainWindow(QString account)
{
    //获取主页面
    mainwindow=MainWindow::getinstant();
    mainwindow->setUser(account);//将用户名显示到主页面上
    mainwindow->show();//显示主页面
    this->hide();//隐藏主页面
   
    connect(mainwindow,&MainWindow::switchUser,this,[=](){
        mainwindow->hide();
        this->show();
    });
}