@TOC 本文结束后客户端的主体部分已全部完成，剩余的需要进行更正或添加的细节在服务端编写完毕后的联调才方便进行，客户端源码链接如下: ly121381-cpp-videoplayer

零.提示窗口

当用户需要进行一些比较敏感的操作时，我们需要为用户提供一个缓冲，再次确认用户是否需要进行此操作。比如退出登录，所以我们这里新增一个提示窗口，因为其构造较为简单，所以我们这里直接选择普通类即可，继承自QDialog：

​x
//confirmdialog.h
#ifndef CONFIRMDIALOG_H
#define CONFIRMDIALOG_H

#include <QWidget>
#include <QDialog>
#include <QLabel>

class ConfirmDialog : public QDialog
{
    Q_OBJECT
public:
    explicit ConfirmDialog(QWidget *parent = nullptr);
    bool getConfirmStatu();
    void setConfirmDialogText(const QString& text);
signals:
private:
    bool isConfirm = false;
    QLabel* textLabel = nullptr;
};

#endif // CONFIRMDIALOG_H

xxxxxxxxxx
//confirmdialog.cpp
#include "confirmdialog.h"
#include "limeplayer.h"

ConfirmDialog::ConfirmDialog(QWidget *parent)
    : QDialog{parent}
{
    //移除标题栏并设置背景透明
    setWindowFlag(Qt::FramelessWindowHint);
    setAttribute(Qt::WA_TranslucentBackground);
    //设置初始位置
    this->move(LimePlayer::getInstance()->mapToGlobal(QPoint(25,25)));
    //设置固定大小
    setFixedSize(1485,890);
    //设置透明黑色遮罩
    QWidget* background = new QWidget(this);
    background->setFixedSize(maximumSize());
    background->setObjectName("bg");
    background->setStyleSheet("#bg{background-color : rgba(0,0,0,0.3);"
                              "border-radius : 20px;}");
    //消息展示对话框
    QFrame* frame = new QFrame(background);
    frame->move(564,351);
    frame->setFixedSize(358,169);
    frame->setObjectName("frame");
    //确认与取消按钮
    QPushButton* confirmBtn = new QPushButton(frame);
    confirmBtn->setFixedSize(100, 38);
    confirmBtn->move(194, 111);
    confirmBtn->setText("确认");
    confirmBtn->setObjectName("confirmBtn");
    confirmBtn->setStyleSheet("border-radius:8px;"
                              "border: 1px solid #DEDEDE;");
    connect(confirmBtn,&QPushButton::clicked,this,[this](){
        this->isConfirm = true;
        close();
    });
    QPushButton* cancelBtn = new QPushButton(frame);
    cancelBtn->setText("取消");
    cancelBtn->setFixedSize(100, 38);
    cancelBtn->move(64, 111);
    cancelBtn->setObjectName("cancelBtn");
    cancelBtn->setStyleSheet("border-radius:8px;"
                             "border: 1px solid #DEDEDE;");
    connect(cancelBtn,&QPushButton::clicked,this,[this](){
        this->isConfirm = false;
        close();
    });
    //初始化文本显示框
    textLabel = new QLabel(frame);
    textLabel->setObjectName("operatorText");
    textLabel->setStyleSheet("color:#000000;");
    textLabel->move(115, 40);
    frame->setStyleSheet("#frame{background-color: #FFFFFF;"
                         "border-radius : 10px;}"
                         " *{"
                         "font-family: 幼圆, Microsoft YaHei, sans-serif;"
                         "font-size : 14px;}"
                         "#cancelBtn:hover{"
                         "background-color:#66CCFF;"
                         "border-radius:8px;}"
                         "#confirmBtn:hover{"
                         "background-color:#66CCFF;"
                         "border-radius:8px;"
                         "color:#FFFFFF;}");
}

bool ConfirmDialog::getConfirmStatu()
{
    return isConfirm;
}

void ConfirmDialog::setConfirmDialogText(const QString &text)
{
    textLabel->setText(text);
}

效果如下:

一.登录界面逻辑处理

我们这里有两种登录方式，一种是在已经有账户的情况下可以直接进行账密登录。而另一种的登录方式则是验证码登录，有账号时直接登录，没有则进行注册。我们先来处理后一种情况。

1.1获取验证码

请求url:POST /HttpService/getCode 请求参数

返回响应：200 OK

响应参数

设计好请求与响应报文后，那就是走datacenter->netclient->mockserver->netclient->处理界面响应这套流程了:

xxxxxxxxxx
//datacenter.h
    //获取验证码
    void getCodeAsync(const QString& phoneNumber);
signal:
    //获取验证码成功
    void getCodeDone(const QString& codeId);

//datacenter.cpp
void DataCenter::getCodeAsync(const QString &phoneNumber)
{
    netClient.getCode(phoneNumber);
}

//netclient.cpp
void NetClient::getCode(const QString &phoneNumber)
{
    //请求报文的body
    QJsonObject reqbody;
    reqbody["requestId"] = makeRequestId();
    reqbody["sessionId"] = dataCenter->getSessionId();
    reqbody["phoneNumber"] = phoneNumber;
    QNetworkReply* reply = sendReqToHttpServer("/HttpService/getCode",reqbody);
    //异步处理服务端的response
    connect(reply,&QNetworkReply::finished,this,[=](){
        bool ok = true;
        QString reason;
        QJsonObject respBody = handleRespFromHttpServer(reply,ok,reason);
        if(!ok)
        {
            //说明reply有问题打印错误信息并返回
            LOG() << reason;
            reply->deleteLater();
            return;
        }
        reply->deleteLater();
        //解析成功，处理响应信息
        QJsonObject result = respBody["result"].toObject();
        emit dataCenter->getCodeDone(result["codeId"].toString());
        LOG() << "getCode请求结束，成功获取验证码ID";
    });
}

//mockserver.cpp
QHttpServerResponse MockServer::getCode(const QHttpServerRequest &request)
{
    QJsonObject reqData = QJsonDocument::fromJson(request.body()).object();
    LOG() << "[getCode] 收到 getCode 请求, requestId = " <<reqData["requestId"].toString() << "sessionId = " << reqData["sessionId"].toString();
    LOG() << "向目标用户发送验证码，目标用户手机号为:" << reqData["phoneNumber"].toString();
    //构造响应信息
    QJsonObject respData;
    respData["requestId"] = reqData["requestId"].toString();
    respData["errorCode"] = 0;
    respData["errorMsg"] = "";
    QJsonObject result;
    result["codeId"] = "111111";
    respData["result"] = result;
    //构建http响应报文
    QHttpServerResponse response(QJsonDocument(respData).toJson(),QHttpServerResponse::StatusCode::Ok);
    response.setHeader("Content-Type","application/json;charset=utf-8");
    return response;
}

客⼾端发起获取短信验证码请求:

xxxxxxxxxx
//login.h
    void onGetCodeBtnClicked();//获取验证码按钮被点击时
    void getAuthCodeDone(const QString& codeId);//成功获取验证码
    void initSignalsAndSlots()

