HarmonyOS NEXT 关系型数据库开发(登录、注册示例)

29 阅读2分钟

1.DatabaseUtil.ets

import relationalStore from '@ohos.data.relationalStore';
import {User} from '../entity/User'

class DatabaseUtil{
  // 方案1:使用非空断言操作符
  rdbStore!: relationalStore.RdbStore;

  createDataStore() {
    let context = getContext(this)
    const SQL = "CREATE TABLE IF NOT EXISTS " +
      "user(id INTEGER PRIMARY KEY AUTOINCREMENT,name TEXT NOT NULL," +
      "password TEXT, age INTEGER)"
    let config: relationalStore.StoreConfig = {
      name: 'user.db',
      securityLevel: relationalStore.SecurityLevel.S1
    }
    relationalStore.getRdbStore(context, config, (err, data) => {
      if (err) {
        console.log("创建RdbStore出错" + err)
        return
      }
      this.rdbStore = data
      this.rdbStore.executeSql(SQL)
    })
  }

  // 添加数据库初始化检查的辅助方法
  private checkRdbStore(): boolean {
    if (!this.rdbStore) {
      console.error("Database not initialized. Please call createDataStore() first.")
      return false
    }
    return true
  }

  insert(user: User) {
    if (!this.checkRdbStore()) return

    const valueBucket: relationalStore.ValuesBucket = {
      "name": user.name,
      "password": user.password,
      "age": user.age
    }
    this.rdbStore.insert('user', valueBucket, (err, num) => {
      if (err) {
        console.log("add user failed")
        return
      }
      console.log("add user success id=" + num)
    })
  }

  async findUser(name: string): Promise<User | undefined> {
    if (!this.checkRdbStore()) return undefined

    let predicate = new relationalStore.RdbPredicates('user')
    predicate.equalTo('name', name)
    let resultSet = await this.rdbStore.query(predicate, ['id', 'name', 'password', 'age'])

    if (resultSet.isAtLastRow) {
      console.log("user not find")
      resultSet.close() // 记得关闭结果集
      return undefined
    }

    resultSet.goToNextRow()
    let user = new User(
      resultSet.getLong(resultSet.getColumnIndex('id')),
      resultSet.getString(resultSet.getColumnIndex('name')),
      resultSet.getString(resultSet.getColumnIndex('password')),
      resultSet.getLong(resultSet.getColumnIndex('age'))
    )
    resultSet.close() // 记得关闭结果集
    return user
  }

  async findUserByNameAndPwd(name: string, pwd: string): Promise<User | undefined> {
    if (!this.checkRdbStore()) return undefined

    let predicate = new relationalStore.RdbPredicates('user')
    predicate.equalTo('name', name).and().equalTo('password', pwd)
    let resultSet = await this.rdbStore.query(predicate, ['id', 'name', 'password', 'age'])

    if (resultSet.isAtLastRow) {
      console.log("user not find")
      resultSet.close() // 记得关闭结果集
      return undefined
    }

    resultSet.goToNextRow()
    let user = new User(
      resultSet.getLong(resultSet.getColumnIndex('id')),
      resultSet.getString(resultSet.getColumnIndex('name')),
      resultSet.getString(resultSet.getColumnIndex('password')),
      resultSet.getLong(resultSet.getColumnIndex('age'))
    )
    resultSet.close() // 记得关闭结果集
    return user
  }
}

export default new DatabaseUtil()

2.LoginPage.ets

import router from '@ohos.router'
import DatabaseUtil from '../databaseUtils/DatabaseUtil'
@Entry
@Component
struct LoginPage {
  @State name:string='';
  @State pwd:string='';

