物联网实战--平台篇之(五)账户界面

目录

一、界面框架

二、首页(未登录)

三、验证码登录

四、密码登录

五、帐号注册

六、忘记密码

---

 本项目的交流QQ群:701889554

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

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

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

一、界面框架

        从结构上看，页面内容会比较多，整体上分为两部分，一是登录页面，二是控制中心页面。现阶段是设计帐号登录相关的页面，如上图所示的绿色字体部分；控制中心页面分为首页、设备、消息和我的四部分，APP打开后首先进入首页，首页有两种状态，未登录状态和已登录状态，如果之前没登录过或者退出了，那么就进入未登录状态，需要引导用户登录；控制中心具体的放在后面来讲，现在分析下登录页面的流程。

        打开后，首先展示的是未登录首页，页面中间有“前往登录”按钮，点击后会跳转到验证码登录页面，该页面有“密码登录”按钮，点击后会跳转到密码登录页面，此页面有两个文字按钮，分别是“账号注册”和“忘记密码”按钮。至此，登录相关界面就全了，在返回过程中如上图蓝色指示线所示，密码登录返回验证码登录，最后返回首页。以下是具体软件的录屏视频。

APP界面设计

        下图是工程项目的界面目录结构，其中大部分是以SwipeView切换界面为主，实现不同页面之间的跳转。

        以下是主页面的QML前端代码，核心是放着CenterSwipeView控制中心和LoginSwipeView登录页面，这里面有部分是捕捉安卓手机返回键的代码Keys.onPressed，逻辑是快速点击返回键几下就可以退出APP了。

import QtQuick 2.7
import QtQuick.Controls 2.0
import "base"
//主页面,可以在控制中心和登录页面之间切换SwipeView {id:id_mainSwipeViewanchors.fill: parentinteractive: false//禁用手滑切换currentIndex: 0MsgDialog01 {id:id_msgDialog}property var pressTime: 0Timer {interval: 500; running: true; repeat: trueonTriggered: {if(pressTime>0){pressTime--}}}Keys.onPressed: {if(event.key === Qt.Key_Back){console.log("login Key_Back!")if(pressTime>0){console.log("app quit!")Qt.quit()}else{pressTime=2event.accepted = true;id_msgDialog.funOpen("再按一次退出!")                }}}CenterSwipeView //控制中心界面{id:id_centerSwipeView}LoginSwipeView  //登录界面{id:id_loginSwipeViewonSiqLoginBackLevel1://登录界面返回按钮{id_mainSwipeView.currentIndex=0}}Component.onCompleted: {}Connections{target: theAccountManonSiqSetLoginState:{console.log("set login state=", state)if(state>0)//登录成功{id_mainSwipeView.currentIndex=0}else//去登录{id_mainSwipeView.currentIndex=1}}onSiqShowMsg:{id_msgDialog.funOpen(msg)}}function funSetFocus(){focus=true}}

二、首页(未登录)

        这是未登录的首页页面，第一次打开APP便是这个页面，目的是引导用户注册和登录，布局也相对简洁，LOGO+设备背景图+按钮，点击前往登录 按钮就能进入下一个页面，下面是具体代码。两者结合起来看，其实QML代码也是非常简单的，核心作用还是布局。代码里有三个注意点，一个是使用Gradient产生渐变色，这样背景比较不会单调；二是开头import "../base"引入了base文件夹，里面放着一些常用的、定制化的基础模块，比如这里的BaseButton02，就是圆角按钮；三是在BaseButton02内部的前后端交互接口theAccountMan，这个是在C++主程序里定义的。