//login.cpp
void Login::initSignalsAndSlots()
{
    connect(ui->authcodeBtn,&QPushButton::clicked,this,&Login::onGetCodeBtnClicked);
    connect(dataCenter,&model::DataCenter::getCodeDone,this,&Login::getAuthCodeDone);
}

void Login::onGetCodeBtnClicked()
{
    //如果手机号为空则不允许发送
    QString phoneNumber = ui->accountEdit->text();
    if(phoneNumber.size() != 11)
    {
        Toast::showToast("手机号格式好像不太对~~~");
        return;
    }
    //向服务端发送获取验证码请求
    auto dataCenter = model::DataCenter::getInstance();
    dataCenter->getCodeAsync(phoneNumber);
    //将验证码按钮设为禁用状态
    ui->authcodeBtn->setEnabled(false);
}

void Login::getAuthCodeDone(const QString &codeId)
{
    //将codeId保存并取消获取验证码的禁用状态
    LOG() << "获取验证码成功，验证码id为: " << codeId;
    ui->authcodeBtn->setEnabled(true);
    this->codeId = codeId;
}

1.2短信登录

请求URL：POST /HttpService/vcodeLogin 请求参数

返回响应：200 OK

响应参数

先走老流程:

xxxxxxxxxx
//datacenter.h
    //短信登录
    void vcodeLoginAsync(const QString& phoneNumber,const QString& verifyCode,const QString& codeId);
signal:
    //短信登录成功-失败
    void vcodeLoginDone();
    void vcodeLoginFailed(const QString& errorInfo);

//datacenter.cpp
void DataCenter::vcodeLoginAsync(const QString &phoneNumber, const QString &verifyCode, const QString &codeId)
{
    netClient.vcodeLogin(phoneNumber,verifyCode,codeId);
}

//netclient.cpp
void NetClient::vcodeLogin(const QString &phoneNumber, const QString &verifyCode, const QString &codeId)
{
    //请求报文的body
    QJsonObject reqbody;
    reqbody["requestId"] = makeRequestId();
    reqbody["sessionId"] = dataCenter->getSessionId();
    reqbody["phoneNumber"] = phoneNumber;
    reqbody["verifyCode"] = verifyCode;
    reqbody["codeId"] = codeId;
    QNetworkReply* reply = sendReqToHttpServer("/HttpService/vcodeLogin",reqbody);
    //异步处理服务端的response
    connect(reply,&QNetworkReply::finished,this,[=](){
        bool ok = true;
        QString reason;
        QJsonObject respBody = handleRespFromHttpServer(reply,ok,reason);
        if(!ok)
        {
            //说明reply有问题将错误消息提供给界面提示用户
            emit dataCenter->vcodeLoginFailed(reason);
            reply->deleteLater();
            return;
        }
        reply->deleteLater();
        //解析成功，处理响应信息
        emit dataCenter->vcodeLoginDone();
        LOG() << "vcodeLogin请求结束，短信登录服务端验证通过";
    });
}

//mockserver.cpp
QHttpServerResponse MockServer::vcodeLogin(const QHttpServerRequest &request)
{
    QJsonObject reqData = QJsonDocument::fromJson(request.body()).object();
    LOG() << "[vcodeLogin] 收到 vcodeLogin 请求, requestId = " <<reqData["requestId"].toString() << "sessionId = " << reqData["sessionId"].toString();
    QString phoneNumber = reqData["phoneNumber"].toString();//用户手机号
    QString verifyCode = reqData["verifyCode"].toString();//用户输入的验证码
    QString codeId = reqData["codeId"].toString();//服务端保存的发给此手机号的验证码对应的验证码Id
    int errorCode = 0;
    QString errorMsg = "";
    if(phoneNumber != "19000000001")
    {
        errorCode = 600;
        errorMsg = "好像还没有获取验证码?";
    }
    else if(verifyCode != "123456")
    {
        errorCode = 601;
        errorMsg = "验证码输入有误~~~";
    }
    else if(codeId != "111111")
    {
        errorCode = 602;
        errorMsg = "验证码Id无法正确匹配";
    }
    //构造响应信息
    QJsonObject respData;
    respData["requestId"] = reqData["requestId"].toString();
    respData["errorCode"] = errorCode;
    respData["errorMsg"] = errorMsg;
    //构建http响应报文
    QHttpServerResponse response(QJsonDocument(respData).toJson(),QHttpServerResponse::StatusCode::Ok);
    response.setHeader("Content-Type","application/json;charset=utf-8");
    return response;
}

客户端发起短信登录请求并对成功与失败进行相关处理:

xxxxxxxxxx
//login.h
    void onLoginOrRegisterBtnClicked();//短信登录页面登录或注册按钮被点击
    void vcodeLoginSuccess();//短信登录请求成功
    void vcodeLoginFailed(const QString& errorInfo);//短信登录请求失败
//login.cpp
void Login::onLoginOrRegisterBtnClicked()
{
    //需要确保输入的手机号和验证码都为正确格式再去发送登录请求
    QString phoneNumber = ui->accountEdit->text();
    QString authCode = ui->passwordEdit->text();
    if(phoneNumber.size() != 11 || authCode.size() != 6)
    {
        Toast::showToast("手机号或验证码输入格式有误~~~");
        return;
    }
    //向服务端发送登录请求
    auto dataCenter = model::DataCenter::getInstance();
    dataCenter->vcodeLoginAsync(phoneNumber,authCode,codeId);
}

void Login::vcodeLoginSuccess()
{
    //通知我的页面进行数据更新
    LOG() << "短信登录请求成功，更新当前用户信息~~~";
    auto dataCenter = model::DataCenter::getInstance();
    dataCenter->clearMyselfInfo();
    emit loginSuccess();
    //关闭登录页面显示并清空用户输入信息
    reset();
    hide();
}

void Login::vcodeLoginFailed(const QString &errorInfo)
{
    //将服务端返回的错误消息打印到屏幕上
    Toast::showToast(errorInfo);
}

void Login::reset()
{
    ui->accountEdit->setText("");
    ui->passwordEdit->setText("");
}

//myselfwidget.cpp
void MyselfWidget::createLogin()
{
    if(login == nullptr)
    {
        login = new Login();
        connect(login,&Login::loginSuccess,this,[=](){
            loadMyself();
        });//链接登录成功的信号槽
    }
}

记得进行对应按钮与信号槽的链接。

1.3密码登录

在密码登录页面时，如果用户已经注册则直接登录，如果⽤⼾没有注册则需要先注册，此时直接跳转到短信登录页面进行注册。

xxxxxxxxxx
//login.cpp
void Login::initSignalsAndSlots()
{
    connect(ui->registerBtn,&QPushButton::clicked,this,&Login::onMessageBtnClicked);//点击注册按钮时切换到短信登录界面
}

然后我们进行密码登录的处理。请求响应接口如下: 请求URL：POST /HttpService/passwdLogin 请求参数

返回响应：200 OK

响应参数

接下来走老流程:

xxxxxxxxxx
//datacenter.h
//密码登录
    void passwdLoginAsync(const QString& phoneNumber,const QString& password);
