《伴时匣》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)
}
}
```
到这里我们就实现了用户的静态登陆页
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/70046889/viewspace-3089426/ ，如需转载，请注明出处，否则将追究法律责任。
