阿里巴巴的网站怎么做的,建筑企业管理咨询公司是做什么的,网站建设的流程是什么,台州网站如何制作目录
一、界面框架
二、首页(未登录)
三、验证码登录
四、密码登录
五、帐号注册
六、忘记密码 本项目的交流QQ群:701889554
物联网实战--入门篇https://blog.csdn.net/ypp240124016/category_12609773.html
物联网实战--驱动篇https://blog.csdn.net/ypp240124016/cat…目录
一、界面框架
二、首页(未登录)
三、验证码登录
四、密码登录
五、帐号注册
六、忘记密码 本项目的交流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(pressTime0){pressTime--}}}Keys.onPressed: {if(event.key Qt.Key_Back){console.log(login Key_Back!)if(pressTime0){console.log(app quit!)Qt.quit()}else{pressTime2event.accepted true;id_msgDialog.funOpen(再按一次退出!) }}}CenterSwipeView //控制中心界面{id:id_centerSwipeView}LoginSwipeView //登录界面{id:id_loginSwipeViewonSiqLoginBackLevel1://登录界面返回按钮{id_mainSwipeView.currentIndex0}}Component.onCompleted: {}Connections{target: theAccountManonSiqSetLoginState:{console.log(set login state, state)if(state0)//登录成功{id_mainSwipeView.currentIndex0}else//去登录{id_mainSwipeView.currentIndex1}}onSiqShowMsg:{id_msgDialog.funOpen(msg)}}function funSetFocus(){focustrue}} 二、首页(未登录) 这是未登录的首页页面第一次打开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: blacktext:端点物联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: blacktext:我的设备}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.pnganchors{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.checkState0){id_msgDialog.funOpen(请先同意用户协议!)return}var oktheAccountMan.isPhoneNumber(id_phoneText.text)if(!ok){id_msgDialog.funOpen(请输入正确的手机号!)return}oktheAccountMan.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: #F0F0F0pressedColor: #E0E0E0buttonColor:#505050anchors{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.pnganchors{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.checkState0){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: #303030anchors{verticalCenter:parent.verticalCenterleft:parent.left}onSiqClickedLeft: {id_passwdSwipeView.currentIndex1//跳转页面}}TextButton01{id:id_forgetTexttextValue: 忘记密码textColor: #303030anchors{verticalCenter:parent.verticalCenterright:parent.right}onSiqClickedLeft: {id_passwdSwipeView.currentIndex2//跳转页面}}}}RegView //账号注册{onSiqGoBackLevel0:{ id_passwdSwipeView.currentIndex0}}ForgetView //忘记密码{onSiqGoBackLevel0:{ id_passwdSwipeView.currentIndex0}}}
因为有注册和忘记密码两个页面需要切换所以开头需要使用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.pnganchors{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.checkState0){id_msgDialog.funOpen(请先同意用户协议!)return}var resulttheAccountMan.checkAccount(id_accountText.text)if(result1){id_msgDialog.funOpen(账户名长度不能小于5!)return}else if(result2){id_msgDialog.funOpen(不能以admin作为账户名!)return}else if(result3){id_msgDialog.funOpen(不能纯数字作为账户名!)return}resulttheAccountMan.checkPasswd(id_passwdText.text)if(result1){id_msgDialog.funOpen(密码长度要大于8!)return }if(id_passwdText.text!id_confirmText.text){id_msgDialog.funOpen(两次密码不一致!)return} var oktheAccountMan.isPhoneNumber(id_phoneText.text)if(!ok){id_msgDialog.funOpen(请输入正确的手机号!)return}oktheAccountMan.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.pnganchors{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.checkState0){id_msgDialog.funOpen(请先同意用户协议!)return}var resulttheAccountMan.checkAccount(id_accountText.text)if(result1){id_msgDialog.funOpen(账户名长度不能小于5!)return}else if(result2){id_msgDialog.funOpen(不能以admin作为账户名!)return}resulttheAccountMan.checkPasswd(id_passwdText.text)if(result1){id_msgDialog.funOpen(密码长度要大于8!)return }if(id_passwdText.text!id_confirmText.text){id_msgDialog.funOpen(两次密码不一致!)return} var oktheAccountMan.isPhoneNumber(id_phoneText.text)if(!ok){id_msgDialog.funOpen(请输入正确的手机号!)return}oktheAccountMan.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)}}}与账户注册类似也需要手机验证码进行身份确认。
