HarmonyOS 鸿蒙Next：玩转HarmonyOS（一） 用户登录和注册 《注册界面以及接口请求实现》

好的，接下来来到了我们用户登录注册的第二个小阶段，在上一节我们实现了用户的登录界面，因为我们并没有进行用户的登录请求验证，所以只实现了静态的页面，写起来也相对简单，这一节我们实现注册页面的ui以及接口请求的业务逻辑

开发准备

注册页面的逻辑相对简单，因为我们要通过接口去实现业务逻辑，所以我们要先对接口进行分析，来查看我们都需要传递什么参数，我们的页面也要进行相应的组件和逻辑实现

接口如下所示：
https://www.wanandroid.com/user/register
方法：POST
参数 username,password,repassword

可以看到我们已经有了接口地址信息、请求方式、还有所需要的参数

那么我们想要实现注册就需要实现下列功能
1.http网络请求
2.拿到用户名和密码以及密码校验

3.在页面上输入这些信息并且提交保存

代码实现

首先就是页面上的ui组件
 

我们先定义好需要的变量：
 

@State name: string = ‘’;
@State pass: string = ‘’;
@State repass:string=’’
controller: TextInputController = new TextInputController()
@State msg: string = ‘’
@State btnenabled: boolean = true;

Column() {

Text(“玩鸿蒙用户注册”)
.fontSize(38)
.fontWeight(FontWeight.Bold)
.fontColor(’#4a9deb’)
.margin({top:30})
Text(“WANHARMONY”)
.fontSize(20)
.margin({top:10})
.fontWeight(FontWeight.Bold)
.fontColor(’#4a9deb’)
Text()
.height(60)
Row(){
Image($r(‘app.media.yonghu’))
.height(18)
.width(18)
TextInput({ text: this.name, placeholder: '输入账号', controller: this.controller })
  .placeholderFont({ size: 16, weight: 400 })
  .width(180)
  .height(35)
  .maxLength(12)
  .type((InputType.Number))
  .backgroundColor("#f8f8f8")
  .onChange((value: string) => {
    this.name = value
  })
  .margin({left:10})
}
.padding({left:20})
.width(‘80%’)
.borderRadius(20)
.backgroundColor("#f8f8f8")
Row(){
Image($r(‘app.media.mima’))
.height(18)
.width(18)
TextInput({ text: this.pass, placeholder: '输入密码', controller: this.controller })
  .placeholderFont({ size: 16, weight: 400 })
  .width(180)
  .height(35)
  .backgroundColor("#f8f8f8")
  .maxLength(12)
  .showPasswordIcon(false)
  .type((InputType.Password))
 
  .onChange((value: string) => {
    this.pass = value
  })
}
.margin({top:20})
.padding({left:20})
.width(‘80%’)
.borderRadius(20)
.backgroundColor("#f8f8f8")
Row(){
Image($r(‘app.media.mima’))
.height(18)
.width(18)
TextInput({ text: this.repass, placeholder: '确认密码', controller: this.controller })
  .placeholderFont({ size: 16, weight: 400 })
  .width(180)
  .height(35)
  .backgroundColor("#f8f8f8")
  .maxLength(12)
  .showPasswordIcon(false)
  .type((InputType.Password))
 
  .onChange((value: string) => {
    this.repass = value
  })
}
.margin({top:20})
.padding({left:20})
.width(‘80%’)
.borderRadius(20)
.backgroundColor("#f8f8f8")
Text("")
.width(‘100%’)
.height(45)
.textAlign(TextAlign.End)
.fontColor("#4a9deb")
Button(“注 册”)
.type(ButtonType.Normal)
.backgroundColor(’#4a9deb’)
.width(‘75%’)
.fontSize(20)
.height(50)
.margin({top:10})
.borderRadius(5)
.enabled(this.btnenabled)
.onClick(() => {
  if (this.name==''&&this.pass=='') {
    showToast("用户名和密码不能为空")
  }else {
    
  }
})
}

执行之后可以在预览器上看到页面实现如下

通过定义的变量跟组件的绑定我们已经能拿到输入的内容了

页面完成之后呢我们需要吧输入的数据通过网络请求进行传输，让服务器端去校验，这里我们选择使用三方仓库比较火的axios网络请求库，在403以上的开发工具中应该是已经内置了，我们直接导入就可以使用，导入成功后我们先进行接口请求

在postman上测试后发现可以通过x-www-form-urlencoded的格式请求成功，并且成功失败的返回信息如下

失败：

{ “data”: null, “errorCode”: -1, “errorMsg”: “用户名已经被注册！” }

成功

{

“data”: {

“admin”: false,

“chapterTops”: [],

“coinCount”: 0,

“collectIds”: [],

“email”: “”,

“icon”: “”,

“id”: 163554,

“nickname”: “w w w123”,

“password”: “”,

“publicName”: “w w w123”,

“token”: “”,

“type”: 0,

“username”: “w w w123”

},

“errorCode”: 0,

“errorMsg”: “”

}

拿到了数据类型我们就创建相对应的实体类

export interface User {
  admin: boolean;
  chapterTops: ESObject[];
  coinCount: number;
  collectIds: ESObject[];
  email: string;
  icon: string;
  id: number;
  nickname: string;
  password: string;
  publicName: string;
  token: string;
  type: number;
  username: string;
}

export interface ServerResponse {
  data: User;
  errorCode: number;
  errorMsg: string;
}
我们使用这个实体来接收数据，进行逻辑判断

private userLogin(userInfo: loginData){


  axios({ url: BASE_URL+"/"+USER_REGISTER, method: ‘post’, params: { username: userInfo.username, password: userInfo.password, repassword:userInfo.repassword} })
    .then((response: AxiosResponse<string>) => {

      console.info(JSON.stringify(response));
      let responseObject:ServerResponse = JSON.parse(JSON.stringify(response));
      if (responseObject.errorCode==0) {
        showToast(“注册成功”)
        router.back()
      }else {
        showToast(responseObject.errorMsg)
      }
    })
    .catch((error:Error) => {
      console.info(JSON.stringify(error));
    });
}

通过对errorCode的值来判断成功失败，分别返回登录页和弹出提示，这样用户的注册就实现了

接下来我们回到登录页面，对我们注册的账号进行请求和业务逻辑处理

因为我们已经写好了页面并且获取到了输入的内容，所以只需要对网络请求进行处理就好了

private userLogin(userInfo: loginData){


  axios({ url: BASE_URL+"/"+USER_LOGIN, method: ‘post’, params: { username: userInfo.username, password: userInfo.password} })
    .then((response: AxiosResponse<string>) => {

      console.info(JSON.stringify(response));
      let responseObject:ServerResponse = JSON.parse(JSON.stringify(response.data));
      if (responseObject.errorCode==0) {
        showToast(“用户登录成功”)
        router.pushUrl({url:“pages/TabPage”})
      }else {
        showToast(responseObject.errorMsg)
      }
    })
    .catch((error:Error) => {
      console.info(JSON.stringify(error));
    });
}

到这里我们就实现了登录和注册功能了