signals:
    //密码登录成功-失败
    void passwdLoginDone();
    void passwdLoginFailed(const QString& errorInfo);
//datacenter.cpp
void DataCenter::passwdLoginAsync(const QString &phoneNumber, const QString &password)
{
    netClient.passwdLogin(phoneNumber,password);
}

//netclient.cpp
void NetClient::passwdLogin(const QString &phoneNumber, const QString &password)
{
    //请求报文的body
    QJsonObject reqbody;
    reqbody["requestId"] = makeRequestId();
    reqbody["sessionId"] = dataCenter->getSessionId();
    reqbody["phoneNumber"] = phoneNumber;
    reqbody["password"] = password;
    QNetworkReply* reply = sendReqToHttpServer("/HttpService/passwdLogin",reqbody);
    //异步处理服务端的response
    connect(reply,&QNetworkReply::finished,this,[=](){
        bool ok = true;
        QString reason;
        QJsonObject respBody = handleRespFromHttpServer(reply,ok,reason);
        if(!ok)
        {
            //说明reply有问题将错误消息提供给界面提示用户
            emit dataCenter->passwdLoginFailed(reason);
            reply->deleteLater();
            return;
        }
        reply->deleteLater();
        //解析成功，处理响应信息
        emit dataCenter->passwdLoginDone();
        LOG() << "passwdLogin请求结束，密码登录服务端验证通过";
    });
}

//mockserver.cpp
QHttpServerResponse MockServer::passwdLogin(const QHttpServerRequest &request)
{
    QJsonObject reqData = QJsonDocument::fromJson(request.body()).object();
    LOG() << "[passwdLogin] 收到 passwdLogin 请求, requestId = " <<reqData["requestId"].toString() << "sessionId = " << reqData["sessionId"].toString();
    QString phoneNumber = reqData["phoneNumber"].toString();//用户手机号
    QString password = reqData["password"].toString();//用户输入的密码
    int errorCode = 0;
    QString errorMsg = "";
    if(phoneNumber != "19000000001")
    {
        errorCode = 603;
        errorMsg = "无法在这个星球找到对应账号的信息。";
    }
    else if(password != "@1145141919180")
    {
        errorCode = 604;
        errorMsg = "密码输入有误~~~";
    }
    //构造响应信息
    QJsonObject respData;
    respData["requestId"] = reqData["requestId"].toString();
    respData["errorCode"] = errorCode;
    respData["errorMsg"] = errorMsg;
    //构建http响应报文
    QHttpServerResponse response(QJsonDocument(respData).toJson(),QHttpServerResponse::StatusCode::Ok);
    response.setHeader("Content-Type","application/json;charset=utf-8");
    return response;
}

客户端发起密码登录请求在按下对应按钮之后:

xxxxxxxxxx
//login.h
    void onLoginBtnClicked();//登录按钮被点击
    void passwordLoginDone();//密码登录成功
    void passwordLoginFailed(const QString& errorInfo);//密码登录失败

//login.cpp
void Login::onLoginBtnClicked()
{
    //需要确保输入的手机号和验证码都为正确格式再去发送登录请求
    QString phoneNumber = ui->accountEdit->text();
    QString password = ui->passwordEdit->text();
    if(phoneNumber.isEmpty() || password.isEmpty())
    {
        Toast::showToast("手机号或密码输入不能为空~~~");
        return;
    }
    //发送登录请求
    auto dataCenter = model::DataCenter::getInstance();
    dataCenter->passwdLoginAsync(phoneNumber,password);
}

void Login::passwordLoginDone()
{
    //通知我的页面进行数据更新
    LOG() << "密码登录请求成功，更新当前用户信息";
    auto dataCenter = model::DataCenter::getInstance();
    dataCenter->clearMyselfInfo();
    emit loginSuccess();
    reset();
    hide();
}

void Login::passwordLoginFailed(const QString &errorInfo)
{
    //将服务端返回的错误消息打印到屏幕上
    Toast::showToast(errorInfo);
}

1.4session登录

因为每次登录之后如果用户退出程序了，下次登录还需要去手动输入账号密码进行登陆很麻烦，所以我们需要在用户进入程序时加载用户的账户信息从文件中(如果有的话)，退出时将用户的信息保存到appdata下的对应文件夹下:

xxxxxxxxxx
//datacenter.h
    void initDataFile();//初始化数据文件
    void saveDataFile();//保存数据到文件中-程序结束时
    void loadDataFile();//加载文件数据到程序中-程序开始时

//datacenter.cpp
void DataCenter::initDataFile()
{
    //构建用户信息文件路径
    QString filePath = QStandardPaths::writableLocation(QStandardPaths::AppDataLocation);
    QString fileName = "/limePlayer.json";
    LOG() << "用户信息路径为:" << filePath + fileName;
    //检验目标路径是否存在-不存在则创建
    QDir dir;
    if(!dir.exists(filePath))
    {
        dir.mkpath(filePath);
    }
    //打开对应文件
    QFile file(filePath + fileName);
    if(!file.open(QIODevice::WriteOnly | QIODevice::Text))
    {
        LOG() << "文件打开失败!失败原因:" << file.errorString();
        return;
    }
    //写一段初始的空白json文件
    file.write(QString("{\n}").toUtf8());
    file.close();
}

void DataCenter::saveDataFile()
{
    //主要保存三个数据,sessionId,用户身份信息，用户角色信息-程序结束时调用
    QString filePath = QStandardPaths::writableLocation(QStandardPaths::AppDataLocation) + "/limePlayer.json";
    QFileInfo fileInfo(filePath);
    if(!fileInfo.exists())
    {
        initDataFile();//保证对应文件存在
    }
    QFile file(filePath);
    if(!file.open(QIODevice::WriteOnly | QIODevice::Text))
    {
        LOG() << "文件打开失败!失败原因:" << file.errorString();
        return;
    }
    //提取相关信息到磁盘文件中
    QJsonObject userData;
    userData["loginsessionId"] = getSessionId();
    QJsonArray roleType;
    for(auto& role : myselfUserInfo->roleType)
    {
        roleType.append(role);
    }
    QJsonArray identityType;
    for(auto& identity : myselfUserInfo->identityType)
    {
        identityType.append(identity);
    }
    userData["roleType"] = roleType;
    userData["identityType"] = identityType;
    QJsonDocument document(userData);
    QString s = document.toJson();
    file.write(s.toUtf8());
    file.close();
}

