端云一体化开发-计算十二生肖-云数据库

[应用开发] 时间:2025-11-04 18:26:53 来源:益强IT技术网 作者:系统运维 点击:87次

​​想了解更多关于开源的体化内容,请访问:​​

​​51CTO 开源基础软件社区​​

​​https://ost.51cto.com​​

1、计算据库前言

上帖子使用云函数端云一体化开发计算十二生肖,生肖此贴使用云数据库端云一体化开发计算十二生肖,云数在DevEco Studio可以完成端侧代码开发和云侧代码开发,体化一键部署云数据库,计算据库效果与之前使用云函数一样,生肖计算获取方式不同。云数

2、体化真机效果

3、计算据库讲解

 开发云数据库 端云一体化项目结构和之前不一样,生肖多了CloudProgram模块,云数 下面介绍项目开发,先从云侧开发开始,体化再到端侧开发。计算据库

4、生肖云侧开发

(1)介绍云数据库目录结构

展开CloudProgram模块,展开clouddb目录,dataentry目录是存储数据条目文件,objecttype目录是存储对象类型文件,db-config.json自动生成,内容包含云数据库配置,目录结构如下图:

(2)定义对象类型

右击objecttype目录,创建对象类型。

复制{

"fields"

: [

{

"belongPrimaryKey": true

,

"fieldName": "idx"

,

"fieldType": "Integer"

,

"isNeedEncrypt": false

,

"notNull": true

},

{

"belongPrimaryKey": false

,

"fieldName": "zodiacName"

,

"fieldType": "String"

,

"isNeedEncrypt": false

,

"notNull": false

}

],

"indexes"

: [

{

"indexName": "idxIndex"

,

"indexList"

: [

{

"fieldName": "idx"

,

"sortType": "ASC"

}

]

},

{

"indexName": "zodiacIndex"

,

"indexList"

: [

{

"fieldName": "zodiacName"

,

"sortType": "DESC"

}

]

}

],

"objectTypeName": "ZodiacObject"

,

"permissions"

: [

{

"rights"

: [

"Read"

],

"role": "World"

},

{

"rights"

: [

"Read"

,

"Upsert"

],

"role": "Authenticated"

},

{

"rights"

: [

"Read"

,

"Upsert"

,

"Delete"

],

"role": "Creator"

},

{

"rights"

: [

"Read"

,

"Upsert"

,

"Delete"

],

"role": "Administrator"

}

]

}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.41.42.43.44.45.46.47.48.49.50.51.52.53.54.55.56.57.58.59.60.61.62.63.64.65.66.67.68.69.70. (3)定义数据条目

右击dataentry目录,创建数据条目。

复制{

"cloudDBZoneName": "cloudDBZoneZodiac"

,

"objectTypeName": "ZodiacObject"

,

"objects"

: [

{

"idx": 0

,

"zodiacName": "猴"

},

{

"idx": 1

,

"zodiacName": "鸡"

},

{

"idx": 2

,

"zodiacName": "狗"

},

{

"idx": 3

,

"zodiacName": "猪"

},

{

"idx": 4

,

"zodiacName": "鼠"

},

{

"idx": 5

,

"zodiacName": "牛"

},

{

"idx": 6

,

"zodiacName": "虎"

},

{

"idx": 7

,

"zodiacName": "兔"

},

{

"idx": 8

,

"zodiacName": "龙"

},

{

"idx": 9

,

"zodiacName": "蛇"

},

{

"idx": 10

,

"zodiacName": "马"

},

{

"idx": 11

,

"zodiacName": "羊"

}

]

}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.41.42.43.44.45.46.47.48.49.50.51.52.53.54. (4)部署云数据库

部署云侧代码到AGC上,右击clouddb目录,选择Deploy Cloud DB, 自动部署到AGC上,站群服务器如果提示没有登录,登录成功后,再操作一次部署。

(5)导出文件格式

登录到AGC->云数据库,进入当前项目的云数据库服务菜单,可分别在“对象类型”、“存储区”与“数据”页签查看到您刚刚部署的云数据库资源。

导出json格式文件。

导出js格式文件。

导出json文件和js文件,端侧使用到。

5、端侧开发

(1)端侧模块结构

先看一下端侧模块结构:

(2)common目录

common目录放一些公共的封装类,比如Log类; components目录放自定义组件;entryability是自动生成的,里面有一个EntryAbility类,包含生命周期;pages目录放UI布局页面;services目录放业务逻辑类,比如调用云侧接口。

(3)services目录

