《伴时匣》app开发技术分享--用户登陆页静态（1）

## 技术栈

Appgallery connect

开发准备

大家好，今天给大家带来一个全新的鸿蒙应用，名字叫做伴时匣，意思就是一个陪伴度过时光的匣子，首先来介绍关于伴时匣的整个功能设想，首先呢，就是应用的功能，这个应用主要用来进行倒计时提醒的功能，在这里我们可以发布一些日子作为目标日，通过设置正数倒数来展示我们设置的对应日子，大多数的应用同样也做得到这些，所以我们以用户为主导的思想肯定不仅限于此，我们还要实现关系的绑定，实现我们“伴”的主体思想，我们可以通过绑定已有的关系，查看不同角色之间我们创建的内容。这样我们就兼顾实现了个人，多人共同使用的一个场景。同时在app中还会实现留言功能，让我们的记录多一些小惊喜

功能分析

要实现这样一个应用，我们的技术选型标准就是需要有云端存储功能，并且实现不同设备的数据交互，并且保证数据的实时同步。所以在技术上我们选择使用云数据库来实现

功能开发

话不多说，现在我们就来开始我们伴时匣app的开发，首先我们要实现的是用户相关功能，有了用户，我们才能实现用户信息的处理，从而实现后续的其他功能

我们先进行表的创建

{
  "CloudDBZoneName": "casket",
  "objectTypeName": "user",
  "fields": [
    {"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},
    {"fieldName": "bind_user_id", "fieldType": "Integer"},
    {"fieldName": "bind_type", "fieldType": "Integer"},
    {"fieldName": "user_id", "fieldType": "Integer"},
    {"fieldName": "user_name", "fieldType": "String"},
    {"fieldName": "psw", "fieldType": "String"},
    {"fieldName": "nike_name", "fieldType": "String"},
    {"fieldName": "url", "fieldType": "String"},
    {"fieldName": "sex", "fieldType": "String"},
    {"fieldName": "birthday", "fieldType": "String"},
    {"fieldName": "phone", "fieldType": "String"}

  ],
  "indexes": [
    {"indexName": "field1Index", "indexList": [{"fieldName":"id","sortType":"ASC"}]}

  ],
  "permissions": [
    {"role": "World", "rights": ["Read", "Upsert", "Delete"]},
    {"role": "Authenticated", "rights": ["Read", "Upsert", "Delete"]},
    {"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},
    {"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}
  ]
}

创建实体类

class User {
    id: number;
    bind_user_id: number;
    bind_type: number;
    user_id: number;
    user_name: string;
    psw: string;
    nike_name: string;
    url: string;
    sex: string;
    birthday: string;
    phone: string;

    constructor() {
    }


    setId(id: number): void {
        this.id = id;
    }

    getId(): number  {
        return this.id;
    }

    setBind_user_id(bind_user_id: number): void {
        this.bind_user_id = bind_user_id;
    }

    getBind_user_id(): number  {
        return this.bind_user_id;
    }

    setBind_type(bind_type: number): void {
        this.bind_type = bind_type;
    }

    getBind_type(): number  {
        return this.bind_type;
    }

    setUser_id(user_id: number): void {
        this.user_id = user_id;
    }

    getUser_id(): number  {
        return this.user_id;
    }

    setUser_name(user_name: string): void {
        this.user_name = user_name;
    }

    getUser_name(): string  {
        return this.user_name;
    }

    setPsw(psw: string): void {
        this.psw = psw;
    }

    getPsw(): string  {
        return this.psw;
    }

    setNike_name(nike_name: string): void {
        this.nike_name = nike_name;
    }

    getNike_name(): string  {
        return this.nike_name;
    }

    setUrl(url: string): void {
        this.url = url;
    }

    getUrl(): string  {
        return this.url;
    }

    setSex(sex: string): void {
        this.sex = sex;
    }

    getSex(): string  {
        return this.sex;
    }

    setBirthday(birthday: string): void {
        this.birthday = birthday;
    }

    getBirthday(): string  {
        return this.birthday;
    }

    setPhone(phone: string): void {
        this.phone = phone;
    }

    getPhone(): string  {
        return this.phone;
    }

}

export { User };

创建db类

import { cloudDatabase } from '@kit.CloudFoundationKit';

class user extends cloudDatabase.DatabaseObject {
  public id: number;
  public bind_user_id: number;
  public bind_type: number;
  public user_id: number;
  public user_name: string;
  public psw: string;
  public nike_name: string;
  public url: string;
  public sex: string;
  public birthday: string;
  public phone: string;

  public naturalbase_ClassName(): string {
    return 'user';
  }
}

export { user };

然后我们先来实现一个基础的登陆页面

import promptAction from '@ohos.promptAction';
import { router } from '@kit.ArkUI';
import { CommonTopBar } from '../widget/CommonTopBar';


@Entry
@Component
struct LoginPage {

  aboutToAppear(){
  }
  @State acc:string = ''
  @State psw:string = ''
  controller: TextInputController = new TextInputController()

  async login(): Promise<void>{
    if (this.acc===''&&this.psw==='') {
      promptAction.showToast({message:"请输入账号或密码"})
      return
    }else {

    }
  }



  build() {
    Column({space:20}) {
      CommonTopBar({ title: "登录", alpha: 0, titleAlignment: TextAlign.Center ,backButton:false})
      Column() {
        Image($r("app.media.logo"))
          .width(120).height(120).borderRadius(60)

        TextInput({text:this.acc,
          placeholder: '请输入账号'
        })
          .backgroundColor("#f6f6f6")
          .placeholderColor("#ff999595")
          .fontColor("#333333")
          .maxLength(11)
          .type(InputType.Number)
          .onChange((value: String) => {
            this.acc = value.toString()
          }).margin(20)

        TextInput({text:this.psw,
          placeholder: '请输入密码'
        })
          .backgroundColor("#f6f6f6")
          .placeholderColor("#ff999595")
          .fontColor("#333333")
          .type(InputType.Password)
          .onChange((value: String) => {
            this.psw = value.toString()
          }).margin(20)

        Row() {
          Text('用户注册')
            .fontColor("#ff65c8ee")
            .fontSize(14)
            .margin(30)
            .onClick(()=>{
              router.pushUrl({url:'pages/user/RegisterPage'})
            })

        }
        .width('100%')
        .justifyContent(FlexAlign.End)



        Button('登陆',{type:ButtonType.Capsule,stateEffect:false})
          .onClick(()=>{
            this.login()
          })
          .fontColor(Color.White)
          .width('80%')
          .height(40)
          .backgroundColor("#ff65c8ee")
      }
      .width('100%')}
    .height('100%')
    .backgroundColor('#FFFFFF')
    .justifyContent(FlexAlign.Start)



  }
}

到这里我们就实现了用户的静态登陆页