上次分享过一次注册登录的页面开发，不过不牵扯数据，今天加上数据存储实现一个完整的注册登录流程。
数据存储方式采用比较常用的本地存储方式，用户首选项来实现。
关于界面比较简单，之前的文章已经分享过，所以这里不再赘述，直接贴一个登录界面的代码，注册页面跟它也差不多：
build() {
Stack({alignContent:Alignment.Top}){
Stack({alignContent:Alignment.TopEnd}){
Image($r('app.media.log_img_1'))
.width('100%')
Image($r('app.media.log_img_2'))
.width(200)
.height(200) }
Column(){
Row(){
Image($r('app.media.logo'))
.width(33)
.height(33)
Text('幽蓝计划')
.fontSize(27)
.fontColor(Color.Black)
.fontWeight(FontWeight.Bolder)
.margin({left:10}) }
Text('欢迎登录使用!')
.fontSize(18)
.fontColor('rgba(100, 106, 115, 1)')
.margin({top:8})
TextInput({placeholder:'请输入手机号'})
.placeholderColor('#8F959E')
.fontSize(15)
.fontColor(Color.Black)
.width('100%')
.height(50)
.borderRadius(10)
.borderWidth(1)
.borderColor('#D0D3D5')
.backgroundColor(Color.White)
.margin({top:50})
.onChange((value)=>{
this.telePhone = value
})
Row(){
TextInput({placeholder:'请输入验证码'})
.placeholderColor('#8F959E')
.fontSize(15)
.fontColor(Color.Black)
.width('70%')
.height(50)
.backgroundColor(Color.White)
.onChange((value)=>{
this.psw = value
})
Row(){
}
.width(1)
.height(30)
.backgroundColor('rgba(237, 237, 237, 1)')
.borderRadius(0.5)
Text('获取验证码')
.width('30%')
.height(50)
.fontColor('#FAB84F')
.fontSize(15)
.textAlign(TextAlign.Center)
}
.width('100%')
.height(50)
.borderRadius(10)
.borderWidth(1)
.borderColor('#D0D3D5')
.backgroundColor(Color.White)
.margin({top:25})
Column(){
Text('立即登录')
.width('100%')
.height(50)
.backgroundColor('#FAB84F')
.fontColor(Color.White)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.onClick(()=>{
this.login()
})
}
.margin({top:75})
.width('100%')
.alignItems(HorizontalAlign.Center)
Row(){
Text("没有账号？")
.fontColor('rgba(143, 149, 158, 1)')
.fontSize(14)
Text("立即注册")
.fontColor('#FAB84F')
.fontSize(14)
.onClick(()=>{
router.pushUrl({
url:'pages/Register'
})
})
}
.margin({top:25})
}
.width('100%')
.height('100%')
.alignItems(HorizontalAlign.Start)
.padding({left:30,right:30,top:140})
} .width('100%') .height('100%')}
下面进入数据校验和存储部分，先来初始化一个用户首选项实例：
initData(){
dataPreference.getPreferences(getContext(this),'myStore',(err,preference)=>{
this.localPreference = preference
}
)}
这里的实例化方法有两种方式，除了使用上面的异步操作回调方法之外，还可以使用await来等待异步方法执行完成，不过这样的写的话方法名要加上async：
async initData(){
this.localPreference = await dataPreference.getPreferences(getContext(this),'myStore')
}
同样的，以后所有的异步操作我们都可以采用这种方式。
下一步，在用户输入完成之后我们要先对手机号格式进行验证，这里可以使用正则表达式，如下表达式是验证一个1开头的11位数字：
validTelphone(tel:string){
//正则表达式 1开头的11位整数
const reg = /^1\d{10}$/
return reg.test(tel)
}
然后验证账号是否已经注册：
let hasUser = await this.localPreference!.has('user')
if(hasUser){
let user = await this.localPreference!.get('user','default')
let userItem:User = JSON.parse(user.toString())
if(userItem.username == this.telePhone){
this.showDialog('用户已经存在')
return
}
}
手机号验证完成之后，对密码进行验证，这个比较简单，两次输入一致，6位数就行了。
一切验证完毕，就可以把账号密码存到本地：
this.localPreference!.put('user',JSON.stringify(user),(err)=>{
if(!err){
this.localPreference!.flush((err)=>{
if(!err){
this.showDialog('注册成功',()=>{
router.back()
})
}
})
}
})
然后回到登录部分，登录部分相对简单了，先校验账号密码不为空之后和本地数据进行比对就行了：
dataPreference.getPreferences(getContext(this),'myStore',(err,preference)=>{ preference.has('user',(err,val)=>{ if(val){ preference.get('user','default',(err,value)=>{ let user:User = JSON.parse(value.toString()) if(user.username == this.telePhone && user.psw== this.psw){ EntryAbility.windowStage.loadContent('pages/TabView') }else { this.showDialog('用户名密码不正确') return } }) }else { this.showDialog('用户不存在') return } })})
Top comments (0)