??想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問：??
??51CTO 開源基礎(chǔ)軟件社區(qū)??
??https://ost.51cto.com??
1、前言
上帖子使用云函數(shù)端云一體化開發(fā)計(jì)算十二生肖，此貼使用云數(shù)據(jù)庫端云一體化開發(fā)計(jì)算十二生肖，在DevEco Studio可以完成端側(cè)代碼開發(fā)和云側(cè)代碼開發(fā)，一鍵部署云數(shù)據(jù)庫，效果與之前使用云函數(shù)一樣，計(jì)算獲取方式不同。
2、真機(jī)效果
3、講解
開發(fā)云數(shù)據(jù)庫 端云一體化項(xiàng)目結(jié)構(gòu)和之前不一樣，多了CloudProgram模塊, 下面介紹項(xiàng)目開發(fā)，先從云側(cè)開發(fā)開始，再到端側(cè)開發(fā)。
4、云側(cè)開發(fā)
（1）介紹云數(shù)據(jù)庫目錄結(jié)構(gòu)
展開CloudProgram模塊，展開clouddb目錄，dataentry目錄是存儲(chǔ)數(shù)據(jù)條目文件，objecttype目錄是存儲(chǔ)對(duì)象類型文件，db-config.json自動(dòng)生成，內(nèi)容包含云數(shù)據(jù)庫配置，目錄結(jié)構(gòu)如下圖：
（2）定義對(duì)象類型
右擊objecttype目錄，創(chuàng)建對(duì)象類型。
{
"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"
}
]
}（3）定義數(shù)據(jù)條目
右擊dataentry目錄，創(chuàng)建數(shù)據(jù)條目。
{
"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": "羊"
}
]
}（4）部署云數(shù)據(jù)庫
部署云側(cè)代碼到AGC上，右擊clouddb目錄，選擇Deploy Cloud DB， 自動(dòng)部署到AGC上，如果提示沒有登錄，登錄成功后，再操作一次部署。
（5）導(dǎo)出文件格式
登錄到AGC->云數(shù)據(jù)庫，進(jìn)入當(dāng)前項(xiàng)目的云數(shù)據(jù)庫服務(wù)菜單，可分別在“對(duì)象類型”、“存儲(chǔ)區(qū)”與“數(shù)據(jù)”頁簽查看到您剛剛部署的云數(shù)據(jù)庫資源。
導(dǎo)出json格式文件。
導(dǎo)出js格式文件。
導(dǎo)出json文件和js文件，端側(cè)使用到。
5、端側(cè)開發(fā)
（1）端側(cè)模塊結(jié)構(gòu)
先看一下端側(cè)模塊結(jié)構(gòu)：
（2）common目錄
common目錄放一些公共的封裝類，比如Log類； components目錄放自定義組件；entryability是自動(dòng)生成的，里面有一個(gè)EntryAbility類，包含生命周期；pages目錄放UI布局頁面；services目錄放業(yè)務(wù)邏輯類，比如調(diào)用云側(cè)接口。
（3）services目錄
這里只介紹services目錄的工作，先介紹如何和AGC連接上的，這里使用一個(gè)單獨(dú)的文件來處理:
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);
}
}
在services目錄下創(chuàng)建app-schema.json文件，復(fù)制上面在AGC下載的json格式文件內(nèi)容到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"
}]
}]
} 在services目錄下創(chuàng)建ZodiacObject.js文件，復(fù)制上面在AGC下載的js格式文件內(nèi)容到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}
services目錄下創(chuàng)建CloudDB.ts。
import * as schema from './app-schema.json';
import { ZodiacObject } from './ZodiacObject'
import { 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);
});
})
}
}
（4）pages目錄
pages目錄 Index.ts 這里是頁面布局，上面看到的效果，就是這里實(shí)現(xiàn)的。
import { CloudDBService } from '../services/CloudDB';
@Entry
@Component
struct Index {
// 存儲(chǔ)選擇年份
@State year: number = 2022
// 計(jì)算出來生肖
@State born: string = "?"
// 是否在計(jì)算中
@State flag: boolean = false
// 計(jì)算生肖
getBorn() {
// 標(biāo)識(shí)為計(jì)算中
this.flag = true;
console.info('xx Page year: ' + this.year)
// 封裝參數(shù)
let params = {
"year": this.year
}
// 調(diào)用云數(shù)據(jù)庫
CloudDBService.query(getContext(this), this.year).then((res) => {
console.info('xx cloud db result: ' + JSON.stringify(res));
// 計(jì)算完成
this.flag = false;
// 結(jié)果賦值給生肖變量
this.born = res.zodiacName;
}).catch((err) => {
// 計(jì)算完成
this.flag = false;
console.error('xx error: ', err && err.message);
});
}
build() {
Stack() {
if (!this.flag) {
Column({space: 20}) {
Text('請(qǐng)選擇年份')
.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 = '?'} }
])
// 計(jì)算按鈕操作
Button('計(jì)算', {type: ButtonType.Normal, stateEffect: true})
.fontSize(18)
.borderRadius(8)
.width(100)
.margin({bottom: 20})
.onClick(() => {
// 根據(jù)年份計(jì)算生肖
this.getBorn()
})
// 顯示計(jì)算結(jié)果
Text(`${this.year} 年生肖是 ${this.born}`)
.fontSize(20)
.fontWeight(FontWeight.Bold)
}
.width('100%')
.height('100%')
.padding({top: '33%'})
} else {
// 計(jì)算中
LoadingProgress().color(Color.Blue)
.backgroundColor(Color.Transparent)
}
}
}
}6、總結(jié)
由于調(diào)用云側(cè)云數(shù)據(jù)庫是異步的，不能馬上返回結(jié)果，這里添加LoadingProgress組件，讓用戶知道在運(yùn)行中，效果看得不是很明顯，可能錄制時(shí)，網(wǎng)速很快，LoadingProgress組件閃一下就不見了，如果遇到網(wǎng)絡(luò)慢時(shí)，LoadingProgress就會(huì)一直轉(zhuǎn)，直到云數(shù)據(jù)庫返回響應(yīng)時(shí)，再消失LoadingProgress。
??想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問：??
??51CTO 開源基礎(chǔ)軟件社區(qū)??
??https://ost.51cto.com??