void DataCenter::loadDataFile()
{
    //如果没有个人信息对象，则需要new一个出来
    if(myselfUserInfo == nullptr)
    {
        myselfUserInfo = new UserInfo();
    }
    //从文件中加载数据
    QString filePath = QStandardPaths::writableLocation(QStandardPaths::AppDataLocation) + "/limePlayer.json";
    QFileInfo fileInfo(filePath);
    if(!fileInfo.exists())
    {
        initDataFile();//保证对应文件存在
    }
    QFile file(filePath);
    if(!file.open(QIODevice::ReadOnly | QIODevice::Text))
    {
        LOG() << "文件打开失败!失败原因:" << file.errorString();
        return;
    }
    QByteArray userData = file.readAll();
    file.close();
    QJsonDocument document = QJsonDocument::fromJson(userData);
    if(document.isNull())
    {
        LOG() << "json文件格式有误!";
        return;
    }
    QJsonObject obj = document.object();
    //设置用户相关信息
    setSessionId(obj["loginsessionId"].toString());
    QJsonArray roleType = obj["roleType"].toArray();
    QJsonArray identityType = obj["identityType"].toArray();
    for(int i = 0;i < roleType.size();i++)
    {
        myselfUserInfo->roleType.append(roleType[i].toInt());
    }
    for(int i = 0;i < identityType.size();i++)
    {
        myselfUserInfo->identityType.append(identityType[i].toInt());
    }
}

接下来根据我们自己程序的代码结构放到程序开始与结束时调用即可。 账户数据文件处理完毕了，当程序启动时，会⾃动加载session信息，然后完成session登录。 请求url:POST /HttpService/sessionLogin 请求参数

返回响应：200 OK

响应参数

然后就是走老流程:

xxxxxxxxxx
//datacenter.h
    //sessionId登录
    void sessionLoginAsync();
signals:
    //sessionId登录成功响应-失败
    void sessionLoginDone(bool isGuest);
    void sessionLoginFailed(const QString& errorInfo);
//datacenter.cpp
void DataCenter::sessionLoginAsync()
{
    netClient.sessionLogin();
}

//netclient.cpp
void NetClient::sessionLogin()
{
    //请求报文的body
    QJsonObject reqbody;
    reqbody["requestId"] = makeRequestId();
    reqbody["sessionId"] = dataCenter->getSessionId();
    QNetworkReply* reply = sendReqToHttpServer("/HttpService/sessionLogin",reqbody);
    //异步处理服务端的response
    connect(reply,&QNetworkReply::finished,this,[=](){
        bool ok = true;
        QString reason;
        QJsonObject respBody = handleRespFromHttpServer(reply,ok,reason);
        if(!ok)
        {
            //说明reply有问题打印错误信息并返回
            emit dataCenter->sessionLoginFailed(reason);
            reply->deleteLater();
            return;
        }
        reply->deleteLater();
        //解析成功，处理响应信息
        QJsonObject result = respBody["result"].toObject();
        emit dataCenter->sessionLoginDone(result["isGuest"].toInt() == 1);
        LOG() << "sessionLogin请求结束，sessionID登录成功响应";
    });
}

//mockserver.cpp
QHttpServerResponse MockServer::sessionLogin(const QHttpServerRequest &request)
{
    QJsonObject reqData = QJsonDocument::fromJson(request.body()).object();
    LOG() << "[sessionLogin] 收到 sessionLogin 请求, requestId = " <<reqData["requestId"].toString() << "sessionId = " << reqData["sessionId"].toString();
    //构造响应信息
    QJsonObject respData;
    respData["requestId"] = reqData["requestId"].toString();
    respData["errorCode"] = 0;
    respData["errorMsg"] = "";
    QJsonObject result;
    result["isGuest"] = 0;
    respData["result"] = result;
    //构建http响应报文
    QHttpServerResponse response(QJsonDocument(respData).toJson(),QHttpServerResponse::StatusCode::Ok);
    response.setHeader("Content-Type","application/json;charset=utf-8");
    return response;
}

客户端发送并响应服务端的响应: //因为这部分需要修改之前的临时登录逻辑，所以我直接把启动页的代码全部展示出来:

xxxxxxxxxx
//startpage.h
#ifndef STARTPAGE_H
#define STARTPAGE_H

#include <QWidget>
#include <QDialog>
#include <QJsonObject>

class StartPage : public QDialog
{
    Q_OBJECT
public:
    explicit StartPage(QWidget *parent = nullptr);
    void startUp();
    void tempLoginDone();
    void sessionLoginDone(bool isGuest);
private:
    bool isLogin = false;//默认登录状态为false
    bool getMyselfInfoSucess = false;
};

#endif // STARTPAGE_H

//startpage.cpp
#include "startpage.h"
#include "./model/datacenter.h"
#include "util.h"

#include <QLabel>
#include <QTimer>

StartPage::StartPage(QWidget *parent)
    : QDialog(parent)
{
    //设置尺寸大小与背景颜色，同时设置tool保证
    setFixedSize(697,392);
    setStyleSheet("background-color : #FFFFFF;");
    setWindowFlags(Qt::FramelessWindowHint | Qt::Tool);

    //设置Label显示图片
    QLabel* imageLabel = new QLabel(this);
    imageLabel->setPixmap(QPixmap(":/images/startupPage/limeplayer.png"));
    imageLabel->move(148,118);
    //绑定临时登录的信号槽
    auto dataCenter = model::DataCenter::getInstance();
    connect(dataCenter,&model::DataCenter::tempLoginDone,this,&StartPage::tempLoginDone);
    connect(dataCenter,&model::DataCenter::sessionLoginDone,this,&StartPage::sessionLoginDone);
    connect(dataCenter,&model::DataCenter::getMyselfUserInfoDone,this,[=](){
        getMyselfInfoSucess = true;
    });
    connect(dataCenter,&model::DataCenter::sessionLoginFailed,this,[=](const QString& errorInfo){
        LOG() << "session登录失败,错误原因: " << errorInfo;
        //失败发起临时用户登录请求
        dataCenter->tempLoginAsync();
    });
}

void StartPage::startUp()
{
    QTimer* timer = new QTimer(this);
    auto dataCenter = model::DataCenter::getInstance();
    if(dataCenter->getSessionId().isEmpty())
    {
        dataCenter->tempLoginAsync();//发送登录请求
    }
    else{
        //不为空判断是否为临时用户，若不是再进行session登录
        if(dataCenter->getMyselfUserInfo()->isTempUser())
        {
            dataCenter->tempLoginAsync();//发送登录请求
        }
        else{
            dataCenter->sessionLoginAsync();
        }
    }
    timer->setSingleShot(true);//允许重复触发定时器
    connect(timer,&QTimer::timeout,this,[=](){
        if(isLogin && getMyselfInfoSucess){
            timer->stop();
            close();
            timer->deleteLater();
        }//当登录成功之后再关闭启动页面
    });
    timer->start(2000);
}

void StartPage::tempLoginDone()
{
    //设置确认登录状态
    isLogin = true;
    auto dataCenter = model::DataCenter::getInstance();
    dataCenter->buildTempUser();
    getMyselfInfoSucess = true;
}

void StartPage::sessionLoginDone(bool isGuest)
{
    //如果为临时用户则再进行临时登录，否则获取当前用户信息
    auto dataCenter = model::DataCenter::getInstance();
    isLogin = true;
    if(isGuest)
    {
        dataCenter->buildTempUser();
        getMyselfInfoSucess = true;
        return;
    }
    //根据文件中的sessionId进行用户信息获取
    dataCenter->getMyselfUserInfoAsync();
}