import QtQuick 2.7
import QtQuick.Controls 2.0
import "../base"//未登录home画面Rectangle {anchors.fill: parentgradient: Gradient {GradientStop { position: 0.0; color: "#CFD5E6" }GradientStop { position: 1.0; color: "#F5F6F8" }}//LOGOImage{id: id_logoImgwidth: heightheight: 40mipmap: trueanchors{left:parent.leftleftMargin:width*0.3top:parent.toptopMargin:height*0.2}source: "qrc:/mainImgRC/images/logo.png"}Label{id:id_headLabelheight: id_logoImg.heightwidth: height*4anchors{verticalCenter:id_logoImg.verticalCenterleft:id_logoImg.rightleftMargin:10}verticalAlignment: Text.AlignVCenterhorizontalAlignment: Text.AlignLeftfont.pointSize: height*0.40font.family:"宋体"color: "black"text:"端点物联M2M Lite"}Label{id:id_myDevLabelheight: id_logoImg.heightwidth: height*4anchors{bottom:id_centerRect.topbottomMargin:5left:id_centerRect.leftleftMargin:10}verticalAlignment: Text.AlignVCenterhorizontalAlignment: Text.AlignLeftfont.pointSize: height*0.45font.family:"宋体"color: "black"text:"我的设备"}Rectangle //中心登录空白矩形{id:id_centerRectwidth:parent.width*0.9radius:10anchors{top:id_logoImg.bottomtopMargin:id_logoImg.height*2horizontalCenter:parent.horizontalCenterbottom:parent.bottombottomMargin:20}Image //冰箱等智能家居设备图片{id: id_devicesImgwidth: parent.width*0.8height: width/1.6mipmap: trueanchors{horizontalCenter:parent.horizontalCentertop:parent.toptopMargin:parent.height*0.08}source: "qrc:/mainImgRC/images/home/home_devices.png"}BaseButton02{height: 50width: 150buttonText: "前往登录"anchors{horizontalCenter:parent.horizontalCenterbottom:parent.bottombottomMargin:height*3}onSiqClickedLeft: {theAccountMan.setLoginState(0)}}}}

三、验证码登录

        

import QtQuick 2.7
import QtQuick.Controls 2.0
import "../base"//验证码登录界面Rectangle {signal siqLoginBackLevel0()signal siqGotoPasswdLogin()MsgDialog01{id:id_msgDialog}Keys.onPressed: {if(event.key === Qt.Key_Back){console.log("phone Key_Back!")event.accepted = true;siqLoginBackLevel0()}}ImageButton01//返回按钮{source: "qrc:/mainImgRC/images/login/back.png"anchors{left:parent.leftleftMargin:20top:parent.toptopMargin:20            }onSiqClickedLeft: {siqLoginBackLevel0()}}HeadView{id:id_headViewtextValue: "手机验证码登录"anchors{horizontalCenter:parent.horizontalCentertop:parent.toptopMargin:80}}BaseText01{id:id_phoneTextheight: 50width: parent.width*0.8anchors{horizontalCenter:parent.horizontalCentertop:id_headView.bottomtopMargin:30}placeholderText: "请输入手机号"maximumLength: 11}VerCodeView//验证码模块{id:id_verCodeViewheight: id_phoneText.heightagreeCheckState: id_userAgreement.checkStatephoneNumber: id_phoneText.textanchors{horizontalCenter:parent.horizontalCentertop:id_phoneText.bottomtopMargin:10}}BaseButton02{id:id_loginButtonheight: id_phoneText.heightwidth: id_phoneText.widthanchors{horizontalCenter:parent.horizontalCentertop:id_verCodeView.bottomtopMargin:10}buttonText: "登录"onSiqClickedLeft: {if(id_userAgreement.checkState==0){id_msgDialog.funOpen("请先同意用户协议!")return}var ok=theAccountMan.isPhoneNumber(id_phoneText.text)if(!ok){id_msgDialog.funOpen("请输入正确的手机号!")return}ok=theAccountMan.isNumber(id_verCodeView.verCode)if(ok!==4){id_msgDialog.funOpen("请输入正确的验证码!")return}theAccountMan.requestLoginByVerCode(id_phoneText.text, id_verCodeView.verCode)}}UserAgreement//隐私政策{id:id_userAgreementanchors{left:id_phoneText.lefttop:id_loginButton.bottomtopMargin:10}}BaseButton02{id:id_switchButtonheight: id_phoneText.heightwidth: id_phoneText.widthreleaseColor: "#F0F0F0"pressedColor: "#E0E0E0"buttonColor:"#505050"anchors{horizontalCenter:parent.horizontalCentertop:id_userAgreement.bottomtopMargin:30}buttonText: "密码登录>>"onSiqClickedLeft: {siqGotoPasswdLogin()}}}

        这个页面几乎是用的base里的页面模块，HeadView是LOGO+标题模块，内容可以更改；BaseText01是文字输入模块，用户名、密码什么的都是用的这个模块；VerCodeView是验证码模块，包含了文字输入模块和按钮模块；还有个隐私政策模块UserAgreement，这在跟账户操作上都需要用到的模块，包括注册、登录、改密码等等；最后，还有个返回按钮ImageButton01，点击后返回到首页，与捕捉返回键的功能一样。在页面底部，有个按钮模块，是切换到账户密码登录方式用的，从这里也可以看出，现在主流的APP都是默认提倡直接手机登录的，对C端用户比较友好便捷。

