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