鸿蒙项目二—— 注册和登录

此部分和上篇文章是连续剧，如果需要，请查看

一、注册

import http from '@ohos.net.http';
@Entry
@Component
struct Reg {

  // 定义数据：
  @State username: string = "";
  @State userpass: string = "";
  @State userpass2: string = "";
  @State usernameColor: number = 0x000000;
  @State userpassColor: number = 0x000000;
  @State userpass2Color: number = 0x000000;

  // 表单验证是否成功：
  formIsSuccess() {
    return this.username.trim() !== "" && this.userpass.trim() !== "" && this.userpass2.trim() !== "" && this.userpass === this.userpass2
  }

  regSave() {
    //   1、非空验证
    if (this.username.trim() == "") {
      console.log("用户名不能为空")
      this.usernameColor = 0xff0000;
      return;
    }

    if (this.userpass.trim() == "") {
      console.log("密码不能为空")
      this.userpassColor = 0xff0000;
      return;
    }
    if (this.userpass2.trim() == "") {
      console.log("确认密码不能为空")
      this.userpass2Color = 0xff0000;
      return;
    }
    //   2、密码是否一致

    //   3、发送请求，进行注册
    const httpRequest = http.createHttp();
    httpRequest.request("http://localhost:3000/vips", {
      method: http.RequestMethod.POST, // 可选，默认为http.RequestMethod.GET
      // 开发者根据自身业务需要添加header字段
      header: {
        'Content-Type': 'application/json'
      },
      // 当使用POST请求时此字段用于传递内容
      extraData: {
          username:this.username,
          userpass:this.userpass
      },
      connectTimeout: 60000, // 可选，默认为60s
      readTimeout: 60000, // 可选，默认为60s
    },(err,data)=>{
        if(!err){
          console.log("data.result",data.result)
          console.log("data.responseCode",data.responseCode)
          if(data.responseCode==201){
            console.log("注册成功")
          }
        }
    })
  }

  build() {
    Column() {
      Row() {
        Image($r("app.media.back")).width(50).height(30).margin(20)
      }
      .width("100%")
      .height(60)

      Blank().height(50)
      Row() {
        Text("欢迎您的注册")
          .fontSize(40)
          .fontWeight(FontWeight.Bold)
      }

      Row() {
        Text("用户名：").fontSize(20).fontWeight(400)
        TextInput({ placeholder: "请输入用户名", text: this.username }).width(260).height(40)
          .placeholderColor(this.usernameColor)
          .onChange((val: string) => {
            this.username = val;
          })
      }.width("100%")
      .height(60)
      .margin({
        top: 20
      })

      Row() {
        Text("密    码：").fontSize(20).fontWeight(400)
        TextInput({ placeholder: "请输入密码", text: this.userpass })
          .type(InputType.Password)
          .width(260)
          .height(40)
          .placeholderColor(this.userpassColor)
          .onChange((val: string) => {
            this.userpass = val;
          })
      }.width("100%")
      .height(60)
      .margin({
        top: 10
      })

      Row() {
        Text("确认密码：").fontSize(20).fontWeight(400)
        TextInput({ placeholder: "请输入确认密码", text: this.userpass2 })
          .type(InputType.Password)
          .width(260)
          .height(40)
          .placeholderColor(this.userpass2Color)
          .onChange((val: string) => {
            this.userpass2 = val;
          })
      }.width("100%")
      .height(60)
      .margin({
        top: 10
      })

      Row() {
        if (this.userpass !== this.userpass2) {
          Text("两次密码不一致").fontSize(20).fontColor(Color.Red);
        }
      }

      Button("注册")
        .width("90%")
        .height(60)
        .margin({
          top: 10
        })
        .fontSize(30)
        .fontWeight(600)
        .enabled(this.formIsSuccess())
        .onClick(() => {
          this.regSave();
        })

      Blank().height(100)
      Row() {
        Text("--第三方账号登录--")
      }.margin({
        bottom: 20
      })

      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Image($r("app.media.qq")).width(40).height(40)
        Image($r("app.media.weixin")).width(40).height(40)
        Image($r("app.media.weibo")).width(40).height(40)
      }.width("100%")
      .height(60)

    }
    .width('100%')
  }
}