到这里，我们的登录逻辑已经基本处理完毕了。那么就需要去处理下点赞，发送弹幕，是否显示系统管理界面，这部分比较简单，读者可根据自己的代码进行响应的修改。

1.5退出登录逻辑处理

假设用户已经登录成功，⽤⼾在播放平台上操作完毕后，可以点击"退出登录"按钮，退出当前登录状态。退出登录接口定义如下： 请求URL： POST /HttpService/logout 请求参数

返回响应：200 OK

响应参数

然后就是走老流程:

xxxxxxxxxx
//datacenter.h
    //退出登录
    void logoutAsync();
signals:
    //退出登录成功响应
    void logoutDone(const QString& sessionId);
//datacenter.cpp
void DataCenter::logoutAsync()
{
    netClient.logout();
}

//netclient.cpp
void NetClient::logout()
{
    //请求报文的body
    QJsonObject reqbody;
    reqbody["requestId"] = makeRequestId();
    reqbody["sessionId"] = dataCenter->getSessionId();
    QNetworkReply* reply = sendReqToHttpServer("/HttpService/logout",reqbody);
    //异步处理服务端的response
    connect(reply,&QNetworkReply::finished,this,[=](){
        bool ok = true;
        QString reason;
        QJsonObject respBody = handleRespFromHttpServer(reply,ok,reason);
        if(!ok)
        {
            //说明reply有问题打印错误信息并返回
            LOG() << reason;
            reply->deleteLater();
            return;
        }
        reply->deleteLater();
        //解析成功，处理响应信息
        QJsonObject result = respBody["result"].toObject();
        emit dataCenter->logoutDone(result["sessionId"].toString());
        LOG() << "logout请求结束，退出登录成功响应";
    });
}

//mockserver.cpp
QHttpServerResponse MockServer::logout(const QHttpServerRequest &request)
{
    QJsonObject reqData = QJsonDocument::fromJson(request.body()).object();
    LOG() << "[logout] 收到 logout 请求, requestId = " <<reqData["requestId"].toString() << "sessionId = " << reqData["sessionId"].toString();
    const QString& sessionId = reqData["requestId"].toString();
    //构造响应信息
    QJsonObject respData;
    respData["requestId"] = reqData["requestId"].toString();
    respData["errorCode"] = 0;
    respData["errorMsg"] = "";
    QJsonObject result;
    result["sessionId"] = sessionId;
    respData["result"] = result;
    //构建http响应报文
    QHttpServerResponse response(QJsonDocument(respData).toJson(),QHttpServerResponse::StatusCode::Ok);
    response.setHeader("Content-Type","application/json;charset=utf-8");
    return response;
}

客户端发出退出登录请求:

xxxxxxxxxx
//myselfwidget.h
    //当用户需要退出登陆时，弹出提示界面
    void onQuitLoginBtnClicked();
    void createLogin();//构建登录页面
    void logoutDone(const QString& sessionId);//用户退出登录服务端成功响应

//myselfwidget.cpp
void MyselfWidget::onQuitLoginBtnClicked()
{
    ConfirmDialog confirmDialog;
    confirmDialog.setConfirmDialogText("确定要退出登录吗?");
    confirmDialog.exec();
    if(confirmDialog.getConfirmStatu())
    {
        LOG() << "用户退出登录";
        auto dataCenter = model::DataCenter::getInstance();
        dataCenter->logoutAsync();
    }
}

void MyselfWidget::createLogin()
{
    if(login == nullptr)
    {
        login = new Login();
        connect(login,&Login::loginSuccess,this,[=](){
            loadMyself();
        });//链接登录成功的信号槽
    }
}

void MyselfWidget::logoutDone(const QString &sessionId)
{
    //清空用户界面的数据
    clearVideoList();
    //将当前用户设置为临时用户
    auto dataCenter = model::DataCenter::getInstance();
    dataCenter->clearMyselfInfo();
    dataCenter->buildTempUser();
    //重新加载个人界面信息
    getMyselfUserInfoDone();
}

二.修改个人信息界面处理

2.1加载用户当前信息到修改界面

打开修改个人信息界面时，需要将当前的用户信息加载到界面中，因为用户的手机号属于隐私信息，所以我们还需要截取中间四位进行隐藏:

xxxxxxxxxx
//modifymyselfdialog.cpp
ModifyMyselfDialog::ModifyMyselfDialog(QWidget *parent)
    : QDialog(parent)
    , ui(new Ui::ModifyMyselfDialog)
{
    ui->setupUi(this);
    //默认隐藏修改密码后的widget
    ui->passwordWidget->hide();
    //设置背景透明 | 无边框
    setWindowFlag(Qt::FramelessWindowHint);
    setAttribute(Qt::WA_TranslucentBackground);
    //连接信号槽
    connect(ui->cancelBtn,&QPushButton::clicked,this,&ModifyMyselfDialog::close);
    connect(ui->submitBtn,&QPushButton::clicked,this,&ModifyMyselfDialog::onSubmitBtnClicked);
    connect(ui->passwordBtn, &QPushButton::clicked, this,&ModifyMyselfDialog::showPasswordDlg);
    connect(ui->changePasswordBtn, &QPushButton::clicked, this,&ModifyMyselfDialog::showPasswordDlg);
    //设置昵称与手机号
    auto dataCenter = model::DataCenter::getInstance();
    auto myselfInfo = dataCenter->getMyselfUserInfo();
    ui->nicknameEdit->setText(myselfInfo->nickname);
    ui->phoneNumberLabel->setText(hidePhoneNum(myselfInfo->phoneNum));
}

//util.h
// 隐藏⼿机号码中间四位.
static inline QString hidePhoneNum(const QString& phoneNum) {
    if (phoneNum.length() < 11) {
        return phoneNum;
    }
    return phoneNum.left(3) + "****" + phoneNum.right(4);
}

2.2修改密码

密码⽂本后的控件上提⽰，点击设置密码，点击设置密码后，弹出新的对话框专门来设置密码。 我们先来定义相关请求与响应接口: 请求URL： POST /HttpService/setPassword 请求参数

返回响应：200 OK

响应参数

然后就是走老流程:

xxxxxxxxxx
//datacenter.h
    //用户更改自己的账户密码
    void setPasswordAsync(const QString& password);
signals:
    //用户更改自己账户密码成功响应
    void setPasswordDone();
//datacenter.cpp
void DataCenter::setPasswordAsync(const QString &password)
{
    netClient.setPassword(password);
}

//netclinet.cpp
void NetClient::setPassword(const QString &password)
{
    //请求报文的body
    QJsonObject reqbody;
    reqbody["requestId"] = makeRequestId();
    reqbody["sessionId"] = dataCenter->getSessionId();
    reqbody["password"] = password;
    QNetworkReply* reply = sendReqToHttpServer("/HttpService/setPassword",reqbody);
    //异步处理服务端的response
    connect(reply,&QNetworkReply::finished,this,[=](){
        bool ok = true;
        QString reason;
        QJsonObject respBody = handleRespFromHttpServer(reply,ok,reason);
        if(!ok)
        {
            //说明reply有问题打印错误信息并返回
            LOG() << reason;
            reply->deleteLater();
            return;
        }
        reply->deleteLater();
        //解析成功，处理响应信息
        emit dataCenter->setPasswordDone();
        LOG() << "setPassword请求结束，修改密码请求成功响应";
    });
}

