QT聊天项目DAY13
1. 重置密码
重置密码label也要实现浮动和点击效果,所以将忘记密码这个标签提升为ClickedLabel
1.1 ClickedLabel的复用
由于样式表(.qss) 文件中可以写入多个控件的状态UI,所以为了ClickedLabel能够复用,将成员变量的初始化方式修改为函数声明
1.2 定义忘记密码标签的样式表
#ForgetLabel[state='normal'],#ForgetLabel[state='selected']
{color:black;
}#ForgetLabel[state='normal_hover'],#ForgetLabel[state='selected_hover']
{color:rgb(42,112,241);
}
样式表设置好以后,对忘记密码这个标签进行提升
在LoginWidget类中设置状态对应的字符串,方便UI的切换
生效
1.2 新建忘记密码界面类
1. 整体设置为垂直布局
2. 在垂直布局中拖进来水平布局
3. 以上面为模板,先拖进来6个水平布局,然后分别在水平布局中设置标签和文本编辑框,每个标签的最大高度和宽度写死,50 * 50
拖入弹簧就能够设置成上述的样子
4. 设置每个控件的名称如下
1.3 忘记密码对应的回调函数
在LoginWidget界面发射信号
在MainWindow界面绑定信号并切换界面
1.4 忘记密码界面类的错误标签刷新样式
1. 根据标签名称添加样式到样式表中
#Tip_Label[state='normal']
{color: green;
}#Tip_Label[state='error']
{color: red;
}
2. 创建标签用来刷新标签的样式
3. 添加错误记录容器,用于存储和刷新文本标签的错误提示
这一段的逻辑和注册窗口里的逻辑一样,代码都是一样的,并且后续的文本框检验的逻辑大致上也一样
这里完全可以继承一个基类,在基类中写,回调函数也可以在基类中写,就比如用户名文本检验 CheckUserValid 可以在基类中声明虚函数,在子类中进行重载即可,甚至可以一部分在基类中写,一部分在子类中写, 只需要在子类中 基类::CheckUserValid 即可
写虚幻C++真的可以提升自己的C++水平,在回头看QTC++有种初中生回忆自己小学上学的体验
1.5 检验密码的合法性
1. 首先绑定文本输入完成的信号槽
2. 实现具体的检验逻辑
2.1 检验用户名是否合理
/* 检验用户名是否合法 */
bool ForgetPwdWidget::CheckUserValid()
{if (ui.UserName_Edit->text().isEmpty()){AddTipErr(TipErr::TIP_USER_ERR, QString::fromLocal8Bit("用户名不能为空"));return false;}/* 一切正常则删除错误提示 */DelTipErr(TipErr::TIP_USER_ERR);return true;
}
2.2 检查邮箱是否合理
/* 检验邮箱是否合法 */
bool ForgetPwdWidget::CheckEmailValid()
{QString emailText = ui.Email_Edit->text();// 邮箱地址的正则表达式QRegularExpression regex(R"((\w+)(\.|_)?(\w*)@(\w+)(\.(\w+))+)");bool match = regex.match(emailText).hasMatch();if (!match){AddTipErr(TipErr::TIP_EMAIL_ERR, QString::fromLocal8Bit("邮箱格式不正确"));return false;}/* 一切正常则删除错误提示 */DelTipErr(TipErr::TIP_EMAIL_ERR);return true;
}
2.3 检查密码的合理性
/* 检验密码是否合法 */
bool ForgetPwdWidget::CheckPwdValid()
{QString passText = ui.NewPassword_Edit->text();if (passText.length() < 6 || passText.length() > 15){AddTipErr(TipErr::TIP_PWD_ERR, QString::fromLocal8Bit("密码长度必须在6-15位之间"));return false;}/* 密码长度至少6位 可以是字母、数字、特定的特殊字符 */QRegularExpression regExp("^[a-zA-Z0-9!@#$%^&*]{6,15}$");bool match = regExp.match(passText).hasMatch();if (!match){AddTipErr(TipErr::TIP_PWD_ERR, QString::fromLocal8Bit("不能包含非法字符"));return false;}/* 一切正常则删除错误提示 */DelTipErr(TipErr::TIP_PWD_ERR);return true;
}
2.4 检查验证码的合理性
/* 检验验证码是否合法 */
bool ForgetPwdWidget::CheckVerifyCodeValid()
{QString verifyText = ui.VerifyCode_Edit->text();if (verifyText.isEmpty()){AddTipErr(TipErr::TIP_VERIFY_ERR, QString::fromLocal8Bit("验证码不能为空"));return false;}/* 一切正常则删除错误提示 */DelTipErr(TipErr::TIP_VERIFY_ERR);return true;
}
2. 创建基类窗口,派生出注册窗口和忘记密码窗口
基类窗口
#ifndef BASEWIGET_H
#define BASEWIGET_H#include <QDialog>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>
#include <functional>
#include <QMap>
#include "ClickedLabel.h"
#include "Enum.h"
#include "Global.h"
#include "TimerBtn.h"
#include "ui_BaseWiget.h"class BaseWidget : public QDialog
{Q_OBJECTpublic:BaseWidget(QWidget *parent = nullptr);~BaseWidget();signals:void sigSwitchToLoginPage(); // 切换到登录界面public slots:/* 检查输入是否合法 */virtual bool CheckUserValid(); // 检查用户名是否合法virtual bool CheckPasswordValid(); // 检查密码是否合法virtual bool CheckEmailValid(); // 检查Email是否合法virtual bool CheckVerifyValid(); // 检查验证码是否合法virtual bool CheckEnsureValid(); // 检查确认密码是否合法/* 获取验证码 */virtual void OnGetCodeButtonClicked();/* 确认按钮点击 */virtual void OnConfirmButtonClicked();/* 返回按钮点击 */virtual void OnReturnButtonClicked();/* 注册模块完成时的回调 */virtual void slot_reg_mod_finish(ReqID reqId, QString res, ErrorCodes errCode);public:void ShowTipLabel(const QString& tip, const QString& State); // 刷新文本提示标签的样式void AddTipErr(TipErr err, const QString& tips); // 添加错误提示void DelTipErr(TipErr err); // 清除错误提示void AnalyzingJsonData(ReqID reqId, QByteArray data); // 解析Jsonvirtual void BindSlots();virtual void BindSlotsFromEdit(); // 绑定当文本输入完成的槽函数virtual void BindSlotsFromButton(); // 绑定按钮的槽函数virtual void BindSlotsFromClickedLabel(); // 绑定信号槽从ClickedLabel控件virtual void InitHttpHandlers(); // 设置网络回包的回调函数private:Ui::BaseWigetClass ui;public:QLabel* Tip_Label;ClickedLabel* PassWord_Visible; // 密码可见ClickedLabel* Ensure_Visible; // 确认密码可见QLineEdit* User_LineEdit; // 用户名QLineEdit* Password_LineEdit; // 密码QLineEdit* Email_LineEdit; // EmailQLineEdit* Verify_LineEdit; // 验证码QLineEdit* Ensure_LineEdit; // 确认密码TimerBtn* GetCode_Button; // 获取验证码按钮QPushButton* Confirm_Button; // 确认按钮QPushButton* Return_Button; // 返回按钮QMap<TipErr, QString> _TipErrs; // 错误提示记录QMap<ReqID, std::function<void(const QJsonObject&)>> _handlers; // 不同类型的回调函数
};#endif // BASEWIGET_H
注册窗口
#ifndef REGISTERWIDGET_H
#define REGISTERWIDGET_H#include "BaseWidget.h"
#include "ui_RegisterWidget.h"class RegisterWidget : public BaseWidget
{Q_OBJECTpublic:RegisterWidget(QWidget *parent = nullptr);~RegisterWidget();public:/* 确认按钮点击 */virtual void OnConfirmButtonClicked() override;/* 返回按钮点击 */void OnReturnButtonClicked();/* 取消按钮点击 */void OnCancelButtonClicked();/* 注册成功跳转到注册提示界面 */void ChangeToTipPage();virtual void BindSlotsFromEdit() override; // 绑定当文本输入完成的槽函数virtual void BindSlotsFromButton() override; // 绑定按钮的槽函数virtual void BindSlotsFromClickedLabel() override; // 绑定信号槽从ClickedLabel控件virtual void InitHttpHandlers() override; // 设置网络回包的回调函数void InitCountDownTimer(); // 初始化倒计时器void InitParentControl(); // 初始化父控件private:Ui::RegisterWidgetClass ui;QTimer* _CountDownTimer; // 注册成功倒计时器int _CountDownTime; // 倒计时时间
};
#endif // REGISTERWIDGET_H
忘记密码窗口
#ifndef FORGETPWDWIDGET_H
#define FORGETPWDWIDGET_H#include "BaseWidget.h"
#include "ui_ForgetPwdWidget.h"class ForgetPwdWidget : public BaseWidget
{Q_OBJECTpublic:ForgetPwdWidget(QWidget *parent = nullptr);~ForgetPwdWidget();/* 初始化父类控件 */void InitParentControl();public:virtual void InitHttpHandlers() override; // 设置网络回包的回调函数virtual void BindSlots() override; // 绑定信号槽virtual void OnConfirmButtonClicked() override; // 确认按钮点击事件
private:Ui::ForgetPwdWidgetClass ui;
};#endif // FORGETPWDWIDGET_H
2.1 创建忘记密码窗口的Post请求
重点区别在注册窗口的确认按钮发送的QUrl注册用户的Post请求,忘记密码窗口的确认按钮发送的QUrl是重置用户密码的Post请求
忘记密码窗口
注册用户窗口
注册用户窗口的处理服务器响应的回调函数
2.2 服务器处理重置密码请求
重温一遍逻辑
客户端发送请求
这个客户端为了跨平台没有用正常的TCP请求,而是采用Http请求,有一个HttpMannager管理类
而该请求的发送通常是由按钮点击事件触发的,重要的是当服务器处理完成客户端发来的请求回发给客户端的http响应
处理服务器发来的响应
sig_http_finished 绑定的是基类窗口的槽函数,该槽函数是可以重载的,重要的是这个this指针,子类创建对象时绑定的就是子类的,基类的构造函数是空白的
服务器处理请求
在CServer中监听是否有客户端发来Http请求,创建处理连接的对象,该对象从事件循环池中获取一个事件循环,然后向该事件循环中注册要坚挺的HTTP请求的读写事件
/* 实时的监听该端口是否有客户端发来新的HTTP请求 */
void CServer::Start()
{cout << "CServer Thread ID: " << this_thread::get_id() << "\n";auto& IOService = AsioIOServicePool::GetInstance()->GetIOService();HttpConnection* pConnection = new HttpConnection(IOService); // 创建新的连接对象_acceptor.async_accept(pConnection->GetSocket(), [this, pConnection](boost::system::error_code ec){try {if (ec){Start(); // 重新监听return;}pConnection->Start(); // 启动连接Start(); // 继续监听}catch (const std::exception& e) {std::cerr << "CServer::Exception: " << e.what() << "\n";}});
}
注册Http的读事件监听
HttpConnection::HttpConnection(net::io_context& ioContext): _socket(ioContext)
{CheckDeadline(); // 绑定超时的回调
}http::async_read(_socket, _buffer, _request, [this](beast::error_code ec, std::size_t bytes_transferred)
监听到读事件,就处理客户端发来的数据,对Get请求和Post请求区分处理
先看post请求,将数据转发给专门处理登录请求的类去处理,这里不应该用单例了,因为多线程情况下可能会触发使用同一个单例的情况,并且这个类也没有什么特殊的,就是调用function,更应该用静态成员函数吧,或者使用登录对象池以及成员变量的方式
登录逻辑类中处理客户端发来的Post请求,根据url来执行相应的处理函数,其实和直接用if,if的效果一样
bool LogicSystem::HandlePost(std::string url, HttpConnection* connection)
{if (_postHandlers.find(url) == _postHandlers.end())return false;_postHandlers[url](connection);return true;
}
重要的是这个url,和客户端发来的url都对应上了
只需要在添加一个服务器处理客户端重置用户密码的请求即可
增加Mysql的API 分别为检查邮箱以及更新密码
bool MySqlDAO::CheckEmail(const string& username, const string& email)
{auto conn = _pool->getConnection();if (!conn){cout << "Get connection failed" << endl;return false;}// 查询用户邮箱sql::PreparedStatement* stmt = conn->_con->prepareStatement("SELECT email FROM user WHERE name = ?");if (!stmt){cout << "Prepare statement failed" << endl;_pool->retunConnection(conn);return false;}// 传入参数stmt->setString(1, username);// 执行查询sql::ResultSet* res = stmt->executeQuery();// 循环查询结果while (res->next()){cout << "Email: " << res->getString("email") << endl;_pool->retunConnection(conn);if (email != res->getString("email")){cout << "Email not match" << endl;return false;}cout << "Email match" << endl;return true;}cout << "res->next() is Null" << endl;_pool->retunConnection(conn);return false;
}
bool MySqlDAO::UpdataPassword(const string& username, const string& email, const string& password)
{auto conn = _pool->getConnection();if (!conn){cout << "Get connection failed" << endl;return false;}// 更新用户密码sql::PreparedStatement* stmt = conn->_con->prepareStatement("UPDATE user SET pwd = ? WHERE name = ? AND email = ?");if (!stmt){_pool->retunConnection(conn);return false;}// 传入参数stmt->setString(1, password);stmt->setString(2, username);stmt->setString(3, email);// 执行更新int result = stmt->executeUpdate();if (result > 0){cout << "Update password success" << endl;_pool->retunConnection(conn);return true;}cout << "Update password failed" << endl;_pool->retunConnection(conn);return false;
}
再一次封装
添加验证码不匹配的枚举
enum ErrorCodes
{SUCCESS = 0,ERROR_JSON = 1001, // Json错误RPC_FAILED = 1002, // RPC通信失败ERROR_JSON_KEY_EMAIL_LACK = 1003, // Json中缺少email字段Verify_Expired = 1004, // 验证码过期Verify_Not_Match = 1005, // 验证码不匹配User_Exists = 1006, // 用户已存在Email_Not_Match = 1007, // 邮箱不匹配Update_Password_Failed = 1008, // 更新密码失败
};
完整的重置密码请求代码
/* 用户重置密码 */
RegisterPost("/ResetUserPassword", [](HttpConnection* connection){if (connection){auto bodyStr = boost::beast::buffers_to_string(connection->_request.body().data()); // 获取 Http请求体中的内容cout << "receive body is \n" << bodyStr << endl;connection->_response.set(http::field::content_type, "text/json"); // 设置 Http响应头中的 content-typeJson::Value jsonResonse; // 响应用的JsonJson::Value jsonResult; // 请求体解析出来的JsonJson::Reader reader; // Json解析器bool parseSuccess = reader.parse(bodyStr, jsonResult); // 将请求体解析为Jsonif (!parseSuccess){cout << "parse json failed" << endl;jsonResonse["error"] = ErrorCodes::ERROR_JSON; // 设置响应的错误码string jsonStr = jsonResonse.toStyledString();beast::ostream(connection->_response.body()) << jsonStr; // 向 Http响应体中写入错误码内容return;}/* 查找redis中存储的email对应的验证码是否合理 */string verifyCode = "";bool bGetVerifyCode = RedisManage::GetInstance()->Get(CODE_PREFIX + jsonResult["email"].asString(), verifyCode);if (!bGetVerifyCode){cout << "get verify code Expired " << endl;jsonResonse["error"] = ErrorCodes::Verify_Expired;string jsonStr = jsonResonse.toStyledString();beast::ostream(connection->_response.body()) << jsonStr;return;}/* 判断验证码是否正确 */if (verifyCode != jsonResult["verifyCode"].asString()){cout << "verify code not match" << endl;jsonResonse["error"] = ErrorCodes::Verify_Not_Match;string jsonStr = jsonResonse.toStyledString();beast::ostream(connection->_response.body()) << jsonStr;return;}/* 访问Mysql检查用户名和邮箱是否匹配 */bool bEmailMatch = MySqlManage::GetInstance()->CheckEmail(jsonResult["email"].asString(), jsonResult["user"].asString());if (!bEmailMatch){cout << "user or email not match\n";jsonResonse["error"] = ErrorCodes::Email_Not_Match;string jsonStr = jsonResonse.toStyledString();beast::ostream(connection->_response.body()) << jsonStr;return;}/* 访问Mysql更新用户密码 */bool bUpdatePassword = MySqlManage::GetInstance()->UpdataPassword(jsonResult["email"].asString(), jsonResult["password"].asString());if (!bUpdatePassword){cout << "update password failed\n";jsonResonse["error"] = ErrorCodes::Update_Password_Failed;string jsonStr = jsonResonse.toStyledString();beast::ostream(connection->_response.body()) << jsonStr;return;}/* 返回响应报文给客户端 */jsonResonse["error"] = 0;jsonResonse["email"] = jsonResult["email"];jsonResonse["user"] = jsonResult["user"];jsonResonse["password"] = jsonResult["password"];jsonResonse["verifyCode"] = jsonResult["verifyCode"];string jsonStr = jsonResonse.toStyledString();beast::ostream(connection->_response.body()) << jsonStr; // 向 Http响应体中写入Json内容return;}else{std::cout << "connection is null" << std::endl;}});
3. 配置新电脑环境
由于在家里学习效率低下的缘故,现在改成在公司学习,重新配置该程序的环境
Boost库没有问题
Json库没有问题
GRPC库没有问题
Mysql连接库没有问题
GRPC-JS库没有问题
使用npm 安装东西出问题了
更换镜像源,已经能够正常安装
// 1. 清空缓存
npm cache clean --force
// 2. 切换新源
npm config set registry https://registry.npmmirror.com
// 3. 查看源是否设置成功
npm config get registry
// 4. 可以正常安装需要的工具了
npm insatll xxx
)
使用npm安装各种库
npm install @grpc/grpc-js
npm install @grpc/proto-loader
npm install nodemailer
npm install redis
npm install ioredis
启动redis服务测试一下
.\redis-server.exe .\redis.windows.conf
连接到redis服务,查看配置文件
监听端口号
监听IP地址,添加一个本机IP地址即可
密码
连接成功
安装MySql
安装地址
在服务中右键Mysql为手动
配置Mysql环境
配置成功
安装Mysql图形化界面
新建数据库
新建user表
新建user_id表
配置完毕,测试注册功能
注册成功
测试忘记密码
返回结果是空的,应该是哪里出问题了,传参出问题了
再次测试
原密码
邮箱匹配但是更新密码失败
修改重置密码逻辑,重置成功