四、密码登录

import QtQuick 2.7
import QtQuick.Controls 2.0
import "../base"
//账号密码登录页面
//还有注册和忘记密码两个切换页面SwipeView {signal siqPasswdBackLevel0()id:id_passwdSwipeViewinteractive: false//禁用手滑切换MsgDialog01{id:id_msgDialog}Keys.onPressed: {if(event.key === Qt.Key_Back){console.log("passwd Key_Back!")event.accepted = true;siqPasswdBackLevel0()}}Rectangle{ //账号密码登录页面ImageButton01//返回到验证码登录页面{id:id_backButtonsource: "qrc:/mainImgRC/images/login/back.png"anchors{left:parent.leftleftMargin:20top:parent.toptopMargin:20}onSiqClickedLeft: {siqPasswdBackLevel0()}}HeadView{id:id_headViewtextValue: "密码登录"anchors{horizontalCenter:parent.horizontalCentertop:parent.toptopMargin:60}}BaseText01//账户{id:id_accountTextheight: 50width: parent.width*0.8anchors{horizontalCenter:parent.horizontalCentertop:id_headView.bottomtopMargin:30}placeholderText: "用户名/手机号"maximumLength: 30}BaseText01//密码{ id:id_passwdTextheight: id_accountText.heightwidth: id_accountText.widthanchors{horizontalCenter:parent.horizontalCentertop:id_accountText.bottomtopMargin:10}placeholderText: "密码"maximumLength: 30echoMode: TextInput.Password//密码模式}UserAgreement//隐私政策{id:id_userAgreementanchors{left:id_passwdText.lefttop:id_passwdText.bottomtopMargin:10}}BaseButton02//登录按钮{id:id_loginButtonheight: id_passwdText.heightwidth: id_passwdText.widthanchors{horizontalCenter:parent.horizontalCentertop:id_userAgreement.bottomtopMargin:10}buttonText: "登录"onSiqClickedLeft: {if(id_userAgreement.checkState==0){id_msgDialog.funOpen("请先同意用户协议!")return}theAccountMan.requestLogin(id_accountText.text, id_passwdText.text, 1)}}Rectangle{  //注册+忘记密码  行width: parent.width*0.55height: 40anchors{horizontalCenter:parent.horizontalCentertop:id_loginButton.bottomtopMargin:30}TextButton01{id:id_regTexttextValue: "注册"textColor: "#303030"anchors{verticalCenter:parent.verticalCenterleft:parent.left}onSiqClickedLeft: {id_passwdSwipeView.currentIndex=1//跳转页面}}TextButton01{id:id_forgetTexttextValue: "忘记密码"textColor: "#303030"anchors{verticalCenter:parent.verticalCenterright:parent.right}onSiqClickedLeft: {id_passwdSwipeView.currentIndex=2//跳转页面}}}}RegView //账号注册{onSiqGoBackLevel0:{ id_passwdSwipeView.currentIndex=0}}ForgetView  //忘记密码{onSiqGoBackLevel0:{ id_passwdSwipeView.currentIndex=0}}}