这里只介绍services目录的工作,先介绍如何和AGC连接上的,这里使用一个单独的文件来处理:

services目录下AgcConfig.ts。

复制import agconnect from @hw-agconnect/api-ohos

;

import "@hw-agconnect/core-ohos"

;

import "@hw-agconnect/auth-ohos"

;

import @hw-agconnect/auth-types-ohos

;

import { Log } from ../common/Log

;

const TAG = "[AGCConfig]"

;

export function getAGConnect(context

) {

try

{

agconnect.instance().init(context

);

Log.info(TAG, "xx init AGC SDK success"

);

return agconnect

;

}

catch (err

) {

Log.error(TAG, "xx initAgcSDK failed" + err

);

}

}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.

在services目录下创建app-schema.json文件,复制上面在AGC下载的json格式文件内容到app-schema.json里。源码库

复制{

"schemaVersion": 1

,

"permissions"

: [{

"permissions"

: [{

"role": "World"

,

"rights": ["Read"

]

}, {

"role": "Authenticated"

,

"rights": ["Read", "Upsert"

]

}, {

"role": "Creator"

,

"rights": ["Read", "Upsert", "Delete"

]

}, {

"role": "Administrator"

,

"rights": ["Read", "Upsert", "Delete"

]

}],

"objectTypeName": "ZodiacObject"

}],

"objectTypes"

: [{

"indexes"

: [{

"indexName": "zodiacIndex"

,

"indexList"

: [{

"fieldName": "zodiacName"

,

"sortType": "DESC"

}]

}, {

"indexName": "idxIndex"

,

"indexList"

: [{

"fieldName": "idx"

,

"sortType": "ASC"

}]

}],

"objectTypeName": "ZodiacObject"

,

"fields"

: [{

"isNeedEncrypt": false

,

"fieldName": "idx"

,

"notNull": true

,

"isSensitive": false

,

"belongPrimaryKey": true

,

"fieldType": "Integer"

}, {

"isNeedEncrypt": false

,

"fieldName": "zodiacName"

,

"notNull": false

,

"isSensitive": false

,

"belongPrimaryKey": false

,

"fieldType": "String"

}]

}]

}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.41.42.43.44.45.46.47.48.49.50.

在services目录下创建ZodiacObject.js文件,复制上面在AGC下载的js格式文件内容到ZodiacObject.js里。

复制/* * Copyright (c) Huawei Technologies Co., Ltd. 2020-2020. All rights reserved. * Generated by the CloudDB ObjectType compiler. DO NOT EDIT! */class ZodiacObject

{

constructor

() {

this.idx = undefined

;

this.zodiacName = undefined

;

}

setIdx(idx

) {

this.idx = idx

;

}

getIdx

() {

return this.idx

;

}

setZodiacName(zodiacName

) {

this.zodiacName = zodiacName

;

}

getZodiacName

() {

return this.zodiacName

;

}

}

ZodiacObject.className = ZodiacObject

;

export {ZodiacObject}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.

services目录下创建CloudDB.ts。

复制import * as schema from ./app-schema.json

;

import { ZodiacObject } from ./ZodiacObjectimport { AGConnectCloudDB, CloudDBZone, CloudDBZoneQuery } from @hw-agconnect/database-ohos

;

import { AGCRoutePolicy } from @hw-agconnect/core-ohos

;

import { getAGConnect } from ./AgcConfig

;

export class CloudDBService

{

private static ZONE_NAME: string = "cloudDBZoneZodiac" private static init(context: any): Promise<CloudDBZone>

{

return new Promise((resolve, reject) =>

{

// 获取AGC连接 getAGConnect(context

);

AGConnectCloudDB.initialize(context

);

AGConnectCloudDB.getInstance

({

context: context

,

agcRoutePolicy: AGCRoutePolicy.CHINA

,

objectTypeInfo: schema}).then((ret) =>

{

return resolve(ret.openCloudDBZone(this.ZONE_NAME

));

}).catch((err) =>

{

return reject(err

);

});

})

}

public static query(context: any, year: number): Promise<ZodiacObject>

{

let idx = year%12

;

return new Promise((resolve, reject) =>

{

const query = CloudDBZoneQuery.where(ZodiacObject).equalTo("idx", idx

);

this.init(context).then((ret) =>

{

ret.executeQuery(query).then((ret) =>

{

resolve(ret.getSnapshotObjects()[0

]);

})

}).catch((err) =>

{

reject(err

);

});

})

}

}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40. (4)pages目录

