【Qt聊天室客户端】登录窗口

1. 验证码

具体实现

• 登录界面中创建验证码图片空间，并添加到布局管理器中

•  主要功能概述（创建一个verifycodewidget类专门实现验证码操作）

• 详细代码

// 头文件#ifndef VERIFYCODEWIDGET_H
#define VERIFYCODEWIDGET_H#include <QWidget>
#include<QRandomGenerator>class verifycodewidget : public QWidget
{Q_OBJECT
public:explicit verifycodewidget(QWidget *parent = nullptr);// 生成随机的验证码字符串QString generateVerifyCode();// 重新生成验证码并显示到界面上void refreshVerifyCode();// 检查输入的验证码是否与生成的验证码匹配bool checkVerifyCode(const QString& verifyCode);// 重写 paintEvent 以绘制验证码到界面上void paintEvent(QPaintEvent* event) override;// 重写 mousePressEvent，当用户点击时刷新验证码并重新显示void mousePressEvent(QMouseEvent* event) override;private:// 用于生成随机数的随机数生成器QRandomGenerator randomGenerator;// 存储当前验证码的值QString verifyCode = "";signals:};#endif // VERIFYCODEWIDGET_H

// 实现文件#include "verifycodewidget.h"#include<QPainter>#include"model/data.h"verifycodewidget::verifycodewidget(QWidget *parent): QWidget(parent),randomGenerator(model::getTime())
{verifyCode = generateVerifyCode();
}//随机生成验证码
QString verifycodewidget::generateVerifyCode()
{QString code;for(int i = 0;i<4;++i){int init = 'A';init += randomGenerator.generate()%26;code += static_cast<QChar>(init);}return code;
}void verifycodewidget::refreshVerifyCode()
{verifyCode = generateVerifyCode();this->update();
}bool verifycodewidget::checkVerifyCode(const QString &verifyCode)
{return this->verifyCode.compare(verifyCode, Qt::CaseInsensitive) == 0;
}void verifycodewidget::paintEvent(QPaintEvent *event)
{(void) event;const int width = 180;const int height = 80;QPainter painter(this);QPen pen;QFont font("楷体",25,QFont::Bold,true);painter.setFont(font);// 画点: 添加随机噪点for(int i = 0; i < 100; i++){pen = QPen(QColor(randomGenerator.generate() % 256, randomGenerator.generate() % 256, randomGenerator.generate() % 256));painter.setPen(pen);painter.drawPoint(randomGenerator.generate() % width, randomGenerator.generate() % height);}// 画线: 添加随机干扰线for(int i = 0; i < 5; i++){pen = QPen(QColor(randomGenerator.generate() % 256, randomGenerator.generate() % 256, randomGenerator.generate() % 256));painter.setPen(pen);painter.drawLine(randomGenerator.generate() % width, randomGenerator.generate() % height,randomGenerator.generate() % width, randomGenerator.generate() % height);}// 绘制验证码for(int i = 0; i < verifyCode.size(); i++){pen = QPen(QColor(randomGenerator.generate() % 255, randomGenerator.generate() % 255, randomGenerator.generate() % 255));painter.setPen(pen);painter.drawText(5+20*i, randomGenerator.generate() % 10, 30, 30, Qt::AlignCenter, QString(verifyCode[i]));}
}void verifycodewidget::mousePressEvent(QMouseEvent *event)
{(void) event;this->refreshVerifyCode();
}

2. 用户名登录

 

具体实现（本质还是通过点击按钮后触发前后端交互逻辑）

• 登录窗口初始化的时候建立信号槽连接

• 客户端向服务端发送请求

• 服务端注册路由，然后开始处理客户端的请求

• 客户端处理服务端的响应

 

• 客户端通过槽函数处理该信号

3. 用户名注册

具体实现

• 点击注册按钮

• 客户端发送请求给服务端

• 服务端开始处理客户端发送过来的请求+注册路由

• 客户端处理服务端响应

• 登录界面通过槽函数处理该信号

4. 手机号登录

 

具体实现

• 初始化信号槽

• 客户端发送网络请求获取验证码逻辑，同时定时重新发送验证码

• 服务端处理客户端的请求

• 客户端处理服务端发送过来的响应

• 界面更新处理信号

•  登录逻辑（登录逻辑和注册逻辑都是通过同一个函数进行）

• 客户端向服务端发送请求

 

• 服务端处理客户端请求

• 客户端处理服务端响应，并发送信号更新页面

5. 手机号注册

具体实现

• 验证码发送逻辑和手机号登录中相同
• 客户端发送网络请求

• 服务端处理客户端请求

•  客户端处理服务端发送过来的响应