//mockserver.cpp
QHttpServerResponse MockServer::setPassword(const QHttpServerRequest &request)
{
    QJsonObject reqData = QJsonDocument::fromJson(request.body()).object();
    LOG() << "[setPassword] 收到 setPassword 请求, requestId = " <<reqData["requestId"].toString() << "sessionId = " << reqData["sessionId"].toString();
    LOG() << "用户新密码为:" << reqData["password"].toString();
    //构造响应信息
    QJsonObject respData;
    respData["requestId"] = reqData["requestId"].toString();
    respData["errorCode"] = 0;
    respData["errorMsg"] = "";
    //构建http响应报文
    QHttpServerResponse response(QJsonDocument(respData).toJson(),QHttpServerResponse::StatusCode::Ok);
    response.setHeader("Content-Type","application/json;charset=utf-8");
    return response;
}

客户端发送修改请求并响应到界面上:

xxxxxxxxxx
//modifymyselfdialog.cpp
void ModifyMyselfDialog::showPasswordDlg()
{
    NewPasswordDialog* newPassWordDialog = new NewPasswordDialog();
    newPassWordDialog->exec();
    const QString currentPassword = newPassWordDialog->getNewPassWord();
    if(currentPassword.isEmpty())
    {
        LOG() << "密码修改已取消";
    }
    else
    {
        newPassword = currentPassword;
        ui->passwordWidget->show();
        ui->passwordBtn->hide();
    }
    delete newPassWordDialog;
}

//newpassworddialog.h
#ifndef NEWPASSWORDDIALOG_H
#define NEWPASSWORDDIALOG_H

#include <QDialog>

namespace Ui {
class NewPasswordDialog;
}

class NewPasswordDialog : public QDialog
{
    Q_OBJECT

public:
    explicit NewPasswordDialog(QWidget *parent = nullptr);
    const QString& getNewPassWord();
    ~NewPasswordDialog();

private:
    void onSubmitBtnClicked();
    void onEditingFinished();
    bool checkPasswordEdit();
private:
    Ui::NewPasswordDialog *ui;
    QString newPassWord;
};

#endif // NEWPASSWORDDIALOG_H

//newpassworddialog.cpp
#include "newpassworddialog.h"
#include "ui_newpassworddialog.h"

NewPasswordDialog::NewPasswordDialog(QWidget *parent)
    : QDialog(parent)
    , ui(new Ui::NewPasswordDialog)
{
    ui->setupUi(this);
    //设置背景透明 | 无边框
    setWindowFlag(Qt::FramelessWindowHint);
    setAttribute(Qt::WA_TranslucentBackground);
    //连接信号槽
    connect(ui->cancelBtn,&QPushButton::clicked,this,&NewPasswordDialog::close);
    connect(ui->submitBtn,&QPushButton::clicked,this,&NewPasswordDialog::onSubmitBtnClicked);
    connect(ui->passwordEdit1,&QLineEdit::editingFinished,this,&NewPasswordDialog::onEditingFinished);
    connect(ui->passwordEdit2,&QLineEdit::editingFinished,this,&NewPasswordDialog::onEditingFinished);
}

const QString &NewPasswordDialog::getNewPassWord()
{
    return newPassWord;
}

NewPasswordDialog::~NewPasswordDialog()
{
    delete ui;
}

void NewPasswordDialog::onSubmitBtnClicked()
{
    if(!checkPasswordEdit())
        return;
    newPassWord = ui->passwordEdit1->text();
    close();
}

bool NewPasswordDialog::checkPasswordEdit()
{
    //核验密码的正确性
    //1.检验输入密码是否为空
    if(ui->passwordEdit1->text().isEmpty())
    {
        ui->messageLabel->setText("设置的新密码不能为空!");
            return false;
    }
    if(ui->passwordEdit2->text().isEmpty())
    {
        ui->messageLabel->setText("两次输入的密码不一致!");
        return false;
    }
    //2.检验输入的密码长度以及是否至少包含两种字符
    if(ui->passwordEdit1->text().size() < 8 || ui->passwordEdit2->text().size() > 16)
    {
        ui->messageLabel->setText("密码长度不合法!");
        return false;
    }
    QVector<bool> kinds(4,false);
    int kindsNum = 0;
    for(auto& c : ui->passwordEdit1->text())
    {
        if(QChar(c).isDigit())
        {
            kindsNum += kinds[0] ? 0 : 1;
            kinds[0] = true;
        }
        else if(QChar(c).isUpper())
        {
            kindsNum += kinds[1] ? 0 : 1;
            kinds[1] = true;
        }
        else if(QChar(c).isLower())
        {
            kindsNum += kinds[2] ? 0 : 1;
            kinds[2] = true;
        }
        else if(QChar(c).isPunct())
        {
            kindsNum += kinds[3] ? 0 : 1;
            kinds[3] = true;
        }
        else
        {
            ui->messageLabel->setText("密码中含有非法字符!");
            return false;
        }
    }
    if(kindsNum < 2)
    {
        ui->messageLabel->setText("密码中必须包含两种及以上字符!");
        return false;
    }
    //3.检验两次输入密码是否一致
    if(ui->passwordEdit1->text() != ui->passwordEdit2->text())
    {
        ui->messageLabel->setText("两次输入的密码不一致!");
        return false;
    }
    //到这里说明密码合法,清空错误信息
    ui->messageLabel->setText("");
    return true;
}

void NewPasswordDialog::onEditingFinished()
{
    checkPasswordEdit();
}

因为用户修改密码可能会有多次，所以我们在修改页面关闭时再根据密码的输入情况看是否需要向服务端发送修改请求。

2.3修改昵称

请求URL： POST /HttpService/setNickname 请求参数

返回响应：200 OK

响应参数

走老流程:

xxxxxxxxxx
//datacenter.h
    //用户修改自己的昵称
    void setNicknameAsync(const QString& nickName);
signals:
    //用户成功修改自己的账户昵称
    void setNicknameDone(const QString& nickname);
//datacenter.cpp
void DataCenter::setNicknameAsync(const QString &nickName)
{
    netClient.setNickname(nickName);
}

//netclient.cpp
void NetClient::setNickname(const QString &nickName)
{
    //请求报文的body
    QJsonObject reqbody;
    reqbody["requestId"] = makeRequestId();
    reqbody["sessionId"] = dataCenter->getSessionId();
    reqbody["nickname"] = nickName;
    QNetworkReply* reply = sendReqToHttpServer("/HttpService/setNickname",reqbody);
    //异步处理服务端的response
    connect(reply,&QNetworkReply::finished,this,[=](){
        bool ok = true;
        QString reason;
        QJsonObject respBody = handleRespFromHttpServer(reply,ok,reason);
        if(!ok)
        {
            //说明reply有问题打印错误信息并返回
            LOG() << reason;
            reply->deleteLater();
            return;
        }
        reply->deleteLater();
        //解析成功，处理响应信息
        emit dataCenter->setNicknameDone(nickName);
        LOG() << "setNickname请求结束，修改昵称请求成功响应";
    });
}

