个人信息修改个性签名

个人信息修改个性签名

前言

在上一集我们就完成了三大可修改信息之一的昵称信息,这一集我们就来完成三大可修改信息之一的个性签名的功能.

需求分析

还是老样子,我们之前已经做了点击修改按钮,就会显示输入框和提交按钮的功能.如下

这一集我们要完成的内容是点击个性签名之类的提交按钮可以将个性签名的内容通过http的请求和响应这一条链路,之后保存到我们的数据中心当中,并在个人信息窗口上展示修改的内容.如下

我们还是老规矩,先来看一下我们这个功能定义的URL和请求响应.

这就是我们的URL

这就是我们定义的请求以及响应。

那么我们就正式开始完成我们的功能吧。

客户端

先从客户端开始！

我们要先给修改个性签名对应的提交按钮绑定一个信号槽！

    connect(descSubmitBtn, &QPushButton::clicked, this, &SelfInfoWidget::clickDescSubmitBtn);

当触发了我们的点击事件，我们就会去执行clickDescSubmitBtn这个函数！

这个函数我们要先从输入框获取到我们修改后的个性签名。

之后判断我们的修改的内容是否为空，如果是空的，就可以直接返回了，如果不是空的，那就要发送网络请求！
 

void SelfInfoWidget::clickDescSubmitBtn()
{
    //先从输入框中获取到修改后的个性签名
    const QString& desc = descEdit->text();
    if(desc.isEmpty()){
        return;
    }
    //发送网络请求
    DataCenter* dataCenter = DataCenter::getInstance();
    connect(dataCenter, &DataCenter::changeDescriptionDone, this, &SelfInfoWidget::clickDescSubmitBtnDone, Qt::UniqueConnection);
    dataCenter->changeDescriptionAsync(desc);
}

这里还是要通过我们的数据中心传递我们的loginSessionId。

void DataCenter::changeDescriptionAsync(const QString &desc)
{
    netClient.changeDescription(loginSessionId, desc);
}

之后就到了NetClient部分。

我们就要根据proto文件定义的请求进行构造http请求。

之后就是处理我们的响应，我们要把数据设置到我们的DataCeter中。之后发送一个信号告诉我们调用方可以开始渲染我们的个人信息窗口的内容了！

void NetClient::changeDescription(const QString &loginSessionId, const QString &desc)
{
    //构造http请求body
    bite_im::SetUserDescriptionReq pbReq;
    pbReq.setRequestId(makeRequestId());
    pbReq.setSessionId(loginSessionId);
    pbReq.setDescription(desc);

    QByteArray body = pbReq.serialize(&serializer);

    LOG() << "[修改用户个性签名] 发送请求 requestId=" << pbReq.requestId() << ", loginSessionId=" << pbReq.sessionId()
          <<", description=" << pbReq.description();

    //发送http请求
    QNetworkReply* resp = this->sendHttpRequest("/service/user/set_description", body);

    //处理响应
    connect(resp, &QNetworkReply::finished, this, [=](){
        bool ok = false;
        QString reason;
        auto pbResp = this->handleHttpResponse<bite_im::SetUserDescriptionRsp>(resp, &ok, &reason);

        //判定是否出错
        if(!ok){
            LOG() << "[修改用户个性签名]出错！reason=" << reason;
            return;
        }

        //设置数据到DataCenter
        dataCenter->resetDescription(desc);

        //发送信号，通知调用
        emit dataCenter->changeDescriptionDone();

        LOG() << "[修改用户个性签名] 处理响应完毕! requestId=" << pbResp->requestId();

    });
}

这时，就会回到我们的信号槽接收信号

 connect(dataCenter, &DataCenter::changeDescriptionDone, this, &SelfInfoWidget::clickDescSubmitBtnDone, Qt::UniqueConnection);

我们记得一定要添加第五个参数，不然会触发多个槽。

之后就是我们的渲染过程了，这里也是封装了一个函数进行渲染。

void SelfInfoWidget::clickDescSubmitBtnDone()
{
    //界面控件切换
    layout->removeWidget(descEdit);
    descEdit->hide();
    layout->addWidget(descLabel,2,2);
    descLabel->show();
    descLabel->setText(descEdit->text());

    layout->removeWidget(descSubmitBtn);
    descSubmitBtn->hide();
    layout->addWidget(descModifyBtn,2,3);
    descModifyBtn->show();
}

这就是客户端这边的内容，还是十分的简单的。

测试服务端

我们老规矩，先配置路由

    httpServer.route("/service/user/set_description", [=](const QHttpServerRequest& req){
        return this->setDesc(req);
    });

之后就是构造我们的响应

QHttpServerResponse HttpServer::setDesc(const QHttpServerRequest &req)
{
    //解析请求
    bite_im::SetUserDescriptionReq pbReq;
    pbReq.deserialize(&serializer, req.body());
    LOG() << "[REQ 修改用户个性签名] requestId=" << pbReq.requestId() << ", loginSessionId=" << pbReq.sessionId()
          <<", desc=" << pbReq.description();

    //构造响应
    bite_im::SetUserDescriptionRsp pbResp;
    pbResp.setRequestId(pbReq.requestId());
    pbResp.setSuccess(true);
    pbResp.setErrmsg("");

    QByteArray body = pbResp.serialize(&serializer);

    //构造http响应
    QHttpServerResponse resp(body, QHttpServerResponse::StatusCode::Ok);
    resp.setHeader("Content-Type", "application/x-protobuf");
    return resp;
}

这样我们的整条链路就连接起来了，就可以实现我们的功能，那么这一集就先到这里吧。