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

鸿蒙小林
• 阅读 6

## 技术栈

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)



  }
}

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

点赞
收藏
评论区
推荐文章
陈杨 陈杨
1个月前
鸿蒙5开发宝藏案例分享---一多开发实例(购物比价)
【鸿蒙开发宝藏案例大公开!】手把手教你用"一多"能力打造跨端购物比价App小伙伴们好呀!今天要和大家分享一个鸿蒙开发的隐藏宝典——官方购物比价应用开发案例!这个藏在开发者文档里的实战教程,简直就是搞定多端开发的通关秘籍!👉一、这些功能也太酷了吧!这个案例
陈杨 陈杨
1个月前
鸿蒙5开发宝藏案例分享---一多开发实例(图片美化)
🌟【鸿蒙开发宝藏案例分享】一次搞定多端适配的图片美化应用开发思路!🌟Hey小伙伴们今天在翻鸿蒙文档时挖到一个超实用的大宝藏!原来官方早就悄悄提供了超多"一多开发"的实战案例,特别是这个图片美化应用的完整实现方案,必须立刻分享给大家!(搓手手.gif)🀀
陈杨 陈杨
1个月前
鸿蒙5开发隐藏案例分享---自由流转的浏览进度接续
✨鸿蒙开发隐藏案例大揭秘!手把手教你玩转应用接续功能✨大家好呀~今天要跟大家分享一个超实用的鸿蒙开发技巧!之前总觉得鸿蒙的官方文档案例藏得太深,最近偶然挖到了「应用接续」相关的宝藏代码,忍不住连夜整理成干货!这篇内容会用最白话的方式超多案例,带大家轻松实
布局王 布局王
19小时前
Uniapp开发鸿蒙购物项目教程之样式选择器
大家下午好,今天依然为大家带来鸿蒙跨平台开发教程的分享,我们本系列的教程最终要做一个购物应用,通过这个项目为大家分享uniapp开发鸿蒙应用从配置开发环境到应用打包上架的完成过程。昨天的文章实现了应用首页的轮播图,其中涉及到为轮播图设置样式,放一小段代码带
鸿蒙小林 鸿蒙小林
12小时前
《仿盒马》app开发技术分享-- 扫一扫功能(35)
技术栈Appgalleryconnect开发准备随着app的逐渐完善,我们现在需要在细节处做更多的打磨,在首页我们添加了很多静态的按钮和组件,现在我们开始对这些组件进行功能的添加,这次首先实现的是首页头部的扫一扫功能,扫一扫我们实现扫码后跳转商品详情页功能
鸿蒙小林 鸿蒙小林
12小时前
《仿盒马》app开发技术分享-- 商品搜索页(顶部搜索bar&热门搜索)(37)
技术栈Appgalleryconnect开发准备随着开发功能的逐渐深入,我们的应用逐渐趋于完善,现在我们需要继续在首页给没有使用按钮以及组件添加对应的功能,这一节我们要实现的功能是商品搜索页面,这个页面我们从上到下开始实现功能,首先就是一个搜索的bar,然
鸿蒙小林 鸿蒙小林
10小时前
《伴时匣》app开发技术分享--用户注册(2)
技术栈Appgalleryconnect开发准备上一节我们已经实现了静态的用户登陆页,这时候我们已经有了用户登录的窗口了,现在我们只需要搞定用户数据的插入,就可以使用登陆功能了,这一节我们就要实现用户注册功能,实现用户的数据插入。这样我们在后续的业务里就可
鸿蒙小林 鸿蒙小林
10小时前
《伴时匣》app开发技术分享--用户登录(3)
技术栈Appgalleryconnect开发准备上一节我们实现了用户数据的提交,我们成功的实现了用户的注册,这一节我们就要根据提交的信息进行登陆验证,在登陆之后我们需要保存当前用户的信息,方便我们后续的使用。功能分析要实现登陆,首先我们需要拿到用户输入的内
鸿蒙小林 鸿蒙小林
10小时前
《伴时匣》app开发技术分享--表单提交准备(4)
技术栈Appgalleryconnect开发准备上一节我们实现了用户登录功能,现在我们进入首页,可以开始准备着手发布我们的日期计划了,在这之前我们先实现信息表的创建。在首页实现一个标题栏,一个悬浮的按钮。功能分析我们的信息表要展示的内容很多,首先是我们的事
鸿蒙小林 鸿蒙小林
10小时前
《伴时匣》app开发技术分享--表单提交页(5)
技术栈Appgalleryconnect开发准备上一节我们已经实现了表单信息的创建,完成了首页跳转表单提交页的内容,这一节我们就要实现表单创建前的数据填充的页面。功能分析在表单提交前,我们要实现的静态内容有很多,分别有输入框,开关,时间选择器,表类型,是否