//mockserver.cpp
QHttpServerResponse MockServer::setNickname(const QHttpServerRequest &request)
{
    QJsonObject reqData = QJsonDocument::fromJson(request.body()).object();
    LOG() << "[setNickname] 收到 setNickname 请求, requestId = " <<reqData["requestId"].toString() << "sessionId = " << reqData["sessionId"].toString();
    LOG() << "用户新昵称为:" << reqData["nickname"].toString();
    //构造响应信息
    QJsonObject respData;
    respData["requestId"] = reqData["requestId"].toString();
    respData["errorCode"] = 0;
    respData["errorMsg"] = "";
    //构建http响应报文
    QHttpServerResponse response(QJsonDocument(respData).toJson(),QHttpServerResponse::StatusCode::Ok);
    response.setHeader("Content-Type","application/json;charset=utf-8");
    return response;
}

界面发起请求并处理响应到界面上:

xxxxxxxxxx
//modifymyselfdialog.cpp
void ModifyMyselfDialog::onSubmitBtnClicked()
{
    LOG() << "用户信息已修改";
    //上传修改信息到服务端
    auto dataCenter = model::DataCenter::getInstance();
    if (!newPassword.isEmpty()) {
        auto dataCenter = model::DataCenter::getInstance();
        dataCenter->setPasswordAsync(newPassword);
    }
    //修改昵称
    auto myself = dataCenter->getMyselfUserInfo();
    const QString& newNickname = ui->nicknameEdit->text().trimmed();
    if (newNickname != myself->nickname) {
        dataCenter->setNicknameAsync(newNickname);
    }
    close();
}

三.上传视频界面

3.1上传视频

在我的页面中，如果用户需要上传视频，可以先选择本地文件，然后我们的程序进行读取再上传至服务端，请求接口定义如下: 请求URL： POST /HttpService/uploadVideo?requestId=xxx&sessionId=xxx 请求参数:multipart/form-data

返回响应：200 OK

响应参数

然后就是走老流程:

xxxxxxxxxx
//datacenter.h
    //用户上传视频的请求
    void uploadVideoAsync(const QString& videoPath);
signals:
    //用户上传视频成功响应
    void uploadVideoDone(const QString& fileId);
//datacenter.cpp
void DataCenter::uploadVideoAsync(const QString &videoPath)
{
    netClient.uploadVideo(videoPath);
}

//netclient.cpp
void NetClient::uploadVideo(const QString &videoPath)
{
    // 1. 构造请求
    QUrl url(HTTP_URL + "/HttpService/uploadVideo");
    QUrlQuery query;
    query.addQueryItem("requestId",makeRequestId());
    query.addQueryItem("sessionId",dataCenter->getSessionId());
    url.setQuery(query);
    //获取视频数据
    QByteArray videoData = loadFileToByteArray(videoPath);
    // 2. 发送请求
    QNetworkRequest httpReq;
    httpReq.setUrl(url);
    httpReq.setHeader(QNetworkRequest::ContentTypeHeader, "multipart/form-data");
    QNetworkReply* httpReply = netClientManager.post(httpReq,videoData);
    // 3. 异步处理响应
    connect(httpReply, &QNetworkReply::finished, this, [=](){
        bool ok = true;
        QString reason;
        QJsonObject respBody = handleRespFromHttpServer(httpReply,ok,reason);
        if(!ok)
        {
            //说明reply有问题打印错误信息并返回
            LOG() << reason;
            httpReply->deleteLater();
            return;
        }
        // 发射信号，通知界面更视频显⽰
        httpReply->deleteLater();
        QJsonObject result = respBody["result"].toObject();
        QString fileId = result["fileId"].toString();
        emit dataCenter->uploadVideoDone(fileId);
        LOG() << "uploadVideo请求结束，视频上传成功";
    });
}

//mockserver.cpp
QHttpServerResponse MockServer::uploadVideo(const QHttpServerRequest &request)
{
    // 解析查询字符串
    QUrlQuery query(request.url());
    QString requestId = query.queryItemValue("requestId");
    QString sessionId = query.queryItemValue("sessionId");
    LOG() << "[uploadVideo] 收到 uploadVideo 请求, requestId=" << requestId << "sessionId =" << sessionId;
    // 构造视频文件路径
    QDir dir(QDir::currentPath());
    dir.cdUp();
    dir.cdUp();
    writeByteArrayToFile(dir.absolutePath() + "/videos/222/222.mp4",request.body());
    // 构造响应json报文
    QJsonObject respBody;
    respBody["requestId"] = requestId;
    respBody["errorCode"] = 0;
    respBody["errorMsg"] = "";
    QJsonObject result;
    result["fileId"] = "6000";
    respBody["result"] = result;
    //构建http响应报文
    QHttpServerResponse response(QJsonDocument(respBody).toJson(),QHttpServerResponse::StatusCode::Ok);
    response.setHeader("Content-Type","application/json;charset=utf-8");
    return response;
}

记得在假服务端构造相应的目录和添加初始假数据键值对映射。 接下来我们需要处理界面中的响应逻辑,没有上传成功时显示加载动画，上传成功之后显示成功标志:

xxxxxxxxxx
//myselfwidget.cpp
void MyselfWidget::onUpLoadVideoBtnClicked()
{
    //弹出打开⽂件对话框，让用户选择要上传的视频⽂件
    QString videoFilePath = QFileDialog::getOpenFileName(nullptr, "上传视频",
                                                         "",
                                                         "Videos(*.mp4 *.rmvb *.avi *.mov)");
    if(!videoFilePath.isEmpty()){
        // 视频⼤小限制，上限为4G
        QFileInfo fileInfo(videoFilePath);
        qint64 fileSize = fileInfo.size();
        qlonglong maxVideoSize = 4294967296;
        if(fileSize > maxVideoSize){
            LOG()<<"视频文件必须小于4G";
            return;
        }
        emit switchUploadVideoPage(UpLoadPageBtn,videoFilePath);
        //发送上传视频请求
        auto dataCenter = model::DataCenter::getInstance();
        dataCenter->uploadVideoAsync(videoFilePath);
    }
}

//limeplayer.cpp
void LimePlayer::switchUploadVideoPage(ButtonType buttonType, const QString &videoFilePath)
{
    //修改对应设置表示文件正在上传中
    ui->uploadVideo->isUploading(true);
    QString fileName = videoFilePath.mid(videoFilePath.lastIndexOf("/") + 1);
    ui->uploadVideo->setFileName(fileName);
    ui->stackedWidget->setCurrentIndex(buttonType);
}

//uploadvideopage.h
#include <QWidget>
#include <QMovie>
#include "pageswitchbutton.h"
#include "./mpv/mpvplayer.h"

namespace Ui {
class UploadVideoPage;
}

