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. 手机号注册
具体实现
- 验证码发送逻辑和手机号登录中相同
- 客户端发送网络请求
- 服务端处理客户端请求
- 客户端处理服务端发送过来的响应