pages目录 Index.ts 这里是页面布局,上面看到的效果,就是这里实现的。

复制import { CloudDBService } from ../services/CloudDB

;

@Entry@Componentstruct Index

{

// 存储选择年份 @State year: number = 2022 // 计算出来生肖 @State born: string = "?" // 是否在计算中 @State flag: boolean = false // 计算生肖 getBorn

() {

// 标识为计算中 this.flag = true

;

console.info(xx Page year: + this.year

)

// 封装参数 let params =

{

"year": this.year

}

// 调用云数据库 CloudDBService.query(getContext(this), this.year).then((res) =>

{

console.info(xx cloud db result: + JSON.stringify(res

));

// 计算完成 this.flag = false

;

// 结果赋值给生肖变量 this.born = res.zodiacName

;

}).catch((err) =>

{

// 计算完成 this.flag = false

;

console.error(xx error: , err && err.message

);

});

}

build

() {

Stack

() {

if (!this.flag

) {

Column({space: 20

}) {

Text(请选择年份

)

.fontSize(20

)

.fontWeight(FontWeight.Bold

)

// 选择年份 Column

() {

Text(this.year +

)

.fontSize(20

)

.fontWeight(FontWeight.Bold

)

.padding(10

)

.width(100

)

.border({ width: 1, radius: 8

})

}

.bindMenu

([

{ value: 2006, action: () => {this.year = 2006; this.born = ?

} },

{ value: 2007, action: () => {this.year = 2007; this.born = ?

} },

{ value: 2008, action: () => {this.year = 2008; this.born = ?

} },

{ value: 2009, action: () => {this.year = 2009; this.born = ?

} },

{ value: 2010, action: () => {this.year = 2010; this.born = ?

} },

{ value: 2011, action: () => {this.year = 2011; this.born = ?

} },

{ value: 2012, action: () => {this.year = 2012; this.born = ?

} },

{ value: 2013, action: () => {this.year = 2013; this.born = ?

} },

{ value: 2014, action: () => {this.year = 2014; this.born = ?

} },

{ value: 2015, action: () => {this.year = 2015; this.born = ?

} },

{ value: 2016, action: () => {this.year = 2016; this.born = ?

} },

{ value: 2017, action: () => {this.year = 2017; this.born = ?

} },

{ value: 2018, action: () => {this.year = 2018; this.born = ?

} },

{ value: 2019, action: () => {this.year = 2019; this.born = ?

} },

{ value: 2020, action: () => {this.year = 2020; this.born = ?

} },

{ value: 2021, action: () => {this.year = 2021; this.born = ?

} },

{ value: 2022, action: () => {this.year = 2022; this.born = ?

} },

{ value: 2023, action: () => {this.year = 2023; this.born = ?

} },

{ value: 2024, action: () => {this.year = 2024; this.born = ?

} },

{ value: 2025, action: () => {this.year = 2025; this.born = ?

} }

])

// 计算按钮操作 Button(计算, {type: ButtonType.Normal, stateEffect: true

})

.fontSize(18

)

.borderRadius(8

)

.width(100

)

.margin({bottom: 20

})

.onClick(() =>

{

// 根据年份计算生肖 this.getBorn

()

})

// 显示计算结果 Text(`${this.year} 年生肖是 ${this.born}`

)

.fontSize(20

)

.fontWeight(FontWeight.Bold

)

}

.width(100%

)

.height(100%

)

.padding({top: 33%

})

} else

{

// 计算中 LoadingProgress().color(Color.Blue

)

.backgroundColor(Color.Transparent

)

}

}

}

}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.41.42.43.44.45.46.47.48.49.50.51.52.53.54.55.56.57.58.59.60.61.62.63.64.65.66.67.68.69.70.71.72.73.74.75.76.77.78.79.80.81.82.83.84.85.86.87.88.89.90.91.92.93.94.95.96.97.98.99.100.101.102.103.

6、总结

由于调用云侧云数据库是异步的,不能马上返回结果,这里添加LoadingProgress组件,让用户知道在运行中,效果看得不是很明显,可能录制时,网速很快,LoadingProgress组件闪一下就不见了,如果遇到网络慢时,LoadingProgress就会一直转,直到云数据库返回响应时,再消失LoadingProgress。

​​想了解更多关于开源的内容,高防服务器请访问:​​

​​51CTO 开源基础软件社区​​

​​https://ost.51cto.com​​

(责任编辑:IT科技)

    相关内容
    精彩推荐
    热门点击
    友情链接