class UploadVideoPage : public QWidget
{
    Q_OBJECT

public:
    explicit UploadVideoPage(QWidget *parent = nullptr);
    void isUploading(bool isLoading);//上传或上传完毕的显示
    void setFileName(const QString& fileName);//设置标题位置的文件名称
    //启动或停止loading动画
    void loadingAnimal(bool isstart);
    //视频文件上传完毕
    void uploadVideoFileDone(const QString& fileId);
private:
    QMovie* loading = nullptr;
    bool isUploadVideoOk = false;//视频文件是否上传完毕
    QString videoFileId;//上传的视频文件服务器返回的文件id
};

//uploadvideopage.cpp

UploadVideoPage::UploadVideoPage(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::UploadVideoPage)
{
    //初始化loading对像
    loading = new QMovie(":/images/uploadVideoPage/loading.gif",QByteArray(),ui->loadingLabel);
    ui->loadingLabel->setStyleSheet("QLabel { image-rendering: smooth; }");//设置抗锯齿
    ui->loadingLabel->setMovie(loading);
    ui->loadingLabel->setScaledContents(true);
    ui->loadingLabel->hide();
    //默认隐藏上传完毕的图标
    ui->downIcon->hide();
}
void UploadVideoPage::isUploading(bool isLoading)
{
    if(isLoading)
    {
        loadingAnimal(true);
        ui->uploadProgress->setText("上传中..");
        ui->downIcon->hide();
    }
    else
    {
        loadingAnimal(false);
        ui->uploadProgress->setText("文件上传完毕");
        ui->downIcon->show();
    }
}

void UploadVideoPage::setFileName(const QString &fileName)
{
    ui->fileName->setText(fileName);
}

void UploadVideoPage::loadingAnimal(bool isstart)
{
    if(isstart)
    {
        //显示loadingLabel并启动动画
        ui->loadingLabel->show();
        loading->start();
    }
    else
    {
        ui->loadingLabel->hide();
        loading->stop();
    }
}

void UploadVideoPage::uploadVideoFileDone(const QString &fileId)
{
    isUploading(false);
    isUploadVideoOk = true;
    videoFileId = fileId;
}

3.2获取视频首帧图

在工程构建目录下有一个名为ffmpeg的exe的文件，ffmpeg自然不用多说，如果需要详细了解ffmpeg的读者可以自行进行搜索，我们这里就是简单使用下获取视频首帧图，思路为:在我们当前程序中新启一个进程，然后将该进程替换为ffmpeg，并在程序中输入相应指令完成视频首帧图的获取，保存在工程目录下，然后设置到上传视频界面的封面图上根据首诊图片路径，获取视频首诊图的方法设置在mpvplayer类中，为一个静态方法:

xxxxxxxxxx
//mpvplayer.cpp
QString MpvPlayer::getVideoFirstFrame(const QString &videoFileName)
{
    //获取视频首帧图片作为上传视频时的默认封面图
    QString ffmpegPath = QDir::currentPath() + "/ffmpeg/ffmpeg.exe";
    QString fristFrame = QDir::currentPath() + "/firstFrame.png";
    //使用新进程调用ffmpeg工具
    // 设置命令⾏参数
    QStringList cmd;
    cmd<<"-ss"<<"00:00:00"
        <<"-i"<<videoFileName
        <<"-vframes"<<"1"
        <<fristFrame;
    // 启动⼀个进程，⽤来管理ffmpeg⼯具
    QProcess ffmpegProgress;
    ffmpegProgress.start(ffmpegPath, cmd);
    // 等待进程完成：⽆限等待，直到进程结束
    if(!ffmpegProgress.waitForFinished(-1)){
        LOG()<<"ffmpeg 进程执⾏失败";
    }
    return fristFrame;
}

//设置到上传视频界面中:
void LimePlayer::switchUploadVideoPage(ButtonType buttonType, const QString &videoFilePath)
{
    //将视频首帧图设置到上传视频界面中
    ui->uploadVideo->setDefaultVideoFrame(videoFilePath);
}

void UploadVideoPage::setDefaultVideoFrame(const QString &videoFilePath)
{
    //获取视频首帧图并设置为默认视频封面图
    QString videoFirstFramePath = MpvPlayer::getVideoFirstFrame(videoFilePath);
    QPixmap pixmap(videoFirstFramePath);
    pixmap = pixmap.scaled(ui->imageLabel->size(),
                           Qt::KeepAspectRatioByExpanding,
                           Qt::SmoothTransformation);
    ui->imageLabel->setPixmap(pixmap);
    firstFramePath = videoFirstFramePath;
}

3.3上传视频封面图

这里我们可以复用之前上传头像的接口，但是这里有一个问题，如果我们直接去调用，那么返回的图像会被设置到头像区域。所以我们要在原来的上传图片的异步请求方法中新增一个参数来区分是上传头像还是上传视频封面图:

xxxxxxxxxx
//uploadvideopage.cpp
void UploadVideoPage::upLoadPhoto(const QString &photoFilePath)
{
    //先将上传封面图设置为false状态,同时清空fileId
    isUploadVideoFrameOk = false;
    videoImageId = "";
    //发起上传图片请求
    auto dataCenter = model::DataCenter::getInstance();
    QByteArray imageData = loadFileToByteArray(photoFilePath);
    dataCenter->uploadPhotoAsync(imageData,ui->imageLabel);
}

void DataCenter::uploadPhotoAsync(const QByteArray &photoData,QWidget* whichPage)
{
    netClient.uploadPhoto(photoData,whichPage);
}

也就是凭借whichpage来区分是那个界面上传的图片,头像上传部分的修改不予展示，有需要的读者可以参考我文章开头提供的源码链接。 上传视频界面发起请求并处理响应:

xxxxxxxxxx
//uploadvideopage.cpp
void UploadVideoPage::uploadVideoFileDone(const QString &fileId)
{
    isUploading(false);
    isUploadVideoOk = true;
    videoFileId = fileId;
    //进行视频封面图的上传
    upLoadPhoto(firstFramePath);
    QFile::remove(firstFramePath);//删除视频首帧图-切记要删除否则ffmpeg会因为原图片已存在而无法存放后续截取的视频首诊图片而导致程序崩溃
}


void UploadVideoPage::upLoadPhoto(const QString &photoFilePath)
{
    //先将上传封面图设置为false状态,同时清空fileId
    isUploadVideoFrameOk = false;
    videoImageId = "";
    //发起上传图片请求
    auto dataCenter = model::DataCenter::getInstance();
    QByteArray imageData = loadFileToByteArray(photoFilePath);
    dataCenter->uploadPhotoAsync(imageData,ui->imageLabel);
}

UploadVideoPage::UploadVideoPage(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::UploadVideoPage)
{
    //上传图片请求结束
    connect(dataCenter,&model::DataCenter::uploadPhotoDone,this,[=](const QString& fileId,QWidget* whichPage)
    {
        if(whichPage != ui->imageLabel)
        {
            return;
        }
        videoImageId = fileId;
        isUploadVideoFrameOk = true;
    });
}