因为有注册和忘记密码两个页面需要切换，所以开头需要使用SwipeView，把密码登录页面收缩起来就是下图的样子，本质上就是3个页面进行切换。密码登录页面跟验证码登录类似，就是内容上有些差异，其中的TextButton01是文字按钮，注册和忘记密码靠这个按钮进行切换的。

五、帐号注册

import QtQuick 2.7
import QtQuick.Controls 2.0
import "../base"//注册帐号页面Rectangle {signal siqGoBackLevel0() MsgDialog01 {id:id_msgDialog}Keys.onPressed: {if(event.key === Qt.Key_Back){console.log("reg Key_Back!")event.accepted = true;siqGoBackLevel0()}}ImageButton01{source: "qrc:/mainImgRC/images/login/back.png"anchors{left:parent.leftleftMargin:20top:parent.toptopMargin:20            }onSiqClickedLeft: {siqGoBackLevel0()}}HeadView {id:id_headViewtextValue: "帐号注册"anchors{horizontalCenter:parent.horizontalCentertop:parent.toptopMargin:60}}BaseText01{ id:id_accountTextheight: 50width: parent.width*0.8anchors{horizontalCenter:parent.horizontalCentertop:id_headView.bottomtopMargin:30}placeholderText: "请输入用户名"maximumLength: 30}BaseText01//密码{id:id_passwdTextheight: id_accountText.heightwidth: id_accountText.widthanchors{horizontalCenter:parent.horizontalCentertop:id_accountText.bottomtopMargin:10}placeholderText: "输入密码"maximumLength: 30echoMode: TextInput.Password//密码模式}BaseText01//确认密码{id:id_confirmTextheight: id_accountText.heightwidth: id_accountText.widthanchors{horizontalCenter:parent.horizontalCentertop:id_passwdText.bottomtopMargin:10}placeholderText: "确认密码"maximumLength: 30echoMode: TextInput.Password//密码模式}BaseText01{id:id_phoneTextheight: 50width: parent.width*0.8anchors{horizontalCenter:parent.horizontalCentertop:id_confirmText.bottomtopMargin:10}placeholderText: "请输入手机号"maximumLength: 11}VerCodeView//验证码模块{id:id_verCodeViewheight: id_phoneText.heightagreeCheckState: id_userAgreement.checkStatephoneNumber: id_phoneText.textanchors{horizontalCenter:parent.horizontalCentertop:id_phoneText.bottomtopMargin:10}}UserAgreement//隐私政策{id:id_userAgreementanchors{left:id_verCodeView.lefttop:id_verCodeView.bottomtopMargin:10}}BaseButton02//注册按钮{id:id_loginButtonheight: id_passwdText.heightwidth: id_passwdText.widthanchors{horizontalCenter:parent.horizontalCentertop:id_userAgreement.bottomtopMargin:10}buttonText: "立即注册"onSiqClickedLeft: {if(id_userAgreement.checkState==0){id_msgDialog.funOpen("请先同意用户协议!")return}var result=theAccountMan.checkAccount(id_accountText.text)if(result===1){id_msgDialog.funOpen("账户名长度不能小于5!")return}else if(result===2){id_msgDialog.funOpen("不能以admin作为账户名!")return}else if(result===3){id_msgDialog.funOpen("不能纯数字作为账户名!")return}result=theAccountMan.checkPasswd(id_passwdText.text)if(result===1){id_msgDialog.funOpen("密码长度要大于8!")return }if(id_passwdText.text!==id_confirmText.text){id_msgDialog.funOpen("两次密码不一致!")return}   var ok=theAccountMan.isPhoneNumber(id_phoneText.text)if(!ok){id_msgDialog.funOpen("请输入正确的手机号!")return}ok=theAccountMan.isNumber(id_verCodeView.verCode)if(ok!==4){id_msgDialog.funOpen("请输入正确的验证码!")return}theAccountMan.requestReg(id_accountText.text, id_passwdText.text, id_phoneText.text, id_verCodeView.verCode, )}}}

