【QT 网络云盘客户端】——登录界面功能的实现

努力学习的少年2023-07-29 10:33

目录

1.注册账号

2.服务器ip地址和端口号设置

[3. 登录功能](#3. 登录功能)

4.读取配置文件

5.显示主界面

1.注册账号

1.点击注册页面，将数据 输入 到 用户名，昵称，密码，确认密码，手机，邮箱 的输入框中，

点击确定，触发槽函数 on_reg_but_clicked。

2.on_reg_but_clicked 会校验 各个输入框中数据格式 的合法性，比如说手机号只能由数字组成。

使用正则表达式进行检验

3.如果数据没问题，则客户端发送一个http请求给服务器：

cpp 复制代码 
POST http://119.23.41.13:80/register HTTP/1.1
Content-Type: application/json

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

服务器响应：

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

实现：

cpp 复制代码 
//注册框的流程
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.服务器ip地址和端口号设置

1.点击 确定 按钮，获取服务器 ip 和端口号的 信息

2.验证服务器 和 端口号的格式，如果验证成功，将 服务器的 ip地址和 端口号写入到 cfg.json配置文件中。

cpp 复制代码 
 //点击服务器设置页的按钮，将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. 登录功能

1.点击登录，获取用户名和密码

2.验证 用户名 和密码 格式的 合法性，如果 合法，则发送一个http请求给服务器：

cpp 复制代码 
POST http://119.23.41.13:80/login HTTP/1.1
Content-Type: application/json

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

http响应：

cpp 复制代码 
//登录成功的响应
HTTP/1.1 200 OK

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

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

{
	"code":	"001",
}

登录成功后：

1.客户端需要保存token，因为客户端接下来访问服务器 都需要 加上token来验证身份

2.创建一个 logininfoinstance 实例对象，将 用户名 ，token ,服务器ip 和 端口号保存到logininfoinstance 中**，**方便后续进行读取

3.. 需要将用户的用户名 和密码写入到 cfg.json文件 中。为了防止泄密，需要对用户名和密码进行二次加密，先进行desc加密，然后再进行base64加密

4.创建主界面，显示主界面

代码实现：

cpp 复制代码 
//登录按钮
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.读取配置文件

  1. 当登录界面创建的时候，程序会先去读取conf.json文件内容.将账号和密码，服务器ip，端口号写入到登录界面中。
  3. 由于账号和密码在写入配置文件是加密的，读取账号和密码需要 先后进行 base64解密 和 desc解密，才显示到登录界面。
  4. desc加解密，需要在项目中添加des.c文件和des.h文件
cpp 复制代码 
//读取配置文件信息，将账号密码，服务器端口号写到界面中
 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.显示主界面

登录成功，显示主页面：

cpp 复制代码 
//创建主界面，并显示主界面
void Dialog::showMainWindow(QString account)
{
    //获取主页面
    mainwindow=MainWindow::getinstant();
    mainwindow->setUser(account);//将用户名显示到主页面上
    mainwindow->show();//显示主页面
    this->hide();//隐藏主页面
   
    connect(mainwindow,&MainWindow::switchUser,this,[=](){
        mainwindow->hide();
        this->show();
    });
}
相关推荐
七夜zippoe18 小时前
CANN Runtime任务描述序列化与持久化源码深度解码
大数据·运维·服务器·cann
盟接之桥18 小时前
盟接之桥说制造:引流品 × 利润品,全球电商平台高效产品组合策略(供讨论)
大数据·linux·服务器·网络·人工智能·制造
Fcy64820 小时前
Linux下 进程(一)（冯诺依曼体系、操作系统、进程基本概念与基本操作）
linux·运维·服务器·进程
袁袁袁袁满20 小时前
Linux怎么查看最新下载的文件
linux·运维·服务器
代码游侠20 小时前
学习笔记——设备树基础
linux·运维·开发语言·单片机·算法
主机哥哥20 小时前
阿里云OpenClaw部署全攻略，五种方案助你快速部署！
服务器·阿里云·负载均衡
Harvey90320 小时前
通过 Helm 部署 Nginx 应用的完整标准化步骤
linux·运维·nginx·k8s
珠海西格电力科技21 小时前
微电网能量平衡理论的实现条件在不同场景下有哪些差异？
运维·服务器·网络·人工智能·云计算·智慧城市
释怀不想释怀1 天前
Linux环境变量
linux·运维·服务器
zzzsde1 天前
【Linux】进程（4）：进程优先级&&调度队列
linux·运维·服务器
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南06Linux下V2Ray安装配置指南07openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决08Claude Code Skills 实用使用手册09在Trae中使用Pencil MCP10Vue-skills的中文文档