【最新鸿蒙应用开发】——使用axios完成手机号注册业务

使用Axios请求实现目标效果图：

短信验证码登录

1. 校验图形验证码，校验通过

2. 发送短信验证码到用户手机上，可通过在线 WebSocket查看：wss://guardian-api.itheima.net/verifyCode

3. 根据 手机号 + 短信验证码 实现登录

更新图形验证码

准备一个 @State，用于更新图形验证码

手机号+验证码登录

获取图形验证码

  // 校验图形验证码
  async onGraphicCodeSubmit() {
    try {
      // 1. 把手机号，图形验证码发送到后端，校验图形验证码（防机器）
      await postCodeGraphicCheckAPI({
        bizType: BizType.PhoneLogin, // 业务类型，1：手机号短信验证码登录
        phone: this.phoneNumber, // 手机号
        verifyCode: this.graphicCode // 图形验证码
      })
      // 2. 关闭半模态转场
      this.isShowSheet = false
      // 3. 清空输入框
      this.graphicCode = ''
      // 4. 调用发送短信接口
      this.onSendSmsCode()
    } catch (error) {
      // 刷新验证码
      this.timestamp = Date.now()
    }
  }
​
  // 半模态转场
  @Builder
  SheetBuilder() {
    Column() {
      Text('图形验证码')
        .fontSize(16)
        .fontColor($r('app.color.font'))
        .margin({ top: 20, bottom: 50 })
​
      Column({ space: 20 }) {
        Row({ space: 10 }) {
          TextInput({ placeholder: '图形验证码' })
            .fontSize(14)
            .height(42)
            .layoutWeight(1)
            .maxLength(4)
            .onChange((value) => {
              this.graphicCode = value
            })
            .onSubmit(() => {
              // 提交图形验证码
              this.onGraphicCodeSubmit()
            })
          Image(`${BASE_URL}/code/graphic?phone=${this.phoneNumber}&bizType=${BizType.PhoneLogin}&timestamp=${this.timestamp}`)
            .width(108)
            .height(42)
            .objectFit(ImageFit.Contain)
            .onClick(() => {
              this.timestamp = Date.now()
            })
        }
​
        Button("提交")
          .height(42)
          .backgroundColor($r('app.color.brand'))
          .width('100%')
          .enabled(this.graphicCode.length > 0)
          .onClick(() => {
            // 提交图形验证码
            this.onGraphicCodeSubmit()
          })
      }
    }
    .padding({ left: 30, right: 30 })
    .width('100%')
    .height('100%')
  }
​
​
.bindSheet($$this.isShowSheet, this.SheetBuilder(), {
  // 半模态转场,屏幕高度一半，无法修改关闭图标样式
  detents: [SheetSize.MEDIUM],
  backgroundColor: $r('app.color.white')
})

发送短信验证码

1、发送验证码

2、开始倒计时

3、验证码可以通过接口文档的 WebScoket 测试接口获取，模拟手机收到短信。

可通过 在线 WebSocket 工具，模拟查看验证码信息： 服务连接地址 wss://guardian-api.itheima.net/verifyCode

// 发送短信验证码

async onSendSmsCode() {

// 发送验证码

await postCodeSmsSendAPI({

bizType: BizType.PhoneLogin,

phone: this.phoneNumber,

})

// 用户提醒

promptAction.showToast({ message: '短信发送到手机上，请注意查收' })

// 界面更新倒计时

this.startCountDown()

}

// 开始倒计时

startCountDown() {

// 初始化倒计时秒数

this.count = 120

// 关闭旧的定时器

clearInterval(this.intervalID)

// 开启定时器

this.intervalID = setInterval(() => {

this.count--

if (this.count <= 0) {

clearInterval(this.intervalID)

}

}, 1000)

}

// 页面销毁，停止倒计时，释放资源

aboutToDisappear() {

clearInterval(this.intervalID)

}

登录提交

1、登录成功持久化存储用户信息

2、axios 拦截器添加 token 信息

// 用户信息持久化

@StorageLink(LOGIN_INFO) loginInfo: LoginInfoResponse = {}

// 登录提交

async onLoginSubmit() {

const res = await postUserLoginVerifyCodeAPI({

phone: this.phoneNumber,

verifyCode: this.verifyCode

})

//

promptAction.showToast({ message: '登录成功' })

// 更新持久化存储的信息

this.loginInfo = res.data.result

// 返回上一页

router.back()

}

3、pages/Index.ets 初始化持久化存储

// 持久化存储

PersistentStorage.persistProp<PrivacySettings>(PRIVACY_SETTINGS, {})

PersistentStorage.pers