帐号注册内容比较多，但是基本就是那几个基础模块的组合了，没什么特殊的东西。基本逻辑是用手机验证码的形式注册新账户。

六、忘记密码

        

import QtQuick 2.7
import QtQuick.Controls 2.0
import "../base"//忘记密码页面Rectangle {signal siqGoBackLevel0() 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.leftleftMargin:20top:parent.toptopMargin:20            }onSiqClickedLeft: {siqGoBackLevel0()}}HeadView {id:id_headViewtextValue: "重置密码"anchors{horizontalCenter:parent.horizontalCentertop:parent.toptopMargin:60}}BaseText01{ id:id_accountTextheight: 50width: parent.width*0.8anchors{horizontalCenter:parent.horizontalCentertop:id_headView.bottomtopMargin:30}placeholderText: "请输入用户名"maximumLength: 30}BaseText01//密码{id:id_passwdTextheight: id_accountText.heightwidth: id_accountText.widthanchors{horizontalCenter:parent.horizontalCentertop:id_accountText.bottomtopMargin:10}placeholderText: "输入密码"maximumLength: 30echoMode: TextInput.Password//密码模式}BaseText01//确认密码{id:id_confirmTextheight: id_accountText.heightwidth: id_accountText.widthanchors{horizontalCenter:parent.horizontalCentertop:id_passwdText.bottomtopMargin:10}placeholderText: "确认密码"maximumLength: 30echoMode: TextInput.Password//密码模式}BaseText01{id:id_phoneTextheight: 50width: parent.width*0.8anchors{horizontalCenter:parent.horizontalCentertop:id_confirmText.bottomtopMargin:10}placeholderText: "请输入手机号"maximumLength: 11}VerCodeView//验证码模块{id:id_verCodeViewheight: id_phoneText.heightagreeCheckState: id_userAgreement.checkStatephoneNumber: id_phoneText.textanchors{horizontalCenter:parent.horizontalCentertop:id_phoneText.bottomtopMargin:10}}UserAgreement//隐私政策{id:id_userAgreementanchors{left:id_verCodeView.lefttop:id_verCodeView.bottomtopMargin:10}}BaseButton02//重置按钮{id:id_loginButtonheight: id_passwdText.heightwidth: id_passwdText.widthanchors{horizontalCenter:parent.horizontalCentertop:id_userAgreement.bottomtopMargin:10}buttonText: "立即重置"onSiqClickedLeft: {if(id_userAgreement.checkState==0){id_msgDialog.funOpen("请先同意用户协议!")return}var result=theAccountMan.checkAccount(id_accountText.text)if(result===1){id_msgDialog.funOpen("账户名长度不能小于5!")return}else if(result===2){id_msgDialog.funOpen("不能以admin作为账户名!")return}result=theAccountMan.checkPasswd(id_passwdText.text)if(result===1){id_msgDialog.funOpen("密码长度要大于8!")return }if(id_passwdText.text!==id_confirmText.text){id_msgDialog.funOpen("两次密码不一致!")return}   var ok=theAccountMan.isPhoneNumber(id_phoneText.text)if(!ok){id_msgDialog.funOpen("请输入正确的手机号!")return}ok=theAccountMan.isNumber(id_verCodeView.verCode)if(ok!==4){id_msgDialog.funOpen("请输入正确的验证码!")return}theAccountMan.requestResetPasswd(id_accountText.text, id_passwdText.text, id_phoneText.text, id_verCodeView.verCode)}}}

        与账户注册类似，也需要手机验证码进行身份确认。