物联网实战--平台篇之(十)“我的“页面设计

一、页面布局

二、头像

三、修改密码

四、重新登录

本项目的交流QQ群:701889554

物联网实战--入门篇https://blog.csdn.net/ypp240124016/category_12609773.html

物联网实战--驱动篇https://blog.csdn.net/ypp240124016/category_12631333.html

本项目资源文件https://download.csdn.net/download/ypp240124016/89329967

一、页面布局

以上几个图就是"我的"页面中几个主要页面，基本思路和流程是：首次登录或者退出状态时，可以点击头像区域进行引导登录操作；登录成功后，头像区域会显示图片、账户名和等级，中间3个彩色按钮是保留功能，可以添加自己的相关链接；底部列表有修改密码、联系人、子账户、软件更新和关于五个子模块，现阶段我们主要完成修改密码模块，其它的后续完善。

二、头像

头像区域分为登录和退出两个状态，差别在于头像和文本，没有登录时候显示灰色头像和"点击登录"文本，登录后显示彩色头像和账户名称。其中，头像还进行了圆形裁剪，较为美观；裁剪的思想是用圆角矩形作为掩板，遮住图片多余部分，这其中用到了OpacityMask组件，需要GPU支持。

import QtQuick 2.7
import QtGraphicalEffects 1.0
Rectangle {
    property var levelValue: 0
    property var loginState: 1
    property var rowHeight: 35
    property var accountText: "admin"
    width: parent.width
    height: 180
    gradient: Gradient 
    {
            GradientStop { position: 0.0; color: "#CFD5E6" }
            GradientStop { position: 1.0; color: "#F5F6F8" }
        }
    
    //头像
    Rectangle{
        id:id_headRect
        width: height  
        height: parent.height*0.4
        anchors
        {
            left:parent.left
            leftMargin:parent.height*0.15
            top:parent.top
            topMargin:parent.height*0.15
        }
        color: "white"
        visible: false
        radius: height/2
        border.width: 1
        border.color: "black"
    }
    Image
    {
        id: id_headImg
        mipmap: true
        anchors.centerIn: parent
        visible: false
        smooth: true
        source: loginState ? "qrc:/mainImgRC/images/my/head1.png" : "qrc:/mainImgRC/images/my/head0.png"
    }
    OpacityMask {
        anchors.fill: id_headRect
        source: id_headImg
        maskSource: id_headRect
       }


    //账户名
    Text//账户文本
    {
        id:id_accountText;
        height: rowHeight
        width: parent.width*0.7
        anchors
        {
            top:id_headRect.top
            left:id_headRect.right
            leftMargin:rowHeight*0.3
        }
        font.pointSize: id_accountMouseArea.pressed ? height*0.5 : height*0.45
        font.family:Qt.platform.os === "windows" ? "宋体" : "黑体"
        font.bold:true
        text: loginState ? accountText : "点击登录"
        color: "black"
        verticalAlignment:Text.AlignVCenter
        horizontalAlignment: Text.AlignLeft
        MouseArea{
            id:id_accountMouseArea
            anchors.fill: parent
            enabled: !loginState
            onClicked: 
            {
                theAccountMan.setViewByLoginState(0)
            }
        }
    }
    Text//等级文本
    {
        id:id_levelText;
        height: rowHeight*0.8
        width: parent.width*0.7
        anchors
        {
            top:id_accountText.bottom
            left:id_accountText.left
        }
        font.pointSize: height*0.45
        font.family:Qt.platform.os === "windows" ? "宋体" : "黑体"
        text: "等级: "+levelValue
        color: "black"
        verticalAlignment:Text.AlignVCenter
        horizontalAlignment: Text.AlignLeft
    }
}

三、修改密码

在账户管理章节有提到过，修改密码需要在登录后进行修改，所以放在了这里进行讲解，其整个流程跟注册、登录类似。首先由用户APP发起请求，携带参数是当前密码和新密码，具体请求代码如下：

void AccountMan::requestChangePwd(QString account, QString old_pwd, QString new_pwd)
{
    QJsonObject root_obj;
    QJsonDocument json_doc;

    root_obj.insert("cmd_type", "change_pwd");
    root_obj.insert("account", account);
    root_obj.insert("old_pwd", old_pwd);
    root_obj.insert("new_pwd", new_pwd);
    root_obj.insert("rand_num", m_randNum);
    root_obj.insert("mac", m_macStr);
    json_doc.setObject(root_obj);
    QByteArray msg_ba = json_doc.toJson(QJsonDocument::Indented);
    QString topic=makePubTopic("passwd");
    emit sigMqttPushMessage(topic, msg_ba);
}

服务器的解析代码如下，主要是检查合法性，以及确保正确更新。

  else if(cmd_type=="change_pwd")
    {
        QString new_pwd="";
        if(root_obj.contains("new_pwd"))//
        {
            QJsonValue value = root_obj.value("new_pwd");
            if(value.isString())
            {
                new_pwd=value.toString();
            }
        }
        QString old_pwd="";
        if(root_obj.contains("old_pwd"))//
        {
            QJsonValue value = root_obj.value("old_pwd");
            if(value.isString())
            {
                old_pwd=value.toString();
            }
        }
        if(old_pwd.size()<8 || new_pwd.size()<8)
        {
            ackChangePwdState(account, mac_str, rand_num, 1, "密码长度不足!");
            return;
        }
        AccountSqlite::AccountNodeStruct tag_account;
        tag_account.passWord="";
        m_accountSqlite->selectAccountByName(account, tag_account);
        if(!tag_account.passWord.isEmpty())
        {
            if(tag_account.passWord==old_pwd)//旧密码匹配
            {
                m_accountSqlite->updateAccountPassWord(account, new_pwd);//更新密码
                m_accountSqlite->selectAccountByName(account, tag_account);//重新获取密码
                if(tag_account.passWord==new_pwd)//新密码校验
                {
                    ackChangePwdState(account, mac_str, rand_num, 0, "密码修改成功!");
                    qDebug("set new pwd ok!");
                }
                else
                {
                    ackChangePwdState(account, mac_str, rand_num, 2, "数据库更新失败!");
                    qDebug("set new pwd failed!");
                }
            }
            else
            {
                ackChangePwdState(account, mac_str, rand_num, 3, "旧密码不匹配!");
                qDebug("tag_account.pass_word!=old_pwd");
            }
        }
        else
        {
            ackChangePwdState(account, mac_str, rand_num, 4, "账户不存在!");
            qDebug("tag_account.pass_word.isEmpty()");
        }
    }

