《伴时匣》app开发技术分享--表单提交准备（4）

## 技术栈

Appgallery connect

## 开发准备

上一节我们实现了用户登录功能，现在我们进入首页，可以开始准备着手发布我们的日期计划了，在这之前我们先实现信息表的创建。在首页实现一个标题栏，一个悬浮的按钮。

## 功能分析

我们的信息表要展示的内容很多，首先是我们的事件名称，目标日期选择，公历农历，正数倒数，倒数类目的选择，是否实现置顶效果，是否显示精确时间，事件颜色，事件图标，事件心情，事件天气，跟用户绑定，跟绑定的关系用户绑定等。

## 功能开发

我们先实现对应的表的创建

```c

{

"objectTypeName": "push_table_day",

"fields": [

{"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},

{"fieldName": "user_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0},

{"fieldName": "title", "fieldType": "String"},

{"fieldName": "day", "fieldType": "String"},

{"fieldName": "time_type", "fieldType": "Integer"},

{"fieldName": "menu_id", "fieldType": "Integer"},

{"fieldName": "is_show_top", "fieldType": "Boolean"},

{"fieldName": "is_show_time", "fieldType": "Boolean"},

{"fieldName": "tab_color_id", "fieldType": "Integer"},

{"fieldName": "tab_icon_id", "fieldType": "Integer"},

{"fieldName": "tab_mood_id", "fieldType": "Integer"},

{"fieldName": "tab_weather_id", "fieldType": "Integer"},

{"fieldName": "bind_user_id", "fieldType": "Integer"},

{"fieldName": "bind_type", "fieldType": "Integer"},

{"fieldName": "table_message_id", "fieldType": "Integer"}

],

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

]

}

```

db类

```c

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

class push_table_day extends cloudDatabase.DatabaseObject {

public id: number;

public user_id = 0;

public title: string;

public day: string;

public time_type: number;

public menu_id: number;

public is_show_top: boolean;

public is_show_time: boolean;

public tab_color_id: number;

public tab_icon_id: number;

public tab_mood_id: number;

public tab_weather_id: number;

public bind_user_id: number;

public bind_type: number;

public table_message_id: number;

public naturalbase_ClassName(): string {

return 'push_table_day';

}

}

export { push_table_day };

```

实体类

```c

class PushTableDay {

id: number;

user_id: number = 0;

title: string;

day: string;

time_type: number;

menu_id: number;

is_show_top: boolean;

is_show_time: boolean;

tab_color_id: number;

tab_icon_id: number;

tab_mood_id: number;

tab_weather_id: number;

bind_user_id: number;

bind_type: number;

table_message_id: number;

constructor() {

}

setId(id: number): void {

this.id = id;

}

getId(): number {

return this.id;

}

setUser_id(user_id: number): void {

this.user_id = user_id;

}

getUser_id(): number {

return this.user_id;

}

setTitle(title: string): void {

this.title = title;

}

getTitle(): string {

return this.title;

}

setDay(day: string): void {

this.day = day;

}

getDay(): string {

return this.day;

}

setTime_type(time_type: number): void {

this.time_type = time_type;

}

getTime_type(): number {

return this.time_type;

}

setMenu_id(menu_id: number): void {

this.menu_id = menu_id;

}

getMenu_id(): number {

return this.menu_id;

}

setIs_show_top(is_show_top: boolean): void {

this.is_show_top = is_show_top;

}

getIs_show_top(): boolean {

return this.is_show_top;

}

setIs_show_time(is_show_time: boolean): void {

this.is_show_time = is_show_time;

}

getIs_show_time(): boolean {

return this.is_show_time;

}

setTab_color_id(tab_color_id: number): void {

this.tab_color_id = tab_color_id;

}

getTab_color_id(): number {

return this.tab_color_id;

}

setTab_icon_id(tab_icon_id: number): void {

this.tab_icon_id = tab_icon_id;

}

getTab_icon_id(): number {

return this.tab_icon_id;

}

setTab_mood_id(tab_mood_id: number): void {

this.tab_mood_id = tab_mood_id;

}

getTab_mood_id(): number {

return this.tab_mood_id;

}

setTab_weather_id(tab_weather_id: number): void {

this.tab_weather_id = tab_weather_id;

}

getTab_weather_id(): number {

return this.tab_weather_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;

}

setTable_message_id(table_message_id: number): void {

this.table_message_id = table_message_id;

}

getTable_message_id(): number {

return this.table_message_id;

}

}

export { PushTableDay };

```

我们实现首页标题栏和悬浮添加按钮

```c

import { CommonTopBar } from './widget/CommonTopBar'

@Entry

@Component

struct Index {

build() {

Column(){

CommonTopBar({ title: "主页", alpha: 0, titleAlignment: TextAlign.Center ,backButton:false})

Stack({alignContent:Alignment.BottomEnd}){

Column(){

List(){

}

}

.height('100')

.width('100%')

Text("+")

.fontSize(38)

.width(60)

.textAlign(TextAlign.Center)

.backgroundColor("#ff65c8ee")

.fontWeight(FontWeight.Bold)

.fontColor(Color.Black)

.height(60)

.borderRadius(30)

.margin({bottom:80,right:40})

}

.height('100%')

.width('100%')

}

.height('100%')

.width('100%')

.backgroundColor(Color.White)

}

}

```

这样我们就完成了表单的创建和标题栏悬浮按钮的实现