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

目录

1.注册账号

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

3. 登录功能

4.读取配置文件

5.显示主界面

---

1.注册账号

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

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

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

使用正则表达式进行检验

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

POST http://119.23.41.13:80/register HTTP/1.1
Content-Type: application/json{"email": "[e-mail]",  //邮箱"firstPwd": "e10adc3949ba59abbe56e057f20f883e",//密码，用md5值进行加密"nickName": "lisi", //昵称"phone": "13727989171", //电话号码"userName": "lisi"  //用户名
}

服务器响应：

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

 实现：

//注册框的流程
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 配置文件中。

 

 //点击服务器设置页的按钮，将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请求给服务器：

POST http://119.23.41.13:80/login HTTP/1.1
Content-Type: application/json{"pwd": "e10adc3949ba59abbe56e057f20f883e", //密码，用md5进行加密"user": "zhangsan"                         //用户名
}

http响应：

//登录成功的响应
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.创建主界面，显示主界面 

代码实现： 

//登录按钮
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);//设置登录的urlrequest.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.显示登录成功页面（主页面）//获取tokenQString 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，端口号写入到登录界面中。
2. 
3. 由于账号和密码在写入配置文件是加密的，读取账号和密码需要 先后进行 base64解密 和 desc解密，才显示到登录界面。
4. desc加解密，需要在项目中添加des.c文件和des.h文件

//读取配置文件信息，将账号密码，服务器端口号写到界面中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.显示主界面

登录成功，显示主页面：

 

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