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. 手机号注册



具体实现
- 验证码发送逻辑和手机号登录中相同
 - 客户端发送网络请求
 



- 服务端处理客户端请求
 

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




















