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

## 技术栈

Appgallery connect

## 开发准备

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

## 功能分析

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

## 功能开发

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

我们先进行表的创建

```c

{

"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"]}

]

}

```

创建实体类

```c

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类

```c

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 };

```

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

```c

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)

}

}

```

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