void AccountThread::ackChangePwdState(QString account, QString mac_str, int rand_num, int result, QString ack_str)
{
    QJsonObject root_obj;
    QJsonDocument json_doc;
    root_obj.insert("cmd_type", "change_pwd");
    root_obj.insert("account", account);
    root_obj.insert("result", result);
    root_obj.insert("ack_str", ack_str);
    json_doc.setObject(root_obj);
    QByteArray msg_ba = json_doc.toJson(QJsonDocument::Indented);
    QString topic=makePubTopic(account, mac_str, rand_num, "passwd");
    emit sigMqttPushMessage(topic, msg_ba);
}

修改密码的前端页面代码如下，基本上延续了重置密码的样式。

import QtQuick 2.7
import QtQuick.Controls 2.0
import "../base"
import "../login"
//修改密码页面

Rectangle {
    signal siqGoBackLevel0() 
    property var accountName: "user"
    MsgDialog01 
    {
        id:id_msgDialog
    }
    Keys.onPressed: 
    {
        if(event.key === Qt.Key_Back)
        {
            console.log("forget Key_Back!")
            event.accepted = true;
            siqGoBackLevel0()
        }
    }
    ImageButton01
    {
        source: "qrc:/mainImgRC/images/login/back.png"
        
        anchors
        {
            left:parent.left
            leftMargin:20
            top:parent.top
            topMargin:20            
        }
        onSiqClickedLeft: 
        {
            siqGoBackLevel0()
        }
    }
    
    HeadView 
    {
        id:id_headView
        textValue: "修改密码"
        anchors
        {
            horizontalCenter:parent.horizontalCenter
            top:parent.top
            topMargin:60
        }
    }
    BaseText01
    { 
        id:id_accountText
        height: 50
        width: parent.width*0.8
        anchors
        {
            horizontalCenter:parent.horizontalCenter
            top:id_headView.bottom
            topMargin:30
        }
        text:accountName
        readOnly: true
        maximumLength: 30
    }
    BaseText01//旧密码
    {
        id:id_oldText
        height: id_accountText.height
        width: id_accountText.width
        anchors
        {
            horizontalCenter:parent.horizontalCenter
            top:id_accountText.bottom
            topMargin:10
        }
        placeholderText: "旧密码"
        maximumLength: 30
        echoMode: TextInput.Password//密码模式
    }
    BaseText01//密码
    {
        id:id_newText
        height: id_accountText.height
        width: id_accountText.width
        anchors
        {
            horizontalCenter:parent.horizontalCenter
            top:id_oldText.bottom
            topMargin:10
        }
        placeholderText: "新密码"
        maximumLength: 30
        echoMode: TextInput.Password//密码模式
    }
    
    BaseText01//确认密码
    {
        id:id_confirmText
        height: id_accountText.height
        width: id_accountText.width
        anchors
        {
            horizontalCenter:parent.horizontalCenter
            top:id_newText.bottom
            topMargin:10
        }
        placeholderText: "确认密码"
        maximumLength: 30
        echoMode: TextInput.Password//密码模式
    }
    
    

    BaseButton02//修改按钮
    {
        id:id_loginButton
        height: id_newText.height
        width: id_newText.width
        anchors
        {
            horizontalCenter:parent.horizontalCenter
            top:id_confirmText.bottom
            topMargin:10
        }
        buttonText: "立即修改"
        
        onSiqClickedLeft: 
        {

            var result=theAccountMan.checkPasswd(id_newText.text)
            if(result===1)
            {
                id_msgDialog.funOpen("密码长度要大于8!")
                return 
            }
            if(id_newText.text!==id_confirmText.text)
            {
                id_msgDialog.funOpen("两次密码不一致!")
                return
            }   
            theAccountMan.requestChangePwd(id_accountText.text, id_oldText.text, id_newText.text)
        }
    }
    
}

四、重新登录

如果用户需要更改登录帐号，那么就得先退出当前帐号，所以在底部添加了退出按钮，确认退出后首页和我的页面都会做相应切换，用于引导用户登录，前端通过调用下面函数达成切换效果的：

//根据登录状态切换页面
void AccountMan::setViewByLoginState(int state)
{
    qDebug("setViewByLoginState=%d", state);
    m_accountWork.login_state=state;
    if(state>0)//已登录
    {
        emit siqSetMainCurrView("main-center");
        emit siqSetHomeCurrView("home-logined");
    }
    else//未登录
    {
        m_accountWork.account.clear();
        m_accountWork.auth=0;
        m_accountWork.parent_account.clear();
        writeConfig();
        emit siqSetMainCurrView("main-login");
        emit siqSetHomeCurrView("home-quit");
    }
}