  aboutToAppear(){
    DatabaseUtil.createDataStore()
  }
  build() {
    Column() {
      Row(){
        Image($r('app.media.xxh')).width(200)
      }.height('30%')
      Divider().lineCap(LineCapStyle.Butt).size({height:10})
      TextInput({placeholder: "账号",text: this.name})
        .placeholderFont({size:24})
        .fontSize(24)
        .margin(30)
        .onChange(name=>{
          this.name=name
        })
      TextInput({placeholder: "密码",text: this.pwd})
        .placeholderFont({size:24})
        .fontSize(24)
        .margin(30)
        .onChange(pwd=>{
          this.pwd=pwd
        })
      Row(){
        Button('登录').fontSize(24).margin(8)
          .onClick(()=>{
            DatabaseUtil.findUserByNameAndPwd(this.name,this.pwd).then(user=>{
              if (user) {
                router.pushUrl({
                  url: 'pages/WelcomePage',
                  params: {user: user}
                })
              }else {
                AlertDialog.show({message:"账号或密码错误,请重新输入"})
              }
            })
            this.name=''
            this.pwd=''
          })
        Button('注册').fontSize(24).margin(8)
          .onClick(()=>{
            this.name=''
            this.pwd=''
            router.pushUrl({url:"pages/RegistryPage"})
          })
      }

    }
    .width('100%')

    .height('100%')
  }
}

3.RegisterPage.ets

import router from '@ohos.router'
import DatabaseUtil from '../databaseUtils/DatabaseUtil'
import { User } from '../entity/User'

@Entry
@Component
struct RegistryPage {
  @State message: string = '欢迎注册'
  user: User = new User(0, '', '', 0)

  build() {
    Column() {
      Row() {
        Text("<").fontSize(30)
          .width('33%')
          .onClick(() => {
            router.back()
          })
        Image($r('app.media.xxh')).width('33%')
        Text('').width('33%')
      }
      .width('100%')
      .height('20%')
      .justifyContent(FlexAlign.SpaceEvenly)
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .margin(20)
      TextInput({ placeholder: "账号" })
        .placeholderFont({ size: 24 })
        .fontSize(24)
        .margin(20)
        .borderRadius(0)
        .onChange(name => {
          this.user.name = name
        })
      TextInput({ placeholder: "密码" })
        .placeholderFont({ size: 24 })
        .fontSize(24)
        .margin(20)
        .borderRadius(0)
        .onChange(pwd => {
          this.user.password = pwd
        })
      TextInput({ placeholder: "年龄" })
        .placeholderFont({ size: 24 })
        .fontSize(24)
        .margin(20)
        .borderRadius(0)
        .onChange(age => {
          this.user.age = parseInt(age)
        })
      Row() {
        Button('提交').fontSize(24).margin(8)
          .onClick(() => {
            DatabaseUtil.insert(this.user)
            router.pushUrl({url:'pages/LoginPage'})

          })
      }

    }.width('100%')

    .height('100%')
  }
}

4.WelcomePage.ets

import router from '@ohos.router'
import {User} from '../entity/User'

@Entry
@Component
struct WelcomePage {
  @State user: User = new User(0, "", "", 0) // 默认值

  aboutToAppear() {
    // 在生命周期方法中获取路由参数
    const params = router.getParams() as Record<string, Object>
    if (params && params.user) {
      this.user = params.user as User
    }
  }
  map: ColInfo[] = [
    new ColInfo("id", "序号:"),
    new ColInfo("name", "姓名:"),
    new ColInfo("password", "密码:"),
    new ColInfo("age", "年龄:")
  ]

  // 获取用户属性值的方法
  private getUserValue(key: string): string {
    switch (key) {
      case "id":
        return this.user.id?.toString() || ""
      case "name":
        return this.user.name || ""
      case "password":
        return this.user.password || ""
      case "age":
        return this.user.age?.toString() || ""
      default:
        return ""
    }
  }

  build() {
    Column() {
      Text("<")
        .fontSize(30)
        .margin({ left: 10 })
        .onClick(() => {
          router.back()
        })
        .alignSelf(ItemAlign.Start)

      List() {
        ForEach(this.map, (item: ColInfo) => {
          ListItem() {
            Row() {
              Text(item.value)
                .fontSize(24)
                .fontWeight(FontWeight.Bold)
                .margin({ left: 30 })
              Text(this.getUserValue(item.key))
                .fontSize(24)
                .margin({ left: 50 })
            }
            .width('100%')
          }
        })
      }

      Image('https://img1.baidu.com/it/u=3142566490,1180350910&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=661')
        .width('100%')
    }
    .width('100%')
    .height('100%')
  }
}

class ColInfo {
  key: string;
  value: string;

  constructor(key: string, value: string) {
    this.key = key;
    this.value = value;
  }
}