二、登录

本地存储用户信息的文件：

`utils/globaldata.ts`

export const storage:LocalStorage = new LocalStorage();

页面代码：


import http from '@ohos.net.http';
import router from '@ohos.router';
import {storage} from '../utils/globaldata';

interface IParams{
  from:string,
  data:string
}

@Entry
@Component
struct Login {

  // 定义数据：
  @State username: string = "";
  @State userpass: string = "";
  @State phone:string="";

  @State usernameColor: number = 0x000000;
  @State userpassColor: number = 0x000000;

  // 表单验证是否成功：
  formIsSuccess() {
    return this.username.trim() !== "" && this.userpass.trim() !== "";
  }

  loginCheck() {
    //   1、非空验证
    if (this.username.trim() == "") {
      console.log("用户名不能为空")
      this.usernameColor = 0xff0000;
      return;
    }

    if (this.userpass.trim() == "") {
      console.log("密码不能为空")
      this.userpassColor = 0xff0000;
      return;
    }

    //3、发送请求，进行登录
    const httpRequest = http.createHttp();

    // get请求，给后端传递数据的方式一：
    // 请求地址?属性名1=属性值1&属性名2=属性值2
    httpRequest.request(`http://localhost:3000/vips?username=${this.username}&userpass=${this.userpass}`,(err,data)=>{
      // !err 只是表示请求响应没有问题，不代表是否获取到了数据
      if(!err){
        console.log("data.result",data.result)
        const arr = JSON.parse(data.result as string)
        if(arr.length===1){
          console.log("登录成功");
          // 保存登录的相关信息（如：用户名，电话号码）
          storage.setOrCreate("username",this.username);
          storage.setOrCreate("phone",this.phone);
          console.log("from",(router.getParams() as IParams).from)
          // 跳转到我的页面。
          // router.back();
          router.pushUrl({
            url:(router.getParams() as IParams).from,
            params:{
              data:(router.getParams() as IParams).data
            }
          })
        }else{
          console.log("登录失败，用户名或密码不正确")
        }
      }else{
        console.log("网络出错")
      }
    })
  }

  build() {
    Column() {
      Row() {
        Image($r("app.media.back")).width(50).height(30).margin(20).onClick(()=>{
          router.back();
        })
      }
      .width("100%")
      .height(60)

      Blank().height(50)
      Row() {
        Text("亲，请登录")
          .fontSize(40)
          .fontWeight(FontWeight.Bold)
      }

      Row() {
        Text("用户名：").fontSize(20).fontWeight(400)
        TextInput({ placeholder: "请输入用户名", text: this.username }).width(260).height(40)
          .placeholderColor(this.usernameColor)
          .onChange((val: string) => {
            this.username = val;
          })
      }.width("100%")
      .height(60)
      .margin({
        top: 20
      })

      Row() {
        Text("手机号码：").fontSize(20).fontWeight(400)
        TextInput({ placeholder: "请输入手机号", text: this.phone }).width(260).height(40)
          .placeholderColor(this.usernameColor)
          .onChange((val: string) => {
            this.phone = val;
          })
      }.width("100%")
      .height(60)
      .margin({
        top: 20
      })

      Row() {
        Text("密    码：").fontSize(20).fontWeight(400)
        TextInput({ placeholder: "请输入密码", text: this.userpass })
          .type(InputType.Password)
          .width(260)
          .height(40)
          .placeholderColor(this.userpassColor)
          .onChange((val: string) => {
            this.userpass = val;
          })
      }.width("100%")
      .height(60)
      .margin({
        top: 10
      })

      Button("登录")
        .width("90%")
        .height(60)
        .margin({
          top: 10
        })
        .fontSize(30)
        .fontWeight(600)
        .enabled(this.formIsSuccess())
        .onClick(() => {
          this.loginCheck();
        })

      Blank().height(100)
      Row() {
        Text("--第三方账号登录--")
      }.margin({
        bottom: 20
      })

      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Image($r("app.media.qq")).width(40).height(40)
        Image($r("app.media.weixin")).width(40).height(40)
        Image($r("app.media.weibo")).width(40).height(40)
      }.width("100%")
      .height(60)

    }
    .width('100%')
  }
}